Is It DRY ?

example_one.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;
}

// The code given above is not DRY because of multiple repeations on the of some part of code, for `Javascript` part and as for `CSS` part in order to print the pets content using a certain styling .

// to set this piece of code DRY, I edit some part as  follow :

// 1. I wrap the fetch of the pets in a single loop

const printPets = () => {
  pets.forEach((element) => {
    console.log(element);
  });
};

// 2. Upadate duplicate CSS properties

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

.cat {
  color: #FFF;
}

.dog {
  color: #000;
}

.dragon {
  color: #009933;
}
//---------------------------------------------------------------------------------------

example_two.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 given above is not DRY because of multiple repeations on the of some part of code, for `Javascript` part and as for `CSS` part in order to print the pets content using a certain styling .

// to set this piece of code DRY, I edit some part as  follow :

// 1. I create an arroy of object that will wrap all greeting (message and name)

const myGreet = [
  {
    message: "Hello",
    name: "John",
  },
  {
    message: "Hola",
    name: "Antonio",
  },
  {
    message: "Ciao",
    name: "Luigi",
  },
];

// 2. Reacreate the funtion greet() in order to fetch greatting from the array of objects

const greet = () => {
  for (let i = 0; i < myGreet.length; i += 1) {
    console.log(`${myGreet[i].message}, ${myGreet[i].name}!`);
  }
};

// 3. I call the greet() function in order to display the result on the screen

greet();

// 4. I reorganise the css code in order to avoid properties redundancy

:root{
  --color-one: #000;
  --color-two:#fff; 
}
.greetings {
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
}

.greetings.english {
  background-color: var(--color-one);
  color: var(--color-two);
}
.greetings.spanish {
  background-color: var(--color-two);
  color: var(--color-one);
}