Add style preview button functionality

index.js

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

style.css

@@ -1,3 +1,33 @@
+@font-face {
+  font-family: "Serious Sans";
+  src: url("./SeriousSans/ttf/SeriousSans.ttf");
+}
+
+@font-face {
+  font-family: "Serious Sans Italic";
+  src: url("./SeriousSans/ttf/SeriousSansItalic.ttf");
+}
+
+@font-face {
+  font-family: "Serious Sans Bold";
+  src: url("./SeriousSans/ttf/SeriousSansBold.ttf");
+}
+
+@font-face {
+  font-family: "Serious Sans Bold Italic";
+  src: url("./SeriousSans/ttf/SeriousSansBoldItalic.ttf");
+}
+
+@font-face {
+  font-family: "Serious Sans Light";
+  src: url("./SeriousSans/ttf/SeriousSansLight.ttf");
+}
+
+@font-face {
+  font-family: "Serious Sans Light Italic";
+  src: url("./SeriousSans/ttf/SeriousSansLightItalic.ttf");
+}
+
 body {
   background-color: #1e1e1e;
   color: #d4d4d4;
@@ -27,6 +57,11 @@ li {
   vertical-align: baseline;
 }
 
+button {
+  width: 12em;
+  align-self: center;
+}
+
 :link {
   color: aqua;
 }
@@ -34,3 +69,27 @@ li {
 :visited {
   color: rgb(0, 188, 138);
 }
+
+.serious {
+  font-family: "Serious Sans";
+}
+
+.seriousItalic {
+  font-family: "Serious Sans Italic";
+}
+
+.seriousBold {
+  font-family: "Serious Sans Bold";
+}
+
+.seriousBoldItalic {
+  font-family: "Serious Sans Bold Italic";
+}
+
+.seriousLight {
+  font-family: "Serious Sans Light";
+}
+
+.seriousLightItalic {
+  font-family: "Serious Sans Light Italic";
+}