├── 38-NASA API for Astronomy Data
    ├── index.js
    ├── style.css
    └── index.html
├── 37-Currency Exchange Rates using API
    ├── index.js
    ├── style.css
    └── index.html
├── note.txt
├── 92-Lazy Loading Images
    ├── readme.md
    ├── images
    │   ├── image1.jpg
    │   ├── image2.jpg
    │   └── image3.jpg
    ├── styles.css
    ├── index.html
    └── script.js
├── screen.png
├── screenshot.png
├── 04-Tip Calculator
    ├── index.js
    ├── style.css
    └── index.html
├── public
    ├── logo.png
    ├── 100PlusJS.png
    ├── 100PlusJS_logo.png
    ├── vercel.svg
    ├── window.svg
    ├── file.svg
    ├── globe.svg
    └── next.svg
├── 05-Temperature Converter
    ├── index.js
    ├── style.css
    └── index.html
├── src
    ├── app
    │   ├── favicon.ico
    │   ├── page.tsx
    │   └── globals.css
    └── components
    │   └── ComingSoon.tsx
├── 75-Chess Game
    ├── package.json
    ├── index.html
    ├── script.js
    ├── style.css
    ├── .gitignore
    └── server.js
├── 76-Hangman
    ├── images
    │   └── hangman-2.png
    ├── style.css
    └── index.html
├── postcss.config.mjs
├── 64-Geographical Data Visualization
    ├── styles.css
    └── index.html
├── 70-Social Media Analytics Dashboard
    ├── app.js
    ├── styles.css
    └── index.html
├── 90-Responsive Design for Accessibility
    ├── script.js
    ├── readme.md
    ├── styles.css
    └── index.html
├── next.config.ts
├── 69-Population Density Map
    ├── styles.css
    ├── index.html
    └── app.js
├── 58-Browser Extension
    ├── popup
    │   ├── content.js
    │   ├── popup.css
    │   ├── popup.js
    │   └── popup.html
    └── manifest.json
├── 61-Interactive Charts
    ├── styles.css
    └── index.html
├── 62-Heatmap Generator
    ├── styles.css
    └── index.html
├── 89-Aria Role Implementation
    ├── script.js
    ├── styles.css
    └── index.html
├── 17-Music Player
    ├── index.js
    ├── style.css
    └── index.html
├── 84-Text Resize
    ├── styles.css
    ├── app.js
    └── index.html
├── 88-High-Contrast Mode
    ├── styles-high-contrast.css
    ├── script.js
    ├── styles.css
    └── index.html
├── 95-Reducing DOM Manipulations
    ├── styles.css
    ├── index.html
    └── script.js
├── 54-Unit Converter
    ├── styles.css
    ├── index.html
    └── script.js
├── 63-Dashboard with Graphs and Metrics
    └── styles.css
├── 24-Photo Editing Tool
    ├── styles.css
    └── index.html
├── 81-Screen Reader Compatibility
    ├── styles.css
    ├── app.js
    └── index.html
├── 94-Caching Mechanism
    ├── styles.css
    ├── script.js
    └── index.html
├── 68-Visualizing COVID-19 Dat
    ├── styles.css
    └── index.html
├── 08-Countdown Timer
    ├── style.css
    ├── index.html
    └── script.js
├── 55-Markdown Editor
    ├── script.js
    ├── styles.css
    └── index.html
├── 16-Pomodoro Timer
    ├── style.css
    ├── index.html
    └── index.js
├── 51-File Uploader
    ├── styles.css
    ├── index.html
    └── script.js
├── 41-Drawing App
    ├── styles.css
    ├── index.html
    └── script.js
├── 53-QR Code Generator
    ├── styles.css
    ├── script.js
    └── index.html
├── 73-2048
    ├── index.html
    └── styles.css
├── 82-Keyboard Navigation Improvement
    ├── styles.css
    └── index.html
├── 96-Memory Leak Detection
    ├── styles.css
    ├── index.html
    └── script.js
├── 83-Contrast Checker
    ├── styles.css
    ├── index.html
    └── readme.md
├── 97-Network Performance Analyzer
    ├── styles.css
    ├── index.html
    └── script.js
├── 56-Voice Assistant
    ├── styles.css
    ├── index.html
    └── script.js
├── 13-Memory Game
    ├── index.html
    └── style.css
├── 28-AI-powered Recommendation System
    ├── index.html
    └── script.js
├── 36-News Aggregator
    ├── style.css
    ├── index.html
    └── index.js
├── 49-Color Palette Generator
    ├── styles.css
    └── index.html
├── 71-Tic Tac Toe
    ├── index.html
    └── styles.css
├── 85-Color Blindness Simulator
    ├── styles.css
    └── index.html
├── 100-Code Splitting
    ├── styles.css
    ├── index.html
    └── script.js
├── 86-Speech Recognition Interface
    ├── styles.css
    └── index.html
├── eslint.config.mjs
├── 98-Minification and Bundling
    ├── styles.css
    ├── index.html
    └── script.js
├── 99-Tree Shaking for Unused Code
    ├── styles.css
    └── index.html
├── 93-Debouncing and Throttling Functions
    ├── styles.css
    └── index.html
├── 46-Music Visualizer
    ├── styles.css
    └── index.html
├── 72-Snake Game
    ├── styles.css
    └── index.html
├── 35-Weather Forecast using OpenWeatherMap API
    ├── style.css
    ├── index.html
    └── app.js
├── 25-Cryptocurrency Tracker
    ├── styles.css
    └── index.html
├── 20-Blogging Platform
    ├── styles.css
    ├── index.html
    └── script.js
├── 80-Platformer Game
    ├── style.css
    └── index.html
├── 60-Clipboard Manager
    ├── styles.css
    └── index.html
├── 10-Currency Converter
    ├── style.css
    └── index.html
├── 11-Weather App
    ├── style.css
    ├── index.html
    └── index.js
├── 66-Stock Market Tracker with Graphs
    ├── styles.css
    └── index.html
├── 09-BMI Calculator
    ├── style.css
    ├── script.js
    └── index.html
├── .gitignore
├── 01-To-Do List App
    ├── script.js
    ├── index.html
    └── style.css
├── 78-Battleship
    ├── index.html
    └── style.css
├── 67-Polls and Survey Data Visualization
    ├── styles.css
    └── index.html
├── 14-Chat Application
    ├── style.css
    ├── index.html
    └── index.js
├── 91-Code Profiler and Optimizer
    ├── styles.css
    ├── readme.md
    ├── script.js
    └── index.html
├── 77-Memory Puzzle Game
    ├── index.html
    └── style.css
├── 57-Note-taking App
    ├── index.html
    └── styles.css
├── 22-E-commerce Website
    ├── index.html
    ├── styles.css
    └── script.js
├── 52-Password Generator
    ├── styles.css
    ├── script.js
    └── index.html
├── 50-Emoji Translator
    ├── styles.css
    ├── index.html
    └── script.js
├── 59-Calendar
    ├── index.html
    └── styles.css
├── 39-Random Joke Generator using Joke API
    ├── index.html
    ├── styles.css
    └── script.js
├── 65-Network Traffic Analyzer
    ├── index.html
    └── styles.css
├── 23-Real-time Chat Room
    ├── index.html
    ├── styles.css
    └── script.js
├── 15-Interactive Quiz
    ├── index.html
    └── style.css
├── 45-Text-based Adventure Game
    ├── index.html
    └── styles.css
├── package.json
├── 27-Job Board Platform
    ├── script.js
    ├── style.css
    └── index.html
├── 43-Interactive Storytelling
    ├── styles.css
    ├── index.html
    └── script.js
├── 07-Basic Image Slider
    ├── index.js
    └── style.css
├── 06-Random Quote Generator
    ├── index.html
    └── index.js
├── tsconfig.json
├── 40-Recipe Finder using Food API
    ├── index.html
    └── styles.css
├── 47-Meme Generator
    ├── script.js
    └── styles.css
├── 21-Social Media Dashboard
    ├── index.html
    ├── styles.css
    └── script.js
├── 87-Focus Management
    ├── index.html
    ├── styles.css
    └── script.js
├── 79-Crossword Puzzle
    ├── index.html
    └── style.css
├── 42-Virtual Piano
    ├── styles.css
    └── index.html
├── 48-Virtual Pet
    ├── index.html
    ├── script.js
    └── styles.css
├── 44-3D Cube Puzzle
    ├── index.html
    ├── script.js
    └── styles.css
├── 02-Simple Calculator
    ├── style.css
    └── index.html
├── 30-Video Streaming Platform
    └── index.html
├── LICENSE
├── 19-Car Rental Website
    ├── styles.css
    └── index.html
├── 26-Fitness Tracker
    ├── styles.css
    └── index.html
├── 34-GitHub Profile Viewer
    └── index.html
├── 03-Digital Clock
    └── index.html
└── 31-Google Maps Integration
    └── index.html


/38-NASA API for Astronomy Data/index.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/37-Currency Exchange Rates using API/index.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/37-Currency Exchange Rates using API/style.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/note.txt:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | - Project thumbnail size 
4 |     320 x 183
5 | 


--------------------------------------------------------------------------------
/92-Lazy Loading Images/readme.md:
--------------------------------------------------------------------------------
1 | # Lazy Loading Images :art:
2 | 
3 | loading...
4 | 


--------------------------------------------------------------------------------
/screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pradipchaudhary/100-Plus-JavaScript-Projects/HEAD/screen.png


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pradipchaudhary/100-Plus-JavaScript-Projects/HEAD/screenshot.png


--------------------------------------------------------------------------------
/04-Tip Calculator/index.js:
--------------------------------------------------------------------------------
1 | function initApp() {
2 |     console.log("init app");
3 | }
4 | 
5 | initApp();
6 | 


--------------------------------------------------------------------------------
/04-Tip Calculator/style.css:
--------------------------------------------------------------------------------
1 | * {
2 |     margin: 0;
3 |     padding: 0;
4 |     box-sizing: border-box;
5 | }
6 | 


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pradipchaudhary/100-Plus-JavaScript-Projects/HEAD/public/logo.png


--------------------------------------------------------------------------------
/05-Temperature Converter/index.js:
--------------------------------------------------------------------------------
1 | function initApp() {
2 |     console.log("init App");
3 | }
4 | 
5 | initApp();
6 | 


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pradipchaudhary/100-Plus-JavaScript-Projects/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/05-Temperature Converter/style.css:
--------------------------------------------------------------------------------
1 | * {
2 |     margin: 0;
3 |     padding: 0;
4 |     box-sizing: border-box;
5 | }
6 | 


--------------------------------------------------------------------------------
/public/100PlusJS.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pradipchaudhary/100-Plus-JavaScript-Projects/HEAD/public/100PlusJS.png


--------------------------------------------------------------------------------
/75-Chess Game/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "dependencies": {
3 |     "express": "^4.18.2",
4 |     "socket.io": "^4.7.4"
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/public/100PlusJS_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pradipchaudhary/100-Plus-JavaScript-Projects/HEAD/public/100PlusJS_logo.png


--------------------------------------------------------------------------------
/76-Hangman/images/hangman-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pradipchaudhary/100-Plus-JavaScript-Projects/HEAD/76-Hangman/images/hangman-2.png


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 |   plugins: {
3 |     "@tailwindcss/postcss": {},
4 |   },
5 | };
6 | 
7 | export default config;
8 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/92-Lazy Loading Images/images/image1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pradipchaudhary/100-Plus-JavaScript-Projects/HEAD/92-Lazy Loading Images/images/image1.jpg


--------------------------------------------------------------------------------
/92-Lazy Loading Images/images/image2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pradipchaudhary/100-Plus-JavaScript-Projects/HEAD/92-Lazy Loading Images/images/image2.jpg


--------------------------------------------------------------------------------
/92-Lazy Loading Images/images/image3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pradipchaudhary/100-Plus-JavaScript-Projects/HEAD/92-Lazy Loading Images/images/image3.jpg


--------------------------------------------------------------------------------
/64-Geographical Data Visualization/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | 
 6 | #map {
 7 |     height: 100vh;
 8 |     width: 100%;
 9 | }
10 | 


--------------------------------------------------------------------------------
/70-Social Media Analytics Dashboard/app.js:
--------------------------------------------------------------------------------
1 | // You can add JavaScript here to fetch and update real-time data from social media APIs
2 | // For this example, we're keeping it static.
3 | 


--------------------------------------------------------------------------------
/90-Responsive Design for Accessibility/script.js:
--------------------------------------------------------------------------------
1 | // You can add JavaScript functionality here as needed
2 | // For example, handling responsive navigation or other dynamic behavior
3 | 


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 | 
3 | const nextConfig: NextConfig = {
4 |   /* config options here */
5 |   reactCompiler: true,
6 | };
7 | 
8 | export default nextConfig;
9 | 


--------------------------------------------------------------------------------
/69-Population Density Map/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | #map {
 8 |     height: 100vh;
 9 |     width: 100%;
10 | }
11 | 


--------------------------------------------------------------------------------
/58-Browser Extension/popup/content.js:
--------------------------------------------------------------------------------
1 | chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
2 |     if (request.action === "content-script") {
3 |         alert(request.message);
4 |     }
5 | });
6 | 


--------------------------------------------------------------------------------
/61-Interactive Charts/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | #chart-container {
 8 |     width: 80vw;
 9 |     height: 60vh;
10 |     margin: 20px auto;
11 |     border: 1px solid #ccc;
12 | }
13 | 


--------------------------------------------------------------------------------
/62-Heatmap Generator/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | #heatmap-container {
 8 |     width: 80vw;
 9 |     height: 60vh;
10 |     margin: 20px auto;
11 |     border: 1px solid #ccc;
12 | }
13 | 


--------------------------------------------------------------------------------
/58-Browser Extension/popup/popup.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     padding: 10px;
 4 | }
 5 | 
 6 | .container {
 7 |     text-align: center;
 8 | }
 9 | 
10 | button {
11 |     padding: 8px 16px;
12 |     font-size: 16px;
13 |     cursor: pointer;
14 | }
15 | 


--------------------------------------------------------------------------------
/89-Aria Role Implementation/script.js:
--------------------------------------------------------------------------------
1 | document.addEventListener("DOMContentLoaded", function () {
2 |     const alertBtn = document.getElementById("alertBtn");
3 | 
4 |     alertBtn.addEventListener("click", function () {
5 |         alert("Hello, this is an alert!");
6 |     });
7 | });
8 | 


--------------------------------------------------------------------------------
/17-Music Player/index.js:
--------------------------------------------------------------------------------
 1 | const audio = document.getElementById("audio");
 2 | 
 3 | function playPause() {
 4 |     if (audio.paused) {
 5 |         audio.play();
 6 |     } else {
 7 |         audio.pause();
 8 |     }
 9 | }
10 | 
11 | function stop() {
12 |     audio.pause();
13 |     audio.currentTime = 0;
14 | }
15 | 


--------------------------------------------------------------------------------
/84-Text Resize/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 | }
 4 | 
 5 | #app {
 6 |     max-width: 600px;
 7 |     margin: 0 auto;
 8 |     padding: 20px;
 9 |     text-align: center;
10 | }
11 | 
12 | #textToResize {
13 |     font-size: 16px;
14 |     transition: font-size 0.3s ease-in-out;
15 | }
16 | 


--------------------------------------------------------------------------------
/88-High-Contrast Mode/styles-high-contrast.css:
--------------------------------------------------------------------------------
 1 | body.high-contrast {
 2 |     background-color: #000;
 3 |     color: #fff;
 4 | }
 5 | 
 6 | body.high-contrast button {
 7 |     background-color: #fff;
 8 |     color: #000;
 9 | }
10 | 
11 | body.high-contrast p {
12 |     border: 2px solid #fff;
13 |     padding: 10px;
14 | }
15 | 


--------------------------------------------------------------------------------
/95-Reducing DOM Manipulations/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     display: flex;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container {
11 |     text-align: center;
12 | }
13 | 
14 | button {
15 |     padding: 5px 10px;
16 | }
17 | 


--------------------------------------------------------------------------------
/54-Unit Converter/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container {
11 |     text-align: center;
12 | }
13 | 
14 | input,
15 | select,
16 | button {
17 |     margin: 10px;
18 | }
19 | 


--------------------------------------------------------------------------------
/63-Dashboard with Graphs and Metrics/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 | }
 4 | 
 5 | .chart-container {
 6 |     height: 300px;
 7 |     border: 1px solid #ddd;
 8 |     margin-bottom: 20px;
 9 | }
10 | 
11 | .metric-container {
12 |     padding: 20px;
13 |     border: 1px solid #ddd;
14 |     margin-bottom: 20px;
15 | }
16 | 


--------------------------------------------------------------------------------
/58-Browser Extension/popup/popup.js:
--------------------------------------------------------------------------------
1 | document.getElementById("clickMeButton").addEventListener("click", function () {
2 |     chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
3 |         chrome.tabs.sendMessage(tabs[0].id, {
4 |             action: "content-script",
5 |             message: "Hello from popup!",
6 |         });
7 |     });
8 | });
9 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import Header from "@/components/Header";
 2 | import Hero from "@/components/Hero";
 3 | 
 4 | export default function Home() {
 5 |   return (
 6 |     <div className="min-h-screen">
 7 |       {/* header */}
 8 |       <Header />
 9 |       {/* main  */}
10 |       <main>
11 |         <Hero />
12 |       </main>
13 | 
14 |     </div>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/24-Photo Editing Tool/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     margin: 0;
 4 |     padding: 20px;
 5 |     text-align: center;
 6 | }
 7 | 
 8 | canvas {
 9 |     border: 1px solid #ddd;
10 |     border-radius: 5px;
11 |     margin: 10px 0;
12 | }
13 | 
14 | button {
15 |     padding: 10px;
16 |     margin: 5px;
17 |     cursor: pointer;
18 | }
19 | 


--------------------------------------------------------------------------------
/81-Screen Reader Compatibility/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 | }
 4 | 
 5 | #app {
 6 |     max-width: 600px;
 7 |     margin: 0 auto;
 8 |     padding: 20px;
 9 |     text-align: center;
10 | }
11 | 
12 | button {
13 |     padding: 10px;
14 |     font-size: 16px;
15 | }
16 | 
17 | #content {
18 |     display: none;
19 |     margin-top: 20px;
20 | }
21 | 


--------------------------------------------------------------------------------
/88-High-Contrast Mode/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function () {
 2 |     const toggleBtn = document.getElementById("toggleBtn");
 3 |     const body = document.body;
 4 | 
 5 |     toggleBtn.addEventListener("click", toggleHighContrast);
 6 | 
 7 |     function toggleHighContrast() {
 8 |         body.classList.toggle("high-contrast");
 9 |     }
10 | });
11 | 


--------------------------------------------------------------------------------
/public/window.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>


--------------------------------------------------------------------------------
/public/file.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/94-Caching Mechanism/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     display: flex;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container {
11 |     text-align: center;
12 | }
13 | 
14 | input {
15 |     padding: 5px;
16 |     margin-right: 10px;
17 | }
18 | 
19 | button {
20 |     padding: 5px 10px;
21 | }
22 | 


--------------------------------------------------------------------------------
/68-Visualizing COVID-19 Dat/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     background-color: #f4f4f4;
 6 | }
 7 | 
 8 | .container {
 9 |     max-width: 800px;
10 |     margin: 20px auto;
11 |     padding: 20px;
12 |     background-color: #fff;
13 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
14 | }
15 | 
16 | canvas {
17 |     margin-top: 20px;
18 | }
19 | 


--------------------------------------------------------------------------------
/84-Text Resize/app.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function () {
 2 |     const fontSizeInput = document.getElementById("fontSize");
 3 |     const textToResize = document.getElementById("textToResize");
 4 | 
 5 |     fontSizeInput.addEventListener("input", function () {
 6 |         const newSize = fontSizeInput.value + "px";
 7 |         textToResize.style.fontSize = newSize;
 8 |     });
 9 | });
10 | 


--------------------------------------------------------------------------------
/08-Countdown Timer/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     display: flex;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .timer-container {
11 |     text-align: center;
12 | }
13 | 
14 | #timer {
15 |     font-size: 2em;
16 |     margin-bottom: 20px;
17 | }
18 | 
19 | button {
20 |     font-size: 1em;
21 |     margin: 5px;
22 | }
23 | 


--------------------------------------------------------------------------------
/17-Music Player/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     display: flex;
 4 |     flex-direction: column;
 5 |     align-items: center;
 6 |     justify-content: center;
 7 |     height: 100vh;
 8 |     margin: 0;
 9 | }
10 | 
11 | h1 {
12 |     margin-bottom: 20px;
13 | }
14 | 
15 | #audio-controls {
16 |     display: flex;
17 |     flex-direction: column;
18 |     align-items: center;
19 |     gap: 10px;
20 | }
21 | 


--------------------------------------------------------------------------------
/55-Markdown Editor/script.js:
--------------------------------------------------------------------------------
 1 | document
 2 |     .getElementById("markdownInput")
 3 |     .addEventListener("input", updateMarkdown);
 4 | 
 5 | function updateMarkdown() {
 6 |     const markdownInput = document.getElementById("markdownInput").value;
 7 |     const markdownPreview = document.getElementById("markdownPreview");
 8 |     const htmlOutput = marked(markdownInput);
 9 | 
10 |     markdownPreview.innerHTML = htmlOutput;
11 | }
12 | 


--------------------------------------------------------------------------------
/16-Pomodoro Timer/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     display: flex;
 4 |     flex-direction: column;
 5 |     align-items: center;
 6 |     justify-content: center;
 7 |     height: 100vh;
 8 |     margin: 0;
 9 | }
10 | 
11 | h1 {
12 |     margin-bottom: 20px;
13 | }
14 | 
15 | #timer {
16 |     font-size: 2em;
17 |     margin-bottom: 20px;
18 | }
19 | 
20 | #controls {
21 |     display: flex;
22 |     gap: 10px;
23 | }
24 | 


--------------------------------------------------------------------------------
/51-File Uploader/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container {
11 |     text-align: center;
12 | }
13 | 
14 | input {
15 |     margin: 10px 0;
16 | }
17 | 
18 | progress {
19 |     width: 100%;
20 |     margin: 10px 0;
21 | }
22 | 
23 | #status {
24 |     margin: 10px 0;
25 | }
26 | 


--------------------------------------------------------------------------------
/41-Drawing App/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     display: flex;
 5 |     align-items: center;
 6 |     justify-content: center;
 7 |     height: 100vh;
 8 |     background-color: #f4f4f4;
 9 | }
10 | 
11 | .container {
12 |     background-color: #fff;
13 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
14 | }
15 | 
16 | #drawingCanvas {
17 |     border: 1px solid #ccc;
18 |     cursor: crosshair;
19 | }
20 | 


--------------------------------------------------------------------------------
/53-QR Code Generator/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container {
11 |     text-align: center;
12 | }
13 | 
14 | label {
15 |     margin-top: 10px;
16 |     display: block;
17 | }
18 | 
19 | input {
20 |     margin: 10px 0;
21 | }
22 | 
23 | #qrcode {
24 |     margin-top: 20px;
25 | }
26 | 


