refactor(guess-the-word): use data attributes for styling of hints

Author: Hdoc1509

vanilla/guess-the-word/src/styles/hints.css

@@ -42,9 +42,9 @@
   text-align: center;
   border-color: var(--slate-600);
 }
-.hint--correct {
+.hint[data-state="correct"] {
   border-color: var(--difficulty-easy);
 }
-.hint--wrong {
+.hint[data-state="wrong"] {
   border-color: var(--rose-600);
 }

vanilla/guess-the-word/src/ui/hints/add.js

@@ -32,7 +32,7 @@ export const addHint = (enteredLetter, { letterIndex, isCorrect }) => {
   const $allHintsLetter = $allHintsGroup.children[letterIndex];
 
   $allHintsLetter.textContent = enteredLetter;
-  $allHintsLetter.classList.add(`hint--${isCorrect ? "correct" : "wrong"}`);
+  $allHintsLetter.setAttribute("data-state", isCorrect ? "correct" : "wrong");
 
   if (isCorrect) {
     const $correctHintsGroup = /** @type {HTMLLIElement} */ (
@@ -41,6 +41,6 @@ export const addHint = (enteredLetter, { letterIndex, isCorrect }) => {
     const $correctHintsLetter = $correctHintsGroup.children[letterIndex];
 
     $correctHintsLetter.textContent = enteredLetter;
-    $correctHintsLetter.classList.add("hint--correct");
+    $correctHintsLetter.setAttribute("data-state", "correct");
   }
 };