Rebrand

Rebranded from spelingbee to spellcheck. Also improved the support text visbility on gameplay pages
Jsoto22 · Jan 15, 2024 · ea74c30 · ea74c30
1 parent 673930b
commit ea74c30
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 31 deletions.
diff --git a/ahshit.html b/ahshit.html
@@ -3,14 +3,17 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=0">
-    <title>Speling Bee | Ah Shit</title>
+    <title>Spellcheck - A Word Game | Ah Shit</title>
     <link rel="stylesheet" href="assets/styles/large_style.css" media="(min-width: 800px)">
     <link rel="stylesheet" href="assets/styles/mobile_style.css" media="(max-width: 800px)">
-    <link rel="icon" type="image/x-icon" href="assets/icons/honeybee_1f41d.ico">
+    <link rel="icon" type="image/x-icon" href="assets/icons/spellcheck.png">
 </head>
 <body>
     <p>Ah shit, something went wrong. Sorry about that.</p>
-    <a href="index.html">Click here to restart.</a>
+    <br>
+    <a class="btn boxed" href="index.html">Click here to restart.</a>
+    <br>
+    <br>
     <p>If this issue persist, email me: answerinprogress [at] gmail [dot] com</p>
 </body>
 </html>
diff --git a/assets/icons/spellcheck.png b/assets/icons/spellcheck.png
diff --git a/assets/scripts/practice.js b/assets/scripts/practice.js
@@ -1,7 +1,7 @@
 /* https://www.freecodecamp.org/news/build-a-wordle-clone-in-javascript/ */
 const KEYBOARD_EL = document.querySelector("#keyboard")
 const attempt = document.querySelector("#attempt-box")
-var radioVal = sessionStorage.getItem("radioVal");
+var level = sessionStorage.getItem("level");
 var publicCount = document.querySelector('#count')
 
 var wordOne = document.querySelector("#word-one")
@@ -283,4 +283,4 @@ document.addEventListener("keyup", (e) => {
     }
 })
 
-checkLevel(radioVal)
+checkLevel(level)
diff --git a/index.html b/index.html
@@ -3,17 +3,17 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=0">
-    <title>Speling Bee | Home</title>
+    <title>Spellcheck - A Word Game | Home</title>
     <link rel="stylesheet" href="assets/styles/large_style.css" media="(min-width: 800px)">
     <link rel="stylesheet" href="assets/styles/mobile_style.css" media="(max-width: 800px)">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-    <link rel="icon" type="image/x-icon" href="assets/icons/honeybee_1f41d.ico">
+    <link rel="icon" type="image/x-icon" href="assets/icons/spellcheck.png">
 </head>
 <body>
 
     <div class="header">
         <div id="header-with-menu">
-            <h1 class="boxed" id="header-title"><span class="error">Speling</span> Bee</h1>
+            <h1 class="boxed" id="header-title"><span class="">Spellcheck</span></h1>
         </div>
 
     </div>

diff --git a/mode_select.html b/mode_select.html
@@ -3,11 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=0">
-    <title>Speling Bee | Select Mode</title>
+    <title>Spellcheck - A Word Game | Select Mode</title>
     <link rel="stylesheet" href="assets/styles/large_style.css" media="(min-width: 800px)">
     <link rel="stylesheet" href="assets/styles/mobile_style.css" media="(max-width: 800px)">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
-    <link rel="icon" type="image/x-icon" href="assets/icons/honeybee_1f41d.ico">
+    <link rel="icon" type="image/x-icon" href="assets/icons/spellcheck.png">
 
 </head>
 <body>
@@ -16,14 +16,14 @@
         <div id="header-with-menu">
             <a href="index.html" class="boxed btn" id="header-menu"><i class="fa fa-arrow-left" style="font-size:30pt; padding:0%"></i></a>
             <div></div>
-            <h1 class="boxed" id="header-title"><span class="error">Speling</span> Bee</h1>
+            <h1 class="boxed" id="header-title"><span class="">Spellcheck</span></h1>
         </div>
     </div>
 
     <div class="content">
         <p><i>select game mode</i></p>
 
-        <h2 class="boxed-black"><span class="error">dayly</span> solo</h2>
+        <h2 class="boxed-black"><span class="error">dayly</span> challenge</h2>
         <p>Expand your <span class="error">vocabulry</span> and spell these words that refresh daily.</p>
         <a href="solo_game.html" >
             <div class="btn boxed">
@@ -65,11 +65,11 @@ <h2 class="boxed-black">practice mode</h2>
 <script>
     // record the practice level setting
     const radios = document.querySelectorAll('input[name="difficulty-switch"]');
-    sessionStorage.setItem("radioVal", 'medium');
+    sessionStorage.setItem("level", 'medium');
     radios.forEach(radio => {
         radio.addEventListener('click', function () {
             radioVal = radio.id;
-            sessionStorage.setItem("radioVal", radioVal);
+            sessionStorage.setItem("level", radioVal);
             console.log(radioVal)
         });
     });

diff --git a/practice_game.html b/practice_game.html
@@ -3,25 +3,25 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=0">
-    <title>Speling Bee | Play</title>
+    <title>Spellcheck - A Word Game | Practice</title>
     <link rel="stylesheet" href="assets/styles/large_style.css" media="(min-width: 800px)">
     <link rel="stylesheet" href="assets/styles/mobile_style.css" media="(max-width: 800px)">
     <link rel="stylesheet" href="assets/styles/no_scroll.css" media="(max-width: 800px)">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