--------------------------------------------------------------------------------
/73-2048/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>2048 Game || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="game-board"></div>
11 | 
12 |         <script src="app.js"></script>
13 |     </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/82-Keyboard Navigation Improvement/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 | }
 4 | 
 5 | #app {
 6 |     max-width: 600px;
 7 |     margin: 0 auto;
 8 |     padding: 20px;
 9 |     text-align: center;
10 | }
11 | 
12 | .navButton {
13 |     padding: 10px;
14 |     font-size: 16px;
15 |     cursor: pointer;
16 | }
17 | 
18 | #content {
19 |     margin-top: 20px;
20 |     border: 2px solid #ccc;
21 |     padding: 10px;
22 |     outline: none;
23 | }
24 | 


--------------------------------------------------------------------------------
/92-Lazy Loading Images/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | main {
 8 |     margin: 20px;
 9 | }
10 | 
11 | .image-container {
12 |     display: flex;
13 |     flex-wrap: wrap;
14 |     gap: 10px;
15 | }
16 | 
17 | img {
18 |     width: 100%;
19 |     max-width: 300px;
20 |     height: auto;
21 |     border: 1px solid #ddd;
22 |     border-radius: 8px;
23 |     margin-bottom: 10px;
24 | }
25 | 


--------------------------------------------------------------------------------
/96-Memory Leak Detection/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     display: flex;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container {
11 |     text-align: center;
12 | }
13 | 
14 | button {
15 |     padding: 10px 20px;
16 |     font-size: 16px;
17 |     margin: 10px;
18 | }
19 | 
20 | #memoryUsage {
21 |     margin-top: 20px;
22 |     font-size: 18px;
23 | }
24 | 


--------------------------------------------------------------------------------
/88-High-Contrast Mode/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     transition: background-color 0.3s, color 0.3s;
 4 | }
 5 | 
 6 | .container {
 7 |     text-align: center;
 8 |     padding: 20px;
 9 |     border-radius: 8px;
10 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
11 | }
12 | 
13 | button {
14 |     padding: 10px 20px;
15 |     font-size: 16px;
16 |     cursor: pointer;
17 | }
18 | 
19 | button:hover {
20 |     background-color: #ddd;
21 | }
22 | 


--------------------------------------------------------------------------------
/83-Contrast Checker/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 | }
 4 | 
 5 | #app {
 6 |     max-width: 600px;
 7 |     margin: 0 auto;
 8 |     padding: 20px;
 9 |     text-align: center;
10 | }
11 | 
12 | .colorInput {
13 |     margin-bottom: 10px;
14 |     padding: 5px;
15 |     font-size: 16px;
16 | }
17 | 
18 | #result {
19 |     margin-top: 20px;
20 | }
21 | 
22 | .pass {
23 |     color: #4caf50;
24 | }
25 | 
26 | .fail {
27 |     color: #ff5733;
28 | }
29 | 


--------------------------------------------------------------------------------
/89-Aria Role Implementation/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     text-align: center;
 4 |     padding: 20px;
 5 | }
 6 | 
 7 | #main {
 8 |     background-color: #f4f4f4;
 9 |     padding: 20px;
10 |     border-radius: 8px;
11 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
12 | }
13 | 
14 | button {
15 |     padding: 10px 20px;
16 |     font-size: 16px;
17 |     cursor: pointer;
18 | }
19 | 
20 | button:hover {
21 |     background-color: #ddd;
22 | }
23 | 


--------------------------------------------------------------------------------
/90-Responsive Design for Accessibility/readme.md:
--------------------------------------------------------------------------------
1 | # Accessibility Considerations:
2 | 
3 | -   Use semantic HTML elements (<nav>, <header>, <main>, <footer>) for better screen reader support.
4 | -   Ensure all interactive elements have focus styles.
5 | -   Implement ARIA roles and attributes as needed.
6 | -   Test your web app using accessibility tools like Axe or Lighthouse.
7 | -   Provide alternative text for images (alt attribute).
8 | -   Ensure proper color contrast for text.
9 | 


--------------------------------------------------------------------------------
/97-Network Performance Analyzer/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     display: flex;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container {
11 |     text-align: center;
12 | }
13 | 
14 | button {
15 |     padding: 10px 20px;
16 |     font-size: 16px;
17 |     margin: 10px;
18 | }
19 | 
20 | #resultContainer {
21 |     margin-top: 20px;
22 |     font-size: 18px;
23 | }
24 | 


--------------------------------------------------------------------------------
/56-Voice Assistant/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container {
11 |     text-align: center;
12 | }
13 | 
14 | button {
15 |     margin: 10px;
16 |     padding: 8px 16px;
17 |     font-size: 16px;
18 |     cursor: pointer;
19 | }
20 | 
21 | #output {
22 |     margin-top: 20px;
23 |     font-weight: bold;
24 | }
25 | 


--------------------------------------------------------------------------------
/53-QR Code Generator/script.js:
--------------------------------------------------------------------------------
 1 | function generateQRCode() {
 2 |     const textInput = document.getElementById("textInput").value;
 3 |     const qrcodeContainer = document.getElementById("qrcode");
 4 | 
 5 |     if (!textInput) {
 6 |         alert("Please enter text or URL.");
 7 |         return;
 8 |     }
 9 | 
10 |     qrcodeContainer.innerHTML = "";
11 | 
12 |     const qr = new QRCode(qrcodeContainer, {
13 |         text: textInput,
14 |         width: 200,
15 |         height: 200,
16 |     });
17 | }
18 | 


--------------------------------------------------------------------------------
/13-Memory Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Memory Game || 100 JavaScript Projects</title>
 7 |         <link rel="stylesheet" href="style.css" />
 8 |     </head>
 9 |     <body>
10 |         <div id="memory-game"></div>
11 | 
12 |         <!-- script includes  -->
13 |         <script src="index.js"></script>
14 |     </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/55-Markdown Editor/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container {
11 |     text-align: center;
12 |     width: 80%;
13 | }
14 | 
15 | textarea {
16 |     width: 100%;
17 |     height: 200px;
18 |     margin: 10px 0;
19 | }
20 | 
21 | #markdownPreview {
22 |     border: 1px solid #ddd;
23 |     padding: 10px;
24 |     min-height: 200px;
25 | }
26 | 


--------------------------------------------------------------------------------
/28-AI-powered Recommendation System/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <script src="https://unpkg.com/brain.js"></script>
 7 |         <title>AI Recommendation System || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <!-- Your HTML content here -->
11 | 
12 |         <script src="script.js"></script>
13 |     </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/36-News Aggregator/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | body {
 7 |     font-family: Arial, sans-serif;
 8 |     margin: 20px;
 9 | }
10 | 
11 | #news-container {
12 |     max-width: 800px;
13 |     margin: auto;
14 | }
15 | 
16 | .article {
17 |     border: 1px solid #ccc;
18 |     border-radius: 8px;
19 |     padding: 10px;
20 |     margin-bottom: 15px;
21 | }
22 | 
23 | .article h2 {
24 |     margin-bottom: 5px;
25 | }
26 | 
27 | .article p {
28 |     margin: 0;
29 | }
30 | 


--------------------------------------------------------------------------------
/04-Tip Calculator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Tip Calculator || 100 JavaScript Projects</title>
 7 |         <link rel="stylesheet" href="style.css" />
 8 |     </head>
 9 |     <body>
10 |         <h1>Tip Calculator || 100 JavaScript Projects</h1>
11 |         <!-- Script Includes -->
12 |         <script src="index.js"></script>
13 |     </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/49-Color Palette Generator/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     display: flex;
 4 |     flex-direction: column;
 5 |     align-items: center;
 6 |     justify-content: center;
 7 |     height: 100vh;
 8 |     margin: 0;
 9 | }
10 | 
11 | #colorInput {
12 |     margin-bottom: 20px;
13 | }
14 | 
15 | #colorPalette {
16 |     display: flex;
17 |     justify-content: center;
18 | }
19 | 
20 | .colorBox {
21 |     width: 50px;
22 |     height: 50px;
23 |     margin: 0 5px;
24 |     border: 1px solid #000;
25 | }
26 | 


--------------------------------------------------------------------------------
/71-Tic Tac Toe/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Advanced Tic Tac Toe || 100 JavaScript Projects</title>
 7 |         <link rel="stylesheet" href="styles.css" />
 8 |     </head>
 9 |     <body>
10 |         <div id="game-board"></div>
11 |         <div id="message" class="message"></div>
12 | 
13 |         <script src="app.js"></script>
14 |     </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/85-Color Blindness Simulator/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 | }
 4 | 
 5 | #app {
 6 |     max-width: 600px;
 7 |     margin: 0 auto;
 8 |     padding: 20px;
 9 |     text-align: center;
10 | }
11 | 
12 | label {
13 |     display: block;
14 |     margin-bottom: 10px;
15 | }
16 | 
17 | #simulatedColors {
18 |     margin-top: 20px;
19 | }
20 | 
21 | .simulatedColor {
22 |     display: inline-block;
23 |     margin: 10px;
24 |     padding: 20px;
25 |     border: 2px solid #ccc;
26 |     font-size: 16px;
27 | }
28 | 


--------------------------------------------------------------------------------
/75-Chess Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="style.css" />
 7 |         <title>Chess Game || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="board"></div>
11 |         <script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
12 |         <script src="script.js"></script>
13 |     </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/05-Temperature Converter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Temperature Converter || 100 JavaScript Projects</title>
 7 |         <!-- style -->
 8 |         <link rel="stylesheet" href="style.css" />
 9 |     </head>
10 |     <body>
11 |         <h1>Temperature Converter</h1>
12 |         <!-- script includes  -->
13 |         <script src="index.js"></script>
14 |     </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/100-Code Splitting/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     display: flex;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container {
11 |     text-align: center;
12 | }
13 | 
14 | textarea {
15 |     width: 100%;
16 |     height: 150px;
17 |     margin: 10px 0;
18 | }
19 | 
20 | button {
21 |     padding: 10px 20px;
22 |     font-size: 16px;
23 |     margin: 10px;
24 | }
25 | 
26 | #outputFiles {
27 |     margin-top: 20px;
28 |     font-size: 18px;
29 | }
30 | 


--------------------------------------------------------------------------------
/86-Speech Recognition Interface/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     display: flex;
 6 |     align-items: center;
 7 |     justify-content: center;
 8 |     height: 100vh;
 9 |     background-color: #f4f4f4;
10 | }
11 | 
12 | .container {
13 |     text-align: center;
14 | }
15 | 
16 | button {
17 |     padding: 10px 20px;
18 |     font-size: 16px;
19 |     cursor: pointer;
20 |     background-color: #3498db;
21 |     color: #fff;
22 |     border: none;
23 |     border-radius: 5px;
24 | }
25 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig, globalIgnores } from "eslint/config";
 2 | import nextVitals from "eslint-config-next/core-web-vitals";
 3 | import nextTs from "eslint-config-next/typescript";
 4 | 
 5 | const eslintConfig = defineConfig([
 6 |   ...nextVitals,
 7 |   ...nextTs,
 8 |   // Override default ignores of eslint-config-next.
 9 |   globalIgnores([
10 |     // Default ignores of eslint-config-next:
11 |     ".next/**",
12 |     "out/**",
13 |     "build/**",
14 |     "next-env.d.ts",
15 |   ]),
16 | ]);
17 | 
18 | export default eslintConfig;
19 | 


--------------------------------------------------------------------------------
/41-Drawing App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Drawing App || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <canvas id="drawingCanvas" width="800" height="600"></canvas>
12 |         </div>
13 |         <script src="script.js"></script>
14 |     </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/98-Minification and Bundling/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     display: flex;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container {
11 |     text-align: center;
12 | }
13 | 
14 | textarea {
15 |     width: 100%;
16 |     height: 150px;
17 |     margin: 10px 0;
18 | }
19 | 
20 | button {
21 |     padding: 10px 20px;
22 |     font-size: 16px;
23 |     margin: 10px;
24 | }
25 | 
26 | #outputCode {
27 |     margin-top: 20px;
28 |     font-size: 18px;
29 | }
30 | 


--------------------------------------------------------------------------------
/99-Tree Shaking for Unused Code/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     display: flex;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container {
11 |     text-align: center;
12 | }
13 | 
14 | textarea {
15 |     width: 100%;
16 |     height: 150px;
17 |     margin: 10px 0;
18 | }
19 | 
20 | button {
21 |     padding: 10px 20px;
22 |     font-size: 16px;
23 |     margin: 10px;
24 | }
25 | 
26 | #outputCode {
27 |     margin-top: 20px;
28 |     font-size: 18px;
29 | }
30 | 


--------------------------------------------------------------------------------
/75-Chess Game/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", () => {
 2 |     const socket = io();
 3 | 
 4 |     const board = document.getElementById("board");
 5 | 
 6 |     for (let i = 0; i < 64; i++) {
 7 |         const square = document.createElement("div");
 8 |         square.classList.add("square");
 9 |         square.classList.add(
10 |             (i + Math.floor(i / 8)) % 2 === 0 ? "white" : "black"
11 |         );
12 |         board.appendChild(square);
13 |     }
14 | 
15 |     // Add chess piece logic here
16 | 
17 |     // Socket.io logic here
18 | });
19 | 


--------------------------------------------------------------------------------
/93-Debouncing and Throttling Functions/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     text-align: center;
 6 |     margin-top: 50px;
 7 | }
 8 | 
 9 | main {
10 |     margin: 20px;
11 | }
12 | 
13 | label {
14 |     font-size: 16px;
15 |     margin-bottom: 10px;
16 |     display: block;
17 | }
18 | 
19 | input {
20 |     padding: 10px;
21 |     font-size: 16px;
22 |     margin-bottom: 20px;
23 | }
24 | 
25 | .result {
26 |     margin-top: 20px;
27 | }
28 | 
29 | #resultContent {
30 |     white-space: pre-wrap;
31 | }
32 | 


--------------------------------------------------------------------------------
/46-Music Visualizer/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     display: flex;
 5 |     align-items: center;
 6 |     justify-content: center;
 7 |     height: 100vh;
 8 |     background-color: #f4f4f4;
 9 | }
10 | 
11 | .container {
12 |     text-align: center;
13 |     background-color: #fff;
14 |     padding: 20px;
15 |     border-radius: 8px;
16 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
17 | }
18 | 
19 | #visualizer {
20 |     width: 100%;
21 |     height: 300px;
22 |     background-color: #eee;
23 |     margin-top: 20px;
24 | }
25 | 


--------------------------------------------------------------------------------
/72-Snake Game/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: flex;
 3 |     align-items: center;
 4 |     justify-content: center;
 5 |     height: 100vh;
 6 |     margin: 0;
 7 |     background-color: #f0f0f0;
 8 | }
 9 | 
10 | .game-container {
11 |     position: relative;
12 |     width: 300px;
13 |     height: 300px;
14 |     border: 2px solid #333;
15 | }
16 | 
17 | .snake,
18 | .food {
19 |     position: absolute;
20 |     width: 20px;
21 |     height: 20px;
22 | }
23 | 
24 | .snake {
25 |     background-color: #4caf50;
26 | }
27 | 
28 | .food {
29 |     background-color: #ff5733;
30 | }
31 | 


--------------------------------------------------------------------------------
/35-Weather Forecast using OpenWeatherMap API/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     margin: 20px;
 4 |     text-align: center;
 5 | }
 6 | 
 7 | #weather-container {
 8 |     max-width: 400px;
 9 |     margin: auto;
10 |     padding: 20px;
11 |     border: 1px solid #ccc;
12 |     border-radius: 8px;
13 | }
14 | 
15 | #city-input {
16 |     width: 80%;
17 |     padding: 8px;
18 |     margin-bottom: 10px;
19 | }
20 | 
21 | #get-weather-button {
22 |     padding: 10px;
23 |     cursor: pointer;
24 | }
25 | 
26 | #weather-info {
27 |     margin-top: 20px;
28 | }
29 | 


--------------------------------------------------------------------------------
/25-Cryptocurrency Tracker/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     margin: 0;
 4 |     padding: 20px;
 5 | }
 6 | 
 7 | header {
 8 |     background-color: #333;
 9 |     color: #fff;
10 |     text-align: center;
11 |     padding: 10px;
12 | }
13 | 
14 | #cryptoList {
15 |     max-width: 800px;
16 |     margin: 20px auto;
17 | }
18 | 
19 | .crypto {
20 |     border: 1px solid #ddd;
21 |     border-radius: 5px;
22 |     margin-bottom: 10px;
23 |     padding: 10px;
24 | }
25 | 
26 | .crypto h3 {
27 |     color: #333;
28 | }
29 | 
30 | .crypto p {
31 |     color: #666;
32 | }
33 | 


--------------------------------------------------------------------------------
/36-News Aggregator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>News Aggregator || 100 JavaScript Projects</title>
 7 |         <!-- styles links  -->
 8 |         <link rel="stylesheet" href="style.css" />
 9 |     </head>
10 |     <body>
11 |         <h1>News Aggregator</h1>
12 |         <div id="news-container"></div>
13 | 
14 |         <!-- Script Inclues  -->
15 |         <script src="index.js"></script>
16 |     </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/72-Snake Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Snake Game || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="game-container">
11 |             <div id="snake" class="snake"></div>
12 |             <div id="food" class="food"></div>
13 |         </div>
14 | 
15 |         <script src="script.js"></script>
16 |     </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/20-Blogging Platform/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | header {
 8 |     background-color: #333;
 9 |     color: #fff;
10 |     text-align: center;
11 |     padding: 10px;
12 | }
13 | 
14 | #blogPosts {
15 |     max-width: 800px;
16 |     margin: 20px auto;
17 |     padding: 20px;
18 | }
19 | 
20 | .post {
21 |     border: 1px solid #ddd;
22 |     border-radius: 5px;
23 |     margin-bottom: 20px;
24 |     padding: 10px;
25 | }
26 | 
27 | .post h2 {
28 |     color: #333;
29 | }
30 | 
31 | .post p {
32 |     color: #666;
33 | }
34 | 


--------------------------------------------------------------------------------
/58-Browser Extension/popup/popup.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="popup.css" />
 7 |         <title>Browser Extension || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>My Extension Popup</h1>
12 |             <button id="clickMeButton">Click Me</button>
13 |         </div>
14 |         <script src="popup.js"></script>
15 |     </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/62-Heatmap Generator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>D3.js Heatmap Generator</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="heatmap-container">
11 |             <!-- Heatmap will be rendered here -->
12 |         </div>
13 |         <script src="https://d3js.org/d3.v5.min.js"></script>
14 |         <script src="heatmap.js"></script>
15 |     </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/61-Interactive Charts/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>D3.js Interactive Chart || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="chart-container">
11 |             <!-- Chart will be rendered here -->
12 |         </div>
13 |         <script src="https://d3js.org/d3.v5.min.js"></script>
14 |         <script src="app.js"></script>
15 |     </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/75-Chess Game/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: flex;
 3 |     align-items: center;
 4 |     justify-content: center;
 5 |     height: 100vh;
 6 |     margin: 0;
 7 | }
 8 | 
 9 | #board {
10 |     width: 600px;
11 |     height: 600px;
12 |     border: 2px solid #333;
13 |     display: grid;
14 |     grid-template-columns: repeat(8, 1fr);
15 | }
16 | 
17 | .square {
18 |     width: 100%;
19 |     height: 100%;
20 |     display: flex;
21 |     align-items: center;
22 |     justify-content: center;
23 | }
24 | 
25 | .white {
26 |     background-color: #f0d9b5;
27 | }
28 | 
29 | .black {
30 |     background-color: #b58863;
31 | }
32 | 


--------------------------------------------------------------------------------
/13-Memory Game/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | body {
 7 |     display: flex;
 8 |     justify-content: center;
 9 |     align-items: center;
10 |     height: 100vh;
11 |     margin: 0;
12 | }
13 | 
14 | #memory-game {
15 |     display: grid;
16 |     grid-template-columns: repeat(4, 100px);
17 |     gap: 10px;
18 | }
19 | 
20 | .memory-card {
21 |     width: 100px;
22 |     height: 100px;
23 |     background-color: #ccc;
24 |     display: flex;
25 |     justify-content: center;
26 |     align-items: center;
27 |     font-size: 24px;
28 |     cursor: pointer;
29 | }
30 | 


--------------------------------------------------------------------------------
/80-Platformer Game/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     margin: 0;
 3 |     overflow: hidden;
 4 |     background-color: #87ceeb;
 5 | }
 6 | 
 7 | #game-container {
 8 |     position: relative;
 9 |     width: 800px;
10 |     height: 500px;
11 |     margin: 20px auto;
12 |     border: 1px solid #000;
13 | }
14 | 
15 | .platform {
16 |     position: absolute;
17 |     background-color: #2e8b57;
18 |     height: 20px;
19 |     border-radius: 5px;
20 | }
21 | 
22 | #player {
23 |     position: absolute;
24 |     width: 40px;
25 |     height: 40px;
26 |     background-color: #ff6347;
27 |     border-radius: 50%;
28 |     bottom: 0;
29 |     left: 50px;
30 | }
31 | 


--------------------------------------------------------------------------------
/83-Contrast Checker/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Contrast Checker</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="app"></div>
11 | 
12 |         <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
13 |         <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
14 |         <script src="app.js" type="module"></script>
15 |     </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/46-Music Visualizer/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Music Visualizer || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Music Visualizer</h1>
12 |             <input type="file" id="audioInput" accept="audio/*" />
13 |             <canvas id="visualizer"></canvas>
14 |         </div>
15 |         <script src="script.js"></script>
16 |     </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/60-Clipboard Manager/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container {
11 |     text-align: center;
12 | }
13 | 
14 | textarea {
15 |     width: 100%;
16 |     height: 100px;
17 |     margin: 10px 0;
18 | }
19 | 
20 | button {
21 |     padding: 8px 16px;
22 |     font-size: 16px;
23 |     cursor: pointer;
24 | }
25 | 
26 | #clipboardHistory {
27 |     margin-top: 20px;
28 | }
29 | 
30 | .clipboard-item {
31 |     border: 1px solid #ddd;
32 |     padding: 10px;
33 |     margin: 10px 0;
34 | }
35 | 


--------------------------------------------------------------------------------
/70-Social Media Analytics Dashboard/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     background-color: #f4f4f4;
 6 | }
 7 | 
 8 | header {
 9 |     background-color: #333;
10 |     color: white;
11 |     padding: 1em;
12 |     text-align: center;
13 | }
14 | 
15 | .container {
16 |     display: flex;
17 |     justify-content: space-around;
18 |     padding: 2em;
19 | }
20 | 
21 | .widget {
22 |     background-color: white;
23 |     padding: 1.5em;
24 |     border-radius: 8px;
25 |     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
26 |     margin: 1em;
27 |     flex: 1;
28 |     text-align: center;
29 | }
30 | 


