From 23e6e86e4d7ac2a6ee1e7c0259f356861c324031 Mon Sep 17 00:00:00 2001
From: kaBeech <contact@kaBeech.com>
Date: Sat, 18 Mar 2023 17:48:56 -0700
Subject: [PATCH] Add page-wide serious toggler

---
 index.html |  8 ++++++++
 index.js   | 37 +++++++++++++++++++++++++++++++++++++
 style.css  |  4 ++--
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index cf24b42..d9ac897 100644
--- a/index.html
+++ b/index.html
@@ -46,6 +46,14 @@
         </div>
       </div>
       <br />
+      <form>
+        Apply to
+        <label for="entirePage">entire page:</label>
+        <input type="radio" name="applyTo" id="entirePage" />
+        <label for="newExampleTextButton">example text only:</label>
+        <input type="radio" name="applyTo" id="exampleTextOnly" />
+      </form>
+      <br />
       <form>
         <label for="newExampleText">Example Text:</label>
         <input type="text" id="newExampleText" name="newExampleText" />
diff --git a/index.js b/index.js
index 48b5587..2ce4845 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,4 @@
+const mainClasses = document.getElementById("main").classList;
 const exampleText = document.getElementById("exampleText");
 const exampleTextClasses = exampleText.classList;
 const seriousButton = document.getElementById("seriousButton");
@@ -26,6 +27,12 @@ seriousButton.addEventListener("click", function () {
   exampleTextClasses.remove("seriousBoldItalic");
   exampleTextClasses.remove("seriousLight");
   exampleTextClasses.remove("seriousLightItalic");
+  mainClasses.add("serious");
+  mainClasses.remove("seriousItalic");
+  mainClasses.remove("seriousBold");
+  mainClasses.remove("seriousBoldItalic");
+  mainClasses.remove("seriousLight");
+  mainClasses.remove("seriousLightItalic");
 });
 
 seriousItalicButton.addEventListener("click", function () {
@@ -41,6 +48,12 @@ seriousItalicButton.addEventListener("click", function () {
   exampleTextClasses.remove("seriousBoldItalic");
   exampleTextClasses.remove("seriousLight");
   exampleTextClasses.remove("seriousLightItalic");
+  mainClasses.remove("serious");
+  mainClasses.add("seriousItalic");
+  mainClasses.remove("seriousBold");
+  mainClasses.remove("seriousBoldItalic");
+  mainClasses.remove("seriousLight");
+  mainClasses.remove("seriousLightItalic");
 });
 
 seriousBoldButton.addEventListener("click", function () {
@@ -56,6 +69,12 @@ seriousBoldButton.addEventListener("click", function () {
   exampleTextClasses.remove("seriousBoldItalic");
   exampleTextClasses.remove("seriousLight");
   exampleTextClasses.remove("seriousLightItalic");
+  mainClasses.remove("serious");
+  mainClasses.remove("seriousItalic");
+  mainClasses.add("seriousBold");
+  mainClasses.remove("seriousBoldItalic");
+  mainClasses.remove("seriousLight");
+  mainClasses.remove("seriousLightItalic");
 });
 
 seriousBoldItalicButton.addEventListener("click", function () {
@@ -71,6 +90,12 @@ seriousBoldItalicButton.addEventListener("click", function () {
   exampleTextClasses.add("seriousBoldItalic");
   exampleTextClasses.remove("seriousLight");
   exampleTextClasses.remove("seriousLightItalic");
+  mainClasses.remove("serious");
+  mainClasses.remove("seriousItalic");
+  mainClasses.remove("seriousBold");
+  mainClasses.add("seriousBoldItalic");
+  mainClasses.remove("seriousLight");
+  mainClasses.remove("seriousLightItalic");
 });
 
 seriousLightButton.addEventListener("click", function () {
@@ -86,6 +111,12 @@ seriousLightButton.addEventListener("click", function () {
   exampleTextClasses.remove("seriousBoldItalic");
   exampleTextClasses.add("seriousLight");
   exampleTextClasses.remove("seriousLightItalic");
+  mainClasses.remove("serious");
+  mainClasses.remove("seriousItalic");
+  mainClasses.remove("seriousBold");
+  mainClasses.remove("seriousBoldItalic");
+  mainClasses.add("seriousLight");
+  mainClasses.remove("seriousLightItalic");
 });
 
 seriousLightItalicButton.addEventListener("click", function () {
@@ -101,6 +132,12 @@ seriousLightItalicButton.addEventListener("click", function () {
   exampleTextClasses.remove("seriousBoldItalic");
   exampleTextClasses.remove("seriousLight");
   exampleTextClasses.add("seriousLightItalic");
+  mainClasses.remove("serious");
+  mainClasses.remove("seriousItalic");
+  mainClasses.remove("seriousBold");
+  mainClasses.remove("seriousBoldItalic");
+  mainClasses.remove("seriousLight");
+  mainClasses.add("seriousLightItalic");
 });
 
 newExampleTextButton.addEventListener("click", function () {
diff --git a/style.css b/style.css
index c704119..22d4390 100644
--- a/style.css
+++ b/style.css
@@ -49,8 +49,8 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  font-family: "Serious Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial,
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 100%;
   font-size: 1.2rem;
   text-align: center;