form font functionality

owsko · Jul 7, 2024 · 59a2d2b · 59a2d2b
1 parent eb0eaf4
commit 59a2d2b
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 5 deletions.
diff --git a/pages/contact.html b/pages/contact.html
@@ -11,6 +11,14 @@
 
     <link rel="icon" href="media/favicons/favicon-32x32.png" />
 
+    <!-- Yarndings (font)-->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Yarndings+20&display=swap"
+      rel="stylesheet"
+    />
+
     <title>sertcoat.xyz \ CONTACT</title>
   </head>
 
@@ -44,7 +52,7 @@ <h1 class="prevent" id="header-h1">&gt;.&lt;</h1>
     </header>
 
     <div class="prevent" id="form">
-      <form action="https://formsubmit.co/9e62680af5003eec1d00872224ed336d" method="POST">
+      <form action="https://formsubmit.co/9e62680af5003eec1d00872224ed336d" method="POST" class="form">
 
         <!-- Honeypot -->
         <input type="text" name="_honey" style="display: none;">
@@ -58,30 +66,36 @@ <h1 class="prevent" id="header-h1">&gt;.&lt;</h1>
       <input 
         type="text"
         name="name"
+        id="name"
         placeholder="Name*"
         autocomplete="off"
+        class="randomfont"
         required
       />
       <input 
         type="email"
         name="email"
+        id="email"
         placeholder="Email*"
         autocomplete="off"
+        class="randomfont"
         required
       />
       <input 
         type="tel"
         name="number"
         placeholder="Number"
         autocomplete="off"
-        style="appearance: textfield"
+        style="appearance: textfield;"
+        class="randomfont"
       />
       <textarea         
         name="message"
         id="messageValue"
         rows="5"
         cols="60"
         placeholder="Message*"
+        class="randomfont"
         required
       ></textarea>
       <button type="submit">__φ(．．)</button>
@@ -93,5 +107,7 @@ <h1 class="prevent" id="header-h1">&gt;.&lt;</h1>
     <script src="../scripts/script_eraseText.js"></script>
     <script src="../scripts/script_menuIcon.js"></script>
 
+    <script src="../scripts/script_randomFonts.js"></script>
+
   </body>
 </html>
diff --git a/pages/folders/sourcecode.html b/pages/folders/sourcecode.html
@@ -8,12 +8,20 @@
     <link rel="stylesheet" href="../../stylesheets/common.css" />
     <link rel="stylesheet" href="../../stylesheets/sourcecode.css" />
 
+    <!-- Yarndings (font)-->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Yarndings+20&display=swap"
+      rel="stylesheet"
+    />
+
     <title>folder2</title>
   </head>
 
   <body>
     <div>
-      <textarea name="SOURCECODE" readonly>
+      <textarea name="SOURCECODE" id="randomfont" readonly>
 <!DOCTYPE html>
       <html lang="en">
         <head>

diff --git a/scripts/script_randomFonts.js b/scripts/script_randomFonts.js
@@ -0,0 +1,12 @@
+const fontType = ["'Yarndings 20'"];
+const font_sub = document.querySelector(".form");
+
+font_sub.addEventListener("submit", function randomizeFont() {
+    let fontEl = document.getElementsByClassName("randomfont");
+
+    var num;
+    num = Math.floor(Math.random() * fontType.length);
+    for (let i = 0; i < fontEl.length; i++) {
+        fontEl[i].style.fontFamily = fontType[num];
+    }
+});
diff --git a/scripts/script_randomHeader.js b/scripts/script_randomHeader.js
@@ -7,5 +7,4 @@ function randomEmoticon() {
     headerEl.textContent = emoticon[i];
 }
 
-randomEmoticon();
-
+randomEmoticon();
diff --git a/stylesheets/contact.css b/stylesheets/contact.css
@@ -14,6 +14,7 @@ input {
     width: 70%;
     margin-left: 12%;
     font-size: 18px;
+    font-family: monospace;
     padding: 9px 9px; /* remove?? */
     border-radius: 4px;
     border-left-width: 0px;