Merge pull request #57 from mohit-1710/bug/hamburger-menu

Pull Request: Make Website Responsive and Add Hamburger Menu Icon
codingkatty · Oct 13, 2024 · e6c503a · e6c503a
2 parents c1d5fcc + 96f3081
commit e6c503a
Show file tree

Hide file tree

Showing 7 changed files with 207 additions and 30 deletions.
diff --git a/about.html b/about.html
@@ -9,14 +9,76 @@
     <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">
     <link rel="stylesheet" href="styles.css">
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" 
+          integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" 
+          crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f4f4;
+            color: #333;
+        }
+        .container {
+            width: 80%;
+            margin: 20px auto;
+            padding: 20px;
+            background: white;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+        }
+        h1, h2 {
+            text-align: center;
+            color: #2C3E50;
+        }
+        p {
+            line-height: 1.6;
+            margin-bottom: 20px;
+            text-align: justify;
+        }
+        a {
+            color: #3498DB;
+            text-decoration: none;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+        .banner {
+            background-color: #2980B9;
+            color: white;
+            padding: 10px 0;
+            margin-bottom: 20px;
+            text-align: center;
+            border-radius: 8px 8px 0 0;
+        }
+        .banner h1 {
+            margin: 0;
+            font-size: 2em;
+        }
+        .section {
+            margin: 20px 0;
+        }
+    </style>
+    <link rel="stylesheet" href="hamburger_menu.css">  
+
     <link rel="stylesheet" href="about.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
         integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
+
 </head>
 <body>
     <div class="navbar">
-        <div class="nav-links">
+        <!-- Hamburger Menu for Mobile -->
+        <div class="hamburger" id="hamburger">
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+
+        <!-- Hamburger Menu for Desktop -->
+        <div class="nav-links" id="nav-links">
             <a href="index.html">Home</a>
             <a href="about.html" class="active">About</a>
             <a href="learn.html">Learn</a>

diff --git a/challenge.html b/challenge.html
@@ -6,12 +6,21 @@
     <title>Math 4 Python - Challenges</title>
     <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="hamburger_menu.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono&display=swap" rel="stylesheet">
 </head>
 <body id="challenge">
     <div class="navbar">
-        <div class="nav-links">
+        <!-- Hamburger Menu for Mobile -->
+        <div class="hamburger" id="hamburger">
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+
+        <!-- Hamburger Menu for Desktop -->
+        <div class="nav-links" id="nav-links">
             <a href="index.html">Home</a>
             <a href="about.html">About</a>
             <a href="learn.html">Learn</a>

diff --git a/faq.html b/faq.html
@@ -7,12 +7,21 @@
     <title>Math 4 Python - FAQs</title>
     <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="hamburger_menu.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono&display=swap" rel="stylesheet">
   </head>
   <body id="faq">
     <div class="navbar">
-        <div class="nav-links">
+        <!-- Hamburger Menu for Mobile -->
+        <div class="hamburger" id="hamburger">
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+
+        <!-- Hamburger Menu for Desktop -->
+        <div class="nav-links" id="nav-links">
             <a href="index.html">Home</a>
             <a href="about.html">About</a>
             <a href="learn.html" >Learn</a>

diff --git a/hamburger_menu.css b/hamburger_menu.css
@@ -0,0 +1,76 @@
+
+.navbar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    background-color: #2c3e50;
+    color: white;
+}
+
+.nav-links {
+    display: flex;
+    gap: 15px;
+}
+
+.nav-links a {
+    color: white;
+    text-decoration: none;
+    padding: 8px 12px;
+    border-radius: 4px;
+}
+
+.nav-links a.active,
+.nav-links a:hover {
+    background-color: #575757;
+}
+
+.theme-toggle-wrapper {
+    margin-right: 10px;
+}
+
+.logo img {
+    width: 40px;
+}
+
+/* Hamburger Menu Styles */
+.hamburger {
+    display: none;
+    flex-direction: column;
+    gap: 4px;
+    cursor: pointer;
+}
+
+.hamburger div {
+    width: 25px;
+    height: 3px;
+    background-color: white;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+    .nav-links {
+        display: none;
+        flex-direction: column;
+        gap: 10px;
+        position: absolute;
+        top: 60px;
+        left: 20px;
+        background-color: #333;
+        padding: 10px;
+        border-radius: 8px;
+    }
+
+    .navbar {
+        position: relative;
+    }
+
+    .hamburger {
+        display: flex;
+    }
+
+    .nav-links.show {
+        display: flex;
+    }
+}
diff --git a/index.html b/index.html
@@ -7,18 +7,27 @@
 
     <title>Math 4 Python - Learn and Challenge Your Math Skills</title>
     <meta name="description"