--------------------------------------------------------------------------------
/10-Currency Converter/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | #converter {
11 |     text-align: center;
12 |     padding: 20px;
13 |     border: 1px solid #ccc;
14 |     border-radius: 5px;
15 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
16 | }
17 | 
18 | input {
19 |     padding: 8px;
20 |     margin: 5px;
21 | }
22 | 
23 | button {
24 |     padding: 10px;
25 |     background-color: #4caf50;
26 |     color: white;
27 |     border: none;
28 |     border-radius: 4px;
29 |     cursor: pointer;
30 | }
31 | 


--------------------------------------------------------------------------------
/11-Weather App/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | #weather-container {
11 |     text-align: center;
12 |     padding: 20px;
13 |     border: 1px solid #ccc;
14 |     border-radius: 5px;
15 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
16 | }
17 | 
18 | input {
19 |     padding: 8px;
20 |     margin: 5px;
21 | }
22 | 
23 | button {
24 |     padding: 10px;
25 |     background-color: #4caf50;
26 |     color: white;
27 |     border: none;
28 |     border-radius: 4px;
29 |     cursor: pointer;
30 | }
31 | 


--------------------------------------------------------------------------------
/75-Chess Game/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 4 | 
 5 | # dependencies
 6 | /node_modules
 7 | /.pnp
 8 | .pnp.js
 9 | 
10 | # testing
11 | /coverage
12 | 
13 | # next.js
14 | /.next/
15 | /out/
16 | 
17 | # production
18 | /build
19 | 
20 | # misc
21 | .DS_Store
22 | *.pem
23 | 
24 | # debug
25 | npm-debug.log*
26 | yarn-debug.log*
27 | yarn-error.log*
28 | 
29 | # local env files
30 | .env*.local
31 | 
32 | # vercel
33 | .vercel
34 | 
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | 
39 | # Wordpress files
40 | wp-content/mu-plugins/*
41 | !wp-content/mu-plugins/notesontech-*
42 | 


--------------------------------------------------------------------------------
/76-Hangman/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: flex;
 3 |     align-items: center;
 4 |     justify-content: center;
 5 |     height: 100vh;
 6 |     margin: 0;
 7 |     font-family: "Arial", sans-serif;
 8 | }
 9 | 
10 | #hangman-container {
11 |     text-align: center;
12 | }
13 | 
14 | #word-container {
15 |     font-size: 24px;
16 |     margin: 20px 0;
17 | }
18 | 
19 | #image-container {
20 |     margin: 20px 0;
21 | }
22 | 
23 | #hangman-image {
24 |     max-width: 100%;
25 |     height: auto;
26 | }
27 | 
28 | #letters-container {
29 |     margin: 20px 0;
30 | }
31 | 
32 | button {
33 |     padding: 10px;
34 |     font-size: 16px;
35 |     cursor: pointer;
36 | }
37 | 


--------------------------------------------------------------------------------
/20-Blogging Platform/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Blogging Platform || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <header>
11 |             <h1>My Blog</h1>
12 |         </header>
13 | 
14 |         <section id="blogPosts">
15 |             <!-- Blog posts will be displayed here using JavaScript -->
16 |         </section>
17 | 
18 |         <script src="script.js"></script>
19 |     </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/66-Stock Market Tracker with Graphs/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     background-color: #f4f4f4;
 6 | }
 7 | 
 8 | .container {
 9 |     max-width: 800px;
10 |     margin: 20px auto;
11 |     padding: 20px;
12 |     background-color: #fff;
13 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
14 | }
15 | 
16 | input {
17 |     padding: 8px;
18 |     margin-right: 10px;
19 | }
20 | 
21 | button {
22 |     padding: 8px 15px;
23 |     background-color: #4caf50;
24 |     color: #fff;
25 |     border: none;
26 |     cursor: pointer;
27 | }
28 | 
29 | button:hover {
30 |     background-color: #45a049;
31 | }
32 | 


--------------------------------------------------------------------------------
/69-Population Density Map/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link
 7 |             rel="stylesheet"
 8 |             href="https://unpkg.com/leaflet/dist/leaflet.css"
 9 |         />
10 |         <link rel="stylesheet" href="styles.css" />
11 |         <title>Population Density Map</title>
12 |     </head>
13 |     <body>
14 |         <div id="map"></div>
15 |         <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
16 |         <script src="app.js"></script>
17 |     </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/09-BMI Calculator/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     display: flex;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .calculator-container {
11 |     text-align: center;
12 | }
13 | 
14 | form {
15 |     max-width: 300px;
16 |     margin: 0 auto;
17 | }
18 | 
19 | label,
20 | input,
21 | button {
22 |     display: block;
23 |     margin-bottom: 10px;
24 | }
25 | 
26 | button {
27 |     background-color: #4caf50;
28 |     color: white;
29 |     padding: 10px;
30 |     border: none;
31 |     cursor: pointer;
32 | }
33 | 
34 | #result {
35 |     margin-top: 20px;
36 | }
37 | 


--------------------------------------------------------------------------------
/38-NASA API for Astronomy Data/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | body {
 7 |     font-family: Arial, sans-serif;
 8 |     margin: 20px;
 9 |     text-align: center;
10 | }
11 | 
12 | #apod-container {
13 |     max-width: 800px;
14 |     margin: auto;
15 | }
16 | 
17 | #apod-image {
18 |     max-width: 100%;
19 |     border-radius: 8px;
20 |     margin-bottom: 10px;
21 | }
22 | 
23 | #apod-title {
24 |     font-size: 1.5em;
25 |     margin-bottom: 10px;
26 | }
27 | 
28 | #apod-explanation {
29 |     margin-bottom: 20px;
30 | }
31 | 
32 | #load-apod-button {
33 |     padding: 10px;
34 |     cursor: pointer;
35 | }
36 | 


--------------------------------------------------------------------------------
/97-Network Performance Analyzer/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Network Performance Analyzer</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Network Performance Analyzer</h1>
12 |             <button id="analyzeButton">Analyze Performance</button>
13 |             <div id="resultContainer"></div>
14 |         </div>
15 | 
16 |         <script src="script.js"></script>
17 |     </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 


--------------------------------------------------------------------------------
/86-Speech Recognition Interface/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Speech Recognition Interface</title>
 7 |         <link rel="stylesheet" href="styles.css" />
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Speech Recognition Interface</h1>
12 |             <p id="output">Your transcribed speech will appear here.</p>
13 |             <button id="startBtn">Start Listening</button>
14 |         </div>
15 |         <script src="script.js"></script>
16 |     </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/68-Visualizing COVID-19 Dat/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <script defer src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 8 |         <title>COVID-19 Data Visualization</title>
 9 |     </head>
10 |     <body>
11 |         <div class="container">
12 |             <h1>COVID-19 Data Visualization</h1>
13 |             <canvas id="covidChart" width="800" height="400"></canvas>
14 |         </div>
15 |         <script src="app.js"></script>
16 |     </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/49-Color Palette Generator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Color Palette Generator</title>
 7 |         <link rel="stylesheet" href="styles.css" />
 8 |     </head>
 9 |     <body>
10 |         <label for="colorInput">Enter a color code:</label>
11 |         <input type="text" id="colorInput" placeholder="e.g., #ff5733" />
12 |         <button onclick="generatePalette()">Generate Palette</button>
13 | 
14 |         <div id="colorPalette"></div>
15 | 
16 |         <script src="script.js"></script>
17 |     </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/01-To-Do List App/script.js:
--------------------------------------------------------------------------------
 1 | const buttonEl = document.querySelector("#button");
 2 | const todoList = document.querySelector("#todo_list");
 3 | 
 4 | function addTodo() {
 5 |     const li = document.createElement("li");
 6 |     let inputValue = document.querySelector(".input").value;
 7 |     const t = document.createTextNode(inputValue);
 8 |     li.appendChild(t);
 9 | 
10 |     // Cheack input validation
11 |     if (inputValue === "") {
12 |         alert("Please enter a valid value");
13 |     } else {
14 |         todoList.appendChild(li);
15 |     }
16 |     console.log(inputValue);
17 |     document.querySelector("input").value = "";
18 | }
19 | 
20 | buttonEl.addEventListener("click", addTodo);
21 | 


--------------------------------------------------------------------------------
/25-Cryptocurrency Tracker/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Cryptocurrency Tracker || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <header>
11 |             <h1>Cryptocurrency Tracker</h1>
12 |         </header>
13 | 
14 |         <section id="cryptoList">
15 |             <!-- Cryptocurrency data will be displayed here using JavaScript -->
16 |         </section>
17 | 
18 |         <script src="script.js"></script>
19 |     </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/78-Battleship/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="style.css" />
 7 |         <title>Battleship Game</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="game-container">
11 |             <div id="player-board" class="board"></div>
12 |             <div id="computer-board" class="board"></div>
13 |             <div id="message" class="hidden"></div>
14 |             <button id="reset-button">New Game</button>
15 |         </div>
16 |         <script src="script.js"></script>
17 |     </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/67-Polls and Survey Data Visualization/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     background-color: #f4f4f4;
 6 | }
 7 | 
 8 | .container {
 9 |     max-width: 800px;
10 |     margin: 20px auto;
11 |     padding: 20px;
12 |     background-color: #fff;
13 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
14 | }
15 | 
16 | input,
17 | button {
18 |     margin-top: 10px;
19 |     padding: 8px;
20 | }
21 | 
22 | button {
23 |     background-color: #4caf50;
24 |     color: #fff;
25 |     border: none;
26 |     cursor: pointer;
27 | }
28 | 
29 | button:hover {
30 |     background-color: #45a049;
31 | }
32 | 
33 | canvas {
34 |     margin-top: 20px;
35 | }
36 | 


--------------------------------------------------------------------------------
/14-Chat Application/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     display: flex;
 6 |     flex-direction: column;
 7 |     align-items: center;
 8 |     justify-content: center;
 9 |     height: 100vh;
10 |     background-color: #f4f4f4;
11 | }
12 | 
13 | #chat-box {
14 |     width: 300px;
15 |     border: 1px solid #ccc;
16 |     padding: 10px;
17 |     overflow-y: scroll;
18 |     max-height: 300px;
19 | }
20 | 
21 | #input-box {
22 |     display: flex;
23 |     margin-top: 10px;
24 | }
25 | 
26 | #message-input {
27 |     flex-grow: 1;
28 |     padding: 5px;
29 | }
30 | 
31 | #send-button {
32 |     padding: 5px 10px;
33 |     cursor: pointer;
34 | }
35 | 


--------------------------------------------------------------------------------
/75-Chess Game/server.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const http = require("http");
 3 | const socketIO = require("socket.io");
 4 | 
 5 | const app = express();
 6 | const server = http.createServer(app);
 7 | const io = socketIO(server);
 8 | 
 9 | app.use(express.static("public"));
10 | 
11 | io.on("connection", (socket) => {
12 |     console.log("A user connected");
13 | 
14 |     // Handle chess moves and game logic here
15 | 
16 |     socket.on("disconnect", () => {
17 |         console.log("User disconnected");
18 |     });
19 | });
20 | 
21 | const PORT = process.env.PORT || 3000;
22 | 
23 | server.listen(PORT, () => {
24 |     console.log(`Server is running on http://localhost:${PORT}`);
25 | });
26 | 


--------------------------------------------------------------------------------
/91-Code Profiler and Optimizer/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | header,
 8 | main {
 9 |     margin: 20px;
10 | }
11 | 
12 | .code-container {
13 |     margin-bottom: 20px;
14 | }
15 | 
16 | textarea {
17 |     width: 100%;
18 |     height: 200px;
19 |     padding: 10px;
20 | }
21 | 
22 | button {
23 |     background-color: #4caf50;
24 |     color: white;
25 |     padding: 10px 20px;
26 |     border: none;
27 |     cursor: pointer;
28 | }
29 | 
30 | button:hover {
31 |     background-color: #45a049;
32 | }
33 | 
34 | .profile-results {
35 |     margin-bottom: 20px;
36 | }
37 | 
38 | #optimizedCode {
39 |     white-space: pre-wrap;
40 | }
41 | 


--------------------------------------------------------------------------------
/77-Memory Puzzle Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="style.css" />
 7 |         <title>Memory Puzzle Game</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="game-container">
11 |             <div id="memory-board" class="board"></div>
12 |             <div id="message" class="hidden">
13 |                 Congratulations! You solved the puzzle!
14 |             </div>
15 |             <button id="reset-button">Reset Game</button>
16 |         </div>
17 |         <script src="script.js"></script>
18 |     </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/56-Voice Assistant/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Voice Assistant || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Voice Assistant</h1>
12 |             <button onclick="startListening()">Start Listening</button>
13 |             <button onclick="stopListening()">Stop Listening</button>
14 |             <div id="output"></div>
15 |         </div>
16 | 
17 |         <script src="script.js"></script>
18 |     </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/57-Note-taking App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Note-taking App || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Note-taking App</h1>
12 |             <div id="notes-container"></div>
13 |             <textarea id="noteInput" placeholder="Enter your note"></textarea>
14 |             <button onclick="addNote()">Add Note</button>
15 |         </div>
16 | 
17 |         <script src="script.js"></script>
18 |     </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/22-E-commerce Website/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>E-commerce Website || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <header>
11 |             <h1>E-commerce Website</h1>
12 |             <a href="cart.html">View Cart</a>
13 |         </header>
14 | 
15 |         <section id="productList">
16 |             <!-- Product listing will be displayed here using JavaScript -->
17 |         </section>
18 | 
19 |         <script src="script.js"></script>
20 |     </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/88-High-Contrast Mode/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <link rel="stylesheet" href="styles-high-contrast.css" />
 8 |         <title>High-Contrast Mode Tool</title>
 9 |     </head>
10 |     <body>
11 |         <div class="container">
12 |             <h1>High-Contrast Mode Tool</h1>
13 |             <button id="toggleBtn">Toggle High Contrast</button>
14 |             <p>This is a sample text for testing high-contrast mode.</p>
15 |         </div>
16 |         <script src="script.js"></script>
17 |     </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/52-Password Generator/styles.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | body {
 7 |     font-family: Arial, sans-serif;
 8 |     display: flex;
 9 |     justify-content: center;
10 |     align-items: center;
11 |     height: 100vh;
12 |     margin: 0;
13 | }
14 | 
15 | #generator-container {
16 |     text-align: center;
17 | }
18 | 
19 | label {
20 |     margin-right: 10px;
21 | }
22 | 
23 | input {
24 |     width: 40px;
25 |     text-align: center;
26 | }
27 | 
28 | button {
29 |     padding: 10px 20px;
30 |     margin-top: 10px;
31 |     cursor: pointer;
32 | }
33 | 
34 | #password {
35 |     margin-top: 20px;
36 |     font-size: 1.5em;
37 |     font-weight: bold;
38 |     margin-bottom: 20px;
39 | }
40 | 


--------------------------------------------------------------------------------
/95-Reducing DOM Manipulations/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Reducing DOM Manipulations App</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Reducing DOM Manipulations App</h1>
12 |             <ul id="listContainer">
13 |                 <!-- List items will be dynamically added here -->
14 |             </ul>
15 |             <button id="addItemBtn">Add Item</button>
16 |         </div>
17 | 
18 |         <script src="script.js"></script>
19 |     </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/50-Emoji Translator/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     background-color: #f4f4f4;
 4 |     display: flex;
 5 |     align-items: center;
 6 |     justify-content: center;
 7 |     height: 100vh;
 8 |     margin: 0;
 9 | }
10 | 
11 | .container {
12 |     text-align: center;
13 | }
14 | 
15 | h1 {
16 |     color: #333;
17 | }
18 | 
19 | textarea {
20 |     margin: 10px 0;
21 |     padding: 5px;
22 |     font-size: 16px;
23 | }
24 | 
25 | button {
26 |     padding: 10px 20px;
27 |     font-size: 16px;
28 |     cursor: pointer;
29 |     background-color: #007bff;
30 |     color: #fff;
31 |     border: none;
32 |     border-radius: 5px;
33 | }
34 | 
35 | #emojiResult {
36 |     margin-top: 20px;
37 |     font-size: 24px;
38 | }
39 | 


--------------------------------------------------------------------------------
/59-Calendar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Calendar App || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <div class="header">
12 |                 <button id="prevMonth">&lt;</button>
13 |                 <h1 id="currentMonth"></h1>
14 |                 <button id="nextMonth">&gt;</button>
15 |             </div>
16 |             <div id="calendar"></div>
17 |         </div>
18 | 
19 |         <script src="script.js"></script>
20 |     </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/39-Random Joke Generator using Joke API/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Random Joke Generator || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Random Joke Generator</h1>
12 |             <div id="joke-container">
13 |                 <p id="joke-text">Press the button for a joke!</p>
14 |             </div>
15 |             <button id="get-joke-btn">Get Joke</button>
16 |         </div>
17 |         <script src="script.js"></script>
18 |     </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/58-Browser Extension/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "manifest_version": 2,
 3 |     "name": "Browser Extension",
 4 |     "version": "1.0",
 5 |     "description": "A basic browser extension",
 6 |     "permissions": ["storage", "activeTab"],
 7 |     "browser_action": {
 8 |         "default_icon": {
 9 |             "16": "icon16.png",
10 |             "48": "icon48.png",
11 |             "128": "icon128.png"
12 |         },
13 |         "default_popup": "popup/popup.html"
14 |     },
15 |     "icons": {
16 |         "16": "icon16.png",
17 |         "48": "icon48.png",
18 |         "128": "icon128.png"
19 |     },
20 |     "content_scripts": [
21 |         {
22 |             "matches": ["<all_urls>"],
23 |             "js": ["content.js"]
24 |         }
25 |     ]
26 | }
27 | 


--------------------------------------------------------------------------------
/50-Emoji Translator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Emoji Translator</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Emoji Translator</h1>
12 |             <label for="textInput">Enter Text:</label>
13 |             <textarea id="textInput" rows="4" cols="50"></textarea>
14 |             <button onclick="translateToEmoji()">Translate to Emoji</button>
15 |             <div id="emojiResult"></div>
16 |         </div>
17 |         <script src="script.js"></script>
18 |     </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/51-File Uploader/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>File Uploader || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>File Uploader</h1>
12 |             <input type="file" id="fileInput" />
13 |             <button onclick="uploadFile()">Upload</button>
14 |             <progress id="progressBar" value="0" max="100"></progress>
15 |             <div id="status"></div>
16 |         </div>
17 | 
18 |         <script src="script.js"></script>
19 |     </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/65-Network Traffic Analyzer/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Network Traffic Analyzer || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <div id="traffic-chart"></div>
12 |             <div id="packet-list">
13 |                 <h2>Packet List</h2>
14 |                 <ul id="packet-list-ul"></ul>
15 |             </div>
16 |         </div>
17 |         <script src="https://d3js.org/d3.v5.min.js"></script>
18 |         <script src="app.js"></script>
19 |     </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/23-Real-time Chat Room/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Real-time Chat Room || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="chatBox">
11 |             <div id="chatMessages"></div>
12 |             <input
13 |                 type="text"
14 |                 id="messageInput"
15 |                 placeholder="Type your message..."
16 |             />
17 |             <button onclick="sendMessage()">Send</button>
18 |         </div>
19 | 
20 |         <script src="script.js"></script>
21 |     </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/15-Interactive Quiz/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Interactive Quiz || 100 JavaScript Projects</title>
 7 |         <!-- CSS -->
 8 |         <link rel="stylesheet" href="style.css" />
 9 |     </head>
10 |     <body>
11 |         <div id="quiz-container">
12 |             <div class="question" id="question"></div>
13 |             <div class="options" id="options"></div>
14 |             <button id="submit-button">Submit Answer</button>
15 |             <div id="result"></div>
16 |         </div>
17 | 
18 |         <!-- script includes -->
19 |         <script src="index.js"></script>
20 |     </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/45-Text-based Adventure Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Text Adventure Game || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <div id="game-container">
12 |                 <p id="story">You find yourself in a dark room...</p>
13 |                 <div id="choices">
14 |                     <button onclick="makeChoice(1)">Explore</button>
15 |                 </div>
16 |             </div>
17 |         </div>
18 |         <script src="script.js"></script>
19 |     </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/91-Code Profiler and Optimizer/readme.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | 
 3 | Notes:-
 4 | 
 5 | Creating a full-fledged code profiler and optimizer is quite complex, and building a comprehensive tool may require server-side components and advanced algorithms. However, I can provide you with a basic example of a code profiler and optimizer using HTML, CSS, and JavaScript. This example will focus on basic syntax highlighting and character count profiling.
 6 | 
 7 | 
 8 | This example provides a basic UI for entering code, profiling its character count, and applying a simple optimization (removing extra whitespaces). For a more advanced code profiler and optimizer, you might want to explore third-party libraries and tools or consider server-side solutions for more intensive optimizations.
 9 | 
10 | 
11 | -->
12 | 


--------------------------------------------------------------------------------
/11-Weather App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Weather App || 100 JavaScript Projects</title>
 7 |         <!-- Styles -->
 8 |         <link rel="stylesheet" href="style.css" />
 9 |     </head>
10 |     <body>
11 |         <div id="weather-container">
12 |             <h2>Weather App</h2>
13 |             <input type="text" id="city" placeholder="Enter city name" />
14 |             <button onclick="getWeather()">Get Weather</button>
15 |             <div id="weather-info"></div>
16 |         </div>
17 | 
18 |         <!-- Script includes -->
19 |         <script src="index.js"></script>
20 |     </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/76-Hangman/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="style.css" />
 7 |         <title>Hangman Game || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="hangman-container">
11 |             <div id="word-container"></div>
12 |             <div id="image-container">
13 |                 <img id="hangman-image" src="images/0.png" alt="Hangman" />
14 |             </div>
15 |             <div id="letters-container"></div>
16 |             <button id="reset-button">New Game</button>
17 |         </div>
18 |         <script src="script.js"></script>
19 |     </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "100-javascript-projects",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "eslint"
10 |   },
11 |   "dependencies": {
12 |     "lucide-react": "^0.556.0",
13 |     "next": "16.0.10",
14 |     "react": "19.2.0",
15 |     "react-dom": "19.2.0",
16 |     "react-icons": "^5.5.0"
17 |   },
18 |   "devDependencies": {
19 |     "@tailwindcss/postcss": "^4",
20 |     "@types/node": "^20",
21 |     "@types/react": "^19",
22 |     "@types/react-dom": "^19",
23 |     "babel-plugin-react-compiler": "1.0.0",
24 |     "eslint": "^9",
25 |     "eslint-config-next": "16.0.3",
26 |     "tailwindcss": "^4",
27 |     "typescript": "^5"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/16-Pomodoro Timer/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Pomodoro Timer</title>
 7 |         <!-- style  -->
 8 |         <link rel="stylesheet" href="style.css" />
 9 |     </head>
10 |     <body>
11 |         <h1>Pomodoro Timer</h1>
12 |         <div id="timer">25:00</div>
13 |         <div id="controls">
14 |             <button onclick="startTimer()">Start</button>
15 |             <button onclick="pauseTimer()">Pause</button>
16 |             <button onclick="resetTimer()">Reset</button>
17 |         </div>
18 | 
19 |         <!-- script includes  -->
20 |         <script src="index.js"></script>
21 |     </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/23-Real-time Chat Room/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | #chatBox {
 8 |     max-width: 600px;
 9 |     margin: 20px auto;
10 |     padding: 20px;
11 |     border: 1px solid #ddd;
12 |     border-radius: 5px;
13 | }
14 | 
15 | #chatMessages {
16 |     height: 300px;
17 |     overflow-y: scroll;
18 |     border: 1px solid #ddd;
19 |     border-radius: 5px;
20 |     padding: 10px;
21 |     margin-bottom: 10px;
22 | }
23 | 
24 | input {
25 |     width: 70%;
26 |     padding: 8px;
27 |     box-sizing: border-box;
28 | }
29 | 
30 | button {
31 |     width: 30%;
32 |     padding: 8px;
33 |     background-color: #333;
34 |     color: #fff;
35 |     border: none;
36 |     border-radius: 5px;
37 |     cursor: pointer;
38 | }
39 | 


--------------------------------------------------------------------------------
/27-Job Board Platform/script.js:
--------------------------------------------------------------------------------
 1 | function addJob() {
 2 |     const jobTitle = document.getElementById("jobTitle").value;
 3 |     const jobDescription = document.getElementById("jobDescription").value;
 4 | 
 5 |     if (jobTitle && jobDescription) {
 6 |         const jobList = document.getElementById("jobList");
 7 | 
 8 |         const jobCard = document.createElement("div");
 9 |         jobCard.classList.add("job-card");
10 | 
11 |         jobCard.innerHTML = `
12 |               <h3>${jobTitle}</h3>
13 |               <p>${jobDescription}</p>
14 |           `;
15 | 
16 |         jobList.appendChild(jobCard);
17 | 
18 |         // Clear the form fields
19 |         document.getElementById("jobForm").reset();
20 |     } else {
21 |         alert("Please fill out all fields");
22 |     }
23 | }
24 | 


--------------------------------------------------------------------------------
/43-Interactive Storytelling/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     display: flex;
 5 |     align-items: center;
 6 |     justify-content: center;
 7 |     height: 100vh;
 8 |     background-color: #f4f4f4;
 9 | }
10 | 
11 | .container {
12 |     background-color: #fff;
13 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
14 | }
15 | 
16 | #story-container {
17 |     padding: 20px;
18 | }
19 | 
20 | #choices {
21 |     margin-top: 20px;
22 | }
23 | 
24 | button {
25 |     background-color: #4caf50;
26 |     color: white;
27 |     padding: 10px 20px;
28 |     font-size: 16px;
29 |     cursor: pointer;
30 |     border: none;
31 |     border-radius: 4px;
32 |     margin-right: 10px;
33 | }
34 | 
35 | button:hover {
36 |     background-color: #45a049;
37 | }
38 | 


--------------------------------------------------------------------------------
/45-Text-based Adventure Game/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     display: flex;
 5 |     align-items: center;
 6 |     justify-content: center;
 7 |     height: 100vh;
 8 |     background-color: #f4f4f4;
 9 | }
10 | 
11 | .container {
12 |     background-color: #fff;
13 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
14 | }
15 | 
16 | #game-container {
17 |     padding: 20px;
18 | }
19 | 
20 | #choices {
21 |     margin-top: 20px;
22 | }
23 | 
24 | button {
25 |     background-color: #4caf50;
26 |     color: white;
27 |     padding: 10px 20px;
28 |     font-size: 16px;
29 |     cursor: pointer;
30 |     border: none;
31 |     border-radius: 4px;
32 |     margin-right: 10px;
33 | }
34 | 
35 | button:hover {
36 |     background-color: #45a049;
37 | }
38 | 


--------------------------------------------------------------------------------
/73-2048/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: flex;
 3 |     justify-content: center;
 4 |     align-items: center;
 5 |     height: 100vh;
 6 |     margin: 0;
 7 |     background-color: #f8f8f8;
 8 |     font-family: "Arial", sans-serif;
 9 | }
10 | 
11 | #game-board {
12 |     display: grid;
13 |     grid-template-columns: repeat(4, 100px);
14 |     gap: 10px;
15 |     border: 5px solid #333;
16 |     border-radius: 10px;
17 |     padding: 10px;
18 |     background-color: #eee;
19 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
20 | }
21 | 
22 | .cell {
23 |     width: 100px;
24 |     height: 100px;
25 |     display: flex;
26 |     justify-content: center;
27 |     align-items: center;
28 |     font-size: 24px;
29 |     font-weight: bold;
30 |     background-color: #ccc;
31 |     border-radius: 5px;
32 | }
33 | 


--------------------------------------------------------------------------------
/64-Geographical Data Visualization/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link
 7 |             rel="stylesheet"
 8 |             href="https://unpkg.com/leaflet/dist/leaflet.css"
 9 |         />
10 |         <link rel="stylesheet" href="styles.css" />
11 |         <title>
12 |             Geographical Data Visualization || 100 JavaScript Projects
13 |         </title>
14 |     </head>
15 |     <body>
16 |         <div id="map"></div>
17 |         <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
18 |         <script src="https://d3js.org/d3.v5.min.js"></script>
19 |         <script src="app.js"></script>
20 |     </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/90-Responsive Design for Accessibility/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | header,
 8 | nav,
 9 | main,
10 | footer {
11 |     margin: 20px;
12 | }
13 | 
14 | nav ul {
15 |     list-style: none;
16 |     padding: 0;
17 |     margin: 0;
18 | }
19 | 
20 | nav li {
21 |     display: inline-block;
22 |     margin-right: 20px;
23 | }
24 | 
25 | a {
26 |     text-decoration: none;
27 |     color: #333;
28 | }
29 | 
30 | a:hover {
31 |     color: #0066cc;
32 | }
33 | 
34 | @media only screen and (max-width: 600px) {
35 |     nav {
36 |         display: block;
37 |     }
38 | 
39 |     nav ul {
40 |         text-align: center;
41 |     }
42 | 
43 |     nav li {
44 |         display: block;
45 |         margin: 10px 0;
46 |     }
47 | }
48 | 


--------------------------------------------------------------------------------
/92-Lazy Loading Images/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Lazy Loading Images</title>
 7 |         <link rel="stylesheet" href="styles.css" />
 8 |     </head>
 9 |     <body>
10 |         <main>
11 |             <h1>Lazy Loading Images Example</h1>
12 | 
13 |             <div class="image-container">
14 |                 <img data-src="images/image1.jpg" alt="Image 1" />
15 |                 <img data-src="images/image2.jpg" alt="Image 2" />
16 |                 <img data-src="images/image3.jpg" alt="Image 3" />
17 |             </div>
18 |         </main>
19 | 
20 |         <script src="script.js"></script>
21 |     </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/96-Memory Leak Detection/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Memory Leak Detection App</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Memory Leak Detection App</h1>
12 |             <button id="startButton">Start Memory Leak</button>
13 |             <button id="stopButton">Stop Memory Leak</button>
14 |             <div id="memoryUsage">
15 |                 Memory Usage: <span id="usageValue">0</span> MB
16 |             </div>
17 |         </div>
18 | 
19 |         <script src="script.js"></script>
20 |     </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/07-Basic Image Slider/index.js:
--------------------------------------------------------------------------------
 1 | let currentIndex = 0;
 2 | const slides = document.querySelector(".slider-wrapper").children;
 3 | const totalSlides = slides.length;
 4 | 
 5 | function changeSlide(direction) {
 6 |     currentIndex += direction;
 7 | 
 8 |     if (currentIndex < 0) {
 9 |         currentIndex = totalSlides - 1;
10 |     } else if (currentIndex >= totalSlides) {
11 |         currentIndex = 0;
12 |     }
13 | 
14 |     updateSlider();
15 | }
16 | 
17 | function updateSlider() {
18 |     const newTransformValue = -currentIndex * 100 + "%";
19 |     document.querySelector(".slider-wrapper").style.transform =
20 |         "translateX(" + newTransformValue + ")";
21 | }
22 | 
23 | // Optionally, you can add automatic sliding by uncommenting the line below:
24 | // setInterval(() => changeSlide(1), 3000);
25 | 


--------------------------------------------------------------------------------
/57-Note-taking App/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container {
11 |     text-align: center;
12 | }
13 | 
14 | textarea {
15 |     width: 100%;
16 |     height: 100px;
17 |     margin: 10px 0;
18 | }
19 | 
20 | button {
21 |     margin: 10px;
22 |     padding: 8px 16px;
23 |     font-size: 16px;
24 |     cursor: pointer;
25 | }
26 | 
27 | .note {
28 |     border: 1px solid #ddd;
29 |     padding: 10px;
30 |     margin: 10px 0;
31 |     display: flex;
32 |     justify-content: space-between;
33 |     align-items: center;
34 | }
35 | 
36 | .note-text {
37 |     flex-grow: 1;
38 | }
39 | 
40 | .note-buttons {
41 |     margin-left: 10px;
42 | }
43 | 


--------------------------------------------------------------------------------
/71-Tic Tac Toe/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | #game-board {
11 |     display: grid;
12 |     grid-template-columns: repeat(3, 100px);
13 |     grid-template-rows: repeat(3, 100px);
14 |     gap: 5px;
15 | }
16 | 
17 | .cell {
18 |     width: 100px;
19 |     height: 100px;
20 |     border: 2px solid #333;
21 |     display: flex;
22 |     align-items: center;
23 |     justify-content: center;
24 |     font-size: 24px;
25 |     cursor: pointer;
26 |     transition: background-color 0.3s;
27 | }
28 | 
29 | .cell:hover {
30 |     background-color: #eee;
31 | }
32 | 
33 | .message {
34 |     text-align: center;
35 |     margin-top: 20px;
36 | }
37 | 


--------------------------------------------------------------------------------
/08-Countdown Timer/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="style.css" />
 7 |         <title>Countdown Timer || 100 JavaScript Projects</title>
 8 |         <!-- style  -->
 9 |         <link rel="stylesheet" href="style.css" />
10 |     </head>
11 |     <body>
12 |         <div class="timer-container">
13 |             <h1 id="timer">00:00:00</h1>
14 |             <button onclick="startTimer()">Start</button>
15 |             <button onclick="stopTimer()">Stop</button>
16 |             <button onclick="resetTimer()">Reset</button>
17 |         </div>
18 | 
19 |         <script src="script.js"></script>
20 |     </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/99-Tree Shaking for Unused Code/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Tree Shaking App</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Tree Shaking App</h1>
12 |             <textarea
13 |                 id="inputCode"
14 |                 placeholder="Paste your JavaScript code here..."
15 |             ></textarea>
16 |             <button onclick="performTreeShaking()">Perform Tree Shaking</button>
17 |             <div id="outputCode"></div>
18 |         </div>
19 | 
20 |         <script src="script.js"></script>
21 |     </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/14-Chat Application/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Simple Chat App || 100 JavaScript Projects</title>
 7 |         <!-- CSS -->
 8 |         <link rel="stylesheet" href="style.css" />
 9 |     </head>
10 |     <body>
11 |         <div id="chat-box"></div>
12 |         <div id="input-box">
13 |             <input
14 |                 type="text"
15 |                 id="message-input"
16 |                 placeholder="Type your message"
17 |             />
18 |             <button id="send-button">Send</button>
19 |         </div>
20 | 
21 |         <!-- script includes  -->
22 |         <script src="index.js"></script>
23 |     </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/22-E-commerce Website/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | header {
 8 |     background-color: #333;
 9 |     color: #fff;
10 |     text-align: center;
11 |     padding: 10px;
12 | }
13 | 
14 | #productList {
15 |     display: flex;
16 |     flex-wrap: wrap;
17 |     justify-content: space-around;
18 |     padding: 20px;
19 | }
20 | 
21 | .product {
22 |     border: 1px solid #ddd;
23 |     border-radius: 5px;
24 |     margin: 10px;
25 |     padding: 10px;
26 |     width: 250px;
27 | }
28 | 
29 | .product img {
30 |     width: 100%;
31 |     height: auto;
32 | }
33 | 
34 | .button {
35 |     background-color: #333;
36 |     color: #fff;
37 |     padding: 8px;
38 |     border: none;
39 |     border-radius: 5px;
40 |     cursor: pointer;
41 | }
42 | 


--------------------------------------------------------------------------------
/50-Emoji Translator/script.js:
--------------------------------------------------------------------------------
 1 | function translateToEmoji() {
 2 |     var textInput = document.getElementById("textInput").value;
 3 |     var emojiResult = document.getElementById("emojiResult");
 4 | 
 5 |     // Simple mapping of words to emojis (customize as needed)
 6 |     var emojiMap = {
 7 |         happy: "😊",
 8 |         sad: "😢",
 9 |         love: "❤️",
10 |         cool: "😎",
11 |         hello: "👋",
12 |         // Add more mappings as needed
13 |     };
14 | 
15 |     // Replace words with corresponding emojis
16 |     var translatedText = textInput
17 |         .toLowerCase()
18 |         .replace(/\b\w+\b/g, function (word) {
19 |             return emojiMap[word] || word;
20 |         });
21 | 
22 |     // Display the translated text with emojis
23 |     emojiResult.textContent = translatedText;
24 | }
25 | 


--------------------------------------------------------------------------------
/81-Screen Reader Compatibility/app.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function () {
 2 |     const toggleButton = document.getElementById("toggleButton");
 3 |     const content = document.getElementById("content");
 4 | 
 5 |     toggleButton.addEventListener("click", function () {
 6 |         const isVisible = content.style.display === "block";
 7 |         content.style.display = isVisible ? "none" : "block";
 8 |         const buttonText = isVisible ? "Show Content" : "Hide Content";
 9 |         toggleButton.innerHTML = buttonText;
10 | 
11 |         // Update ARIA attributes
12 |         content.setAttribute("aria-hidden", isVisible ? "true" : "false");
13 |         toggleButton.setAttribute(
14 |             "aria-expanded",
15 |             isVisible ? "false" : "true"
16 |         );
17 |     });
18 | });
19 | 


--------------------------------------------------------------------------------
/95-Reducing DOM Manipulations/script.js:
--------------------------------------------------------------------------------
 1 | // Function to add a new list item
 2 | function addItem() {
 3 |     const listContainer = document.getElementById("listContainer");
 4 |     const newItem = document.createElement("li");
 5 |     newItem.textContent = `Item ${listContainer.childElementCount + 1}`;
 6 | 
 7 |     // Add event listener to the new item
 8 |     newItem.addEventListener("click", handleItemClick);
 9 | 
10 |     // Append the new item to the list container
11 |     listContainer.appendChild(newItem);
12 | }
13 | 
14 | // Function to handle item click (event delegation)
15 | function handleItemClick(event) {
16 |     alert(`You clicked on: ${event.target.textContent}`);
17 | }
18 | 
19 | // Add event listener to the "Add Item" button
20 | document.getElementById("addItemBtn").addEventListener("click", addItem);
21 | 


--------------------------------------------------------------------------------
/98-Minification and Bundling/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Minification and Bundling App</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Minification and Bundling App</h1>
12 |             <textarea
13 |                 id="inputCode"
14 |                 placeholder="Paste your code here..."
15 |             ></textarea>
16 |             <button onclick="minifyAndBundle()">Minify and Bundle</button>
17 |             <div id="outputCode"></div>
18 |         </div>
19 | 
20 |         <script src="script.js"></script>
21 |     </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/20-Blogging Platform/script.js:
--------------------------------------------------------------------------------
 1 | const blogPosts = [
 2 |     { title: "First Post", content: "This is the content of the first post." },
 3 |     {
 4 |         title: "Second Post",
 5 |         content: "This is the content of the second post.",
 6 |     },
 7 |     // Add more posts as needed
 8 | ];
 9 | 
10 | function displayBlogPosts() {
11 |     const blogPostsElement = document.getElementById("blogPosts");
12 | 
13 |     blogPosts.forEach((post) => {
14 |         const postElement = document.createElement("div");
15 |         postElement.classList.add("post");
16 | 
17 |         postElement.innerHTML = `
18 |               <h2>${post.title}</h2>
19 |               <p>${post.content}</p>
20 |           `;
21 | 
22 |         blogPostsElement.appendChild(postElement);
23 |     });
24 | }
25 | 
26 | window.onload = displayBlogPosts;
27 | 


--------------------------------------------------------------------------------
/53-QR Code Generator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>QR Code Generator || 100 JavaScript Project</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>QR Code Generator</h1>
12 |             <label for="textInput">Enter text or URL:</label>
13 |             <input type="text" id="textInput" />
14 |             <button onclick="generateQRCode()">Generate QR Code</button>
15 |             <div id="qrcode"></div>
16 |         </div>
17 | 
18 |         <script src="qrcode.min.js"></script>
19 |         <script src="script.js"></script>
20 |     </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/55-Markdown Editor/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Markdown Editor || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Markdown Editor</h1>
12 |             <textarea
13 |                 id="markdownInput"
14 |                 placeholder="Enter your Markdown here..."
15 |             ></textarea>
16 |             <div id="markdownPreview"></div>
17 |         </div>
18 | 
19 |         <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
20 |         <script src="script.js"></script>
21 |     </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/06-Random Quote Generator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |         <title>Random Quote Generator</title>
 8 |         <link rel="stylesheet" href="style.css" />
 9 |     </head>
10 |     <body>
11 |         <div class="container">
12 |             <div class="header">
13 |                 <h1>Random Quote Generator</h1>
14 |                 <p class="quote" id="quote">Quote...</p>
15 |                 <button class="btn" id="btn">Quote Generate</button>
16 |             </div>
17 |         </div>
18 |         <!-- Javascript includes -->
19 |         <script src="index.js"></script>
20 |     </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/65-Network Traffic Analyzer/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | .container {
 8 |     display: flex;
 9 |     flex-direction: column;
10 |     align-items: center;
11 |     padding: 20px;
12 | }
13 | 
14 | #traffic-chart {
15 |     width: 80vw;
16 |     height: 300px;
17 |     border: 1px solid #ddd;
18 |     margin-bottom: 20px;
19 | }
20 | 
21 | #packet-list {
22 |     width: 80vw;
23 |     border: 1px solid #ddd;
24 |     padding: 20px;
25 | }
26 | 
27 | #packet-list h2 {
28 |     margin-bottom: 10px;
29 | }
30 | 
31 | #packet-list-ul {
32 |     list-style-type: none;
33 |     padding: 0;
34 |     margin: 0;
35 |     max-height: 300px;
36 |     overflow-y: auto;
37 | }
38 | 
39 | li {
40 |     border-bottom: 1px solid #ddd;
41 |     padding: 10px;
42 | }
43 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "react-jsx",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./src/*"]
23 |     }
24 |   },
25 |   "include": [
26 |     "next-env.d.ts",
27 |     "**/*.ts",
28 |     "**/*.tsx",
29 |     ".next/types/**/*.ts",
30 |     ".next/dev/types/**/*.ts",
31 |     "**/*.mts"
32 |   ],
33 |   "exclude": ["node_modules"]
34 | }
35 | 


