From 8b169dc159705a136ec9f4fb63ab5d246b49bbd1 Mon Sep 17 00:00:00 2001
From: shreyaB7134 <shreyaburra18@gmail.com>
Date: Thu, 31 Jul 2025 22:25:16 +0530
Subject: [PATCH] Add Challenge of the Day feature on homepage

---
 challenges.json              |  53 +++++++++
 index.html                   |  20 ++++
 js/challengeOfTheDay.js      | 142 +++++++++++++++++++++++
 styles/challengeOfTheDay.css | 216 +++++++++++++++++++++++++++++++++++
 4 files changed, 431 insertions(+)
 create mode 100644 challenges.json
 create mode 100644 js/challengeOfTheDay.js
 create mode 100644 styles/challengeOfTheDay.css

diff --git a/challenges.json b/challenges.json
new file mode 100644
index 00000000..04a1b973
--- /dev/null
+++ b/challenges.json
@@ -0,0 +1,53 @@
+[
+  {"title": "Two Sum", "difficulty": "Easy", "url": "https://leetcode.com/problems/two-sum/"},
+  {"title": "Add Two Numbers", "difficulty": "Medium", "url": "https://leetcode.com/problems/add-two-numbers/"},
+  {"title": "Longest Substring Without Repeating Characters", "difficulty": "Medium", "url": "https://leetcode.com/problems/longest-substring-without-repeating-characters/"},
+  {"title": "Longest Palindromic Substring", "difficulty": "Medium", "url": "https://leetcode.com/problems/longest-palindromic-substring/"},
+  {"title": "Zigzag Conversion", "difficulty": "Medium", "url": "https://leetcode.com/problems/zigzag-conversion/"},
+  {"title": "Reverse Integer", "difficulty": "Medium", "url": "https://leetcode.com/problems/reverse-integer/"},
+  {"title": "String to Integer (atoi)", "difficulty": "Medium", "url": "https://leetcode.com/problems/string-to-integer-atoi/"},
+  {"title": "Palindrome Number", "difficulty": "Easy", "url": "https://leetcode.com/problems/palindrome-number/"},
+  {"title": "Container With Most Water", "difficulty": "Medium", "url": "https://leetcode.com/problems/container-with-most-water/"},
+  {"title": "Roman to Integer", "difficulty": "Easy", "url": "https://leetcode.com/problems/roman-to-integer/"},
+  {"title": "Longest Common Prefix", "difficulty": "Easy", "url": "https://leetcode.com/problems/longest-common-prefix/"},
+  {"title": "3Sum", "difficulty": "Medium", "url": "https://leetcode.com/problems/3sum/"},
+  {"title": "3Sum Closest", "difficulty": "Medium", "url": "https://leetcode.com/problems/3sum-closest/"},
+  {"title": "Letter Combinations of a Phone Number", "difficulty": "Medium", "url": "https://leetcode.com/problems/letter-combinations-of-a-phone-number/"},
+  {"title": "4Sum", "difficulty": "Medium", "url": "https://leetcode.com/problems/4sum/"},
+  {"title": "Remove Nth Node From End of List", "difficulty": "Medium", "url": "https://leetcode.com/problems/remove-nth-node-from-end-of-list/"},
+  {"title": "Valid Parentheses", "difficulty": "Easy", "url": "https://leetcode.com/problems/valid-parentheses/"},
+  {"title": "Merge Two Sorted Lists", "difficulty": "Easy", "url": "https://leetcode.com/problems/merge-two-sorted-lists/"},
+  {"title": "Generate Parentheses", "difficulty": "Medium", "url": "https://leetcode.com/problems/generate-parentheses/"},
+  {"title": "Merge k Sorted Lists", "difficulty": "Hard", "url": "https://leetcode.com/problems/merge-k-sorted-lists/"},
+  {"title": "Swap Nodes in Pairs", "difficulty": "Medium", "url": "https://leetcode.com/problems/swap-nodes-in-pairs/"},
+  {"title": "Remove Duplicates from Sorted Array", "difficulty": "Easy", "url": "https://leetcode.com/problems/remove-duplicates-from-sorted-array/"},
+  {"title": "Remove Element", "difficulty": "Easy", "url": "https://leetcode.com/problems/remove-element/"},
+  {"title": "Find the Index of the First Occurrence in a String", "difficulty": "Easy", "url": "https://leetcode.com/problems/find-the-index-of-the-first-occurrence-in-a-string/"},
+  {"title": "Search in Rotated Sorted Array", "difficulty": "Medium", "url": "https://leetcode.com/problems/search-in-rotated-sorted-array/"},
+  {"title": "Search Insert Position", "difficulty": "Easy", "url": "https://leetcode.com/problems/search-insert-position/"},
+  {"title": "Valid Sudoku", "difficulty": "Medium", "url": "https://leetcode.com/problems/valid-sudoku/"},
+  {"title": "Count and Say", "difficulty": "Medium", "url": "https://leetcode.com/problems/count-and-say/"},
+  {"title": "Combination Sum", "difficulty": "Medium", "url": "https://leetcode.com/problems/combination-sum/"},
+  {"title": "Combination Sum II", "difficulty": "Medium", "url": "https://leetcode.com/problems/combination-sum-ii/"},
+  {"title": "Multiply Strings", "difficulty": "Medium", "url": "https://leetcode.com/problems/multiply-strings/"},
+  {"title": "Jump Game II", "difficulty": "Medium", "url": "https://leetcode.com/problems/jump-game-ii/"},
+  {"title": "Permutations", "difficulty": "Medium", "url": "https://leetcode.com/problems/permutations/"},
+  {"title": "Rotate Image", "difficulty": "Medium", "url": "https://leetcode.com/problems/rotate-image/"},
+  {"title": "Group Anagrams", "difficulty": "Medium", "url": "https://leetcode.com/problems/group-anagrams/"},
+  {"title": "Maximum Subarray", "difficulty": "Medium", "url": "https://leetcode.com/problems/maximum-subarray/"},
+  {"title": "Spiral Matrix", "difficulty": "Medium", "url": "https://leetcode.com/problems/spiral-matrix/"},
+  {"title": "Jump Game", "difficulty": "Medium", "url": "https://leetcode.com/problems/jump-game/"},
+  {"title": "Merge Intervals", "difficulty": "Medium", "url": "https://leetcode.com/problems/merge-intervals/"},
+  {"title": "Insert Interval", "difficulty": "Medium", "url": "https://leetcode.com/problems/insert-interval/"},
+  {"title": "Length of Last Word", "difficulty": "Easy", "url": "https://leetcode.com/problems/length-of-last-word/"},
+  {"title": "Spiral Matrix II", "difficulty": "Medium", "url": "https://leetcode.com/problems/spiral-matrix-ii/"},
+  {"title": "Rotate List", "difficulty": "Medium", "url": "https://leetcode.com/problems/rotate-list/"},
+  {"title": "Unique Paths", "difficulty": "Medium", "url": "https://leetcode.com/problems/unique-paths/"},
+  {"title": "Unique Paths II", "difficulty": "Medium", "url": "https://leetcode.com/problems/unique-paths-ii/"},
+  {"title": "Minimum Path Sum", "difficulty": "Medium", "url": "https://leetcode.com/problems/minimum-path-sum/"},
+  {"title": "Climbing Stairs", "difficulty": "Easy", "url": "https://leetcode.com/problems/climbing-stairs/"},
+  {"title": "Simplify Path", "difficulty": "Medium", "url": "https://leetcode.com/problems/simplify-path/"},
+  {"title": "Set Matrix Zeroes", "difficulty": "Medium", "url": "https://leetcode.com/problems/set-matrix-zeroes/"},
+  {"title": "Search a 2D Matrix", "difficulty": "Medium", "url": "https://leetcode.com/problems/search-a-2d-matrix/"},
+  {"title": "Sort Colors", "difficulty": "Medium", "url": "https://leetcode.com/problems/sort-colors/"}
+]
diff --git a/index.html b/index.html
index 01c7dd08..fc2cde97 100644
--- a/index.html
+++ b/index.html
@@ -200,6 +200,25 @@ <h1>
     </section>
     <!-- ================================ Hero Section End Here ================================ -->
 
