Add ability to input custom example text

index.html

@@ -30,6 +30,7 @@
         <p>THE FIVE TALL BOXING WIZARDS JUMP QUICKLY!</p>
         <p>0123456789.:,;(*!?')</p>
       </div>
+      <br />
       <div id="previewButtons">
         <div class="flex column">
           <button id="seriousButton">Serious Sans</button>
@@ -45,6 +46,12 @@
         </div>
       </div>
       <br />
+      <form>
+        <label for="newExampleText">New Example Text:</label>
+        <input type="text" id="newExampleText" name="newExampleText" />
+        <input type="button" id="newExampleTextButton" value="Update" />
+      </form>
+      <br />
       <h2>Downloads</h2>
       <div id="downloads">
         <div>

index.js

@@ -1,5 +1,5 @@
-const exampleTextClasses = document.getElementById("exampleText").classList;
-
+const exampleText = document.getElementById("exampleText");
+const exampleTextClasses = exampleText.classList;
 const seriousButton = document.getElementById("seriousButton");
 const seriousItalicButton = document.getElementById("seriousItalicButton");
 const seriousBoldButton = document.getElementById("seriousBoldButton");
@@ -10,6 +10,8 @@ const seriousLightButton = document.getElementById("seriousLightButton");
 const seriousLightItalicButton = document.getElementById(
   "seriousLightItalicButton"
 );
+const newExampleTextButton = document.getElementById("newExampleTextButton");
+const newExampleText = document.getElementById("newExampleText");
 
 seriousButton.addEventListener("click", function () {
   this.classList.add("selected");
@@ -100,3 +102,7 @@ seriousLightItalicButton.addEventListener("click", function () {
   exampleTextClasses.remove("seriousLight");
   exampleTextClasses.add("seriousLightItalic");
 });
+
+newExampleTextButton.addEventListener("click", function () {
+  exampleText.setHTML(newExampleText.value);
+});