✨ (focusable) focus and unfocus with typescript

index.html

@@ -23,7 +23,7 @@
           Value analysis / Value engineering
         </p>
       </section>
-      <section class="levers focusable">
+      <section class="levers">
         <ul>
           <li class="security focusable">Security</li>
           <li class="quality focusable">Quality</li>
@@ -99,14 +99,14 @@
       </section>
       <section class="ground">
         <section class="improvement">
-          <ul class="focusable">
+          <ul class="improvement-list focusable">
             <li class="heijunka focusable">Heijunka</li>
             <li class="standards focusable">Standards</li>
             <li class="kaizen focusable">Kaizen</li>
           </ul>
         </section>
         <section class="stability">
-          <ul class="focusable">
+          <ul class="stability-list focusable">
             <li class="s5s focusable">5S</li>
             <li class="problem-solving focusable">Problem solving</li>
             <li class="tpm focusable">TPM</li>

main.ts

@@ -18,3 +18,19 @@ if (size === "small") {
     body.style.fontSize = "15px"
   }
 }
+
+const focusElements = params.getAll("focus")
+
+if (focusElements.length >= 0) {
+  const focusables = document.querySelectorAll(".focusable")
+
+  focusables.forEach((focusable) => {
+    const elementToFocus = focusElements.some((element) =>
+      focusable.classList.contains(element)
+    )
+
+    if (!elementToFocus) {
+      focusable.classList.add("no-focus")
+    }
+  })
+}

style.css

@@ -2,7 +2,7 @@
 
 :root {
   --background-color: #b2f1ad;
-  --background-color-no-focus: #b2f1ad80;
+  --background-color-no-focus: #f4f9f3;
 }
 
 * {
@@ -42,6 +42,10 @@ li {
   background-color: var(--background-color);
 }
 
+.focusable.no-focus {
+  background-color: var(--background-color-no-focus);
+}
+
 .customer-satisfaction-roof {
   display: flex;
   flex-direction: column;