Dry code

index.js

@@ -25,157 +25,93 @@ const seriousButtons = [
   seriousLightItalicButton,
 ];
 
-entirePageRadio.addEventListener("click", function () {
+const seriousStyles = [
-  if (this.checked) {
+  "seriousOriginal",
+  "seriousItalic",
+  "seriousBold",
+  "seriousBoldItalic",
+  "seriousLight",
+  "seriousLightItalic",
+];
+
+const enterSeriousMode = () => {
   mainClasses.add("serious");
   for (seriousButton of seriousButtons) {
     seriousButton.classList.add("serious");
   }
-  } else {
+};
+
+const exitSeriousMode = () => {
   mainClasses.remove("serious");
   for (seriousButton of seriousButtons) {
     seriousButton.classList.remove("serious");
   }
+};
+
+const clearClasses = () => {
+  for (seriousStyle of seriousStyles) {
+    exampleTextClasses.remove(seriousStyle);
+    mainClasses.remove(seriousStyle);
+  }
+  for (seriousButton of seriousButtons) {
+    seriousButton.classList.remove("selected");
+  }
+};
+
+const clearClassesAndSelectThisButton = (button) => {
+  clearClasses();
+  button.classList.add("selected");
+};
+
+entirePageRadio.addEventListener("click", function () {
+  if (this.checked) {
+    enterSeriousMode();
+  } else {
+    exitSeriousMode();
   }
 });
 
 exampleTextOnlyRadio.addEventListener("click", function () {
   if (this.checked) {
-    mainClasses.remove("serious");
+    exitSeriousMode();
-    for (seriousButton of seriousButtons) {
-      seriousButton.classList.remove("serious");
-    }
   } else {
-    mainClasses.add("serious");
+    enterSeriousMode();
-    for (seriousButton of seriousButtons) {
-      seriousButton.classList.add("serious");
-    }
   }
 });
 
 seriousOriginalButton.addEventListener("click", function () {
-  this.classList.add("selected");
+  clearClassesAndSelectThisButton(this);
-  seriousItalicButton.classList.remove("selected");
-  seriousBoldButton.classList.remove("selected");
-  seriousBoldItalicButton.classList.remove("selected");
-  seriousLightButton.classList.remove("selected");
-  seriousLightItalicButton.classList.remove("selected");
   exampleTextClasses.add("seriousOriginal");
-  exampleTextClasses.remove("seriousItalic");
-  exampleTextClasses.remove("seriousBold");
-  exampleTextClasses.remove("seriousBoldItalic");
-  exampleTextClasses.remove("seriousLight");
-  exampleTextClasses.remove("seriousLightItalic");
   mainClasses.add("seriousOriginal");
-  mainClasses.remove("seriousItalic");
-  mainClasses.remove("seriousBold");
-  mainClasses.remove("seriousBoldItalic");
-  mainClasses.remove("seriousLight");
-  mainClasses.remove("seriousLightItalic");
 });
 
 seriousItalicButton.addEventListener("click", function () {
-  this.classList.add("selected");
+  clearClassesAndSelectThisButton(this);
-  seriousOriginalButton.classList.remove("selected");
-  seriousBoldButton.classList.remove("selected");
-  seriousBoldItalicButton.classList.remove("selected");
-  seriousLightButton.classList.remove("selected");
-  seriousLightItalicButton.classList.remove("selected");
-  exampleTextClasses.remove("seriousOriginal");
   exampleTextClasses.add("seriousItalic");
-  exampleTextClasses.remove("seriousBold");
-  exampleTextClasses.remove("seriousBoldItalic");
-  exampleTextClasses.remove("seriousLight");
-  exampleTextClasses.remove("seriousLightItalic");
-  mainClasses.remove("seriousOriginal");
   mainClasses.add("seriousItalic");
-  mainClasses.remove("seriousBold");
-  mainClasses.remove("seriousBoldItalic");
-  mainClasses.remove("seriousLight");
-  mainClasses.remove("seriousLightItalic");
 });
 
 seriousBoldButton.addEventListener("click", function () {
-  this.classList.add("selected");
+  clearClassesAndSelectThisButton(this);
-  seriousOriginalButton.classList.remove("selected");
-  seriousItalicButton.classList.remove("selected");
-  seriousBoldItalicButton.classList.remove("selected");
-  seriousLightButton.classList.remove("selected");
-  seriousLightItalicButton.classList.remove("selected");
-  exampleTextClasses.remove("seriousOriginal");
-  exampleTextClasses.remove("seriousItalic");
   exampleTextClasses.add("seriousBold");
-  exampleTextClasses.remove("seriousBoldItalic");
-  exampleTextClasses.remove("seriousLight");
-  exampleTextClasses.remove("seriousLightItalic");
-  mainClasses.remove("seriousOriginal");
-  mainClasses.remove("seriousItalic");
   mainClasses.add("seriousBold");
-  mainClasses.remove("seriousBoldItalic");
-  mainClasses.remove("seriousLight");
-  mainClasses.remove("seriousLightItalic");
 });
 
 seriousBoldItalicButton.addEventListener("click", function () {
-  this.classList.add("selected");
+  clearClassesAndSelectThisButton(this);
-  seriousOriginalButton.classList.remove("selected");
-  seriousItalicButton.classList.remove("selected");
-  seriousBoldButton.classList.remove("selected");
-  seriousLightButton.classList.remove("selected");
-  seriousLightItalicButton.classList.remove("selected");
-  exampleTextClasses.remove("seriousOriginal");
-  exampleTextClasses.remove("seriousItalic");
-  exampleTextClasses.remove("seriousBold");
   exampleTextClasses.add("seriousBoldItalic");
-  exampleTextClasses.remove("seriousLight");
-  exampleTextClasses.remove("seriousLightItalic");
-  mainClasses.remove("seriousOriginal");
-  mainClasses.remove("seriousItalic");
-  mainClasses.remove("seriousBold");
   mainClasses.add("seriousBoldItalic");
-  mainClasses.remove("seriousLight");
-  mainClasses.remove("seriousLightItalic");
 });
 
 seriousLightButton.addEventListener("click", function () {
-  this.classList.add("selected");
+  clearClassesAndSelectThisButton(this);
-  seriousOriginalButton.classList.remove("selected");
-  seriousItalicButton.classList.remove("selected");
-  seriousBoldButton.classList.remove("selected");
-  seriousBoldItalicButton.classList.remove("selected");
-  seriousLightItalicButton.classList.remove("selected");
-  exampleTextClasses.remove("seriousOriginal");
-  exampleTextClasses.remove("seriousItalic");
-  exampleTextClasses.remove("seriousBold");
-  exampleTextClasses.remove("seriousBoldItalic");
   exampleTextClasses.add("seriousLight");
-  exampleTextClasses.remove("seriousLightItalic");
-  mainClasses.remove("seriousOriginal");
-  mainClasses.remove("seriousItalic");
-  mainClasses.remove("seriousBold");
-  mainClasses.remove("seriousBoldItalic");
   mainClasses.add("seriousLight");
-  mainClasses.remove("seriousLightItalic");
 });
 
 seriousLightItalicButton.addEventListener("click", function () {
-  this.classList.add("selected");
+  clearClassesAndSelectThisButton(this);
-  seriousOriginalButton.classList.remove("selected");
-  seriousItalicButton.classList.remove("selected");
-  seriousBoldButton.classList.remove("selected");
-  seriousBoldItalicButton.classList.remove("selected");
-  seriousLightButton.classList.remove("selected");
-  exampleTextClasses.remove("seriousOriginal");
-  exampleTextClasses.remove("seriousItalic");
-  exampleTextClasses.remove("seriousBold");
-  exampleTextClasses.remove("seriousBoldItalic");
-  exampleTextClasses.remove("seriousLight");
   exampleTextClasses.add("seriousLightItalic");
-  mainClasses.remove("seriousOriginal");
-  mainClasses.remove("seriousItalic");
-  mainClasses.remove("seriousBold");
-  mainClasses.remove("seriousBoldItalic");
-  mainClasses.remove("seriousLight");
   mainClasses.add("seriousLightItalic");
 });