Merge pull request #5 from akadeepesh/fix

Fixing issue #2 to enchange web design
JollyJolli · Sep 26, 2024 · 50a8443 · 50a8443
2 parents c74e418 + fcc1bd7
commit 50a8443
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 144 deletions.
diff --git a/app.js b/app.js
@@ -4,59 +4,60 @@ const SUN = "🌞";
 
 // Function to load participants from the JSON file
 async function loadContributors() {
-    const response = await fetch("contributors.json");
-    const contributors = await response.json();
-    return contributors;
+  const response = await fetch("contributors.json");
+  const contributors = await response.json();
+  return contributors;
 }
 
 // Function to display participants on the mural
 async function displayContributors() {
-    const wall = document.getElementById("wall");
-    const contributors = await loadContributors();
-    wall.innerHTML = ""; // Clear the wall before adding new participants
-
-    contributors.forEach((contributor) => {
-        const div = document.createElement("div");
-        div.classList.add("participant");
-        div.textContent = contributor.name;
-        wall.appendChild(div);
-    });
+  const wall = document.getElementById("wall");
+  const contributors = await loadContributors();
+  wall.innerHTML = "";
+
+  contributors.forEach((contributor, index) => {
+    const div = document.createElement("div");
+    div.classList.add("participant");
+    div.textContent = contributor.name;
+    div.style.animationDelay = `${index * 0.1}s`;
+    wall.appendChild(div);
+  });
 }
 
 // Function to Switch light/dark mode
-function InitializeDarkMode() {
-    const toggleButton = document.getElementById("toggleButton");
-    const body = document.body;
-    const elements = document.querySelectorAll('div, footer');
-
-    // get from localstorage
-    const isDarkMode = localStorage.getItem("dark-mode");
-
-    if (isDarkMode === "enabled") {
-        body.classList.add("dark-mode");
-        elements.forEach(element => element.classList.add('dark-mode'));
-        toggleButton.textContent = MOON;
-    } else {
-        toggleButton.textContent = SUN;
-    }
+function initializeDarkMode() {
+  const toggleButton = document.getElementById("toggleButton");
+  const body = document.body;
+
+  const isDarkMode = localStorage.getItem("dark-mode") === "enabled";
+  body.classList.toggle("dark-mode", isDarkMode);
+  toggleButton.textContent = isDarkMode ? MOON : SUN;
+
+  toggleButton.addEventListener("click", () => {
+    body.classList.toggle("dark-mode");
+    const isDarkMode = body.classList.contains("dark-mode");
+    localStorage.setItem("dark-mode", isDarkMode ? "enabled" : "disabled");
+    toggleButton.textContent = isDarkMode ? MOON : SUN;
+  });
+}
 
-    // set click event 
-    toggleButton.addEventListener("click", () => {
-        body.classList.toggle("dark-mode");
-        elements.forEach(element => element.classList.toggle('dark-mode'));
-
-        if (body.classList.contains("dark-mode")) {
-            localStorage.setItem("dark-mode", "enabled");
-            toggleButton.textContent = MOON; 
-        } else {
-            localStorage.setItem("dark-mode", "disabled");
-            toggleButton.textContent = SUN; 
-        }
-    });
+function addParticipantHoverEffect() {
+  const wall = document.getElementById("wall");
+  wall.addEventListener("mouseover", (e) => {
+    if (e.target.classList.contains("participant")) {
+      e.target.style.transform = "translateY(-5px)";
+    }
+  });
+  wall.addEventListener("mouseout", (e) => {
+    if (e.target.classList.contains("participant")) {
+      e.target.style.transform = "translateY(0)";
+    }
+  });
 }
 
 // Initialize the wall with existing contributors
 window.onload = function () {
-    displayContributors();
-    InitializeDarkMode();
+  displayContributors();
+  initializeDarkMode();
+  addParticipantHoverEffect();
 };
diff --git a/contributors.json b/contributors.json
@@ -6,7 +6,7 @@
         "name": "HirotoTsujii"
     },
     {
-        "name": "Name 2"
+        "name": "akadeepesh"
     },
     {
         "name": "Name 3"

diff --git a/index.html b/index.html
@@ -1,30 +1,46 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>HacktoberWall</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-    <div class="container">
-        <div style="text-align:right">
-            <div class="toggle-container" style="text-align:right">
-                <button id="toggleButton" class="toggle-btn">🌞</button>
-            </div>
-        </div>
-        <h1>HacktoberWall</h1>
-        <p>Contribute to the Hacktoberfest mural by editing the JSON file in the code!</p>
-
-        <div class="wall-section">
-            <h2>Participants</h2>
-            <div id="wall"></div>
-        </div>
-    </div>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <header>
+      <h1>HacktoberWall</h1>
+      <button
+        id="toggleButton"
+        class="toggle-btn"
+        aria-label="Toggle dark mode"
+      >
+        🌞
+      </button>
+    </header>
+    <main class="container">
+      <section class="intro">
+        <p>
+          Contribute to the Hacktoberfest mural by editing the JSON file in the
+          code!
+        </p>
+      </section>
+      <section class="wall-section">
+        <h2>Participants</h2>
+        <div id="wall" class="wall"></div>
+      </section>
+    </main>
     <footer>
-        <p>Contribute at <a href="https://github.com/JollyJolli/HacktoberWall" target="_blank">https://github.com/JollyJolli/HacktoberWall</a></p>
+      <p>
+        Contribute at
+        <a href="https://github.com/JollyJolli/HacktoberWall" target="_blank"
+          >GitHub</a
+        >
+      </p>
     </footer>
-
     <script src="app.js"></script>
-</body>
-</html>
+  </body>
+</html>