updated a few things check them out (#134)

JollyJolli · Oct 19, 2024 · 7a06b0b · 7a06b0b
2 parents f0cc58d + 6b656e0
commit 7a06b0b
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 11 deletions.
diff --git a/src/app.js b/src/app.js
@@ -1,7 +1,9 @@
 // Font Awesome classes for sun and moon
 const MOON = '<i class="fas fa-moon"></i>'
 const SUN = '<i class="fas fa-sun"></i>'
+const GHOST = '<i class="fas fa-ghost"></i>'; // Halloween Icon
 let toggleCount = 0 // Counter to track the number of clicks
+
 let cachedContributors = null
 
 // Const definitions for modal
@@ -13,6 +15,61 @@ const contributerCount = document.querySelector('.total-contributors')
 
 modalClose.addEventListener('click', closeModal)
 
+function initializeThemeSwitching() {
+  const toggleButton = document.getElementById('toggleButton');
+  const body = document.body;
+
+  // Get the initial theme from local storage
+  const currentTheme = localStorage.getItem('theme') || 'light-mode';
+  body.classList.add(currentTheme);
+  updateIcon(currentTheme, toggleButton);
+
+  toggleButton.addEventListener('click', () => {
+    toggleCount++;
+    if (toggleCount === 1) {
+      body.classList.remove('light-mode', 'halloween-mode');
+      body.classList.add('dark-mode');
+      localStorage.setItem('theme', 'dark-mode');
+      updateIcon('dark-mode', toggleButton);
+    } else if (toggleCount === 2) {
+      body.classList.remove('dark-mode', 'light-mode');
+      body.classList.add('halloween-mode');
+      localStorage.setItem('theme', 'halloween-mode');
+      updateIcon('halloween-mode', toggleButton);
+    } else {
+      body.classList.remove('dark-mode', 'halloween-mode');
+      body.classList.add('light-mode');
+      localStorage.setItem('theme', 'light-mode');
+      updateIcon('light-mode', toggleButton);
+      toggleCount = 0;
+    }
+  });
+}
+function flyInGhost() {
+  const ghost = document.getElementById('flyingGhost');
+  ghost.style.right = '100px'; // Move it to the left side of the screen
+}
+
+
+function updateIcon(theme, toggleButton) {
+  if (theme === 'dark-mode') {
+    toggleButton.innerHTML = MOON;
+  } else if (theme === 'halloween-mode') {
+    toggleButton.innerHTML = GHOST;
+  } else {
+    toggleButton.innerHTML = SUN;
+  }
+}
+
+function checkHalloweenDate() {
+  const today = new Date();
+  if (today.getMonth() === 9 && today.getDate() === 31) { // October 31st
+    document.body.classList.remove('light-mode', 'dark-mode');
+    document.body.classList.add('halloween-mode');
+    localStorage.setItem('theme', 'halloween-mode');
+  }
+}
+
 // Function to load participants from the JSON file
 async function loadContributors() {
   if (cachedContributors !== null) {
@@ -223,6 +280,11 @@ window.onload = function () {
   addParticipantHoverEffect()
   initializeSearchAndSort()
   initializeSurpriseButton()
+  initializeThemeSwitching();
+  checkHalloweenDate();
+  if (document.body.classList.contains('halloween-mode')) {
+    flyInGhost();
+  }
 }
 
 // Functions to show and hide the loading screen

diff --git a/src/form.css b/src/form.css
@@ -370,6 +370,30 @@ body.dark-mode .feebback-Btn {
   }
 
 }
+body.halloween-mode #feedbackSection {
+    background-color: #1c1c1c; /* Dark background */
+    color: #f9a825; /* Halloween yellow for text */
+    box-shadow: 0 8px 20px rgba(255, 165, 0, 0.7); /* Orange glow */
+}
+
+body.halloween-mode h2 {
+    color: #ff5722; /* Halloween orange for the title */
+}
+
+body.halloween-mode #comments, 
+body.halloween-mode #contact {
+    border-color: #ff5722; /* Orange border for form fields */
+    background-color: #333; /* Dark background for input fields */
+    color: #f9a825; /* Yellow text */
+}
+
+body.halloween-mode button {
+    background-color: #d32f2f; /* Red for a spooky button */
+}
+
+body.halloween-mode button:hover {
+    background-color: #ff5722; /* Brighter orange on hover */
+}
 
 
 .contact-container {

diff --git a/src/form.js b/src/form.js
@@ -9,7 +9,14 @@ document
     event.preventDefault(); // Prevent the default form submission
 
     // Display thank you message
-    document.getElementById("thankYouMessage").style.display = "block";
+    if (document.body.classList.contains('halloween-mode')) {
+      document.getElementById("thankYouMessage").textContent = "Thanks for your spooky feedback!";
+    }
+
+    // Add an animated effect to the thank you message for Halloween
+    if (document.body.classList.contains('halloween-mode')) {
+      document.getElementById("thankYouMessage").style.textShadow = "2px 2px 10px orange, 2px 2px 20px red";
+    document.getElementById("thankYouMessage").style.display = "block";}
 
     // Optionally, you can handle the form data here, such as sending it to a server
     const comments = document.getElementById("comments").value;
@@ -25,6 +32,12 @@ document
       // Redirect to index.html after 2 seconds
       window.location.href = "index.html";
     }, 2000);
