Added levels

Sulagna-Dutta-Roy · Aug 2, 2024 · 85acdc0 · 85acdc0
1 parent 707369a
commit 85acdc0
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 363 deletions.
diff --git a/Movie Finder/index.html b/Movie Finder/index.html
@@ -8,35 +8,31 @@
     <!-- font awesome icons cdn -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <!-- custom css -->
-    <link rel = "stylesheet" href = "src/style.css">
+    <link rel="stylesheet" href="src/style.css">
 </head>
 <body>
-
-    <div class = "wrapper">
+    <div class="wrapper">
         <!-- search container -->
-        <div class = "search-container">
-            <div class = "search-element">
+        <div class="search-container">
+            <div class="search-element">
                 <h3>Search Movie:</h3>
-                <input type = "text" class = "form-control" placeholder="Search Movie Title ..." id = "movie-search-box" onkeyup="findMovies()" onclick = "findMovies()">
-
-                <div class = "search-list" id = "search-list">
-                </div>
+                <input type="text" class="form-control" placeholder="Search Movie Title ..." id="movie-search-box" onkeyup="findMovies()" onclick="findMovies()">
+                <div class="search-list" id="search-list"></div>
             </div>
         </div>
         <!-- end of search container -->
 
         <!-- result container -->
-        <div class = "container">
-            <div class = "result-container">
-                <div class = "result-grid" id = "result-grid">
-                </div>
+        <div class="container">
+            <div class="result-container">
+                <div class="result-grid" id="result-grid"></div>
+                <button id="theme-toggle">Toggle Theme</button>
             </div>
         </div>
         <!-- end of result container -->
     </div>
 
-
     <!-- movie app js -->
-    <script src = "scripts/script.js"></script>
+    <script src="scripts/script.js"></script>
 </body>
-</html>
+</html>
diff --git a/Movie Finder/scripts/script.js b/Movie Finder/scripts/script.js
@@ -86,6 +86,27 @@ function displayMovieDetails(details){
     `;
 }
 
+const themeToggle = document.getElementById('theme-toggle');
+
+themeToggle.addEventListener('click', () => {
+    if (document.body.classList.contains('light-mode')) {
+        document.body.classList.remove('light-mode');
+        document.body.classList.add('dark-mode');
+    } else {
+        document.body.classList.remove('dark-mode');
+        document.body.classList.add('light-mode');
+    }
+});
+
+// You might want to initialize the theme based on user preference or default to dark mode
+document.addEventListener('DOMContentLoaded', () => {
+    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    if (prefersDarkScheme) {
+        document.body.classList.add('dark-mode');
+    } else {
+        document.body.classList.add('light-mode');
+    }
+});
 
 window.addEventListener('click', (event) => {
     if(event.target.className != "form-control"){