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 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.