codemistic · Gobind147 · Sep 6, 2024 · Sep 6, 2024 · Sep 6, 2024 · Sep 6, 2024
diff --git a/DarkMode Chrome Extension/README.md b/DarkMode Chrome Extension/README.md
@@ -0,0 +1,78 @@
+<div align="center">
+  <h3 align="center">Dark Mode for Websites</h3>
+
+  <div>
+    <img src="https://img.shields.io/badge/-JavaScript-black?style=for-the-badge&logoColor=white&logo=javascript&color=F7DF1E" alt="javascript" />
+    <img src="https://img.shields.io/badge/-HTML5-black?style=for-the-badge&logoColor=white&logo=html5&color=E34F26" alt="html5" />
+    <img src="https://img.shields.io/badge/-CSS3-black?style=for-the-badge&logoColor=white&logo=css3&color=1572B6" alt="css3" />
+    <img src="https://img.shields.io/badge/-Chrome%20Extensions-black?style=for-the-badge&logoColor=white&logo=google-chrome&color=4285F4" alt="chrome-extensions" />
+  </div>
+
+  <div align="center">
+    A simple and efficient Chrome extension that enables dark mode for any website. This extension inverts the colors of web pages to provide a more comfortable viewing experience in low-light environments.
+  </div>
+</div>
+
+## 📋 <a name="table">Table of Contents</a>
+
+1. 🤖 [Introduction](#introduction)
+2. ⚙️ [Tech Stack](#tech-stack)
+3. 🔋 [Features](#features)
+4. 🤸 [Quick Start](#quick-start)
+5. 🕸️ [Usage](#usage)
+
+## <a name="introduction">🤖 Introduction</a>
+
+The **Dark Mode for Websites** Chrome extension is designed to make browsing more comfortable by applying a dark theme to any website. Whether you're working late at night or simply prefer a darker interface, this extension inverts the colors of web pages to reduce eye strain and provide a pleasant browsing experience.
+
+## <a name="tech-stack">⚙️ Tech Stack</a>
+
+- JavaScript
+- HTML5
+- CSS3
+- Chrome Extensions API
+
+## <a name="features">🔋 Features</a>
+
+👉 **Toggle Dark Mode**: Easily switch dark mode on or off for any website with a simple toggle.
+
+👉 **Dynamic Color Inversion**: Automatically inverts the colors of web pages while preserving the natural look of images and videos.
+
+👉 **Persistent Settings**: Remembers your dark mode preferences across different browsing sessions.
+
+👉 **Lightweight and Fast**: The extension is designed to be lightweight and runs efficiently without slowing down your browser.
+
+## <a name="quick-start">🤸 Quick Start</a>
+
+Follow these steps to set up the Chrome extension locally on your machine.
+
+**Prerequisites**
+
+Make sure you have the following:
+
+- Google Chrome browser
+
+**Cloning the Repository**
+
+```bash
+git clone https://github.com/Gobind147/Dark-Mode-Extension.git
+cd Dark-Mode-Extension
+```
+
+Loading the Extension in Chrome
+
+1. Open Chrome and navigate to chrome://extensions/.
+2. Enable "Developer mode" by toggling the switch in the upper right corner.
+3. Click on "Load unpacked" and select the folder where you cloned the repository.
+4. The extension should now appear in your list of installed extensions.
+
+
+## <a name="usage">🕸️ Usage</a>
+
+**Enable Dark Mode**: Click on the extension icon in the Chrome toolbar and toggle the switch to enable or disable dark mode for the current website.
+
+**Persistent Settings**: The extension will remember your settings for each site, so you don't have to re-enable dark mode every time.
+
+**Customize**: Modify the CSS and JavaScript in the content.js file to adjust the dark mode settings according to your preferences.
+
+
diff --git a/DarkMode Chrome Extension/background.js b/DarkMode Chrome Extension/background.js
@@ -0,0 +1,10 @@
+chrome.runtime.onInstalled.addListener(() => {
+    if (chrome.storage) {
+      chrome.storage.sync.set({ darkMode: false }, () => {
+        console.log('Dark mode setting initialized to false.');
+      });
+    } else {
+      console.error('chrome.storage is not available');
+    }
+  });
+
diff --git a/DarkMode Chrome Extension/content.js b/DarkMode Chrome Extension/content.js
@@ -0,0 +1,27 @@
+// Function to toggle dark mode
+function toggleDarkMode(isDarkMode) {
+    if (isDarkMode) {
+      document.documentElement.style.filter = 'invert(1) hue-rotate(180deg)';
+      document.querySelectorAll('img, picture, video').forEach((element) => {
+        element.style.filter = 'invert(1) hue-rotate(180deg)';
+      });
+    } else {
+      document.documentElement.style.filter = '';
+      document.querySelectorAll('img, picture, video').forEach((element) => {
+        element.style.filter = '';
+      });
+    }
+  }
+
+  // Listen for changes in dark mode setting
+  chrome.storage.sync.get('darkMode', ({ darkMode }) => {
+    toggleDarkMode(darkMode);
+  });
+
+  // Listen for messages from popup
+  chrome.runtime.onMessage.addListener((message) => {
+    if (message.command === 'toggle-dark-mode') {
+      toggleDarkMode(message.darkMode);
+    }
+  });
+
diff --git a/DarkMode Chrome Extension/icons/app.html b/DarkMode Chrome Extension/icons/app.html
@@ -0,0 +1 @@
+// comment
diff --git a/DarkMode Chrome Extension/icons/icon128.png b/DarkMode Chrome Extension/icons/icon128.png
diff --git a/DarkMode Chrome Extension/icons/icon16.png b/DarkMode Chrome Extension/icons/icon16.png
diff --git a/DarkMode Chrome Extension/icons/icon48.png b/DarkMode Chrome Extension/icons/icon48.png
diff --git a/DarkMode Chrome Extension/manifest.json b/DarkMode Chrome Extension/manifest.json
@@ -0,0 +1,34 @@
+{
+    "manifest_version": 3,
+    "name": "Dark Mode for Websites",
+    "version": "1.0",
+    "description": "Apply a dark mode to any website.",
+    "permissions": [
+      "activeTab",
+      "scripting",
+      "storage"
+    ],
+    "action": {
+      "default_popup": "popup.html",
+      "default_icon": {
+        "16": "icons/icon16.png",
+        "48": "icons/icon48.png",
+        "128": "icons/icon128.png"
+      }
+    },
+    "background": {
+      "service_worker": "background.js"
+    },
+    "content_scripts": [
+      {
+        "matches": ["<all_urls>"],
+        "js": ["content.js"]
+      }
+    ],
+    "icons": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  }
+
diff --git a/DarkMode Chrome Extension/popup.html b/DarkMode Chrome Extension/popup.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Dark Mode Toggle</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div id="toggle-container">
+    <label for="dark-mode-toggle">Enable Dark Mode</label>
+    <input type="checkbox" id="dark-mode-toggle">
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>
diff --git a/DarkMode Chrome Extension/popup.js b/DarkMode Chrome Extension/popup.js
@@ -0,0 +1,22 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const toggle = document.getElementById('dark-mode-toggle');
+
+    // Load the current state of dark mode
+    chrome.storage.sync.get('darkMode', ({ darkMode }) => {
+      toggle.checked = darkMode;
+    });
+
+    // Handle toggle change
+    toggle.addEventListener('change', () => {
+      const darkMode = toggle.checked;
+      chrome.storage.sync.set({ darkMode });
+      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        chrome.scripting.executeScript({
+          target: { tabId: tabs[0].id },
+          files: ['content.js'],
+        });
+        chrome.tabs.sendMessage(tabs[0].id, { command: 'toggle-dark-mode', darkMode });
+      });
+    });
+  });
+
diff --git a/DarkMode Chrome Extension/styles.css b/DarkMode Chrome Extension/styles.css
@@ -0,0 +1,15 @@
+body {
+    font-family: Arial, sans-serif;
+    padding: 20px;
+    min-width: 150px;
+  }
+
+  #toggle-container {
+    display: flex;
+    align-items: center;
+  }
+
+  #dark-mode-toggle {
+    margin-left: 10px;
+  }
+
diff --git a/MovieBase/README.md b/MovieBase/README.md
@@ -0,0 +1,88 @@
+<div align="center">
+  <h3 align="center">MovieBase</h3>
+
+  <div>
+    <img src="https://img.shields.io/badge/-JavaScript-black?style=for-the-badge&logoColor=white&logo=javascript&color=F7DF1E" alt="javascript" />
+    <img src="https://img.shields.io/badge/-HTML5-black?style=for-the-badge&logoColor=white&logo=html5&color=E34F26" alt="html5" />
+    <img src="https://img.shields.io/badge/-CSS3-black?style=for-the-badge&logoColor=white&logo=css3&color=1572B6" alt="css3" />
+    <img src="https://img.shields.io/badge/-OMDb%20API-black?style=for-the-badge&logoColor=white&color=5586A3" alt="omdb-api" />
+  </div>
+
+  <div align="center">
+    An interactive movie discovery application that allows users to search for movies, filter results by genre, and sort movies by rating or votes using the OMDb API.
+  </div>
+</div>
+
+## Demo
+[moviebase.webm](https://github.com/user-attachments/assets/003e6a54-ad0a-4c96-afa5-34389aa08877)
+
+
+
+## 📋 <a name="table">Table of Contents</a>
+
+1. 🤖 [Introduction](#introduction)
+2. ⚙️ [Tech Stack](#tech-stack)
+3. 🔋 [Features](#features)
+4. 🤸 [Quick Start](#quick-start)
+5. 🕸️ [Usage](#usage)
+
+## <a name="introduction">🤖 Introduction</a>
+
+The **MovieBase** app is a user-friendly movie discovery platform that lets users search for movies and see essential details like rating, votes, genre, and plot. Users can filter results by genre, and sort movies by highest/lowest rating or most/least votes, all while fetching data from the OMDb API.
+
+## <a name="tech-stack">⚙️ Tech Stack</a>
+
+- JavaScript
+- HTML5
+- CSS3
+- OMDb API
+
+## <a name="features">🔋 Features</a>
+
+👉 **Search for Movies**: Enter the name of any movie to fetch relevant results.
+
+👉 **Filter by Genre**: Filter the search results by selecting a specific genre from the dropdown menu.
+
+👉 **Sort Movies**: Sort the search results by highest rating, lowest rating, most votes, or least votes.
+
+👉 **Movie Details**: View essential details for each movie, including rating, total votes, genre, plot, and cast.
+
+👉 **Pagination**: Navigate through the results using "Previous" and "Next" buttons for pagination.
+
+## <a name="quick-start">🤸 Quick Start</a>
+
+Follow these steps to set up the MovieBase app locally on your machine.
+
+### **Prerequisites**
+
+Make sure you have the following:
+
+- A modern web browser (Google Chrome, Firefox, etc.)
+- API Key from OMDb API
+
+### **Cloning the Repository**
+
+```bash
+git clone https://github.com/YourUsername/MovieBase.git
+cd MovieBase
+```
+
+
+Getting Your API Key
+
+- Go to the OMDb API website and sign up for an API key.
+- Replace 'YOUR_API_KEY' in the script.js file with your actual API key.
+
+Running the Application
+- Open the index.html file in your browser.
+- Enter a movie title and press the "Search" button to display the movie data.
+## <a name="usage">🕸️ Usage</a>
+**Search for a Movie**: Type the name of the movie in the search bar and press the "Search" button to view the movie details.
+
+**Filter by Genre**: Select a genre from the dropdown to filter the results by a specific genre.
+
+**Sort Movies**: Choose a sorting option (highest rating, lowest rating, most votes, or least votes) to re-arrange the movies based on that criteria.
+
+**View Movie Details**: For each movie, you can see the rating, total votes, genre, plot, and cast information.
+
+**Pagination**: Use the "Previous" and "Next" buttons to navigate through the paginated search results.
diff --git a/MovieBase/index.html b/MovieBase/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-sacale=1.0">
+    <title>Movie App</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Movie Information</h1>
+
+
+        <div class="search-container">
+            <input type="text" id="movie-search" placeholder="Enter Movie Title">
+            <button id="search-button">Search</button>
+        </div>
+
+
+        <div class="filter-sort-container">
+            <select id="genre-filter">
+                <option value="">All Genres</option>
+            </select>
+
+
+            <select id="sort-options">
+                <option value="">Sort By</option>
+                <option value="highestRating">Highest Rating</option>
+                <option value="lowestRating">Lowest Rating</option>
+                <option value="mostVotes">Most Votes</option>
+                <option value="leastVotes">Least Votes</option>
+            </select>
+        </div>
+
+
+        <div id="movie-list"></div>
+
+
+        <div class="pagination">
+            <button id="prev-button" disabled>Previous</button>
+            <button id="next-button" disabled>Next</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>