-        content="A platform to learn mathematical concepts for Python programming and engage in coding challenges.">
+     content="A platform to learn mathematical concepts for Python programming and engage in coding challenges.">
     <meta name="keywords" content="math, python, learning, challenges, programming">
     <link rel="icon" href="newfavicon.svg" type="image/svg+xml">
     <!-- <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">-->
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <!-- Adding CSS for making the website responsive -->
+    <link rel="stylesheet" href="hamburger_menu.css">
 </head>
 
 <body id="home">
     <div class="navbar">
+        <!-- Hamburger Menu for Mobile -->
+        <div class="hamburger" id="hamburger">
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
 
-        <div class="nav-links">
+        <!-- Hamburger Menu for Desktop -->
+        <div class="nav-links" id="nav-links">
             <a href="index.html" class="active">Home</a>
             <a href="about.html">About</a>
             <a href="learn.html">Learn</a>
@@ -31,12 +40,10 @@
                 <i class="fas fa-moon"></i>
             </button>
         </div>
-
+        
         <a class="logo" href="index.html"><img src="logonew.svg" width="40"></a>
-        <!-- <a href="learn.html">Learn</a>
-        <a href="challenge.html">Challenge -->
-        </a>
     </div>
+
 
     <div class="content">
         <h1>Welcome to Math 4 Python</h1>
@@ -64,7 +71,7 @@ <h3>Real-time Feedback</h3>
         </div>
 
         <div class="call-to-action">
-            <h2> Start learning Today!</h2>
+            <h2>Start Learning Today!</h2>
             <p>Ready to dive into the world of math and Python? Click below to get started!</p>
             <a href="learn.html" class="cta-button">Get Started</a>
         </div>

diff --git a/learn.html b/learn.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Math 4 Python - Learn</title>
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="hamburger_menu.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
@@ -13,7 +14,15 @@
 </head>
 <body id="learn" onload="showEditor('Untitled')">
     <div class="navbar">
-        <div class="nav-links">
+        <!-- Hamburger Menu for Mobile -->
+        <div class="hamburger" id="hamburger">
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+
+        <!-- Hamburger Menu for Desktop -->
+        <div class="nav-links" id="nav-links">
             <a href="index.html">Home</a>
             <a href="about.html">About</a>
             <a href="learn.html" class="active">Learn</a>

diff --git a/script.js b/script.js
@@ -500,14 +500,37 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 
+document.addEventListener("DOMContentLoaded", () => {
+    const hamburger = document.getElementById("hamburger");
+    const navLinks = document.getElementById("nav-links");
+
+
+hamburger.addEventListener("click", () => {
+        navLinks.classList.toggle("show");
+    });
+
+    const lessonResetBtn = document.getElementById('lesson-reset-btn');
+    const challengeResetBtn = document.getElementById('challenge-reset-btn');
+
+    if (lessonResetBtn) {
+        lessonResetBtn.addEventListener('click', () => resetProgress('lesson'));
+    }
+
+    if (challengeResetBtn) {
+        challengeResetBtn.addEventListener('click', () => resetProgress('challenge'));
+    }
+
+    updateProgressBar();
+});
+
+
 // Reset button 
 document.getElementById('reset-code').addEventListener('click', () => {
     if (currentLesson) {
         showEditor(currentLesson); 
     } 
 });
 
-
 document.getElementById('copy-code').addEventListener('click', () => {
     const code = editor.getValue();
     navigator.clipboard.writeText(code)
@@ -523,21 +546,3 @@ document.getElementById('copy-code').addEventListener('click', () => {
         });
 });
 
-// Add this to your DOMContentLoaded event listener
-document.addEventListener('DOMContentLoaded', () => {
-    // ... existing code ...
-
-    const lessonResetBtn = document.getElementById('lesson-reset-btn');
-    const challengeResetBtn = document.getElementById('challenge-reset-btn');
-
-    if (lessonResetBtn) {
-        lessonResetBtn.addEventListener('click', () => resetProgress('lesson'));
-    }
-
-    if (challengeResetBtn) {
-        challengeResetBtn.addEventListener('click', () => resetProgress('challenge'));
-    }
-
-    updateProgressBar();
-});
-