├── .gitignore
├── .vite
└── deps
│ ├── _metadata.json
│ ├── chunk-QPG7G3M7.js
│ ├── chunk-QPG7G3M7.js.map
│ ├── chunk-UTEJFLXC.js
│ ├── chunk-UTEJFLXC.js.map
│ ├── package.json
│ ├── react-dom_client.js
│ ├── react-dom_client.js.map
│ ├── react-router-dom.js
│ ├── react-router-dom.js.map
│ ├── react.js
│ └── react.js.map
├── 01-To-Do List App
├── index.html
├── script.js
└── style.css
├── 02-Simple Calculator
├── index.html
├── index.js
└── style.css
├── 03-Digital Clock
├── index.html
├── index.js
└── style.css
├── 04-Tip Calculator
├── index.html
├── index.js
└── style.css
├── 05-Temperature Converter
├── index.html
├── index.js
└── style.css
├── 06-Random Quote Generator
├── index.html
├── index.js
└── style.css
├── 07-Basic Image Slider
├── index.html
├── index.js
└── style.css
├── 08-Countdown Timer
├── index.html
├── script.js
└── style.css
├── 09-BMI Calculator
├── index.html
├── script.js
└── style.css
├── 10-Currency Converter
├── index.html
├── index.js
└── style.css
├── 100-Code Splitting
├── index.html
├── script.js
└── styles.css
├── 11-Weather App
├── index.html
├── index.js
└── style.css
├── 12-Expense Tracker
├── index.html
├── index.js
└── style.css
├── 13-Memory Game
├── index.html
├── index.js
└── style.css
├── 14-Chat Application
├── index.html
├── index.js
└── style.css
├── 15-Interactive Quiz
├── index.html
├── index.js
└── style.css
├── 16-Pomodoro Timer
├── index.html
├── index.js
└── style.css
├── 17-Music Player
├── index.html
├── index.js
└── style.css
├── 18-Recipe App
└── index.html
├── 19-Car Rental Website
├── index.html
├── script.js
└── styles.css
├── 20-Blogging Platform
├── index.html
├── script.js
└── styles.css
├── 21-Social Media Dashboard
├── index.html
├── script.js
└── styles.css
├── 22-E-commerce Website
├── index.html
├── script.js
└── styles.css
├── 23-Real-time Chat Room
├── index.html
├── script.js
└── styles.css
├── 24-Photo Editing Tool
├── index.html
├── script.js
└── styles.css
├── 25-Cryptocurrency Tracker
├── index.html
├── script.js
└── styles.css
├── 26-Fitness Tracker
├── index.html
├── script.js
└── styles.css
├── 27-Job Board Platform
├── index.html
├── script.js
└── style.css
├── 28-AI-powered Recommendation System
├── index.html
└── script.js
├── 29-Augmented Reality Game
└── index.html
├── 30-Video Streaming Platform
└── index.html
├── 31-Google Maps Integration
└── index.html
├── 32-Twitter API Integration
└── index.html
├── 33-YouTube Video Player
└── index.html
├── 34-GitHub Profile Viewer
├── app.js
├── index.html
└── style.css
├── 35-Weather Forecast using OpenWeatherMap API
├── app.js
├── index.html
└── style.css
├── 36-News Aggregator
├── index.html
├── index.js
└── style.css
├── 37-Currency Exchange Rates using API
├── index.html
├── index.js
└── style.css
├── 38-NASA API for Astronomy Data
├── index.html
├── index.js
└── style.css
├── 39-Random Joke Generator using Joke API
├── index.html
├── script.js
└── styles.css
├── 40-Recipe Finder using Food API
├── index.html
├── script.js
└── styles.css
├── 41-Drawing App
├── index.html
├── script.js
└── styles.css
├── 42-Virtual Piano
├── index.html
├── script.js
└── styles.css
├── 43-Interactive Storytelling
├── index.html
├── script.js
└── styles.css
├── 44-3D Cube Puzzle
├── index.html
├── script.js
└── styles.css
├── 45-Text-based Adventure Game
├── index.html
├── script.js
└── styles.css
├── 46-Music Visualizer
├── index.html
├── script.js
└── styles.css
├── 47-Meme Generator
├── index.html
├── script.js
└── styles.css
├── 48-Virtual Pet
├── index.html
├── script.js
└── styles.css
├── 49-Color Palette Generator
├── index.html
├── script.js
└── styles.css
├── 50-Emoji Translator
├── index.html
├── script.js
└── styles.css
├── 51-File Uploader
├── index.html
├── script.js
└── styles.css
├── 52-Password Generator
├── index.html
├── script.js
└── styles.css
├── 53-QR Code Generator
├── index.html
├── qrcode.min.js
├── script.js
└── styles.css
├── 54-Unit Converter
├── index.html
├── script.js
└── styles.css
├── 55-Markdown Editor
├── index.html
├── script.js
└── styles.css
├── 56-Voice Assistant
├── index.html
├── script.js
└── styles.css
├── 57-Note-taking App
├── index.html
├── script.js
└── styles.css
├── 58-Browser Extension
├── manifest.json
└── popup
│ ├── content.js
│ ├── popup.css
│ ├── popup.html
│ └── popup.js
├── 59-Calendar
├── index.html
├── script.js
└── styles.css
├── 60-Clipboard Manager
├── index.html
├── script.js
└── styles.css
├── 61-Interactive Charts
├── app.js
├── index.html
└── styles.css
├── 62-Heatmap Generator
├── heatmap.js
├── index.html
└── styles.css
├── 63-Dashboard with Graphs and Metrics
├── dashboard.js
├── index.html
└── styles.css
├── 64-Geographical Data Visualization
├── app.js
├── index.html
└── styles.css
├── 65-Network Traffic Analyzer
├── app.js
├── index.html
└── styles.css
├── 66-Stock Market Tracker with Graphs
├── app.js
├── index.html
└── styles.css
├── 67-Polls and Survey Data Visualization
├── app.js
├── index.html
└── styles.css
├── 68-Visualizing COVID-19 Dat
├── app.js
├── index.html
└── styles.css
├── 69-Population Density Map
├── app.js
├── index.html
└── styles.css
├── 70-Social Media Analytics Dashboard
├── app.js
├── index.html
└── styles.css
├── 71-Tic Tac Toe
├── app.js
├── index.html
└── styles.css
├── 72-Snake Game
├── index.html
├── script.js
└── styles.css
├── 73-2048
├── app.js
├── index.html
└── styles.css
├── 74-Sudoku Solver
└── index.html
├── 75-Chess Game
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── script.js
├── server.js
└── style.css
├── 76-Hangman
├── images
│ └── hangman-2.png
├── index.html
├── script.js
└── style.css
├── 77-Memory Puzzle Game
├── index.html
├── script.js
└── style.css
├── 78-Battleship
├── index.html
├── script.js
└── style.css
├── 79-Crossword Puzzle
├── index.html
├── script.js
└── style.css
├── 80-Platformer Game
├── index.html
├── script.js
└── style.css
├── 81-Screen Reader Compatibility
├── app.js
├── index.html
├── readme.md
└── styles.css
├── 82-Keyboard Navigation Improvement
├── app.js
├── index.html
└── styles.css
├── 83-Contrast Checker
├── app.js
├── index.html
├── readme.md
└── styles.css
├── 84-Text Resize
├── app.js
├── index.html
└── styles.css
├── 85-Color Blindness Simulator
├── app.js
├── index.html
└── styles.css
├── 86-Speech Recognition Interface
├── index.html
├── script.js
└── styles.css
├── 87-Focus Management
├── index.html
├── script.js
└── styles.css
├── 88-High-Contrast Mode
├── index.html
├── script.js
├── styles-high-contrast.css
└── styles.css
├── 89-Aria Role Implementation
├── index.html
├── script.js
└── styles.css
├── 90-Responsive Design for Accessibility
├── index.html
├── readme.md
├── script.js
└── styles.css
├── 91-Code Profiler and Optimizer
├── index.html
├── readme.md
├── script.js
└── styles.css
├── 92-Lazy Loading Images
├── images
│ ├── image1.jpg
│ ├── image2.jpg
│ └── image3.jpg
├── index.html
├── readme.md
├── script.js
└── styles.css
├── 93-Debouncing and Throttling Functions
├── index.html
├── readme.md
├── script.js
└── styles.css
├── 94-Caching Mechanism
├── index.html
├── script.js
└── styles.css
├── 95-Reducing DOM Manipulations
├── index.html
├── script.js
└── styles.css
├── 96-Memory Leak Detection
├── index.html
├── script.js
└── styles.css
├── 97-Network Performance Analyzer
├── index.html
├── script.js
└── styles.css
├── 98-Minification and Bundling
├── index.html
├── script.js
└── styles.css
├── 99-Tree Shaking for Unused Code
├── index.html
├── script.js
└── styles.css
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── api.json
├── assets
├── css
│ └── index.css
├── images
│ ├── 100jsproject.jpg
│ ├── favicon.ico
│ ├── logo.png
│ ├── nike.avif
│ ├── og-image.png
│ ├── open-ai.avif
│ ├── project-images
│ │ ├── Digital Clock.jpg
│ │ ├── Simple Calculator.jpg
│ │ └── To-Do App.jpg
│ ├── sonos.avif
│ └── twitter-image.jpg
└── js
│ ├── demodata.js
│ └── index.js
├── index.html
├── note.txt
├── projects.json
├── screen.png
└── screenshot.png
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 |
3 | # Logs
4 | logs
5 | *.log
6 | npm-debug.log*
7 | yarn-debug.log*
8 | yarn-error.log*
9 | pnpm-debug.log*
10 | lerna-debug.log*
11 |
12 | node_modules
13 | dist
14 | dist-ssr
15 | *.local
16 |
17 | # Editor directories and files
18 | .vscode/*
19 | !.vscode/extensions.json
20 | .idea
21 | .DS_Store
22 | *.suo
23 | *.ntvs*
24 | *.njsproj
25 | *.sln
26 | *.sw?
27 | .vscode/
28 | .vite
--------------------------------------------------------------------------------
/.vite/deps/_metadata.json:
--------------------------------------------------------------------------------
1 | {
2 | "hash": "45675ccd",
3 | "configHash": "6646ec49",
4 | "lockfileHash": "e5b6e486",
5 | "browserHash": "0c602c75",
6 | "optimized": {
7 | "react": {
8 | "src": "../../node_modules/react/index.js",
9 | "file": "react.js",
10 | "fileHash": "a1b3608a",
11 | "needsInterop": true
12 | },
13 | "react-dom/client": {
14 | "src": "../../node_modules/react-dom/client.js",
15 | "file": "react-dom_client.js",
16 | "fileHash": "ba7c6116",
17 | "needsInterop": true
18 | },
19 | "react-router-dom": {
20 | "src": "../../node_modules/react-router-dom/dist/index.js",
21 | "file": "react-router-dom.js",
22 | "fileHash": "bcb7a487",
23 | "needsInterop": false
24 | }
25 | },
26 | "chunks": {
27 | "chunk-QPG7G3M7": {
28 | "file": "chunk-QPG7G3M7.js"
29 | },
30 | "chunk-UTEJFLXC": {
31 | "file": "chunk-UTEJFLXC.js"
32 | }
33 | }
34 | }
--------------------------------------------------------------------------------
/.vite/deps/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "module"
3 | }
4 |
--------------------------------------------------------------------------------
/.vite/deps/react-dom_client.js:
--------------------------------------------------------------------------------
1 | import {
2 | require_react_dom
3 | } from "./chunk-QPG7G3M7.js";
4 | import {
5 | __commonJS
6 | } from "./chunk-UTEJFLXC.js";
7 |
8 | // node_modules/react-dom/client.js
9 | var require_client = __commonJS({
10 | "node_modules/react-dom/client.js"(exports) {
11 | var m = require_react_dom();
12 | if (false) {
13 | exports.createRoot = m.createRoot;
14 | exports.hydrateRoot = m.hydrateRoot;
15 | } else {
16 | i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
17 | exports.createRoot = function(c, o) {
18 | i.usingClientEntryPoint = true;
19 | try {
20 | return m.createRoot(c, o);
21 | } finally {
22 | i.usingClientEntryPoint = false;
23 | }
24 | };
25 | exports.hydrateRoot = function(c, h, o) {
26 | i.usingClientEntryPoint = true;
27 | try {
28 | return m.hydrateRoot(c, h, o);
29 | } finally {
30 | i.usingClientEntryPoint = false;
31 | }
32 | };
33 | }
34 | var i;
35 | }
36 | });
37 | export default require_client();
38 | //# sourceMappingURL=react-dom_client.js.map
39 |
--------------------------------------------------------------------------------
/.vite/deps/react-dom_client.js.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "sources": ["../../node_modules/react-dom/client.js"],
4 | "sourcesContent": ["'use strict';\n\nvar m = require('react-dom');\nif (process.env.NODE_ENV === 'production') {\n exports.createRoot = m.createRoot;\n exports.hydrateRoot = m.hydrateRoot;\n} else {\n var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;\n exports.createRoot = function(c, o) {\n i.usingClientEntryPoint = true;\n try {\n return m.createRoot(c, o);\n } finally {\n i.usingClientEntryPoint = false;\n }\n };\n exports.hydrateRoot = function(c, h, o) {\n i.usingClientEntryPoint = true;\n try {\n return m.hydrateRoot(c, h, o);\n } finally {\n i.usingClientEntryPoint = false;\n }\n };\n}\n"],
5 | "mappings": ";;;;;;;;AAAA;AAAA;AAEA,QAAI,IAAI;AACR,QAAI,OAAuC;AACzC,cAAQ,aAAa,EAAE;AACvB,cAAQ,cAAc,EAAE;AAAA,IAC1B,OAAO;AACD,UAAI,EAAE;AACV,cAAQ,aAAa,SAAS,GAAG,GAAG;AAClC,UAAE,wBAAwB;AAC1B,YAAI;AACF,iBAAO,EAAE,WAAW,GAAG,CAAC;AAAA,QAC1B,UAAE;AACA,YAAE,wBAAwB;AAAA,QAC5B;AAAA,MACF;AACA,cAAQ,cAAc,SAAS,GAAG,GAAG,GAAG;AACtC,UAAE,wBAAwB;AAC1B,YAAI;AACF,iBAAO,EAAE,YAAY,GAAG,GAAG,CAAC;AAAA,QAC9B,UAAE;AACA,YAAE,wBAAwB;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAjBM;AAAA;AAAA;",
6 | "names": []
7 | }
8 |
--------------------------------------------------------------------------------
/.vite/deps/react.js:
--------------------------------------------------------------------------------
1 | import {
2 | require_react
3 | } from "./chunk-UTEJFLXC.js";
4 | export default require_react();
5 | //# sourceMappingURL=react.js.map
6 |
--------------------------------------------------------------------------------
/.vite/deps/react.js.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "sources": [],
4 | "sourcesContent": [],
5 | "mappings": "",
6 | "names": []
7 | }
8 |
--------------------------------------------------------------------------------
/01-To-Do List App/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | To-Do List App | 100 JavaScript Projects.
7 |
8 |
9 |
10 |
11 | To-Do List App
12 |
13 |
14 |
20 |
21 |
22 |
25 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
12 |
13 |
14 |
15 |
:
16 |
17 |
21 |
22 |
23 |
24 | ,
25 |
26 | ,
27 |
28 | ,
29 |
30 |
31 |
32 |
Tip Calculator || 100 JavaScript Projects
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/05-Temperature Converter/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Temperature Converter || 100 JavaScript Projects
7 |
8 |
9 |
10 |
11 | Temperature Converter
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/05-Temperature Converter/index.js:
--------------------------------------------------------------------------------
1 | function initApp() {
2 | console.log("init App");
3 | }
4 |
5 | initApp();
6 |
--------------------------------------------------------------------------------
/05-Temperature Converter/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
--------------------------------------------------------------------------------
/06-Random Quote Generator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Random Quote Generator
8 |
9 |
10 |
11 |
12 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/06-Random Quote Generator/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | background: linear-gradient(
4 | to left bottom,
5 | lightblue,
6 | lightpink,
7 | lightblue
8 | );
9 | font-family: monospace;
10 | min-height: 100vh;
11 | display: flex;
12 | justify-content: center;
13 | align-items: center;
14 | }
15 |
16 | .container {
17 | width: 100%;
18 | height: 100vh;
19 | display: flex;
20 | justify-content: center;
21 | align-items: center;
22 | text-align: center;
23 | }
24 | .container .header {
25 | font-weight: 700;
26 | font-size: 1.2rem;
27 | margin-bottom: 10px;
28 | }
29 | .container .header h1 {
30 | font-size: 3rem;
31 | margin-bottom: 3rem;
32 | }
33 | .container .header p.quote {
34 | font-size: 1.6rem;
35 | line-height: 1.8;
36 | width: 70%;
37 | min-width: 80%;
38 | margin: 30px auto;
39 | min-height: 200px;
40 | }
41 | .btn {
42 | padding: 16px;
43 | background: linear-gradient(
44 | to left bottom,
45 | lightblue,
46 | lightpink,
47 | lightblue
48 | );
49 | border-color: rgba(255, 255, 255, 0.3);
50 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
51 | color: #000;
52 | text-transform: uppercase;
53 | font-size: 16px;
54 | font-weight: 600;
55 | min-width: 280px;
56 | margin: 10px 0px;
57 | border-radius: 15px;
58 | cursor: pointer;
59 | transition: all 300ms ease-in-out;
60 | }
61 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/08-Countdown Timer/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Countdown Timer || 100 JavaScript Projects
8 |
9 |
10 |
11 |
12 |
13 |
00:00:00
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/09-BMI Calculator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | BMI Calculator || 100 JavaScript Projects
8 |
9 |
10 |
11 |
12 |
13 |
BMI Calculator
14 |
37 |
12 |
Currency Converter
13 |
14 |
17 | to
18 |
21 |
22 |
23 | Result:
24 |
25 |
26 |
27 |
28 |
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 |
--------------------------------------------------------------------------------
/100-Code Splitting/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Code Splitting App
8 |
9 |
10 |
11 |
Code Splitting App
12 |
16 |
19 |
20 |
File ${
37 | index + 1
38 | }:${file} `;
39 | });
40 | }
41 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/11-Weather App/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Weather App || 100 JavaScript Projects
7 |
8 |
9 |
10 |
11 |
12 |
Weather App
13 |
14 |
15 |
16 |
${data.name}, ${data.sys.country}
25 | Temperature: ${data.main.temp} °C
26 | Weather: ${data.weather[0].description}
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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/13-Memory Game/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Memory Game || 100 JavaScript Projects
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/14-Chat Application/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Simple Chat App || 100 JavaScript Projects
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/15-Interactive Quiz/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Interactive Quiz || 100 JavaScript Projects
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Pomodoro Timer
12 | 25:00
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/17-Music Player/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Music Player || 100 JavaScript Projects
7 |
8 |
9 |
10 |
11 | Music Player
12 |
13 |
17 |
18 |
19 |
Car Rental Service
12 |
13 |
14 |
17 |
18 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/20-Blogging Platform/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Blogging Platform || 100 JavaScript Projects
8 |
9 |
10 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/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 | ${post.title}
19 | ${post.content}
20 | `;
21 |
22 | blogPostsElement.appendChild(postElement);
23 | });
24 | }
25 |
26 | window.onload = displayBlogPosts;
27 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/21-Social Media Dashboard/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Social Media Dashboard || 100 JavaScript Projects
8 |
9 |
10 |
11 | Social Media Dashboard
12 |
13 |
14 |
15 |
18 |
19 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/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 | ${user.name}
17 | @${user.username}
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 | ${post.title}
31 | ${post.content}
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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/22-E-commerce Website/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | E-commerce Website || 100 JavaScript Projects
8 |
9 |
10 |
14 |
15 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/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 | 
16 | ${product.name}
17 | Price: $${product.price}
18 |
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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/23-Real-time Chat Room/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Real-time Chat Room || 100 JavaScript Projects
8 |
9 |
10 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/24-Photo Editing Tool/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Photo Editing Tool || 100 JavaScript Projects
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/25-Cryptocurrency Tracker/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Cryptocurrency Tracker || 100 JavaScript Projects
8 |
9 |
10 |
11 | Cryptocurrency Tracker
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/26-Fitness Tracker/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Fitness Tracker || 100 JavaScript Projects
8 |
9 |
10 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/27-Job Board Platform/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Job Board || 100 JavaScript Projects
8 |
9 |
10 |
11 |
Job Board
12 |
21 |
22 |
23 |
${jobTitle}
13 | ${jobDescription}
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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/28-AI-powered Recommendation System/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | AI Recommendation System || 100 JavaScript Projects
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/30-Video Streaming Platform/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Video Streaming Platform
7 |
24 |
25 |
26 |
27 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/31-Google Maps Integration/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Google Maps Integration || 100 JavaScript Projects
7 |
13 |
14 |
15 |
16 |
21 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/34-GitHub Profile Viewer/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | GitHub Profile Viewer | 100 JavaScript Projects
8 |
9 |
10 |
11 |
12 |
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/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 | ${name}
28 | Temperature: ${main.temp} °C
29 | Weather: ${weather[0].description}
30 | `;
31 | }
32 |
--------------------------------------------------------------------------------
/35-Weather Forecast using OpenWeatherMap API/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Weather Forecast || 100 JavaScript Projects
7 |
8 |
9 |
10 |
11 | Weather Forecast
12 |
13 |
14 |
17 |
18 |
News Aggregator
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/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 | ${article.title}
21 | ${article.description}
22 | Read more
23 | `;
24 |
25 | newsContainer.appendChild(articleElement);
26 | });
27 | }
28 |
29 | // Fetch news when the page loads
30 | document.addEventListener("DOMContentLoaded", fetchNews);
31 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/37-Currency Exchange Rates using API/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Currency Exchange Rates || 100 JavaScript Projects
7 |
8 |
9 |
10 |
11 | Currency Exchange Rates
12 |
13 |
14 |
17 |
20 |
23 |
24 |
NASA APOD - Astronomy Picture of the Day
12 |
13 |
16 |
17 |
![APOD]()
18 |
19 |
11 |
Random Joke Generator
12 |
13 |
Press the button for a joke!
14 |
15 |
16 |
11 |
Recipe Finder
12 |
17 |
18 |
19 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/42-Virtual Piano/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Virtual Piano || 100 JavaScript Projects
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
11 |
12 |
Once upon a time...
13 |
14 |
15 |
16 |
17 |
18 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
Rotate the cube to match the pattern!
20 |
11 |
12 |
You find yourself in a dark room...
13 |
14 |
15 |
16 |
17 |
11 |
Music Visualizer
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/48-Virtual Pet/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Virtual Pet || 100 JavaScript Projects
8 |
9 |
10 |
11 |
Virtual Pet
12 |
16 |
17 |
18 |
19 |
20 |
21 |
11 |
Emoji Translator
12 |
13 |
14 |
15 |
16 |
11 |
File Uploader
12 |
13 |
14 |
15 |
16 |
11 |
Password Generator
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
11 |
QR Code Generator
12 |
13 |
14 |
15 |
16 |
11 |
Unit Converter
12 |
13 |
14 |
15 |
16 |
20 |
21 |
22 |
23 |
24 |
11 |
Markdown Editor
12 |
16 |
17 |
11 |
Voice Assistant
12 |
13 |
14 |
15 |
11 |
Note-taking App
12 |
13 |
14 |
15 |
11 |
My Extension Popup
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/59-Calendar/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Calendar App || 100 JavaScript Projects
8 |
9 |
10 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/60-Clipboard Manager/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Clipboard Manager || 100 JavaScript Projects
8 |
9 |
10 |
11 |
Clipboard Manager
12 |
16 |
17 |
18 |
19 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/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/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | D3.js Heatmap Generator
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/64-Geographical Data Visualization/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
11 |
12 | Geographical Data Visualization || 100 JavaScript Projects
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/65-Network Traffic Analyzer/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Network Traffic Analyzer || 100 JavaScript Projects
8 |
9 |
10 |
11 |
12 |
13 |
Packet List
14 |
15 |
16 |
12 |
Stock Market Tracker
13 |
14 |
15 |
20 |
21 |
22 |
23 |
12 |
Polls and Survey Visualization
13 |
24 |
25 |
12 |
COVID-19 Data Visualization
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/69-Population Density Map/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
11 | Population Density Map
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/70-Social Media Analytics Dashboard/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Social Media Analytics Dashboard || 100 JavaScript Projects
8 |
9 |
10 |
11 |
12 |
13 | Social Media Analytics Dashboard
14 |
15 |
16 |
17 |
21 |
22 |
27 |
28 |
33 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
11 |
12 |
13 | Congratulations! You solved the puzzle!
14 |
15 |
16 |
11 |
12 |
13 |
14 |
15 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
11 |
Screen Reader Compatibility Test
12 |
13 | This is a simple web app to test screen reader compatibility.
14 |
15 |
18 |
19 |
This is the content that will be toggled.
20 |
21 |
11 |
Keyboard Navigation Improvement
12 |
13 | This web app demonstrates improved keyboard navigation.
14 |
15 |
16 |
17 |
18 |
19 |
20 | This is the focusable content that can be navigated
21 | using the keyboard.
22 |
23 |
24 |
25 |
11 |
Text Resize App
12 |
13 |
21 |
This is the text that will be resized.
22 |
11 |
Color Blindness Simulator
12 |
13 |
14 |
15 |
Simulated Colors:
16 |
Protanopia
17 |
Deuteranopia
18 |
Tritanopia
19 |
20 |
11 |
Speech Recognition Interface
12 |
Your transcribed speech will appear here.
13 |
14 |
11 |
Focus Management App
12 |
13 |
18 |
19 |
20 |
21 |
12 |
High-Contrast Mode Tool
13 |
14 |
This is a sample text for testing high-contrast mode.
15 |
11 |
ARIA Role Implementation App
12 |
This is a simple example demonstrating ARIA roles.
13 |
20 |
Your Accessible Web App
12 |
13 |
14 |
21 |
22 |
23 |
24 |
25 |
26 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/90-Responsive Design for Accessibility/readme.md:
--------------------------------------------------------------------------------
1 | # Accessibility Considerations:
2 |
3 | - Use semantic HTML elements (