+    // Modify the thank you message for Halloween
+
+}
+
+  );
+
   });
 
   function initializeDarkMode() {

diff --git a/src/index.html b/src/index.html
@@ -75,18 +75,25 @@
 
   <body>
     <header>
+      <img id="flyingGhost" src="img/flying ghost.png" alt="Flying Ghost" style="display:none;" />
       <div>
         <a
           href="#"
           id="titleLink"
           class="header-title"
           aria-label="HacktoberWall Home"
           style="cursor: default"
+
         >
           HacktoberWall
         </a>
         <i id="halloweenIcon" class="fas fa-ghost" aria-hidden="true"></i>
       </div>
+      <div>
+        <a href="#" id="titleLink" class="header-title" aria-label="Home"></a>
+        <i id="halloweenIcon" class="fas fa-ghost" aria-hidden="true"></i>
+      </div>
+
       <div class="header-controls">
         <button
           id="surpriseButton"
@@ -96,6 +103,9 @@
         >
           Surprise Me!
         </button>
+
+        <button id="toggleButton" class="toggle-btn" aria-label="Toggle theme">
+
         <button
           id="surpriseButton"
           class="contact-btn"
@@ -112,8 +122,10 @@
           tabindex="0"
         >
           <i class="fas fa-sun" aria-hidden="true"></i>
-        </button>
+
       </div>
+
+
     </header>
 
     <!-- Ghost Image for Animation -->
@@ -250,7 +262,10 @@ <h2 class="modal-title">Fun Facts</h2>
           tabindex="0"
           >GitHub</a
         >
+
       </p>
+      <!-- <p id="halloweenFooterMessage" style="display:none;">Have a spooky Halloween! 👻</p>
+      <p>Contribute at <a href="https://github.com/JollyJolli/HacktoberWall">GitHub hehe</a></p> -->
     </footer>
 
     <!-- Back to Top Button -->
@@ -266,5 +281,12 @@ <h2 class="modal-title">Fun Facts</h2>
     <script src="contributor.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha256-huW7yWl7tNfP7lGk46XE+Sp0nCotjzYodhVKlwaNeco=" crossorigin="anonymous"></script>
     <script src="app.js"></script>
+    <script>
+      // // Show the flying ghost and change the footer message if it's Halloween
+      // if (document.body.classList.contains('halloween-mode')) {
+      //   document.getElementById('flyingGhost').style.display = 'block';
+      //   document.getElementById('halloweenFooterMessage').style.display = 'block';
+      // }
+    </script>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -13,6 +13,9 @@
   /* Light text color for dark mode */
   --accent-dark: #ff8bff;
   /* Pink accent color for dark mode */
+  --bg-halloween: #1c1c1c;
+  --text-halloween: #f9a825;
+  --accent-halloween: #d32f2f;
 }
 
 * {
@@ -47,6 +50,18 @@ body.dark-mode {
   background-image: url('img/dark.png');
   /* Background image for dark mode */
 }
+body.halloween-mode {
+  background-color: var(--bg-halloween);
+  color: var(--text-halloween);
+  background-image: url('img/halloween-bg.png'); /* Add a spooky background */
+}
+.halloween-mode button {
+  background-color: var(--accent-halloween);
+  color: white;
+}
+.halloween-mode header {
+  background-color: rgba(255, 165, 0, 0.8); /* Halloween orange */
+}
 
 .container {
   max-width: 1200px;
@@ -57,22 +72,41 @@ body.dark-mode {
 
 header {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   padding: 1rem 2rem;
-  background-color: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
+  background-color: rgba(255, 165, 0, 0.8);
   position: sticky;
   top: 0;
   z-index: 1000;
 }
 
+.header-title {
+  font-size: 2.5rem;
+  font-weight: 600;
+  text-align: center;
+  margin: 0;
+}
+
 .header-controls {
+  margin-left: auto;
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 1.5rem;
+  padding-right: 1rem;
+}
+
+.surprise-btn {
+  margin-right: 0.5rem;
+}
+
+#toggleButton {
+  margin-right: 1rem;
 }
 
+
+
+
 .search-container {
   display: flex;
   align-items: center;
@@ -833,12 +867,12 @@ a:focus {
 
 /* Flying Ghost Animation */
 #flyingGhost {
-  position: fixed;
+  display: block; /* Ensure the image is displayed */
+  width: 100px; /* Adjust size as needed */
+  position: fixed; /* Allows for movement */
   top: 20%;
-  right: -150px;
-  width: 100px;
-  display: none;
-  z-index: 1000;
+  right: -150px; /* Start off-screen */
+  transition: right 3s ease-in-out; /* Optional for smooth appearance */
 }
 
 @keyframes ghostFly {