--------------------------------------------------------------------------------
/07-Basic Image Slider/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | body {
 7 |     font-family: Arial, sans-serif;
 8 |     margin: 0;
 9 |     padding: 0;
10 |     text-align: center;
11 | }
12 | 
13 | .slider-container {
14 |     position: relative;
15 |     max-width: 600px;
16 |     margin: auto;
17 |     overflow: hidden;
18 | }
19 | 
20 | .slider-wrapper {
21 |     display: flex;
22 |     transition: transform 0.5s ease-in-out;
23 | }
24 | 
25 | img {
26 |     width: 100%;
27 |     height: auto;
28 | }
29 | 
30 | button {
31 |     position: absolute;
32 |     top: 50%;
33 |     transform: translateY(-50%);
34 |     font-size: 16px;
35 |     padding: 10px 20px;
36 |     cursor: pointer;
37 | }
38 | 
39 | .prev {
40 |     left: 10px;
41 | }
42 | 
43 | .next {
44 |     right: 10px;
45 | }
46 | 


--------------------------------------------------------------------------------
/40-Recipe Finder using Food API/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Recipe Finder || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Recipe Finder</h1>
12 |             <input
13 |                 type="text"
14 |                 id="ingredientInput"
15 |                 placeholder="Enter ingredients (comma-separated)"
16 |             />
17 |             <button id="searchButton">Search Recipes</button>
18 |             <div id="recipeContainer"></div>
19 |         </div>
20 |         <script src="script.js"></script>
21 |     </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/47-Meme Generator/script.js:
--------------------------------------------------------------------------------
 1 | function generateMeme() {
 2 |     const topText = document.getElementById("topText").value;
 3 |     const bottomText = document.getElementById("bottomText").value;
 4 |     const imageSelect = document.getElementById("imageSelect");
 5 |     const selectedImage = imageSelect.options[imageSelect.selectedIndex].value;
 6 | 
 7 |     const memeContainer = document.getElementById("meme-container");
 8 |     const topTextElement = document.getElementById("top-text");
 9 |     const bottomTextElement = document.getElementById("bottom-text");
10 |     const memeImageElement = document.getElementById("meme-image");
11 | 
12 |     topTextElement.textContent = topText;
13 |     bottomTextElement.textContent = bottomText;
14 |     memeImageElement.src = selectedImage;
15 | 
16 |     memeContainer.style.display = "block";
17 | }
18 | 


--------------------------------------------------------------------------------
/43-Interactive Storytelling/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Interactive Storytelling || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <div id="story-container">
12 |                 <p id="story">Once upon a time...</p>
13 |                 <div id="choices">
14 |                     <button onclick="makeChoice(1)">Choice 1</button>
15 |                     <button onclick="makeChoice(2)">Choice 2</button>
16 |                 </div>
17 |             </div>
18 |         </div>
19 |         <script src="script.js"></script>
20 |     </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/100-Code Splitting/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Code Splitting App</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Code Splitting App</h1>
12 |             <textarea
13 |                 id="inputCode"
14 |                 placeholder="Paste your JavaScript code here..."
15 |             ></textarea>
16 |             <button onclick="performCodeSplitting()">
17 |                 Perform Code Splitting
18 |             </button>
19 |             <div id="outputFiles"></div>
20 |         </div>
21 | 
22 |         <script src="script.js"></script>
23 |     </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/83-Contrast Checker/readme.md:
--------------------------------------------------------------------------------
 1 | # Notes:
 2 | 
 3 | Creating an advanced Contrast Checker web app involves assessing the contrast between text and background colors to ensure readability, especially for users with visual impairments. For this example, I'll use the React.js framework. Make sure to include React.js in your project, either by downloading it and adding it to your project or using a CDN.
 4 | 
 5 | **In this example:**
 6 | 
 7 | -   Users can input foreground and background colors using color pickers.
 8 | -   The contrast ratio is calculated and compared against the WCAG 2.0 AA standard (4.5:1).
 9 | -   The result is displayed, indicating whether the contrast passes or fails.
