Example 1

MyGist-1.js

const pets = ['Cat', 'Dog', 'Bird', 'Fish', 'Frog', 'Hamster', 'Pig', 'Horse', 'Lion', 'Dragon'];
// Print all pets
console.log(pets[0]);
console.log(pets[1]);
console.log(pets[2]);
console.log(pets[3]);
...
.cat {
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
  color: #FFF;

}
.dog {
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
  color: #000;
}
.dragon {
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
  color: #009933;
}

MyGist-2.js

const greet = (message, name) => {
  console.log(`${message}, ${name}!`)
}

greet('Hello', 'John');
greet('Hola', 'Antonio');
greet('Ciao', 'Luigi')

.greetings {
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
}

.greetings.english {
  background-color: #000;
  color: #FFF;
}
.greetings.spanish {
  background-color: #FFF;
  color: #000;
}

The code in "Example 1" is not DRY (Don't Repeat Yourself). The reason is that code blocks with CSS properties are repeated for each of the classes corresponding to the elements of the pets array. Instead of repeating the code, it can be made more DRY by using a single CSS rule with additional classes to define the specific styles for each element.

For example:

.pet {
font-family: "Times New Roman", Times, serif;
font-size: 1rem;
}

.cat {
color: #FFF;
}

.dog {
color: #000;
}

.dragon {
color: #009933;
}

the code in "Example 2" is DRY (Don't Repeat Yourself).

In this example, the greet function is defined to print a greeting message with a name. The function is called multiple times with different arguments to greet different individuals. The code for the function is not repeated, and it is reused efficiently.

Regarding the CSS part, the code defines a general class .greetings for the greeting elements, which sets the font family and size. Then, specific classes like .greetings.english and .greetings.spanish are used to define the background color and text color for greetings in English and Spanish, respectively. By using these specific classes, the code avoids duplication of CSS properties that are shared among greetings in different languages.

Overall, the code in "Example 2" demonstrates DRY principles by reusing the greet function and using appropriate CSS classes to define specific styles.