-    <link rel="icon" type="image/x-icon" href="assets/icons/honeybee_1f41d.ico">
+    <link rel="icon" type="image/x-icon" href="assets/icons/spellcheck.png">
 
 </head>
 <body>
     <div class="header">
         <div id="header-with-menu">
             <a href="mode_select.html" class="boxed btn" id="header-menu"><i class="fa fa-arrow-left" style="font-size:30pt; padding:0%"></i></a>
             <div></div>
-            <h1 class="boxed" id="header-title"><span class="error">Speling</span> Bee</h1>
+            <h1 class="boxed" id="header-title"><span class="">Spellcheck</span></h1>
         </div>
     </div>
     <div class="content">
         <div id="top-banner">
-            <p id="count"></p>
+            <h2 class="boxed-black" id="count"></h2>
         </div>
         <div id="practice-prompt">
             <div id="word-one" class="prompt boxed btn fa fa-play-circle" style="font-size: 24pt;">

diff --git a/practice_results.html b/practice_results.html
@@ -3,16 +3,16 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=0">
-  <title>Speling Bee | Results</title>
+  <title>Spellcheck - A Word Game | Results</title>
   <link rel="stylesheet" href="assets/styles/large_style.css" media="(min-width: 800px)">
   <link rel="stylesheet" href="assets/styles/mobile_style.css" media="(max-width: 800px)">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
-  <link rel="icon" type="image/x-icon" href="assets/icons/honeybee_1f41d.ico">
+  <link rel="icon" type="image/x-icon" href="assets/icons/spellcheck.png">
 </head>
 <body>
   <div class="header">
     <div id="header-with-menu">
-        <h1 class="boxed" id="header-title"><span class="error">Speling</span> Bee</h1>
+      <h1 class="boxed" id="header-title"><span class="">Spellcheck</span></h1>
     </div>
 </div>
 <div class="content">

diff --git a/results.html b/results.html
@@ -3,16 +3,16 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=0">
-  <title>Speling Bee | Results</title>
+  <title>Spellcheck - A Word Game | Results</title>
   <link rel="stylesheet" href="assets/styles/large_style.css" media="(min-width: 800px)">
   <link rel="stylesheet" href="assets/styles/mobile_style.css" media="(max-width: 800px)">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
-  <link rel="icon" type="image/x-icon" href="assets/icons/honeybee_1f41d.ico">
+  <link rel="icon" type="image/x-icon" href="assets/icons/spellcheck.png">
 </head>
 <body>
   <div class="header">
     <div id="header-with-menu">
-        <h1 class="boxed" id="header-title"><span class="error">Speling</span> Bee</h1>
+      <h1 class="boxed" id="header-title"><span class="">Spellcheck</span></h1>
     </div>
 </div>
 <div class="content">

diff --git a/solo_game.html b/solo_game.html
@@ -3,25 +3,25 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=0">
-    <title>Speling Bee | Play</title>
+    <title>Spellcheck - A Word Game | Play</title>
     <link rel="stylesheet" href="assets/styles/large_style.css" media="(min-width: 800px)">
     <link rel="stylesheet" href="assets/styles/mobile_style.css" media="(max-width: 800px)">
     <link rel="stylesheet" href="assets/styles/no_scroll.css" media="(max-width: 800px)">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
-    <link rel="icon" type="image/x-icon" href="assets/icons/honeybee_1f41d.ico">
+    <link rel="icon" type="image/x-icon" href="assets/icons/spellcheck.png">
 
 </head>
 <body>
     <div class="header">
         <div id="header-with-menu">
             <a href="mode_select.html" class="boxed btn" id="header-menu"><i class="fa fa-arrow-left" style="font-size:30pt; padding:0%"></i></a>
             <div></div>
-            <h1 class="boxed" id="header-title"><span class="error">Speling</span> Bee</h1>
+            <h1 class="boxed" id="header-title"><span class="">Spellcheck</span></h1>
         </div>
     </div>
     <div class="content">
         <div id="top-banner">
-            <p id="level">Level One: Easy</p>
+            <h2 class="boxed-black" id="level">Level One: Easy</h2>
         </div>
         <div id="word-prompts">
             <div id="word-one" class="prompt boxed btn fa fa-play-circle" style="font-size: 24pt;">

diff --git a/youtube.html b/youtube.html
@@ -3,20 +3,20 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=0">
-    <title>Speling Bee | Play</title>
+    <title>Spellcheck - A Word Game | YouTube Edition</title>
     <link rel="stylesheet" href="assets/styles/large_style.css" media="(min-width: 800px)">
     <link rel="stylesheet" href="assets/styles/mobile_style.css" media="(max-width: 800px)">
     <link rel="stylesheet" href="assets/styles/no_scroll.css" media="(max-width: 800px)">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
-    <link rel="icon" type="image/x-icon" href="assets/icons/honeybee_1f41d.ico">
+    <link rel="icon" type="image/x-icon" href="assets/icons/spellcheck.png">
 
 </head>
 <body>
     <div class="header">
         <div id="header-with-menu">
             <a href="mode_select.html" class="boxed btn" id="header-menu"><i class="fa fa-arrow-left" style="font-size:30pt; padding:0%"></i></a>
             <div></div>
-            <h1 class="boxed" id="header-title"><span class="error">Speling</span> Bee</h1>
+            <h1 class="boxed" id="header-title"><span class="">Spellcheck</span></h1>
         </div>
     </div>
     <div class="content">