10 | 
11 | Feel free to customize the app further based on your specific requirements. This example provides a basic foundation for a Contrast Checker web app using React.js.
12 | 


--------------------------------------------------------------------------------
/08-Countdown Timer/script.js:
--------------------------------------------------------------------------------
 1 | let timer;
 2 | let seconds = 0;
 3 | 
 4 | function startTimer() {
 5 |     if (!timer) {
 6 |         timer = setInterval(updateTimer, 1000);
 7 |     }
 8 | }
 9 | 
10 | function stopTimer() {
11 |     clearInterval(timer);
12 |     timer = null;
13 | }
14 | 
15 | function resetTimer() {
16 |     stopTimer();
17 |     seconds = 0;
18 |     updateTimer();
19 | }
20 | 
21 | function updateTimer() {
22 |     const hours = Math.floor(seconds / 3600);
23 |     const minutes = Math.floor((seconds % 3600) / 60);
24 |     const remainingSeconds = seconds % 60;
25 | 
26 |     const formattedTime = `${String(hours).padStart(2, "0")}:${String(
27 |         minutes
28 |     ).padStart(2, "0")}:${String(remainingSeconds).padStart(2, "0")}`;
29 | 
30 |     document.getElementById("timer").textContent = formattedTime;
31 |     seconds++;
32 | }
33 | 


--------------------------------------------------------------------------------
/21-Social Media Dashboard/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Social Media Dashboard || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <header>
11 |             <h1>Social Media Dashboard</h1>
12 |             <button onclick="logout()">Logout</button>
13 |         </header>
14 | 
15 |         <section id="profile">
16 |             <!-- User profile information will be displayed here -->
17 |         </section>
18 | 
19 |         <section id="posts">
20 |             <!-- Social media posts will be displayed here -->
21 |         </section>
22 | 
23 |         <script src="script.js"></script>
24 |     </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/77-Memory Puzzle Game/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: flex;
 3 |     align-items: center;
 4 |     justify-content: center;
 5 |     height: 100vh;
 6 |     margin: 0;
 7 |     font-family: "Arial", sans-serif;
 8 | }
 9 | 
10 | #game-container {
11 |     text-align: center;
12 | }
13 | 
14 | .board {
15 |     display: grid;
16 |     grid-template-columns: repeat(4, 1fr);
17 |     gap: 10px;
18 |     margin-top: 20px;
19 | }
20 | 
21 | .card {
22 |     width: 100px;
23 |     height: 100px;
24 |     background-color: #3498db;
25 |     color: #fff;
26 |     font-size: 24px;
27 |     display: flex;
28 |     align-items: center;
29 |     justify-content: center;
30 |     cursor: pointer;
31 | }
32 | 
33 | .hidden {
34 |     display: none;
35 | }
36 | 
37 | #reset-button {
38 |     padding: 10px;
39 |     font-size: 16px;
40 |     cursor: pointer;
41 |     margin-top: 20px;
42 | }
43 | 


--------------------------------------------------------------------------------
/84-Text Resize/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Text Resize App</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="app">
11 |             <h1>Text Resize App</h1>
12 |             <label for="fontSize">Adjust Text Size:</label>
13 |             <input
14 |                 type="range"
15 |                 id="fontSize"
16 |                 min="50"
17 |                 max="200"
18 |                 step="1"
19 |                 value="100"
20 |             />
21 |             <p id="textToResize">This is the text that will be resized.</p>
22 |         </div>
23 | 
24 |         <script src="app.js"></script>
25 |     </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/24-Photo Editing Tool/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Photo Editing Tool || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <input type="file" id="imageInput" accept="image/*" />
11 |         <canvas id="canvas"></canvas>
12 |         <button onclick="applyFilter('grayscale')">Grayscale</button>
13 |         <button onclick="applyFilter('sepia')">Sepia</button>
14 |         <button onclick="applyFilter('invert')">Invert</button>
15 |         <button onclick="resetImage()">Reset</button>
16 |         <button onclick="downloadImage()">Download</button>
17 | 
18 |         <script src="script.js"></script>
19 |     </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/39-Random Joke Generator using Joke API/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     background-color: #f4f4f4;
 4 |     margin: 0;
 5 |     display: flex;
 6 |     align-items: center;
 7 |     justify-content: center;
 8 |     height: 100vh;
 9 | }
10 | 
11 | .container {
12 |     text-align: center;
13 |     background-color: #fff;
14 |     padding: 20px;
15 |     border-radius: 8px;
16 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
17 | }
18 | 
19 | #joke-container {
20 |     margin: 20px 0;
21 |     padding: 15px;
22 |     border: 1px solid #ddd;
23 |     border-radius: 4px;
24 | }
25 | 
26 | button {
27 |     background-color: #4caf50;
28 |     color: white;
29 |     padding: 10px 20px;
30 |     font-size: 16px;
31 |     cursor: pointer;
32 |     border: none;
33 |     border-radius: 4px;
34 | }
35 | 
36 | button:hover {
37 |     background-color: #45a049;
38 | }
39 | 


--------------------------------------------------------------------------------
/87-Focus Management/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Focus Management App</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Focus Management App</h1>
12 |             <div class="input-section">
13 |                 <input
14 |                     type="text"
15 |                     id="taskInput"
16 |                     placeholder="Add a new task..."
17 |                 />
18 |                 <button id="addTaskBtn">Add Task</button>
19 |             </div>
20 |             <ul id="taskList" class="task-list"></ul>
21 |         </div>
22 |         <script src="script.js"></script>
23 |     </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/35-Weather Forecast using OpenWeatherMap API/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Weather Forecast || 100 JavaScript Projects</title>
 7 |         <!-- Styles Links -->
 8 |         <link rel="stylesheet" href="style.css" />
 9 |     </head>
10 |     <body>
11 |         <h1>Weather Forecast</h1>
12 |         <div id="weather-container">
13 |             <input type="text" id="city-input" placeholder="Enter City" />
14 |             <button id="get-weather-button" onclick="getWeather()">
15 |                 Get Weather
16 |             </button>
17 |             <div id="weather-info"></div>
18 |         </div>
19 | 
20 |         <!-- Script Includes  -->
21 |         <script src="app.js"></script>
22 |     </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/79-Crossword Puzzle/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="style.css" />
 7 |         <title>Crossword Puzzle</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="puzzle-container">
11 |             <div id="puzzle-board" class="board"></div>
12 |             <div id="word-input">
13 |                 <label for="word">Enter word:</label>
14 |                 <input type="text" id="word" maxlength="15" />
15 |                 <button id="submit-button">Submit</button>
16 |             </div>
17 |             <div id="message" class="hidden"></div>
18 |             <button id="reset-button">New Puzzle</button>
19 |         </div>
20 |         <script src="script.js"></script>
21 |     </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/89-Aria Role Implementation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>ARIA Role Implementation App</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="main" role="main" aria-labelledby="main-heading">
11 |             <h1 id="main-heading">ARIA Role Implementation App</h1>
12 |             <p>This is a simple example demonstrating ARIA roles.</p>
13 |             <button
14 |                 id="alertBtn"
15 |                 role="button"
16 |                 aria-label="Click me to show an alert"
17 |             >
18 |                 Show Alert
19 |             </button>
20 |         </div>
21 |         <script src="script.js"></script>
22 |     </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/38-NASA API for Astronomy Data/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>NASA APOD || 100 JavaScript Project</title>
 7 |         <!-- styles links -->
 8 |         <link rel="stylesheet" href="style.css" />
 9 |     </head>
10 |     <body>
11 |         <h1>NASA APOD - Astronomy Picture of the Day</h1>
12 |         <div id="apod-container">
13 |             <button id="load-apod-button" onclick="loadAPOD()">
14 |                 Load APOD
15 |             </button>
16 |             <div id="apod-title"></div>
17 |             <img id="apod-image" alt="APOD" />
18 |             <p id="apod-explanation"></p>
19 |         </div>
20 | 
21 |         <!-- script includes -->
22 |         <script src="index.js"></script>
23 |     </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/42-Virtual Piano/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     display: flex;
 5 |     align-items: center;
 6 |     justify-content: center;
 7 |     height: 100vh;
 8 |     background-color: #f4f4f4;
 9 | }
10 | 
11 | .container {
12 |     background-color: #fff;
13 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
14 | }
15 | 
16 | .piano {
17 |     display: flex;
18 |     justify-content: space-between;
19 |     margin: 20px;
20 | }
21 | 
22 | .white-key,
23 | .black-key {
24 |     width: 50px;
25 |     height: 200px;
26 |     border: 1px solid #000;
27 |     box-sizing: border-box;
28 |     cursor: pointer;
29 | }
30 | 
31 | .white-key {
32 |     background-color: #fff;
33 | }
34 | 
35 | .black-key {
36 |     position: relative;
37 |     background-color: #000;
38 |     width: 30px;
39 |     height: 120px;
40 |     margin-left: -15px;
41 |     z-index: 1;
42 | }
43 | 


--------------------------------------------------------------------------------
/60-Clipboard Manager/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Clipboard Manager || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Clipboard Manager</h1>
12 |             <textarea
13 |                 id="clipboardInput"
14 |                 placeholder="Paste your text here"
15 |             ></textarea>
16 |             <button onclick="copyToClipboard()">Copy to Clipboard</button>
17 |             <button onclick="clearClipboard()">Clear Clipboard</button>
18 |             <div id="clipboardHistory"></div>
19 |         </div>
20 | 
21 |         <script src="script.js"></script>
22 |     </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/28-AI-powered Recommendation System/script.js:
--------------------------------------------------------------------------------
 1 | // Sample data for the recommendation system
 2 | const trainingData = [
 3 |     { input: [0, 0], output: [0] },
 4 |     { input: [0, 1], output: [1] },
 5 |     { input: [1, 0], output: [1] },
 6 |     { input: [1, 1], output: [0] },
 7 | ];
 8 | 
 9 | // Create a neural network
10 | const net = new brain.NeuralNetwork();
11 | 
12 | // Train the neural network with the sample data
13 | net.train(trainingData);
14 | 
15 | // Function to make recommendations based on input
16 | function makeRecommendation(inputData) {
17 |     const output = net.run(inputData);
18 |     return output[0] >= 0.5; // Adjust the threshold based on your use case
19 | }
20 | 
21 | // Example usage
22 | const userInput = [0, 1]; // Replace this with actual user input
23 | 
24 | const recommendation = makeRecommendation(userInput);
25 | 
26 | console.log("Recommendation:", recommendation);
27 | 


--------------------------------------------------------------------------------
/48-Virtual Pet/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Virtual Pet || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Virtual Pet</h1>
12 |             <div id="pet-container">
13 |                 <div id="pet"></div>
14 |                 <div id="status"></div>
15 |             </div>
16 |             <div id="actions">
17 |                 <button onclick="feed()">Feed</button>
18 |                 <button onclick="play()">Play</button>
19 |                 <button onclick="sleep()">Sleep</button>
20 |             </div>
21 |         </div>
22 |         <script src="script.js"></script>
23 |     </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/27-Job Board Platform/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     background-color: #f4f4f4;
 6 | }
 7 | 
 8 | .container {
 9 |     max-width: 600px;
10 |     margin: 50px auto;
11 |     background-color: #fff;
12 |     padding: 20px;
13 |     border-radius: 8px;
14 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
15 | }
16 | 
17 | form {
18 |     display: flex;
19 |     flex-direction: column;
20 | }
21 | 
22 | label {
23 |     margin-bottom: 5px;
24 | }
25 | 
26 | input,
27 | textarea {
28 |     padding: 8px;
29 |     margin-bottom: 10px;
30 | }
31 | 
32 | button {
33 |     padding: 10px;
34 |     background-color: #007bff;
35 |     color: #fff;
36 |     border: none;
37 |     border-radius: 5px;
38 |     cursor: pointer;
39 | }
40 | 
41 | button:hover {
42 |     background-color: #0056b3;
43 | }
44 | 
45 | #jobList {
46 |     margin-top: 20px;
47 | }
48 | 


--------------------------------------------------------------------------------
/17-Music Player/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Music Player || 100 JavaScript Projects</title>
 7 |         <!-- style  -->
 8 |         <link rel="stylesheet" href="style.css" />
 9 |     </head>
10 |     <body>
11 |         <h1>Music Player</h1>
12 |         <div id="audio-controls">
13 |             <audio id="audio" controls>
14 |                 <source src="your-audio-file.mp3" type="audio/mp3" />
15 |                 Your browser does not support the audio element.
16 |             </audio>
17 |             <button onclick="playPause()">Play/Pause</button>
18 |             <button onclick="stop()">Stop</button>
19 |         </div>
20 | 
21 |         <!-- script includes  -->
22 |         <script src="index.js"></script>
23 |     </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/21-Social Media Dashboard/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | header {
 8 |     background-color: #333;
 9 |     color: #fff;
10 |     text-align: center;
11 |     padding: 10px;
12 | }
13 | 
14 | button {
15 |     background-color: #fff;
16 |     color: #333;
17 |     padding: 8px;
18 |     border: none;
19 |     border-radius: 5px;
20 |     cursor: pointer;
21 | }
22 | 
23 | #profile {
24 |     max-width: 800px;
25 |     margin: 20px auto;
26 |     padding: 20px;
27 |     border: 1px solid #ddd;
28 |     border-radius: 5px;
29 | }
30 | 
31 | #posts {
32 |     max-width: 800px;
33 |     margin: 20px auto;
34 | }
35 | 
36 | .post {
37 |     border: 1px solid #ddd;
38 |     border-radius: 5px;
39 |     margin-bottom: 20px;
40 |     padding: 10px;
41 | }
42 | 
43 | .post h2 {
44 |     color: #333;
45 | }
46 | 
47 | .post p {
48 |     color: #666;
49 | }
50 | 


--------------------------------------------------------------------------------
/91-Code Profiler and Optimizer/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function () {
 2 |     const codeInput = document.getElementById("codeInput");
 3 |     const charCount = document.getElementById("charCount");
 4 |     const optimizeBtn = document.getElementById("optimizeBtn");
 5 |     const optimizedCode = document.getElementById("optimizedCode");
 6 | 
 7 |     // Update character count on input
 8 |     codeInput.addEventListener("input", function () {
 9 |         const code = codeInput.value;
10 |         charCount.textContent = code.length;
11 |     });
12 | 
13 |     // Optimize code on button click
14 |     optimizeBtn.addEventListener("click", function () {
15 |         const code = codeInput.value;
16 | 
17 |         // Basic optimization example: remove extra whitespaces
18 |         const optimized = code.replace(/\s+/g, " ");
19 | 
20 |         optimizedCode.textContent = optimized;
21 |     });
22 | });
23 | 


--------------------------------------------------------------------------------
/94-Caching Mechanism/script.js:
--------------------------------------------------------------------------------
 1 | // Function to cache data in localStorage
 2 | function cacheData() {
 3 |     const dataInput = document.getElementById("dataInput");
 4 |     const cachedData =
 5 |         localStorage.getItem("cachedData") || "No data cached yet";
 6 | 
 7 |     // Get the input value
 8 |     const newData = dataInput.value.trim();
 9 | 
10 |     // Update cached data in localStorage
11 |     localStorage.setItem("cachedData", newData);
12 | 
13 |     // Update the displayed cached data
14 |     document.getElementById(
15 |         "cachedData"
16 |     ).textContent = `Cached Data: ${newData}`;
17 | }
18 | 
19 | // Initial load: Display cached data if available
20 | window.onload = function () {
21 |     const cachedData =
22 |         localStorage.getItem("cachedData") || "No data cached yet";
23 |     document.getElementById(
24 |         "cachedData"
25 |     ).textContent = `Cached Data: ${cachedData}`;
26 | };
27 | 


--------------------------------------------------------------------------------
/78-Battleship/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: flex;
 3 |     align-items: center;
 4 |     justify-content: center;
 5 |     height: 100vh;
 6 |     margin: 0;
 7 |     font-family: "Arial", sans-serif;
 8 | }
 9 | 
10 | #game-container {
11 |     text-align: center;
12 | }
13 | 
14 | .board {
15 |     display: grid;
16 |     grid-template-columns: repeat(10, 30px);
17 |     gap: 5px;
18 |     margin-top: 20px;
19 | }
20 | 
21 | .cell {
22 |     width: 30px;
23 |     height: 30px;
24 |     border: 1px solid #ddd;
25 |     display: flex;
26 |     align-items: center;
27 |     justify-content: center;
28 |     cursor: pointer;
29 | }
30 | 
31 | .ship {
32 |     background-color: #3498db;
33 | }
34 | 
35 | .hit {
36 |     background-color: #e74c3c;
37 | }
38 | 
39 | .hidden {
40 |     display: none;
41 | }
42 | 
43 | #reset-button {
44 |     padding: 10px;
45 |     font-size: 16px;
46 |     cursor: pointer;
47 |     margin-top: 20px;
48 | }
49 | 


--------------------------------------------------------------------------------
/44-3D Cube Puzzle/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>3D Cube Puzzle | 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <div class="cube" id="cube">
12 |                 <div class="face front"></div>
13 |                 <div class="face back"></div>
14 |                 <div class="face left"></div>
15 |                 <div class="face right"></div>
16 |                 <div class="face top"></div>
17 |                 <div class="face bottom"></div>
18 |             </div>
19 |             <div id="instructions">Rotate the cube to match the pattern!</div>
20 |         </div>
21 |         <script src="script.js"></script>
22 |     </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/06-Random Quote Generator/index.js:
--------------------------------------------------------------------------------
 1 | // DOM Element
 2 | const btnEl = document.getElementById("btn");
 3 | const quoteEl = document.getElementById("quote");
 4 | const apiUrl = `https://api.api-ninjas.com/v1/quotes?category=happiness`;
 5 | const apiKey = "MNemEr9THSVTCxISru9Snw==VJeeHWGzXAbYm3tw";
 6 | 
 7 | const options = {
 8 |     method: "GET",
 9 |     headers: {
10 |         "X-Api-Key": apiKey,
11 |     },
12 | };
13 | 
14 | const getJoke = async () => {
15 |     try {
16 |         quoteEl.innerText = "Loading...";
17 |         const response = await fetch(apiUrl, options);
18 |         const data = await response.json();
19 |         const quote = data[0].quote;
20 |         console.log(quote);
21 |         quoteEl.innerText = quote;
22 |     } catch (error) {
23 |         quoteEl.innerText = "An error happened, try again later.";
24 |         console.log(error);
25 |     }
26 | };
27 | getJoke();
28 | 
29 | btnEl.addEventListener("click", getJoke);
30 | 


--------------------------------------------------------------------------------
/40-Recipe Finder using Food API/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     background-color: #f4f4f4;
 4 |     margin: 0;
 5 |     display: flex;
 6 |     align-items: center;
 7 |     justify-content: center;
 8 |     height: 100vh;
 9 | }
10 | 
11 | .container {
12 |     text-align: center;
13 |     background-color: #fff;
14 |     padding: 20px;
15 |     border-radius: 8px;
16 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
17 | }
18 | 
19 | #ingredientInput {
20 |     width: 100%;
21 |     padding: 10px;
22 |     margin-bottom: 10px;
23 |     box-sizing: border-box;
24 | }
25 | 
26 | #searchButton {
27 |     background-color: #4caf50;
28 |     color: white;
29 |     padding: 10px 20px;
30 |     font-size: 16px;
31 |     cursor: pointer;
32 |     border: none;
33 |     border-radius: 4px;
34 | }
35 | 
36 | #searchButton:hover {
37 |     background-color: #45a049;
38 | }
39 | 
40 | #recipeContainer {
41 |     margin-top: 20px;
42 | }
43 | 


--------------------------------------------------------------------------------
/80-Platformer Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="style.css" />
 7 |         <title>Platformer Game</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="game-container">
11 |             <div id="player"></div>
12 |             <div
13 |                 class="platform"
14 |                 style="top: 300px; left: 150px; width: 200px"
15 |             ></div>
16 |             <div
17 |                 class="platform"
18 |                 style="top: 200px; left: 400px; width: 150px"
19 |             ></div>
20 |             <div
21 |                 class="platform"
22 |                 style="top: 400px; left: 600px; width: 100px"
23 |             ></div>
24 |         </div>
25 |         <script src="script.js"></script>
26 |     </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | 
 3 | /* -----------------------
 4 |    DARK THEME BASE (Tailwind v4)
 5 | ------------------------ */
 6 | @layer base {
 7 |   :root {
 8 |     /* Core Colors */
 9 |     --background: 0 0% 9%;
10 |     /* #171717 */
11 |     --foreground: 0 0% 98%;
12 |     /* near-white text */
13 | 
14 |     --primary: 45 98% 54%;
15 |     /* #fdba13 */
16 |     --primary-foreground: 0 0% 0%;
17 | 
18 |     --secondary: 220 20% 16%;
19 |     --secondary-foreground: 220 27% 96%;
20 | 
21 |     --muted: 220 15% 24%;
22 |     --muted-foreground: 220 15% 70%;
23 | 
24 |     --border: 220 15% 22%;
25 |     --input: 220 20% 26%;
26 |     --ring: 45 98% 54%;
27 |     /* match primary */
28 | 
29 |     --radius: 0.75rem;
30 |   }
31 | 
32 |   /* Base body styling */
33 |   body {
34 |     background-color: hsl(var(--background));
35 |     color: hsl(var(--foreground));
36 |     font-family: var(--font-geist-sans), sans-serif;
37 |   }
38 | }