+    <!-- ================================ Challenge of the Day Section Start Here ================================ -->
+    <section id="challengeOfTheDay" class="py-5 bg-light">
+        <div class="container">
+            <div class="row">
+                <div class="col-12 text-center">
+                    <h1>Challenge of the Day</h1>
+                    <br>
+                    
+                    <button id="generateChallengeBtn" class="btn btn-primary mb-4">Generate Random Challenge</button>
+                    <div id="challenge-container">
+                        <!-- Challenge will be displayed here -->
+                        <div class="text-muted">Click the button above to generate today's challenge</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- ================================ Challenge of the Day Section End Here ================================ -->
+
     <!-- ================================ Challenge Section Start Here ================================ -->
     <section id="challengeSection">
       <div class="container">
@@ -635,5 +654,6 @@ <h5 class="footer-title">Contact Us</h5>
 
     <!-- ================ Custom JS ================  -->
     <script src="scripts/main.js"></script>
+    <script src="js/challengeOfTheDay.js"></script>
   </body>
 </html>
diff --git a/js/challengeOfTheDay.js b/js/challengeOfTheDay.js
new file mode 100644
index 00000000..bda76998
--- /dev/null
+++ b/js/challengeOfTheDay.js
@@ -0,0 +1,142 @@
+// Debug log to confirm script is loaded
+console.log('challengeOfTheDay.js loaded');
+
+/**
+ * Challenge of the Day functionality
+ * Displays a random coding challenge when the button is clicked
+ */
+
+// Array of coding challenges
+const challenges = [
+  {"title": "Two Sum", "difficulty": "Easy", "url": "https://leetcode.com/problems/two-sum/"},
+  {"title": "Add Two Numbers", "difficulty": "Medium", "url": "https://leetcode.com/problems/add-two-numbers/"},
+  {"title": "Longest Substring Without Repeating Characters", "difficulty": "Medium", "url": "https://leetcode.com/problems/longest-substring-without-repeating-characters/"},
+  {"title": "Longest Palindromic Substring", "difficulty": "Medium", "url": "https://leetcode.com/problems/longest-palindromic-substring/"},
+  {"title": "Zigzag Conversion", "difficulty": "Medium", "url": "https://leetcode.com/problems/zigzag-conversion/"},
+  {"title": "Reverse Integer", "difficulty": "Medium", "url": "https://leetcode.com/problems/reverse-integer/"},
+  {"title": "String to Integer (atoi)", "difficulty": "Medium", "url": "https://leetcode.com/problems/string-to-integer-atoi/"},
+  {"title": "Palindrome Number", "difficulty": "Easy", "url": "https://leetcode.com/problems/palindrome-number/"},
+  {"title": "Container With Most Water", "difficulty": "Medium", "url": "https://leetcode.com/problems/container-with-most-water/"},
+  {"title": "Roman to Integer", "difficulty": "Easy", "url": "https://leetcode.com/problems/roman-to-integer/"},
+  {"title": "Longest Common Prefix", "difficulty": "Easy", "url": "https://leetcode.com/problems/longest-common-prefix/"},
+  {"title": "3Sum", "difficulty": "Medium", "url": "https://leetcode.com/problems/3sum/"},
+  {"title": "3Sum Closest", "difficulty": "Medium", "url": "https://leetcode.com/problems/3sum-closest/"},
+  {"title": "Letter Combinations of a Phone Number", "difficulty": "Medium", "url": "https://leetcode.com/problems/letter-combinations-of-a-phone-number/"},
+  {"title": "4Sum", "difficulty": "Medium", "url": "https://leetcode.com/problems/4sum/"},
+  {"title": "Remove Nth Node From End of List", "difficulty": "Medium", "url": "https://leetcode.com/problems/remove-nth-node-from-end-of-list/"},
+  {"title": "Valid Parentheses", "difficulty": "Easy", "url": "https://leetcode.com/problems/valid-parentheses/"},
+  {"title": "Merge Two Sorted Lists", "difficulty": "Easy", "url": "https://leetcode.com/problems/merge-two-sorted-lists/"},
+  {"title": "Generate Parentheses", "difficulty": "Medium", "url": "https://leetcode.com/problems/generate-parentheses/"},
+  {"title": "Merge k Sorted Lists", "difficulty": "Hard", "url": "https://leetcode.com/problems/merge-k-sorted-lists/"},
+  {"title": "Swap Nodes in Pairs", "difficulty": "Medium", "url": "https://leetcode.com/problems/swap-nodes-in-pairs/"},
+  {"title": "Remove Duplicates from Sorted Array", "difficulty": "Easy", "url": "https://leetcode.com/problems/remove-duplicates-from-sorted-array/"},
+  {"title": "Remove Element", "difficulty": "Easy", "url": "https://leetcode.com/problems/remove-element/"},
+  {"title": "Find the Index of the First Occurrence in a String", "difficulty": "Easy", "url": "https://leetcode.com/problems/find-the-index-of-the-first-occurrence-in-a-string/"},
+  {"title": "Search in Rotated Sorted Array", "difficulty": "Medium", "url": "https://leetcode.com/problems/search-in-rotated-sorted-array/"},
+  {"title": "Search Insert Position", "difficulty": "Easy", "url": "https://leetcode.com/problems/search-insert-position/"},
+  {"title": "Valid Sudoku", "difficulty": "Medium", "url": "https://leetcode.com/problems/valid-sudoku/"},
+  {"title": "Count and Say", "difficulty": "Medium", "url": "https://leetcode.com/problems/count-and-say/"},
+  {"title": "Combination Sum", "difficulty": "Medium", "url": "https://leetcode.com/problems/combination-sum/"},
+  {"title": "Combination Sum II", "difficulty": "Medium", "url": "https://leetcode.com/problems/combination-sum-ii/"},
+  {"title": "Multiply Strings", "difficulty": "Medium", "url": "https://leetcode.com/problems/multiply-strings/"},
+  {"title": "Jump Game II", "difficulty": "Medium", "url": "https://leetcode.com/problems/jump-game-ii/"},
+  {"title": "Permutations", "difficulty": "Medium", "url": "https://leetcode.com/problems/permutations/"},
+  {"title": "Rotate Image", "difficulty": "Medium", "url": "https://leetcode.com/problems/rotate-image/"},
+  {"title": "Group Anagrams", "difficulty": "Medium", "url": "https://leetcode.com/problems/group-anagrams/"},
+  {"title": "Maximum Subarray", "difficulty": "Medium", "url": "https://leetcode.com/problems/maximum-subarray/"},
+  {"title": "Spiral Matrix", "difficulty": "Medium", "url": "https://leetcode.com/problems/spiral-matrix/"},
+  {"title": "Jump Game", "difficulty": "Medium", "url": "https://leetcode.com/problems/jump-game/"},
+  {"title": "Merge Intervals", "difficulty": "Medium", "url": "https://leetcode.com/problems/merge-intervals/"},
+  {"title": "Insert Interval", "difficulty": "Medium", "url": "https://leetcode.com/problems/insert-interval/"},
+  {"title": "Length of Last Word", "difficulty": "Easy", "url": "https://leetcode.com/problems/length-of-last-word/"},
+  {"title": "Spiral Matrix II", "difficulty": "Medium", "url": "https://leetcode.com/problems/spiral-matrix-ii/"},
+  {"title": "Rotate List", "difficulty": "Medium", "url": "https://leetcode.com/problems/rotate-list/"},
+  {"title": "Unique Paths", "difficulty": "Medium", "url": "https://leetcode.com/problems/unique-paths/"},
+  {"title": "Unique Paths II", "difficulty": "Medium", "url": "https://leetcode.com/problems/unique-paths-ii/"},
+  {"title": "Minimum Path Sum", "difficulty": "Medium", "url": "https://leetcode.com/problems/minimum-path-sum/"},
+  {"title": "Climbing Stairs", "difficulty": "Easy", "url": "https://leetcode.com/problems/climbing-stairs/"},
+  {"title": "Simplify Path", "difficulty": "Medium", "url": "https://leetcode.com/problems/simplify-path/"},
+  {"title": "Set Matrix Zeroes", "difficulty": "Medium", "url": "https://leetcode.com/problems/set-matrix-zeroes/"},
+  {"title": "Search a 2D Matrix", "difficulty": "Medium", "url": "https://leetcode.com/problems/search-a-2d-matrix/"},
+  {"title": "Sort Colors", "difficulty": "Medium", "url": "https://leetcode.com/problems/sort-colors/"}
+];
+
+// Function to show loading state
+function showLoading() {
+    const container = document.getElementById('challenge-container');
+    if (container) {
+        container.innerHTML = `
+            <div class="loading-text">
+                <div class="spinner"></div>
+                <span>Generating your challenge...</span>
+            </div>
+        `;
+    }
+}
+
+// Function to generate a random challenge
+function generateRandomChallenge() {
+    // Show loading state
+    showLoading();
+    
+    // Simulate API call delay
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            // Generate a random index
+            const randomIndex = Math.floor(Math.random() * challenges.length);
+            resolve(challenges[randomIndex]);
+        }, 500); // 0.5 second delay for better UX
+    });
+}
+
+// Function to display a challenge
+function displayChallenge(challenge) {
+    const container = document.getElementById('challenge-container');
+    if (container) {
+        container.innerHTML = `
+            <div class="challenge-card">
+                <h3>${challenge.title}</h3>
+                <span class="difficulty ${challenge.difficulty.toLowerCase()}">
+                    <i class="fas fa-${challenge.difficulty === 'Easy' ? 'star' : challenge.difficulty === 'Medium' ? 'star-half-alt' : 'star'}"></i>
+                    ${challenge.difficulty}
+                </span>
+                <div class="challenge-actions">
+                    <a href="${challenge.url}" target="_blank" class="btn btn-solve">
+                        <i class="fas fa-code"></i> Solve Challenge
+                    </a>
+                    <a href="https://leetcode.com/" target="_blank" class="btn btn-leetcode">
+                        <i class="fab fa-java"></i> View on LeetCode
+                    </a>
+                </div>
+            </div>
+        `;
+    }
+}
+
+// Add event listener when the DOM is fully loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Get the button element
+    const generateBtn = document.getElementById('generateChallengeBtn');
+    
+    // Add click event listener to the button
+    if (generateBtn) {
+        generateBtn.addEventListener('click', async function() {
+            // Add click effect
+            this.classList.add('active');
+            
+            // Generate and display a random challenge
+            const randomChallenge = await generateRandomChallenge();
+            displayChallenge(randomChallenge);
+            
+            // Remove active class after animation completes
+            setTimeout(() => {
+                this.classList.remove('active');
+            }, 200);
+        });
+        
+        // Trigger a click after a short delay to show the first challenge automatically
+        setTimeout(() => {
+            generateBtn.click();
+        }, 300);
+    }
+});
diff --git a/styles/challengeOfTheDay.css b/styles/challengeOfTheDay.css
new file mode 100644
index 00000000..3b5552b0
--- /dev/null
+++ b/styles/challengeOfTheDay.css
@@ -0,0 +1,216 @@
+/* Challenge of the Day Styles */
+#challengeOfTheDay {
+    background: #ffffff;
+    padding: 3rem 0;
+    margin: 2rem 0;
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
+}
+
+#challengeOfTheDay h1 {
+    color: #2d3748;
+    font-size: 2.2rem;
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 1.5rem;
+    position: relative;
+    display: inline-block;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+#challengeOfTheDay h1::after {
+    content: '';
+    position: absolute;
+    width: 60px;
+    height: 4px;
+    background: #4f46e5;
+    bottom: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 2px;
+}
+
+#generateChallengeBtn {
+    background: #4f46e5;
+    color: white;
+    border: none;
+    padding: 1rem 2.5rem;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 1.1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin: 1.5rem auto 2.5rem;
+    display: block;
+    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
+}
+
+#generateChallengeBtn:hover {
+    background: #4338ca;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35);
+}
+
+#challenge-container {
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1.5rem;
+}
+
+.challenge-card {
+    background: #f8fafc;
+    border-radius: 12px;
+    padding: 2.5rem;
+    max-width: 800px;
+    width: 100%;
+    text-align: center;
+    border: 1px solid #e2e8f0;
+    transition: all 0.3s ease;
+}
+
+.challenge-card h3 {
+    color: #1a202c;
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    line-height: 1.3;
+}
+
+.difficulty {
+    display: inline-block;
+    padding: 0.5rem 1.2rem;
+    border-radius: 20px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    margin-bottom: 2rem;
+}
+
+.difficulty.easy {
+    background: #dcfce7;
+    color: #166534;
+}
+
+.difficulty.medium {
+    background: #dbeafe;
+    color: #1e40af;
+}
+
+.difficulty.hard {
+    background: #fee2e2;
+    color: #991b1b;
+}
+
+.challenge-actions {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.challenge-actions .btn {
+    padding: 0.8rem 1.8rem;
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 0.95rem;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-solve {
+    background: #4f46e5;
+    color: white;
+}
+
+.btn-solve:hover {
+    background: #4338ca;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+}
+
+.btn-leetcode {
+    background: #ffa116;
+    color: #1a1a1a;
+    font-weight: 700;
+}
+
+.btn-leetcode:hover {
+    background: #e68a00;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(255, 161, 22, 0.3);
+}
+
+.challenge-actions .btn i {
+    margin-right: 8px;
+    font-size: 1.1em;
+}
+
+/* Loading state */
+.loading-text {
+    color: #4a5568;
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.loading-text .spinner {
+    width: 20px;
+    height: 20px;
+    border: 3px solid rgba(79, 70, 229, 0.2);
+    border-radius: 50%;
+    border-top-color: #4f46e5;
+    animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    #challengeOfTheDay {
+        padding: 2rem 1rem;
+        margin: 1.5rem 0.5rem;
+        border-radius: 12px;
+    }
+    
+    #challengeOfTheDay h1 {
+        font-size: 1.8rem;
+    }
+    
+    .challenge-card {
+        padding: 1.8rem 1.25rem;
+    }
+    
+    .challenge-card h3 {
+        font-size: 1.5rem;
+    }
+    
+    #generateChallengeBtn {
+        padding: 0.9rem 2rem;
+        font-size: 1rem;
+        margin: 1.2rem auto 2rem;
+    }
+    
+    .challenge-actions {
+        flex-direction: column;
+        gap: 0.8rem;
+    }
+    
+    .challenge-actions .btn {
+        width: 100%;
+        padding: 0.8rem;
+    }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}