Add selected button indicator

index.js

@@ -1,62 +1,102 @@
 const exampleTextClasses = document.getElementById("exampleText").classList;
 
-const seriousButton = document
+const seriousButton = document.getElementById("seriousButton");
-  .getElementById("seriousButton")
+const seriousItalicButton = document.getElementById("seriousItalicButton");
-  .addEventListener("click", function () {
+const seriousBoldButton = document.getElementById("seriousBoldButton");
+const seriousBoldItalicButton = document.getElementById(
+  "seriousBoldItalicButton"
+);
+const seriousLightButton = document.getElementById("seriousLightButton");
+const seriousLightItalicButton = document.getElementById(
+  "seriousLightItalicButton"
+);
+
+seriousButton.addEventListener("click", function () {
+  this.classList.add("selected");
+  seriousItalicButton.classList.remove("selected");
+  seriousBoldButton.classList.remove("selected");
+  seriousBoldItalicButton.classList.remove("selected");
+  seriousLightButton.classList.remove("selected");
+  seriousLightItalicButton.classList.remove("selected");
   exampleTextClasses.add("serious");
   exampleTextClasses.remove("seriousItalic");
   exampleTextClasses.remove("seriousBold");
   exampleTextClasses.remove("seriousBoldItalic");
   exampleTextClasses.remove("seriousLight");
   exampleTextClasses.remove("seriousLightItalic");
-  });
+});
-const seriousItalicButton = document
+
-  .getElementById("seriousItalicButton")
+seriousItalicButton.addEventListener("click", function () {
-  .addEventListener("click", function () {
+  this.classList.add("selected");
+  seriousButton.classList.remove("selected");
+  seriousBoldButton.classList.remove("selected");
+  seriousBoldItalicButton.classList.remove("selected");
+  seriousLightButton.classList.remove("selected");
+  seriousLightItalicButton.classList.remove("selected");
   exampleTextClasses.remove("serious");
   exampleTextClasses.add("seriousItalic");
   exampleTextClasses.remove("seriousBold");
   exampleTextClasses.remove("seriousBoldItalic");
   exampleTextClasses.remove("seriousLight");
   exampleTextClasses.remove("seriousLightItalic");
-  });
+});
-const seriousBoldButton = document
+
-  .getElementById("seriousBoldButton")
+seriousBoldButton.addEventListener("click", function () {
-  .addEventListener("click", function () {
+  this.classList.add("selected");
+  seriousButton.classList.remove("selected");
+  seriousItalicButton.classList.remove("selected");
+  seriousBoldItalicButton.classList.remove("selected");
+  seriousLightButton.classList.remove("selected");
+  seriousLightItalicButton.classList.remove("selected");
   exampleTextClasses.remove("serious");
   exampleTextClasses.remove("seriousItalic");
   exampleTextClasses.add("seriousBold");
   exampleTextClasses.remove("seriousBoldItalic");
   exampleTextClasses.remove("seriousLight");
   exampleTextClasses.remove("seriousLightItalic");
-  });
+});
-const seriousBoldItalicButton = document
+
-  .getElementById("seriousBoldItalicButton")
+seriousBoldItalicButton.addEventListener("click", function () {
-  .addEventListener("click", function () {
+  this.classList.add("selected");
+  seriousButton.classList.remove("selected");
+  seriousItalicButton.classList.remove("selected");
+  seriousBoldButton.classList.remove("selected");
+  seriousLightButton.classList.remove("selected");
+  seriousLightItalicButton.classList.remove("selected");
   exampleTextClasses.remove("serious");
   exampleTextClasses.remove("seriousItalic");
   exampleTextClasses.remove("seriousBold");
   exampleTextClasses.add("seriousBoldItalic");
   exampleTextClasses.remove("seriousLight");
   exampleTextClasses.remove("seriousLightItalic");
-  });
+});
-const seriousLightButton = document
+
-  .getElementById("seriousLightButton")
+seriousLightButton.addEventListener("click", function () {
-  .addEventListener("click", function () {
+  this.classList.add("selected");
+  seriousButton.classList.remove("selected");
+  seriousItalicButton.classList.remove("selected");
+  seriousBoldButton.classList.remove("selected");
+  seriousBoldItalicButton.classList.remove("selected");
+  seriousLightItalicButton.classList.remove("selected");
   exampleTextClasses.remove("serious");
   exampleTextClasses.remove("seriousItalic");
   exampleTextClasses.remove("seriousBold");
   exampleTextClasses.remove("seriousBoldItalic");
   exampleTextClasses.add("seriousLight");
   exampleTextClasses.remove("seriousLightItalic");
-  });
+});
-const seriousLightItalicButton = document
+
-  .getElementById("seriousLightItalicButton")
+seriousLightItalicButton.addEventListener("click", function () {
-  .addEventListener("click", function () {
+  this.classList.add("selected");
+  seriousButton.classList.remove("selected");
+  seriousItalicButton.classList.remove("selected");
+  seriousBoldButton.classList.remove("selected");
+  seriousBoldItalicButton.classList.remove("selected");
+  seriousLightButton.classList.remove("selected");
   exampleTextClasses.remove("serious");
   exampleTextClasses.remove("seriousItalic");
   exampleTextClasses.remove("seriousBold");
   exampleTextClasses.remove("seriousBoldItalic");
   exampleTextClasses.remove("seriousLight");
   exampleTextClasses.add("seriousLightItalic");
-  });
+});

style.css

@@ -70,6 +70,11 @@ button {
   color: rgb(0, 188, 138);
 }
 
+.selected {
+  background-color: #d4d4d4;
+  color: #1e1e1e;
+}
+
 .serious {
   font-family: "Serious Sans";
 }