feat: change colour of link if clicked

Author: msmfa

src/index.html

@@ -52,7 +52,7 @@ <h2 class="section-left-subtitle">Advanced</h2>
       <li id="polymorphism">Polymorphism</li>
     </ul>
   </section>
-    <section class="section-right">A refresher on Javascript concepts in less than 30 words. This is an open source project. Contributions are welcome via <a target ="_blank" href="https://github.com/msmfa/javascript-in-30">Github</a></section>
+    <section class="section-right">A refresher on Javascript concepts in less than 30 words. This is an open source project. Contributions are welcome via <a target ="_blank" href="https://github.com/msmfa/javascript-in-30">Github.</a></section>
   </main>
     <script type="module" src="main.js"></script>
   </body>

src/main.css

@@ -24,7 +24,7 @@ ul li {
 }
 
 a {
-  color: rgb(240, 158, 8);
+  color: #f09e3f;
   text-decoration: none;
 }
 
@@ -49,7 +49,6 @@ a {
 }
 
 .section-left li:hover {
-  color: rgb(101, 180, 226);
   cursor: pointer;
 }
 

src/main.js

@@ -34,6 +34,16 @@ sectionLeft.addEventListener("click", function (e) {
 
   const { image: imageUrl, text, bulletPointItems } = selectedDefinition;
 
+  // When the user clicks on a list element set it's color to orange
+  // and set the rest to black
+  document.querySelectorAll(".section-left li").forEach((element) => {
+    if (element.id === selectedValue) {
+      element.style.color = "#F09E3F";
+    } else {
+      element.style.color = "black";
+    }
+  });
+
   renderHTML(
     sectionRight,
     text,