--------------------------------------------------------------------------------
/81-Screen Reader Compatibility/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Screen Reader Compatibility</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="app">
11 |             <h1>Screen Reader Compatibility Test</h1>
12 |             <p id="info">
13 |                 This is a simple web app to test screen reader compatibility.
14 |             </p>
15 |             <button id="toggleButton" aria-live="assertive" aria-atomic="true">
16 |                 Toggle Content
17 |             </button>
18 |             <div id="content" aria-hidden="true">
19 |                 <p>This is the content that will be toggled.</p>
20 |             </div>
21 |         </div>
22 | 
23 |         <script src="app.js"></script>
24 |     </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/23-Real-time Chat Room/script.js:
--------------------------------------------------------------------------------
 1 | // Replace 'ws://your-server-address' with the actual WebSocket server address
 2 | const socket = new WebSocket("ws://your-server-address");
 3 | 
 4 | socket.addEventListener("open", (event) => {
 5 |     console.log("WebSocket connection opened:", event);
 6 | });
 7 | 
 8 | socket.addEventListener("message", (event) => {
 9 |     const chatMessages = document.getElementById("chatMessages");
10 |     const message = document.createElement("div");
11 |     message.textContent = event.data;
12 |     chatMessages.appendChild(message);
13 | });
14 | 
15 | socket.addEventListener("close", (event) => {
16 |     console.log("WebSocket connection closed:", event);
17 | });
18 | 
19 | function sendMessage() {
20 |     const messageInput = document.getElementById("messageInput");
21 |     const message = messageInput.value;
22 | 
23 |     if (message.trim() !== "") {
24 |         socket.send(message);
25 |         messageInput.value = "";
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/15-Interactive Quiz/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     display: flex;
 6 |     flex-direction: column;
 7 |     align-items: center;
 8 |     justify-content: center;
 9 |     height: 100vh;
10 |     background-color: #f4f4f4;
11 | }
12 | 
13 | #quiz-container {
14 |     width: 400px;
15 |     padding: 20px;
16 |     background-color: #fff;
17 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
18 |     border-radius: 8px;
19 | }
20 | 
21 | .question {
22 |     margin-bottom: 10px;
23 |     font-weight: bold;
24 | }
25 | 
26 | .options {
27 |     margin-top: 10px;
28 | }
29 | 
30 | .option {
31 |     margin-bottom: 5px;
32 | }
33 | 
34 | #submit-button {
35 |     margin-top: 20px;
36 |     padding: 10px;
37 |     cursor: pointer;
38 |     background-color: #3498db;
39 |     color: #fff;
40 |     border: none;
41 |     border-radius: 5px;
42 | }
43 | 
44 | #result {
45 |     margin-top: 20px;
46 |     font-weight: bold;
47 | }
48 | 


--------------------------------------------------------------------------------
/48-Virtual Pet/script.js:
--------------------------------------------------------------------------------
 1 | let happiness = 50;
 2 | let hunger = 50;
 3 | let energy = 50;
 4 | 
 5 | function updateStatus() {
 6 |     const statusElement = document.getElementById("status");
 7 |     statusElement.textContent = `Happiness: ${happiness} | Hunger: ${hunger} | Energy: ${energy}`;
 8 | 
 9 |     const petElement = document.getElementById("pet");
10 | 
11 |     if (happiness < 30 || hunger > 70 || energy < 30) {
12 |         petElement.style.backgroundColor = "#ff3300"; // Change color if pet is not happy
13 |     } else {
14 |         petElement.style.backgroundColor = "#ffcc66";
15 |     }
16 | }
17 | 
18 | function feed() {
19 |     hunger -= 10;
20 |     happiness += 5;
21 |     updateStatus();
22 | }
23 | 
24 | function play() {
25 |     happiness += 10;
26 |     energy -= 5;
27 |     updateStatus();
28 | }
29 | 
30 | function sleep() {
31 |     energy += 20;
32 |     happiness -= 10;
33 |     updateStatus();
34 | }
35 | 
36 | // Initial status update
37 | updateStatus();
38 | 


--------------------------------------------------------------------------------
/27-Job Board Platform/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="style.css" />
 7 |         <title>Job Board || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Job Board</h1>
12 |             <form id="jobForm">
13 |                 <label for="jobTitle">Job Title:</label>
14 |                 <input type="text" id="jobTitle" required />
15 | 
16 |                 <label for="jobDescription">Job Description:</label>
17 |                 <textarea id="jobDescription" required></textarea>
18 | 
19 |                 <button type="button" onclick="addJob()">Post Job</button>
20 |             </form>
21 | 
22 |             <div id="jobList"></div>
23 |         </div>
24 | 
25 |         <script src="script.js"></script>
26 |     </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/96-Memory Leak Detection/script.js:
--------------------------------------------------------------------------------
 1 | let memoryLeakArray = [];
 2 | let memoryLeakInterval;
 3 | let memoryUsageElement = document.getElementById("usageValue");
 4 | 
 5 | function startMemoryLeak() {
 6 |     memoryLeakInterval = setInterval(() => {
 7 |         const newData = new Array(100000).fill("MemoryLeakData");
 8 |         memoryLeakArray = memoryLeakArray.concat(newData);
 9 |         updateMemoryUsage();
10 |         console.log("Memory Leak Detected!");
11 |     }, 1000);
12 | }
13 | 
14 | function stopMemoryLeak() {
15 |     clearInterval(memoryLeakInterval);
16 | }
17 | 
18 | function updateMemoryUsage() {
19 |     const usedMemory = (
20 |         performance.memory.usedJSHeapSize /
21 |         (1024 * 1024)
22 |     ).toFixed(2);
23 |     memoryUsageElement.textContent = `${usedMemory} MB`;
24 | }
25 | 
26 | document
27 |     .getElementById("startButton")
28 |     .addEventListener("click", startMemoryLeak);
29 | document.getElementById("stopButton").addEventListener("click", stopMemoryLeak);
30 | 


--------------------------------------------------------------------------------
/69-Population Density Map/app.js:
--------------------------------------------------------------------------------
 1 | // Sample population density data
 2 | const populationData = [
 3 |     { location: [37.7749, -122.4194], population: 870887 },
 4 |     { location: [34.0522, -118.2437], population: 399975 },
 5 |     { location: [40.7128, -74.006], population: 8175133 },
 6 |     // Add more data as needed
 7 | ];
 8 | 
 9 | // Create a Leaflet map
10 | const map = L.map("map").setView([37.7749, -122.4194], 4);
11 | 
12 | L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
13 |     attribution: "© OpenStreetMap contributors",
14 | }).addTo(map);
15 | 
16 | // Add population density circles to the map
17 | populationData.forEach((entry) => {
18 |     const circle = L.circle(entry.location, {
19 |         color: "red",
20 |         fillColor: "red",
21 |         fillOpacity: 0.5,
22 |         radius: Math.sqrt(entry.population) * 100,
23 |     }).addTo(map);
24 | 
25 |     // Add a popup with population information
26 |     circle.bindPopup(`Population: ${entry.population}`);
27 | });
28 | 


--------------------------------------------------------------------------------
/90-Responsive Design for Accessibility/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Your Accessible Web App</title>
 7 |         <link rel="stylesheet" href="styles.css" />
 8 |     </head>
 9 |     <body>
10 |         <header>
11 |             <h1>Your Accessible Web App</h1>
12 |         </header>
13 | 
14 |         <nav>
15 |             <ul>
16 |                 <li><a href="#home">Home</a></li>
17 |                 <li><a href="#about">About</a></li>
18 |                 <li><a href="#contact">Contact</a></li>
19 |             </ul>
20 |         </nav>
21 | 
22 |         <main>
23 |             <!-- Your main content goes here -->
24 |         </main>
25 | 
26 |         <footer>
27 |             <p>&copy; 2024 Your Company. All rights reserved.</p>
28 |         </footer>
29 | 
30 |         <script src="script.js"></script>
31 |     </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/94-Caching Mechanism/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Caching Mechanism App</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Caching Mechanism App</h1>
12 |             <div>
13 |                 <label for="dataInput">Enter Data:</label>
14 |                 <input
15 |                     type="text"
16 |                     id="dataInput"
17 |                     placeholder="Type something..."
18 |                 />
19 |                 <button onclick="cacheData()">Cache Data</button>
20 |             </div>
21 |             <div>
22 |                 <h2>Cached Data:</h2>
23 |                 <p id="cachedData"></p>
24 |             </div>
25 |         </div>
26 | 
27 |         <script src="script.js"></script>
28 |     </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/02-Simple Calculator/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | body {
 7 |     font-family: "Arial", sans-serif;
 8 |     display: flex;
 9 |     justify-content: center;
10 |     align-items: center;
11 |     height: 100vh;
12 |     margin: 0;
13 |     background-color: #f4f4f4;
14 | }
15 | #calculator {
16 |     border: 2px solid #333;
17 |     border-radius: 8px;
18 |     overflow: hidden;
19 | }
20 | #display {
21 |     height: 60px;
22 |     text-align: right;
23 |     font-size: 1.5em;
24 |     padding: 0 10px;
25 |     background-color: #eee;
26 | }
27 | #keyboard {
28 |     display: grid;
29 |     grid-template-columns: repeat(4, 1fr);
30 | }
31 | button {
32 |     border: none;
33 |     font-size: 1.2em;
34 |     padding: 15px;
35 |     cursor: pointer;
36 |     outline: none;
37 |     background-color: #fff;
38 | }
39 | button:active {
40 |     background-color: #ccc;
41 | }
42 | button.operator {
43 |     background-color: #ff8c00;
44 |     color: #fff;
45 | }
46 | 


--------------------------------------------------------------------------------
/85-Color Blindness Simulator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Color Blindness Simulator</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="app">
11 |             <h1>Color Blindness Simulator</h1>
12 |             <label for="colorPicker">Choose a Color:</label>
13 |             <input type="color" id="colorPicker" value="#ff0000" />
14 |             <div id="simulatedColors">
15 |                 <p>Simulated Colors:</p>
16 |                 <div id="protanopia" class="simulatedColor">Protanopia</div>
17 |                 <div id="deuteranopia" class="simulatedColor">Deuteranopia</div>
18 |                 <div id="tritanopia" class="simulatedColor">Tritanopia</div>
19 |             </div>
20 |         </div>
21 | 
22 |         <script src="app.js"></script>
23 |     </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/public/globe.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>


--------------------------------------------------------------------------------
/16-Pomodoro Timer/index.js:
--------------------------------------------------------------------------------
 1 | let timer;
 2 | let minutes = 25;
 3 | let seconds = 0;
 4 | 
 5 | function startTimer() {
 6 |     timer = setInterval(updateTimer, 1000);
 7 | }
 8 | 
 9 | function pauseTimer() {
10 |     clearInterval(timer);
11 | }
12 | 
13 | function resetTimer() {
14 |     clearInterval(timer);
15 |     minutes = 25;
16 |     seconds = 0;
17 |     updateDisplay();
18 | }
19 | 
20 | function updateTimer() {
21 |     if (minutes === 0 && seconds === 0) {
22 |         clearInterval(timer);
23 |         alert("Pomodoro completed! Take a break.");
24 |     } else if (seconds === 0) {
25 |         minutes--;
26 |         seconds = 59;
27 |     } else {
28 |         seconds--;
29 |     }
30 | 
31 |     updateDisplay();
32 | }
33 | 
34 | function updateDisplay() {
35 |     const formattedMinutes = String(minutes).padStart(2, "0");
36 |     const formattedSeconds = String(seconds).padStart(2, "0");
37 |     document.getElementById(
38 |         "timer"
39 |     ).textContent = `${formattedMinutes}:${formattedSeconds}`;
40 | }
41 | 


--------------------------------------------------------------------------------
/97-Network Performance Analyzer/script.js:
--------------------------------------------------------------------------------
 1 | document
 2 |     .getElementById("analyzeButton")
 3 |     .addEventListener("click", analyzePerformance);
 4 | 
 5 | function analyzePerformance() {
 6 |     const startTime = performance.now();
 7 | 
 8 |     // Simulate a network request (you can replace this with an actual request)
 9 |     fetch("https://jsonplaceholder.typicode.com/todos/1")
10 |         .then((response) => response.json())
11 |         .then((data) => {
12 |             const endTime = performance.now();
13 |             const elapsedTime = endTime - startTime;
14 | 
15 |             displayResult(elapsedTime);
16 |         })
17 |         .catch((error) => {
18 |             console.error("Error:", error);
19 |             displayResult("Error");
20 |         });
21 | }
22 | 
23 | function displayResult(time) {
24 |     const resultContainer = document.getElementById("resultContainer");
25 |     resultContainer.innerHTML = `Network request completed in ${time.toFixed(
26 |         2
27 |     )} milliseconds.`;
28 | }
29 | 


--------------------------------------------------------------------------------
/01-To-Do List App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>To-Do List App | 100 JavaScript Projects.</title>
 7 |         <!-- CSS Link -->
 8 |         <link rel="stylesheet" href="style.css" />
 9 |     </head>
10 |     <body>
11 |         <h1 class="title">To-Do List App</h1>
12 |         <div id="todo_app">
13 |             <div class="todo">
14 |                 <input
15 |                     type="text"
16 |                     placeholder="Todo.."
17 |                     class="input"
18 |                     id="myInput"
19 |                 />
20 |                 <button id="button">Add</button>
21 |             </div>
22 |             <ul id="todo_list">
23 |                 <!-- <li>Hello</li> -->
24 |             </ul>
25 |         </div>
26 | 
27 |         <!-- JavaScript Include -->
28 |         <script src="script.js"></script>
29 |     </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/54-Unit Converter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Unit Converter || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Unit Converter</h1>
12 |             <label for="inputValue">Enter Value:</label>
13 |             <input type="number" id="inputValue" placeholder="Enter value" />
14 | 
15 |             <label for="selectUnit">Select Unit:</label>
16 |             <select id="selectUnit">
17 |                 <option value="km">Kilometers</option>
18 |                 <option value="mi">Miles</option>
19 |             </select>
20 | 
21 |             <button onclick="convert()">Convert</button>
22 | 
23 |             <p id="result"></p>
24 |         </div>
25 | 
26 |         <script src="script.js"></script>
27 |     </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/44-3D Cube Puzzle/script.js:
--------------------------------------------------------------------------------
 1 | let isRotating = false;
 2 | 
 3 | document.getElementById("cube").addEventListener("click", function () {
 4 |     if (!isRotating) {
 5 |         isRotating = true;
 6 |         rotateCube();
 7 |     }
 8 | });
 9 | 
10 | function rotateCube() {
11 |     const cube = document.getElementById("cube");
12 |     cube.style.transform += "rotateY(90deg)";
13 | 
14 |     setTimeout(() => {
15 |         isRotating = false;
16 |         checkCubePosition();
17 |     }, 500);
18 | }
19 | 
20 | function checkCubePosition() {
21 |     const cube = document.getElementById("cube");
22 |     const currentRotation = getComputedStyle(cube).transform;
23 | 
24 |     // Check if the cube is in the correct position (rotation)
25 |     if (
26 |         currentRotation === "matrix(6.12323e-17, 0, -1, 1.22465e-16, 1, 0)" ||
27 |         currentRotation === "none"
28 |     ) {
29 |         alert("Congratulations! Puzzle solved!");
30 |     } else {
31 |         alert("Try again. Rotate the cube to match the pattern.");
32 |     }
33 | }
34 | 


--------------------------------------------------------------------------------
/43-Interactive Storytelling/script.js:
--------------------------------------------------------------------------------
 1 | const storyElement = document.getElementById("story");
 2 | const choicesElement = document.getElementById("choices");
 3 | 
 4 | function makeChoice(choice) {
 5 |     if (choice === 1) {
 6 |         storyElement.textContent =
 7 |             "You chose Choice 1. This is the next part of the story for Choice 1.";
 8 |         displayChoices(["Next Option 1", "Next Option 2"]);
 9 |     } else if (choice === 2) {
10 |         storyElement.textContent =
11 |             "You chose Choice 2. This is the next part of the story for Choice 2.";
12 |         displayChoices(["Option A", "Option B"]);
13 |     }
14 | }
15 | 
16 | function displayChoices(choices) {
17 |     choicesElement.innerHTML = "";
18 |     for (let i = 0; i < choices.length; i++) {
19 |         const button = document.createElement("button");
20 |         button.textContent = choices[i];
21 |         button.onclick = function () {
22 |             makeChoice(i + 1);
23 |         };
24 |         choicesElement.appendChild(button);
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/59-Calendar/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container {
11 |     text-align: center;
12 | }
13 | 
14 | .header {
15 |     display: flex;
16 |     justify-content: space-between;
17 |     align-items: center;
18 |     margin-bottom: 20px;
19 | }
20 | 
21 | button {
22 |     padding: 8px 16px;
23 |     font-size: 16px;
24 |     cursor: pointer;
25 | }
26 | 
27 | #calendar {
28 |     display: grid;
29 |     grid-template-columns: repeat(7, 1fr);
30 | }
31 | 
32 | .day {
33 |     padding: 10px;
34 |     border: 1px solid #ddd;
35 | }
36 | 
37 | .day:hover {
38 |     background-color: #eee;
39 | }
40 | 
41 | .today {
42 |     background-color: #f0f0f0;
43 | }
44 | 
45 | .events {
46 |     margin-top: 5px;
47 | }
48 | 
49 | .event {
50 |     background-color: #3498db;
51 |     color: #fff;
52 |     padding: 2px 5px;
53 |     margin: 2px;
54 |     border-radius: 3px;
55 |     cursor: pointer;
56 | }
57 | 


--------------------------------------------------------------------------------
/66-Stock Market Tracker with Graphs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <script defer src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 8 |         <title>Stock Market Tracker || 100 JavaScript Projects</title>
 9 |     </head>
10 |     <body>
11 |         <div class="container">
12 |             <h1>Stock Market Tracker</h1>
13 |             <div>
14 |                 <label for="symbol">Stock Symbol: </label>
15 |                 <input
16 |                     type="text"
17 |                     id="symbol"
18 |                     placeholder="Enter stock symbol"
19 |                 />
20 |                 <button onclick="getStockData()">Get Data</button>
21 |             </div>
22 |             <canvas id="stockChart" width="800" height="400"></canvas>
23 |         </div>
24 |         <script src="app.js"></script>
25 |     </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/79-Crossword Puzzle/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     display: flex;
 3 |     align-items: center;
 4 |     justify-content: center;
 5 |     height: 100vh;
 6 |     margin: 0;
 7 |     font-family: "Arial", sans-serif;
 8 | }
 9 | 
10 | #puzzle-container {
11 |     text-align: center;
12 | }
13 | 
14 | .board {
15 |     display: grid;
16 |     grid-template-columns: repeat(10, 30px);
17 |     gap: 2px;
18 |     margin-top: 20px;
19 | }
20 | 
21 | .cell {
22 |     width: 30px;
23 |     height: 30px;
24 |     border: 1px solid #ddd;
25 |     display: flex;
26 |     align-items: center;
27 |     justify-content: center;
28 |     font-size: 14px;
29 |     cursor: pointer;
30 | }
31 | 
32 | #word-input {
33 |     margin-top: 20px;
34 | }
35 | 
36 | #word-input label {
37 |     margin-right: 10px;
38 | }
39 | 
40 | #message {
41 |     margin-top: 20px;
42 |     color: green;
43 |     font-weight: bold;
44 | }
45 | 
46 | .hidden {
47 |     display: none;
48 | }
49 | 
50 | #reset-button {
51 |     padding: 10px;
52 |     font-size: 16px;
53 |     cursor: pointer;
54 |     margin-top: 20px;
55 | }
56 | 


--------------------------------------------------------------------------------
/92-Lazy Loading Images/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function () {
 2 |     const images = document.querySelectorAll("img[data-src]");
 3 | 
 4 |     // Intersection Observer API to load images when they come into the viewport
 5 |     const observer = new IntersectionObserver(
 6 |         (entries, observer) => {
 7 |             entries.forEach((entry) => {
 8 |                 if (entry.isIntersecting) {
 9 |                     const img = entry.target;
10 |                     const src = img.getAttribute("data-src");
11 | 
12 |                     // Load the image
13 |                     img.setAttribute("src", src);
14 |                     img.removeAttribute("data-src");
15 | 
16 |                     // Stop observing once the image is loaded
17 |                     observer.unobserve(img);
18 |                 }
19 |             });
20 |         },
21 |         { rootMargin: "0px 0px 50px 0px" }
22 |     );
23 | 
24 |     // Start observing each image
25 |     images.forEach((image) => {
26 |         observer.observe(image);
27 |     });
28 | });
29 | 


--------------------------------------------------------------------------------
/22-E-commerce Website/script.js:
--------------------------------------------------------------------------------
 1 | const products = [
 2 |     { id: 1, name: "Product 1", price: 50 },
 3 |     { id: 2, name: "Product 2", price: 45 },
 4 |     // Add more products as needed
 5 | ];
 6 | 
 7 | function displayProducts() {
 8 |     const productListElement = document.getElementById("productList");
 9 | 
10 |     products.forEach((product) => {
11 |         const productElement = document.createElement("div");
12 |         productElement.classList.add("product");
13 | 
14 |         productElement.innerHTML = `
15 |               <img src="product${product.id}.jpg" alt="${product.name}">
16 |               <h3>${product.name}</h3>
17 |               <p>Price: $${product.price}</p>
18 |               <button class="button" onclick="addToCart(${product.id})">Add to Cart</button>
19 |           `;
20 | 
21 |         productListElement.appendChild(productElement);
22 |     });
23 | }
24 | 
25 | function addToCart(productId) {
26 |     // Implement your cart logic (adding products to the cart)
27 |     alert(`Product with ID ${productId} added to cart!`);
28 | }
29 | 
30 | window.onload = displayProducts;
31 | 


--------------------------------------------------------------------------------
/98-Minification and Bundling/script.js:
--------------------------------------------------------------------------------
 1 | function minifyAndBundle() {
 2 |     const inputCode = document.getElementById("inputCode").value;
 3 | 
 4 |     if (!inputCode.trim()) {
 5 |         alert("Please enter code to minify and bundle.");
 6 |         return;
 7 |     }
 8 | 
 9 |     // In a real-world scenario, you might use a library or an API for minification and bundling.
10 |     // Here, we'll simply use a placeholder to demonstrate the process.
11 |     const minifiedCode = minifyCode(inputCode);
12 |     const bundledCode = bundleCode(minifiedCode);
13 | 
14 |     displayResult(bundledCode);
15 | }
16 | 
17 | function minifyCode(code) {
18 |     // Placeholder for minification logic
19 |     return code.replace(/\s/g, ""); // Remove whitespaces
20 | }
21 | 
22 | function bundleCode(code) {
23 |     // Placeholder for bundling logic
24 |     return `(function(){${code}})();`; // Wrap code in an IIFE (Immediately Invoked Function Expression)
25 | }
26 | 
27 | function displayResult(result) {
28 |     const outputCode = document.getElementById("outputCode");
29 |     outputCode.textContent = result;
30 | }
31 | 


--------------------------------------------------------------------------------
/51-File Uploader/script.js:
--------------------------------------------------------------------------------
 1 | function uploadFile() {
 2 |     const fileInput = document.getElementById("fileInput");
 3 |     const progressBar = document.getElementById("progressBar");
 4 |     const status = document.getElementById("status");
 5 | 
 6 |     const file = fileInput.files[0];
 7 |     if (!file) {
 8 |         alert("Please select a file.");
 9 |         return;
10 |     }
11 | 
12 |     const formData = new FormData();
13 |     formData.append("file", file);
14 | 
15 |     const xhr = new XMLHttpRequest();
16 | 
17 |     xhr.upload.onprogress = function (e) {
18 |         if (e.lengthComputable) {
19 |             const progress = (e.loaded / e.total) * 100;
20 |             progressBar.value = progress;
21 |         }
22 |     };
23 | 
24 |     xhr.onload = function () {
25 |         if (xhr.status === 200) {
26 |             status.innerHTML = "File uploaded successfully!";
27 |         } else {
28 |             status.innerHTML = "Error uploading file. Please try again.";
29 |         }
30 |     };
31 | 
32 |     xhr.open("POST", "your_upload_endpoint_url", true);
33 |     xhr.send(formData);
34 | }
35 | 


