IS IT DRY. We check and try to keep the code DRY.

is-it-dry-1.js

const pets = ['Cat', 'Dog', 'Bird', 'Fish', 'Frog', 'Hamster', 'Pig', 'Horse' 'Lion', 'Dragon'];
// Print all pets: NOT DRY
console.log(pets[0]);
console.log(pets[1]);
console.log(pets[2]);
console.log(pets[3]);

/**
 * SOLUTION
 * We use a for loop to eliminate repetition
 */
for (let i = 0; i < pets.length; i++) {
  console.log(pets[i]);
}

// NOT DRY
.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;
}
// SOLUTION
// Identify the aspects of your application that vary and separate them from what stays the same.
// We can achieve that with sass
@mixin animal($color) {
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
  color: $color
}

.cat {
  @include animal($color: #fff);
}
.dog {
  @include animaL($color: #000);
}
.dragon {
  @include animal($color: #009933);
}

is-it-dry-2.js

// It is DRY
// We've abstracted the printing functionality.
const greet = (message, name) => {
  console.log(`${message}, ${name}!`)
}

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


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

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

// SOLUTION
// We've separated the part that varies and stays the same
@mixin local-greetings($background-color, $color) {
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  background-color: $background-color;
  color: $color;
}


.greetings.english {
  @include local-greetings($background-color: #000, $color: #fff);
}
.greetings.spanish {
  @include local-greetings($background-color: #FFF, $color: #000);
}