--------------------------------------------------------------------------------
/87-Focus Management/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     background-color: #f4f4f4;
 4 |     margin: 0;
 5 |     display: flex;
 6 |     align-items: center;
 7 |     justify-content: center;
 8 |     height: 100vh;
 9 | }
10 | 
11 | .container {
12 |     text-align: center;
13 |     background-color: #fff;
14 |     padding: 20px;
15 |     border-radius: 8px;
16 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
17 | }
18 | 
19 | .input-section {
20 |     margin-bottom: 20px;
21 | }
22 | 
23 | input {
24 |     padding: 10px;
25 |     font-size: 16px;
26 | }
27 | 
28 | button {
29 |     padding: 10px 20px;
30 |     font-size: 16px;
31 |     cursor: pointer;
32 | }
33 | 
34 | button:hover {
35 |     background-color: #ddd;
36 | }
37 | 
38 | .task-list {
39 |     list-style: none;
40 |     padding: 0;
41 | }
42 | 
43 | .task-item {
44 |     display: flex;
45 |     justify-content: space-between;
46 |     align-items: center;
47 |     padding: 10px;
48 |     border-bottom: 1px solid #ddd;
49 | }
50 | 
51 | .task-item.completed {
52 |     text-decoration: line-through;
53 |     opacity: 0.7;
54 | }
55 | 


--------------------------------------------------------------------------------
/10-Currency Converter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Currency Converter || 100 JavaScript Projects</title>
 7 |         <!-- style -->
 8 |         <link rel="stylesheet" href="style.css" />
 9 |     </head>
10 |     <body>
11 |         <div id="converter">
12 |             <h2>Currency Converter</h2>
13 |             <input type="number" id="amount" placeholder="Enter amount" />
14 |             <select id="fromCurrency">
15 |                 <!-- Add currency options here -->
16 |             </select>
17 |             <span>to</span>
18 |             <select id="toCurrency">
19 |                 <!-- Add currency options here -->
20 |             </select>
21 |             <br />
22 |             <button onclick="convertCurrency()">Convert</button>
23 |             <h3>Result: <span id="result"></span></h3>
24 |         </div>
25 | 
26 |         <!-- javascript includes -->
27 |         <script src="index.js"></script>
28 |     </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/30-Video Streaming Platform/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Video Streaming Platform</title>
 7 |         <style>
 8 |             body {
 9 |                 font-family: Arial, sans-serif;
10 |                 margin: 0;
11 |                 padding: 0;
12 |                 display: flex;
13 |                 justify-content: center;
14 |                 align-items: center;
15 |                 height: 100vh;
16 |                 background-color: #f4f4f4;
17 |             }
18 | 
19 |             #video-container {
20 |                 width: 80%;
21 |                 max-width: 800px;
22 |             }
23 |         </style>
24 |     </head>
25 |     <body>
26 |         <div id="video-container">
27 |             <video controls width="100%">
28 |                 <source src="your_video_url.mp4" type="video/mp4" />
29 |                 Your browser does not support the video tag.
30 |             </video>
31 |         </div>
32 |     </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/35-Weather Forecast using OpenWeatherMap API/app.js:
--------------------------------------------------------------------------------
 1 | const apiKey = "YOUR_OPENWEATHERMAP_API_KEY";
 2 | 
 3 | function getWeather() {
 4 |     const cityInput = document.getElementById("city-input").value;
 5 | 
 6 |     if (cityInput.trim() !== "") {
 7 |         const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${cityInput}&appid=${apiKey}&units=metric`;
 8 | 
 9 |         fetch(apiUrl)
10 |             .then((response) => response.json())
11 |             .then((data) => {
12 |                 displayWeather(data);
13 |             })
14 |             .catch((error) => {
15 |                 console.error("Error fetching weather data:", error);
16 |             });
17 |     } else {
18 |         alert("Please enter a city name.");
19 |     }
20 | }
21 | 
22 | function displayWeather(data) {
23 |     const weatherInfo = document.getElementById("weather-info");
24 |     const { name, main, weather } = data;
25 | 
26 |     weatherInfo.innerHTML = `
27 |                 <h2>${name}</h2>
28 |                 <p>Temperature: ${main.temp} °C</p>
29 |                 <p>Weather: ${weather[0].description}</p>
30 |             `;
31 | }
32 | 


--------------------------------------------------------------------------------
/36-News Aggregator/index.js:
--------------------------------------------------------------------------------
 1 | // Replace 'YOUR_NEWS_API_KEY' with your actual news API key
 2 | const apiKey = "YOUR_NEWS_API_KEY";
 3 | const newsApiUrl = `https://newsapi.org/v2/top-headlines?country=us&apiKey=${apiKey}`;
 4 | 
 5 | function fetchNews() {
 6 |     fetch(newsApiUrl)
 7 |         .then((response) => response.json())
 8 |         .then((data) => displayNews(data.articles))
 9 |         .catch((error) => console.error("Error fetching news:", error));
10 | }
11 | 
12 | function displayNews(articles) {
13 |     const newsContainer = document.getElementById("news-container");
14 | 
15 |     articles.forEach((article) => {
16 |         const articleElement = document.createElement("div");
17 |         articleElement.classList.add("article");
18 | 
19 |         articleElement.innerHTML = `
20 |             <h2>${article.title}</h2>
21 |             <p>${article.description}</p>
22 |             <a href="${article.url}" target="_blank">Read more</a>
23 |         `;
24 | 
25 |         newsContainer.appendChild(articleElement);
26 |     });
27 | }
28 | 
29 | // Fetch news when the page loads
30 | document.addEventListener("DOMContentLoaded", fetchNews);
31 | 


--------------------------------------------------------------------------------
/54-Unit Converter/script.js:
--------------------------------------------------------------------------------
 1 | function convert() {
 2 |     const inputValue = parseFloat(document.getElementById("inputValue").value);
 3 |     const selectUnit = document.getElementById("selectUnit");
 4 |     const resultElement = document.getElementById("result");
 5 | 
 6 |     if (isNaN(inputValue)) {
 7 |         alert("Please enter a valid number.");
 8 |         return;
 9 |     }
10 | 
11 |     const selectedUnit = selectUnit.value;
12 |     let result;
13 | 
14 |     if (selectedUnit === "km") {
15 |         result = convertKilometersToMiles(inputValue);
16 |         resultElement.innerText = `${inputValue} Kilometers is approximately ${result.toFixed(
17 |             2
18 |         )} Miles.`;
19 |     } else if (selectedUnit === "mi") {
20 |         result = convertMilesToKilometers(inputValue);
21 |         resultElement.innerText = `${inputValue} Miles is approximately ${result.toFixed(
22 |             2
23 |         )} Kilometers.`;
24 |     }
25 | }
26 | 
27 | function convertKilometersToMiles(kilometers) {
28 |     return kilometers * 0.621371;
29 | }
30 | 
31 | function convertMilesToKilometers(miles) {
32 |     return miles / 0.621371;
33 | }
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Pradip Chaudhary
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/48-Virtual Pet/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     display: flex;
 5 |     align-items: center;
 6 |     justify-content: center;
 7 |     height: 100vh;
 8 |     background-color: #f4f4f4;
 9 | }
10 | 
11 | .container {
12 |     text-align: center;
13 |     background-color: #fff;
14 |     padding: 20px;
15 |     border-radius: 8px;
16 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
17 | }
18 | 
19 | #pet-container {
20 |     position: relative;
21 | }
22 | 
23 | #pet {
24 |     width: 100px;
25 |     height: 100px;
26 |     background-color: #ffcc66;
27 |     border-radius: 50%;
28 |     position: absolute;
29 |     bottom: 20px;
30 |     left: 50%;
31 |     transform: translateX(-50%);
32 | }
33 | 
34 | #status {
35 |     margin-top: 20px;
36 | }
37 | 
38 | #actions {
39 |     margin-top: 20px;
40 | }
41 | 
42 | button {
43 |     background-color: #4caf50;
44 |     color: white;
45 |     padding: 10px 20px;
46 |     font-size: 16px;
47 |     cursor: pointer;
48 |     border: none;
49 |     border-radius: 4px;
50 |     margin-right: 10px;
51 | }
52 | 
53 | button:hover {
54 |     background-color: #45a049;
55 | }
56 | 


--------------------------------------------------------------------------------
/93-Debouncing and Throttling Functions/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Debouncing and Throttling Web App</title>
 7 |         <link rel="stylesheet" href="styles.css" />
 8 |     </head>
 9 |     <body>
10 |         <main>
11 |             <h1>Debouncing and Throttling Web App</h1>
12 | 
13 |             <label for="delaySlider"
14 |                 >Delay: <span id="delayValue">500</span>ms</label
15 |             >
16 |             <input
17 |                 type="range"
18 |                 id="delaySlider"
19 |                 min="100"
20 |                 max="1000"
21 |                 step="100"
22 |                 value="500"
23 |             />
24 | 
25 |             <input type="text" id="textInput" placeholder="Type something..." />
26 | 
27 |             <div class="result">
28 |                 <h2>Result:</h2>
29 |                 <pre id="resultContent"></pre>
30 |             </div>
31 |         </main>
32 | 
33 |         <script src="script.js"></script>
34 |     </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/01-To-Do List App/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | body {
 7 |     width: 100%;
 8 |     height: 100vh;
 9 |     background-color: #212121;
10 |     color: #efefef;
11 |     display: flex;
12 |     flex-direction: column;
13 |     align-items: center;
14 |     font-family: sans-serif;
15 | }
16 | h1.title {
17 |     margin-top: 20px;
18 | }
19 | 
20 | #todo_app {
21 |     margin-top: 15px;
22 | }
23 | #todo_app .todo .input {
24 |     padding: 10px 20px;
25 |     min-width: 400px;
26 |     font-size: 1rem;
27 | }
28 | #todo_app .todo .input:focus {
29 |     border: 2px solid #0e760e;
30 |     outline: none;
31 | }
32 | .todo button {
33 |     padding: 10px 20px;
34 |     border: 1px solid #0c620c;
35 |     font-size: 1rem;
36 |     background-color: #0c620c;
37 |     color: #efefef;
38 |     cursor: pointer;
39 |     animation: background-color 0.6s ease-in-out;
40 | }
41 | .todo button:hover {
42 |     background-color: #0e760e;
43 | }
44 | 
45 | ul#todo_list {
46 |     list-style: none;
47 |     margin: 15px 0;
48 | }
49 | 
50 | ul#todo_list li {
51 |     padding: 10px 0px;
52 |     border-bottom: 1px solid #2e2e2e;
53 | }
54 | 


--------------------------------------------------------------------------------
/37-Currency Exchange Rates using API/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Currency Exchange Rates || 100 JavaScript Projects</title>
 7 |         <!-- styles links -->
 8 |         <link rel="stylesheet" href="style.css" />
 9 |     </head>
10 |     <body>
11 |         <h1>Currency Exchange Rates</h1>
12 |         <div id="exchange-container">
13 |             <input type="number" id="amount-input" placeholder="Enter Amount" />
14 |             <select id="from-currency">
15 |                 <!-- Add currency options dynamically using JavaScript -->
16 |             </select>
17 |             <select id="to-currency">
18 |                 <!-- Add currency options dynamically using JavaScript -->
19 |             </select>
20 |             <button id="convert-button" onclick="convertCurrency()">
21 |                 Convert
22 |             </button>
23 |             <div id="result"></div>
24 |         </div>
25 | 
26 |         <!-- Script Includes  -->
27 |         <script src="index.js"></script>
28 |     </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/19-Car Rental Website/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | header {
 8 |     background-color: #333;
 9 |     color: #fff;
10 |     text-align: center;
11 |     padding: 10px;
12 | }
13 | 
14 | #carList {
15 |     display: flex;
16 |     flex-wrap: wrap;
17 |     justify-content: space-around;
18 |     padding: 20px;
19 | }
20 | 
21 | .car {
22 |     border: 1px solid #ddd;
23 |     border-radius: 5px;
24 |     margin: 10px;
25 |     padding: 10px;
26 |     width: 250px;
27 | }
28 | 
29 | .car img {
30 |     width: 100%;
31 |     height: auto;
32 | }
33 | 
34 | #bookingForm {
35 |     max-width: 400px;
36 |     margin: 20px auto;
37 |     padding: 20px;
38 |     border: 1px solid #ddd;
39 |     border-radius: 5px;
40 | }
41 | 
42 | label {
43 |     display: block;
44 |     margin-bottom: 5px;
45 | }
46 | 
47 | input,
48 | select {
49 |     width: 100%;
50 |     padding: 8px;
51 |     margin-bottom: 10px;
52 |     box-sizing: border-box;
53 | }
54 | 
55 | button {
56 |     background-color: #333;
57 |     color: #fff;
58 |     padding: 10px;
59 |     border: none;
60 |     border-radius: 5px;
61 |     cursor: pointer;
62 | }
63 | 


--------------------------------------------------------------------------------
/26-Fitness Tracker/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: Arial, sans-serif;
 3 |     background-color: #f4f4f4;
 4 |     margin: 0;
 5 | }
 6 | 
 7 | .container {
 8 |     max-width: 600px;
 9 |     margin: 20px auto;
10 |     background-color: #fff;
11 |     padding: 20px;
12 |     border-radius: 8px;
13 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
14 | }
15 | 
16 | #form-container {
17 |     margin-bottom: 20px;
18 | }
19 | 
20 | label {
21 |     display: block;
22 |     margin-bottom: 5px;
23 | }
24 | 
25 | input {
26 |     width: 100%;
27 |     padding: 8px;
28 |     margin-bottom: 10px;
29 |     box-sizing: border-box;
30 | }
31 | 
32 | button {
33 |     background-color: #4caf50;
34 |     color: #fff;
35 |     padding: 10px;
36 |     border: none;
37 |     border-radius: 5px;
38 |     cursor: pointer;
39 | }
40 | 
41 | button:hover {
42 |     background-color: #45a049;
43 | }
44 | 
45 | #entries-container {
46 |     border-top: 1px solid #ccc;
47 |     padding-top: 20px;
48 | }
49 | 
50 | h2 {
51 |     margin-bottom: 10px;
52 | }
53 | 
54 | ul {
55 |     list-style-type: none;
56 |     padding: 0;
57 | }
58 | 
59 | li {
60 |     border-bottom: 1px solid #ccc;
61 |     padding: 10px;
62 | }
63 | 


--------------------------------------------------------------------------------
/11-Weather App/index.js:
--------------------------------------------------------------------------------
 1 | // Replace 'YOUR_API_KEY' with your OpenWeatherMap API key
 2 | const apiKey = "YOUR_API_KEY";
 3 | 
 4 | function getWeather() {
 5 |     const city = document.getElementById("city").value;
 6 | 
 7 |     if (city === "") {
 8 |         alert("Please enter a city name.");
 9 |         return;
10 |     }
11 | 
12 |     const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
13 | 
14 |     fetch(apiUrl)
15 |         .then((response) => response.json())
16 |         .then((data) => {
17 |             if (data.cod === "404") {
18 |                 alert("City not found. Please enter a valid city name.");
19 |                 return;
20 |             }
21 | 
22 |             const weatherInfo = document.getElementById("weather-info");
23 |             weatherInfo.innerHTML = `
24 | <h3>${data.name}, ${data.sys.country}</h3>
25 | <p>Temperature: ${data.main.temp} °C</p>
26 | <p>Weather: ${data.weather[0].description}</p>
27 | `;
28 |         })
29 |         .catch((error) => {
30 |             console.error("Error fetching weather data:", error);
31 |             alert("Error fetching weather data. Please try again later.");
32 |         });
33 | }
34 | 


--------------------------------------------------------------------------------
/70-Social Media Analytics Dashboard/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>
 7 |             Social Media Analytics Dashboard || 100 JavaScript Projects
 8 |         </title>
 9 |         <link rel="stylesheet" href="styles.css" />
10 |     </head>
11 |     <body>
12 |         <header>
13 |             <h1>Social Media Analytics Dashboard</h1>
14 |         </header>
15 | 
16 |         <div class="container">
17 |             <div class="widget">
18 |                 <h2>Followers</h2>
19 |                 <p>Total Followers: 10,000</p>
20 |             </div>
21 | 
22 |             <div class="widget">
23 |                 <h2>Engagement</h2>
24 |                 <p>Posts Liked: 5,000</p>
25 |                 <p>Comments Received: 1,000</p>
26 |             </div>
27 | 
28 |             <div class="widget">
29 |                 <h2>Posts</h2>
30 |                 <p>Total Posts: 100</p>
31 |                 <p>Most Popular: Post Title</p>
32 |             </div>
33 |         </div>
34 | 
35 |         <script src="app.js"></script>
36 |     </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/34-GitHub Profile Viewer/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |         <title>GitHub Profile Viewer | 100 JavaScript Projects</title>
 8 |         <!-- StyleSheet link -->
 9 |         <link rel="stylesheet" href="style.css" />
10 |     </head>
11 |     <body>
12 |         <div class="container">
13 |             <header>
14 |                 <h1>GitHub Profile Viewer</h1>
15 |                 <div class="search_box">
16 |                     <input
17 |                         id="searchInput"
18 |                         class="search_input"
19 |                         value=""
20 |                         type="text"
21 |                         placeholder="Enter your  username..."
22 |                     />
23 |                 </div>
24 |             </header>
25 |             <section class="profile_box" id="profileBox"></section>
26 |             <section id="loading"></section>
27 |         </div>
28 |         <!-- JavaScript Include  -->
29 |         <script src="app.js"></script>
30 |     </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/67-Polls and Survey Data Visualization/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <script defer src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 8 |         <title>Polls and Survey Visualization || 100 JavaScript Projects</title>
 9 |     </head>
10 |     <body>
11 |         <div class="container">
12 |             <h1>Polls and Survey Visualization</h1>
13 |             <div id="survey-form">
14 |                 <label for="question">Survey Question:</label>
15 |                 <input
16 |                     type="text"
17 |                     id="question"
18 |                     placeholder="Enter your question"
19 |                 />
20 |                 <button onclick="addOption()">Add Option</button>
21 |                 <ul id="options-list"></ul>
22 |                 <button onclick="submitSurvey()">Submit Survey</button>
23 |             </div>
24 |             <canvas id="chart" width="800" height="400"></canvas>
25 |         </div>
26 |         <script src="app.js"></script>
27 |     </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/87-Focus Management/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function () {
 2 |     const taskInput = document.getElementById("taskInput");
 3 |     const addTaskBtn = document.getElementById("addTaskBtn");
 4 |     const taskList = document.getElementById("taskList");
 5 | 
 6 |     addTaskBtn.addEventListener("click", addTask);
 7 | 
 8 |     function addTask() {
 9 |         const taskText = taskInput.value.trim();
10 |         if (taskText !== "") {
11 |             const taskItem = document.createElement("li");
12 |             taskItem.classList.add("task-item");
13 |             taskItem.innerHTML = `
14 |                   <span>${taskText}</span>
15 |                   <button class="complete-btn">Complete</button>
16 |               `;
17 |             taskList.appendChild(taskItem);
18 |             taskInput.value = "";
19 |             taskInput.focus();
20 | 
21 |             const completeBtn = taskItem.querySelector(".complete-btn");
22 |             completeBtn.addEventListener("click", completeTask);
23 |         }
24 |     }
25 | 
26 |     function completeTask(event) {
27 |         const taskItem = event.target.closest(".task-item");
28 |         taskItem.classList.toggle("completed");
29 |     }
30 | });
31 | 


--------------------------------------------------------------------------------
/26-Fitness Tracker/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Fitness Tracker || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <h1>Fitness Tracker</h1>
12 |             <div id="form-container">
13 |                 <label for="activity">Activity:</label>
14 |                 <input type="text" id="activity" placeholder="Enter activity" />
15 | 
16 |                 <label for="duration">Duration (minutes):</label>
17 |                 <input
18 |                     type="number"
19 |                     id="duration"
20 |                     placeholder="Enter duration"
21 |                 />
22 | 
23 |                 <button onclick="addEntry()">Add Entry</button>
24 |             </div>
25 | 
26 |             <div id="entries-container">
27 |                 <h2>Entries</h2>
28 |                 <ul id="entries-list"></ul>
29 |             </div>
30 |         </div>
31 | 
32 |         <script src="script.js"></script>
33 |     </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/91-Code Profiler and Optimizer/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Code Profiler and Optimizer</title>
 7 |         <link rel="stylesheet" href="styles.css" />
 8 |     </head>
 9 |     <body>
10 |         <header>
11 |             <h1>Code Profiler and Optimizer</h1>
12 |         </header>
13 | 
14 |         <main>
15 |             <div class="code-container">
16 |                 <textarea
17 |                     id="codeInput"
18 |                     placeholder="Enter your code here..."
19 |                 ></textarea>
20 |             </div>
21 | 
22 |             <div class="profile-results">
23 |                 <h2>Profile Results</h2>
24 |                 <p>Total Characters: <span id="charCount">0</span></p>
25 |             </div>
26 | 
27 |             <button id="optimizeBtn">Optimize Code</button>
28 |             <div class="optimized-code">
29 |                 <h2>Optimized Code</h2>
30 |                 <pre id="optimizedCode"></pre>
31 |             </div>
32 |         </main>
33 | 
34 |         <script src="script.js"></script>
35 |     </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/56-Voice Assistant/script.js:
--------------------------------------------------------------------------------
 1 | let recognition;
 2 | 
 3 | function startListening() {
 4 |     recognition = new webkitSpeechRecognition() || new SpeechRecognition();
 5 | 
 6 |     recognition.onstart = function () {
 7 |         document.getElementById("output").innerText = "Listening...";
 8 |     };
 9 | 
10 |     recognition.onresult = function (event) {
11 |         const transcript = event.results[0][0].transcript;
12 |         document.getElementById("output").innerText = "You said: " + transcript;
13 |         processCommand(transcript);
14 |     };
15 | 
16 |     recognition.onerror = function (event) {
17 |         document.getElementById("output").innerText =
18 |             "Error occurred: " + event.error;
19 |     };
20 | 
21 |     recognition.onend = function () {
22 |         document.getElementById("output").innerText =
23 |             "Speech recognition ended.";
24 |     };
25 | 
26 |     recognition.start();
27 | }
28 | 
29 | function stopListening() {
30 |     recognition.stop();
31 | }
32 | 
33 | function processCommand(command) {
34 |     // You can implement logic here to interpret and respond to different commands.
35 |     // For a more advanced voice assistant, you might integrate with a natural language processing API.
36 | }
37 | 


--------------------------------------------------------------------------------
/82-Keyboard Navigation Improvement/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Keyboard Navigation Improvement</title>
 8 |     </head>
 9 |     <body>
10 |         <div id="app">
11 |             <h1>Keyboard Navigation Improvement</h1>
12 |             <p id="info">
13 |                 This web app demonstrates improved keyboard navigation.
14 |             </p>
15 |             <div id="keyboardApp">
16 |                 <button @click="focusNext" class="navButton">Next</button>
17 |                 <button @click="focusPrev" class="navButton">Previous</button>
18 |                 <div id="content" tabindex="0" @keydown="handleKeyPress">
19 |                     <p>
20 |                         This is the focusable content that can be navigated
21 |                         using the keyboard.
22 |                     </p>
23 |                 </div>
24 |             </div>
25 |         </div>
26 | 
27 |         <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
28 |         <script src="app.js"></script>
29 |     </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/52-Password Generator/script.js:
--------------------------------------------------------------------------------
 1 | function generatePassword() {
 2 |     const length = document.getElementById("length").value;
 3 |     const uppercase = document.getElementById("uppercase").checked;
 4 |     const lowercase = document.getElementById("lowercase").checked;
 5 |     const numbers = document.getElementById("numbers").checked;
 6 |     const special = document.getElementById("special").checked;
 7 | 
 8 |     const uppercaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 9 |     const lowercaseChars = "abcdefghijklmnopqrstuvwxyz";
10 |     const numberChars = "0123456789";
11 |     const specialChars = "!@#$%^&*()_+-=[]{}|;:,.<>?";
12 | 
13 |     let allChars = "";
14 | 
15 |     if (uppercase) {
16 |         allChars += uppercaseChars;
17 |     }
18 |     if (lowercase) {
19 |         allChars += lowercaseChars;
20 |     }
21 |     if (numbers) {
22 |         allChars += numberChars;
23 |     }
24 |     if (special) {
25 |         allChars += specialChars;
26 |     }
27 | 
28 |     let password = "";
29 | 
30 |     for (let i = 0; i < length; i++) {
31 |         const randomIndex = Math.floor(Math.random() * allChars.length);
32 |         password += allChars.charAt(randomIndex);
33 |     }
34 | 
35 |     document.getElementById("password").innerText = password;
36 | }
37 | 


--------------------------------------------------------------------------------
/44-3D Cube Puzzle/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     display: flex;
 5 |     align-items: center;
 6 |     justify-content: center;
 7 |     height: 100vh;
 8 |     background-color: #f4f4f4;
 9 | }
10 | 
11 | .container {
12 |     background-color: #fff;
13 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
14 | }
15 | 
16 | .cube {
17 |     width: 200px;
18 |     height: 200px;
19 |     position: relative;
20 |     transform-style: preserve-3d;
21 |     transform: rotateX(45deg) rotateY(45deg);
22 |     transition: transform 0.5s ease-in-out;
23 | }
24 | 
25 | .face {
26 |     position: absolute;
27 |     width: 200px;
28 |     height: 200px;
29 |     background-color: #3498db;
30 |     border: 2px solid #2980b9;
31 | }
32 | 
33 | .front {
34 |     transform: translateZ(100px);
35 | }
36 | .back {
37 |     transform: rotateY(180deg) translateZ(100px);
38 | }
39 | .left {
40 |     transform: rotateY(-90deg) translateZ(100px);
41 | }
42 | .right {
43 |     transform: rotateY(90deg) translateZ(100px);
44 | }
45 | .top {
46 |     transform: rotateX(90deg) translateZ(100px);
47 | }
48 | .bottom {
49 |     transform: rotateX(-90deg) translateZ(100px);
50 | }
51 | 
52 | #instructions {
53 |     margin-top: 20px;
54 |     text-align: center;
55 | }
56 | 


--------------------------------------------------------------------------------
/src/components/ComingSoon.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import React from "react";
 3 | 
 4 | const ComingSoon = () => {
 5 |   return (
 6 |     <section className="relative flex items-center justify-center min-h-screen bg-gradient-to-br from-white via-gray-50 to-gray-200 px-6">
 7 | 
 8 |       {/* Soft Glow */}
 9 |       <div className="absolute inset-0 -z-10 flex justify-center">
10 |         <div className="h-96 w-96 rounded-full bg-blue-300/20 blur-3xl mt-20"></div>
11 |       </div>
12 | 
13 |       <div className="text-center max-w-2xl mx-auto">
14 | 
15 |         {/* Title */}
16 |         <h1 className="text-5xl sm:text-6xl font-bold tracking-tight text-gray-900 leading-tight">
17 |           Coming <span className="text-blue-600">Soon</span> 🚀
18 |         </h1>
19 | 
20 |         {/* Subtitle */}
21 |         <p className="mt-5 text-gray-600 text-lg leading-relaxed max-w-xl mx-auto">
22 |           We’re building something amazing for you.
23 |           Stay tuned — the experience you're waiting for is on the way.
24 |         </p>
25 | 
26 |         {/* Footer */}
27 |         <p className="mt-12 text-xs text-gray-500">
28 |           © {new Date().getFullYear()} 100PlusJS — All rights reserved.
29 |         </p>
30 |       </div>
31 |     </section>
32 |   );
33 | };
34 | 
35 | export default ComingSoon;
36 | 


--------------------------------------------------------------------------------
/42-Virtual Piano/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Virtual Piano || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <div class="container">
11 |             <div class="piano">
12 |                 <div class="white-key" data-note="C"></div>
13 |                 <div class="black-key" data-note="C#"></div>
14 |                 <div class="white-key" data-note="D"></div>
15 |                 <div class="black-key" data-note="D#"></div>
16 |                 <div class="white-key" data-note="E"></div>
17 |                 <div class="white-key" data-note="F"></div>
18 |                 <div class="black-key" data-note="F#"></div>
19 |                 <div class="white-key" data-note="G"></div>
20 |                 <div class="black-key" data-note="G#"></div>
21 |                 <div class="white-key" data-note="A"></div>
22 |                 <div class="black-key" data-note="A#"></div>
23 |                 <div class="white-key" data-note="B"></div>
24 |             </div>
25 |         </div>
26 |         <script src="script.js"></script>
27 |     </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/09-BMI Calculator/script.js:
--------------------------------------------------------------------------------
 1 | function calculateBMI() {
 2 |     const heightInput = document.getElementById("height");
 3 |     const weightInput = document.getElementById("weight");
 4 |     const resultDiv = document.getElementById("result");
 5 | 
 6 |     const height = parseFloat(heightInput.value);
 7 |     const weight = parseFloat(weightInput.value);
 8 | 
 9 |     if (isNaN(height) || isNaN(weight) || height <= 0 || weight <= 0) {
10 |         resultDiv.innerHTML =
11 |             "Please enter valid values for height and weight.";
12 |         return;
13 |     }
14 | 
15 |     const bmi = calculateBMIValue(height, weight);
16 |     const bmiCategory = getBMICategory(bmi);
17 | 
18 |     resultDiv.innerHTML = `Your BMI is ${bmi.toFixed(2)} (${bmiCategory}).`;
19 | }
20 | 
21 | function calculateBMIValue(height, weight) {
22 |     // BMI formula: weight (kg) / (height (m) * height (m))
23 |     const heightInMeters = height / 100; // convert height from cm to meters
24 |     return weight / (heightInMeters * heightInMeters);
25 | }
26 | 
27 | function getBMICategory(bmi) {
28 |     if (bmi < 18.5) {
29 |         return "Underweight";
30 |     } else if (bmi < 24.9) {
31 |         return "Normal weight";
32 |     } else if (bmi < 29.9) {
33 |         return "Overweight";
34 |     } else {
35 |         return "Obese";
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/52-Password Generator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Password Generator || 100 JavaScript Projects</title>
 7 |         <link rel="stylesheet" href="styles.css" />
 8 |     </head>
 9 |     <body>
10 |         <div id="generator-container">
11 |             <h2>Password Generator</h2>
12 |             <div id="password"></div>
13 |             <label for="length">Length:</label>
14 |             <input type="number" id="length" min="6" max="30" value="12" />
15 |             <br />
16 |             <label for="uppercase">Uppercase:</label>
17 |             <input type="checkbox" id="uppercase" checked />
18 |             <label for="lowercase">Lowercase:</label>
19 |             <input type="checkbox" id="lowercase" checked />
20 |             <label for="numbers">Numbers:</label>
21 |             <input type="checkbox" id="numbers" checked />
22 |             <label for="special">Special Characters:</label>
23 |             <input type="checkbox" id="special" checked />
24 |             <br />
25 |             <button onclick="generatePassword()">Generate Password</button>
26 |         </div>
27 | 
28 |         <script src="script.js"></script>
29 |     </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/02-Simple Calculator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Simple Calculator || 100 JavaScript Projects</title>
 7 |         <!-- Styles  -->
 8 |         <link rel="stylesheet" href="style.css" />
 9 |     </head>
10 |     <body>
11 |         <div id="calculator">
12 |             <div id="display"></div>
13 |             <div id="keyboard">
14 |                 <button>7</button>
15 |                 <button>8</button>
16 |                 <button>9</button>
17 |                 <button class="operator">/</button>
18 |                 <button>4</button>
19 |                 <button>5</button>
20 |                 <button>6</button>
21 |                 <button class="operator">*</button>
22 |                 <button>1</button>
23 |                 <button>2</button>
24 |                 <button>3</button>
25 |                 <button class="operator">-</button>
26 |                 <button>0</button>
27 |                 <button>.</button>
28 |                 <button class="operator">=</button>
29 |                 <button class="operator">+</button>
30 |             </div>
31 |         </div>
32 | 
33 |         <!-- Script Includes -->
34 |         <script src="index.js"></script>
35 |     </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/41-Drawing App/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function () {
 2 |     const canvas = document.getElementById("drawingCanvas");
 3 |     const ctx = canvas.getContext("2d");
 4 |     let isDrawing = false;
 5 | 
 6 |     canvas.addEventListener("mousedown", startDrawing);
 7 |     canvas.addEventListener("mousemove", draw);
 8 |     canvas.addEventListener("mouseup", stopDrawing);
 9 |     canvas.addEventListener("mouseout", stopDrawing);
10 | 
11 |     function startDrawing(e) {
12 |         isDrawing = true;
13 |         draw(e); // To start drawing from the current position immediately
14 |     }
15 | 
16 |     function draw(e) {
17 |         if (!isDrawing) return;
18 | 
19 |         ctx.lineWidth = 5;
20 |         ctx.lineCap = "round";
21 |         ctx.strokeStyle = "#000";
22 | 
23 |         ctx.lineTo(
24 |             e.clientX - canvas.getBoundingClientRect().left,
25 |             e.clientY - canvas.getBoundingClientRect().top
26 |         );
27 |         ctx.stroke();
28 |         ctx.beginPath();
29 |         ctx.moveTo(
30 |             e.clientX - canvas.getBoundingClientRect().left,
31 |             e.clientY - canvas.getBoundingClientRect().top
32 |         );
33 |     }
34 | 
35 |     function stopDrawing() {
36 |         isDrawing = false;
37 |         ctx.beginPath(); // To start a new path when the user resumes drawing
38 |     }
39 | });
40 | 


--------------------------------------------------------------------------------
/19-Car Rental Website/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="styles.css" />
 7 |         <title>Car Rental Service || 100 JavaScript Projects</title>
 8 |     </head>
 9 |     <body>
10 |         <header>
11 |             <h1>Car Rental Service</h1>
12 |         </header>
13 | 
14 |         <section id="carList">
15 |             <!-- Car listing will be displayed here using JavaScript -->
16 |         </section>
17 | 
18 |         <section id="bookingForm">
19 |             <h2>Book a Car</h2>
20 |             <form id="bookingForm">
21 |                 <label for="carSelect">Select a Car:</label>
22 |                 <select id="carSelect" required></select>
23 | 
24 |                 <label for="pickupDate">Pickup Date:</label>
25 |                 <input type="date" id="pickupDate" required />
26 | 
27 |                 <label for="returnDate">Return Date:</label>
28 |                 <input type="date" id="returnDate" required />
29 | 
30 |                 <button type="button" onclick="submitBooking()">
31 |                     Book Now
32 |                 </button>
33 |             </form>
34 |         </section>
35 | 
36 |         <script src="script.js"></script>
37 |     </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/100-Code Splitting/script.js:
--------------------------------------------------------------------------------
 1 | function performCodeSplitting() {
 2 |     const inputCode = document.getElementById("inputCode").value;
 3 | 
 4 |     if (!inputCode.trim()) {
 5 |         alert("Please enter JavaScript code for code splitting.");
 6 |         return;
 7 |     }
 8 | 
 9 |     try {
10 |         const splitFiles = splitCode(inputCode);
11 |         displayResult(splitFiles);
12 |     } catch (error) {
13 |         alert(`Error during code splitting: ${error.message}`);
14 |     }
15 | }
16 | 
17 | function splitCode(code) {
18 |     // Placeholder for code splitting logic
19 |     // In a real-world scenario, you would use a build tool like Webpack to handle code splitting.
20 |     // Here, we'll use a simplified logic to illustrate the concept.
21 | 
22 |     const splitFiles = code.split("\n\n"); // Split the code into files based on double line breaks
23 | 
24 |     if (splitFiles.length > 1) {
25 |         return splitFiles;
26 |     } else {
27 |         throw new Error("Failed to perform code splitting.");
28 |     }
29 | }
30 | 
31 | function displayResult(files) {
32 |     const outputFiles = document.getElementById("outputFiles");
33 |     outputFiles.innerHTML = "<strong>Split Files:</strong>";
34 | 
35 |     files.forEach((file, index) => {
36 |         outputFiles.innerHTML += `<div><strong>File ${
37 |             index + 1
38 |         }:</strong><pre>${file}</pre></div>`;
39 |     });
40 | }
41 | 


--------------------------------------------------------------------------------
/03-Digital Clock/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |         <title>Digital Clock || 100 JavaScript Projects</title>
 8 |         <link rel="stylesheet" href="style.css" />
 9 |     </head>
10 |     <body>
11 |         <div class="container">
12 |             <div class="digital-clock">
13 |                 <div class="time">
14 |                     <div class="hour"></div>
15 |                     <div class="dots">:</div>
16 |                     <div class="minutes"></div>
17 |                     <div class="right-side">
18 |                         <div class="period"></div>
19 |                         <div class="seconds"></div>
20 |                     </div>
21 |                 </div>
22 |                 <div class="calendar">
23 |                     <div class="day-name"></div>
24 |                     ,
25 |                     <div class="month-name"></div>
26 |                     ,
27 |                     <div class="day-number"></div>
28 |                     ,
29 |                     <div class="year"></div>
30 |                 </div>
31 |             </div>
32 |         </div>
33 |         <!-- Script Includes -->
34 |         <script src="index.js"></script>
35 |     </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/09-BMI Calculator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <link rel="stylesheet" href="style.css" />
 7 |         <title>BMI Calculator || 100 JavaScript Projects</title>
 8 |         <!-- style -->
 9 |         <link rel="stylesheet" href="style.css" />
10 |     </head>
11 |     <body>
12 |         <div class="calculator-container">
13 |             <h1>BMI Calculator</h1>
14 |             <form id="bmiForm">
15 |                 <label for="height">Height (cm):</label>
16 |                 <input
17 |                     type="number"
18 |                     id="height"
19 |                     placeholder="Enter your height"
20 |                     required
21 |                 />
22 | 
23 |                 <label for="weight">Weight (kg):</label>
24 |                 <input
25 |                     type="number"
26 |                     id="weight"
27 |                     placeholder="Enter your weight"
28 |                     required
29 |                 />
30 | 
31 |                 <button type="button" onclick="calculateBMI()">
32 |                     Calculate BMI
33 |                 </button>
34 | 
35 |                 <div id="result"></div>
36 |             </form>
37 |         </div>
38 | 
39 |         <script src="script.js"></script>
40 |     </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/39-Random Joke Generator using Joke API/script.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function () {
 2 |     const jokeContainer = document.getElementById("joke-container");
 3 |     const jokeText = document.getElementById("joke-text");
 4 |     const getJokeBtn = document.getElementById("get-joke-btn");
 5 | 
 6 |     getJokeBtn.addEventListener("click", getJoke);
 7 | 
 8 |     function getJoke() {
 9 |         // Replace 'Any' with other categories if desired (e.g., 'Programming', 'Miscellaneous', etc.)
10 |         const apiUrl = "https://v2.jokeapi.dev/joke/Any";
11 | 
12 |         fetch(apiUrl)
13 |             .then((response) => response.json())
14 |             .then((data) => {
15 |                 if (data.error) {
16 |                     jokeText.textContent =
17 |                         "Failed to fetch joke. Please try again.";
18 |                 } else {
19 |                     if (data.type === "twopart") {
20 |                         jokeText.textContent = `${data.setup}\n\n${data.delivery}`;
21 |                     } else {
22 |                         jokeText.textContent = data.joke;
23 |                     }
24 |                 }
25 |             })
26 |             .catch((error) => {
27 |                 console.error("Error fetching joke:", error);
28 |                 jokeText.textContent =
29 |                     "Failed to fetch joke. Please try again.";
30 |             });
31 |     }
32 | });
33 | 


--------------------------------------------------------------------------------
/14-Chat Application/index.js:
--------------------------------------------------------------------------------
 1 | const chatBox = document.getElementById("chat-box");
 2 | const messageInput = document.getElementById("message-input");
 3 | const sendButton = document.getElementById("send-button");
 4 | let socket;
 5 | 
 6 | function initWebSocket() {
 7 |     socket = new WebSocket("ws://localhost:3000");
 8 | 
 9 |     socket.addEventListener("open", (event) => {
10 |         console.log("WebSocket connection opened:", event);
11 |     });
12 | 
13 |     socket.addEventListener("message", (event) => {
14 |         const message = JSON.parse(event.data);
15 |         displayMessage(message.text);
16 |     });
17 | 
18 |     socket.addEventListener("close", (event) => {
19 |         console.log("WebSocket connection closed:", event);
20 |     });
21 | }
22 | 
23 | function displayMessage(message) {
24 |     const messageElement = document.createElement("div");
25 |     messageElement.textContent = message;
26 |     chatBox.appendChild(messageElement);
27 |     chatBox.scrollTop = chatBox.scrollHeight;
28 | }
29 | 
30 | function sendMessage() {
31 |     const message = messageInput.value;
32 |     if (message.trim() !== "") {
33 |         socket.send(JSON.stringify({ text: message }));
34 |         displayMessage(message);
35 |         messageInput.value = "";
36 |     }
37 | }
38 | 
39 | sendButton.addEventListener("click", sendMessage);
40 | 
41 | document.addEventListener("DOMContentLoaded", () => {
42 |     initWebSocket();
43 | });
44 | 


--------------------------------------------------------------------------------
/21-Social Media Dashboard/script.js:
--------------------------------------------------------------------------------
 1 | // Mock user data
 2 | const user = {
 3 |     name: "John Doe",
 4 |     username: "john_doe",
 5 |     posts: [
 6 |         { title: "Post 1", content: "This is the content of the first post." },
 7 |         { title: "Post 2", content: "This is the content of the second post." },
 8 |         // Add more posts as needed
 9 |     ],
10 | };
11 | 
12 | // Display user profile information
13 | function displayProfile() {
14 |     const profileElement = document.getElementById("profile");
15 |     profileElement.innerHTML = `
16 |           <h2>${user.name}</h2>
17 |           <p>@${user.username}</p>
18 |       `;
19 | }
20 | 
21 | // Display social media posts
22 | function displayPosts() {
23 |     const postsElement = document.getElementById("posts");
24 | 
25 |     user.posts.forEach((post) => {
26 |         const postElement = document.createElement("div");
27 |         postElement.classList.add("post");
28 | 
29 |         postElement.innerHTML = `
30 |               <h2>${post.title}</h2>
31 |               <p>${post.content}</p>
32 |           `;
33 | 
34 |         postsElement.appendChild(postElement);
35 |     });
36 | }
37 | 
38 | // Logout function (placeholder)
39 | function logout() {
40 |     alert("User logged out.");
41 |     // Implement actual logout logic here
42 | }
43 | 
44 | // Initial function calls
45 | window.onload = function () {
46 |     displayProfile();
47 |     displayPosts();
48 | };
49 | 


--------------------------------------------------------------------------------
/47-Meme Generator/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: "Arial", sans-serif;
 3 |     margin: 0;
 4 |     display: flex;
 5 |     align-items: center;
 6 |     justify-content: center;
 7 |     height: 100vh;
 8 |     background-color: #f4f4f4;
 9 | }
10 | 
11 | .container {
12 |     text-align: center;
13 |     background-color: #fff;
14 |     padding: 20px;
15 |     border-radius: 8px;
16 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
17 | }
18 | 
19 | #meme-container {
20 |     position: relative;
21 |     margin-top: 20px;
22 | }
23 | 
24 | #meme-image {
25 |     max-width: 100%;
26 |     height: auto;
27 | }
28 | 
29 | #top-text,
30 | #bottom-text {
31 |     position: absolute;
32 |     width: 100%;
33 |     text-align: center;
34 |     font-size: 24px;
35 |     font-weight: bold;
36 |     color: white;
37 |     text-shadow: 2px 2px 4px #000;
38 | }
39 | 
40 | #top-text {
41 |     top: 10px;
42 | }
43 | 
44 | #bottom-text {
45 |     bottom: 10px;
46 | }
47 | 
48 | #form {
49 |     margin-top: 20px;
50 | }
51 | 
52 | label {
53 |     display: block;
54 |     margin-bottom: 5px;
55 | }
56 | 
57 | input,
58 | select,
59 | button {
60 |     padding: 10px;
61 |     margin-bottom: 10px;
62 |     width: 100%;
63 |     box-sizing: border-box;
64 | }
65 | 
66 | button {
67 |     background-color: #4caf50;
68 |     color: white;
69 |     cursor: pointer;
70 |     border: none;
71 |     border-radius: 4px;
72 | }
73 | 
74 | button:hover {
75 |     background-color: #45a049;
76 | }
77 | 


--------------------------------------------------------------------------------
/31-Google Maps Integration/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |         <title>Google Maps Integration || 100 JavaScript Projects</title>
 7 |         <style>
 8 |             #map {
 9 |                 height: 400px;
10 |                 width: 100%;
11 |             }
12 |         </style>
13 |     </head>
14 |     <body>
15 |         <div id="map"></div>
16 |         <script
17 |             src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
18 |             async
19 |             defer
20 |         ></script>
21 |         <script>
22 |             function initMap() {
23 |                 // Initial map coordinates
24 |                 var myLatLng = { lat: -34.397, lng: 150.644 };
25 | 
26 |                 // Create a map object and specify the DOM element for display.
27 |                 var map = new google.maps.Map(document.getElementById("map"), {
28 |                     center: myLatLng,
29 |                     zoom: 8,
30 |                 });
31 | 
32 |                 // Create a marker and set its position.
33 |                 var marker = new google.maps.Marker({
34 |                     map: map,
35 |                     position: myLatLng,
36 |                     title: "Hello World!",
37 |                 });
38 |             }
39 |         </script>
40 |     </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------