├── .gitignore
├── Day #01 - Pixel Art Generator
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #02 - Rich Text Editor
    ├── README.md
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #03 - Pass Generator
    ├── README.md
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #04 - QR Code Generator
    ├── README.md
    ├── download.svg
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    ├── share.svg
    └── style.css
├── Day #05 - Detect Device Battery
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #06 - Simple XO Game
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #07 - Flip a Coin Game
    ├── README.md
    ├── heads.svg
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    ├── style.css
    └── tails.svg
├── Day #08 - Multi Step Form
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #09 - Aspect Ratio Calculator
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #10 - Weather App
    ├── README.md
    ├── images
    │   ├── 404.png
    │   ├── clear.png
    │   ├── cloud.png
    │   ├── mist.png
    │   ├── rain.png
    │   └── snow.png
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #11 - Movie Info App
    ├── README.md
    ├── index.html
    ├── index.js
    ├── key.js
    ├── screenshot.jpg
    ├── star-icon.svg
    └── style.css
├── Day #12 - Type Test App
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #13 - Translator App
    ├── README.md
    ├── index.html
    ├── js
    │   ├── countries.js
    │   └── script.js
    ├── screenshot.jpg
    └── style.css
├── Day #14 - Crypto Price App
    ├── README.md
    ├── images
    │   ├── bitcoin.png
    │   ├── cardano.png
    │   ├── dogecoin.png
    │   ├── ethereum.png
    │   ├── litecoin.png
    │   └── tether.png
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #15 - ToDo App
    ├── README.md
    ├── bars-icon.svg
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #16 - Geometric Art Generator
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #17 - Snake Game
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #18 - Budget App
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #19 - Text To Speech App
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #20 - QR Code Reader
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #21 - Spin Wheel App
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    ├── spinner-arrow.svg
    └── style.css
├── Day #22 - Gradient Generator
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #23 - Guess The Word Game
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    ├── style.css
    └── words-db.js
├── Day #24 - Simon Game
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #25 - JS Charts
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #26 - Recipe Guide App
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #27 - MineSweeper Game
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #28 - Github Api
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #29 - Breakout Game
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #30 - Music Player App
    ├── README.md
    ├── assets
    │   ├── 1.jpg
    │   ├── 1.mp3
    │   ├── 2.jpg
    │   ├── 2.mp3
    │   ├── 3.jpg
    │   └── 3.mp3
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #31 - ChatGPT Bot
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #32 - Google Maps Api
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #33 - Pong Game
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #34 - Chrome Color Picker Extension
    ├── README.md
    ├── icons
    │   ├── icon128.png
    │   ├── icon16.png
    │   ├── icon32.png
    │   └── icon48.png
    ├── index.html
    ├── index.js
    ├── manifest.json
    ├── screenshot.jpg
    └── style.css
├── Day #35 - ASCII Donut Animation
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #36 - Stock Tracker App
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #37 - Shadow Generator
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #38 - Movie App
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #39 - Tradingview Widget
    ├── Method-2
    │   ├── index.html
    │   └── style.css
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.png
    ├── screenshot2.png
    └── style.css
├── Day #40 - Detect Internet Speed
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    ├── speedometer.png
    └── style.css
├── Day #41 - Currency Converter
    ├── README.md
    ├── countries.js
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #42 - Live Code Editor
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.png
    └── style.css
├── Day #43 - Parallex Slider
    ├── 1.jpg
    ├── 2.jpg
    ├── 3.jpg
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #44 - Minimal Weather App With Api
    ├── 1.jpg
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #45 - Particles Portfolio
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #46 - Sudoku Solver
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #47 - Text Encryptor
    ├── README.md
    ├── index.html
    ├── index.js
    ├── screenshot.jpg
    └── style.css
├── Day #48 - Ai Image Generator
    ├── README.md
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #49 - Chess Game
    ├── README.md
    ├── css
    │   └── chessboard-1.0.0.min.css
    ├── img
    │   └── chesspieces
    │   │   └── wikipedia
    │   │       ├── bB.png
    │   │       ├── bK.png
    │   │       ├── bN.png
    │   │       ├── bP.png
    │   │       ├── bQ.png
    │   │       ├── bR.png
    │   │       ├── wB.png
    │   │       ├── wK.png
    │   │       ├── wN.png
    │   │       ├── wP.png
    │   │       ├── wQ.png
    │   │       └── wR.png
    ├── index.html
    ├── js
    │   └── chessboard-1.0.0.min.js
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #50 - Food Recipe App
    ├── README.md
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #51 - Draggable Profile Card
    ├── README.md
    ├── background.jpg
    ├── index.html
    ├── logo.png
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #52 - Email Sender App
    ├── README.md
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #53 - Url Shortner
    ├── README.md
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #54 - Glassmorphism Creator
    ├── README.md
    ├── Usage Example
    │   ├── index.html
    │   └── style.css
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #55 - Alarm App
    ├── README.md
    ├── alarm.mp3
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #56 - Image Color Picker
    ├── README.md
    ├── bg.jpg
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #57 - 2048 Game
    ├── README.md
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #58 - Games Release Calendar
    ├── README.md
    ├── index.html
    ├── screenshot.png
    ├── script.js
    └── style.css
├── Day #59 - Snake Pong
    ├── README.md
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #60 - Wikipedia Searcher
    ├── README.md
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #61 - Api Quiz Game
    ├── README.md
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #62 - Chrome Todo Extension
    ├── README.md
    ├── icons
    │   ├── icon128.png
    │   ├── icon16.png
    │   └── icon32.png
    ├── index.html
    ├── manifest.json
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #63 - Chrome Translator Extension
    ├── README.md
    ├── countries.js
    ├── icons
    │   ├── icon128.png
    │   ├── icon16.png
    │   ├── icon32.png
    │   └── icon64.png
    ├── index.html
    ├── manifest.json
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #64 - Speech To Text
    ├── README.md
    ├── index.html
    ├── languages.js
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #65 - Capture Screen Shot
    ├── README.md
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #66 - Live Chart Generator
    ├── README.md
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #67 - Capthca App
    ├── README.md
    ├── bg.png
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #68 - JSON Parser
    ├── README.md
    ├── Test.json
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #69 - JavaScript Form Validator
    ├── README.md
    ├── bg.png
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #70 - Event Calendar
    ├── README.md
    ├── index.html
    ├── screenshot.png
    ├── script.js
    └── style.css
├── Day #71 - News Aggregator App
    ├── README.md
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #72 - Common Sliders
    ├── Card Slider
    │   ├── assets
    │   │   ├── profile-1.png
    │   │   └── profile-2.png
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    ├── Draggable Slider
    │   ├── assets
    │   │   ├── image-1.jpg
    │   │   ├── image-2.jpg
    │   │   ├── image-3.jpg
    │   │   └── image-4.jpg
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    ├── Image Slider
    │   ├── .vscode
    │   │   └── settings.json
    │   ├── assets
    │   │   ├── image-1.jpg
    │   │   ├── image-2.jpg
    │   │   ├── image-3.jpg
    │   │   └── image-4.jpg
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    ├── README.md
    ├── screenshot-1.jpg
    ├── screenshot-2.jpg
    └── screenshot-3.jpg
├── Day #73 - Gameboy Tetris Clone
    ├── README.md
    ├── index.html
    ├── pieces.js
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #74 - Flashcard App
    ├── README.md
    ├── index.html
    ├── screenshot.png
    ├── script.js
    └── style.css
├── Day #75 - Mini Music Player
    ├── README.md
    ├── assets
    │   ├── 1.jpg
    │   ├── 1.mp3
    │   ├── 2.jpg
    │   ├── 2.mp3
    │   ├── 3.jpg
    │   └── 3.mp3
    ├── index.html
    ├── screenshot.jpg
    ├── script.js
    └── style.css
├── Day #76 - Page Translator Extension
    ├── README.md
    ├── background.js
    ├── icons
    │   ├── icon128.png
    │   ├── icon16.png
    │   └── icon32.png
    ├── langs.js
    ├── manifest.json
    ├── popup.css
    ├── popup.html
    ├── popup.js
    ├── screenshot.jpg
    └── translate.js
├── Day #77 - Image Detector AI
    ├── README.md
    ├── index.html
    ├── not-found.jpg
    ├── screenshot.png
    ├── script.js
    └── style.css
├── Day #78 - Google Gemini Clone
    ├── README.md
    ├── assets
    │   ├── Logo.png
    │   ├── gemini.svg
    │   └── profile.png
    ├── index.html
    ├── screenshot.png
    ├── script.js
    └── style.css
├── Day #79 - Simple Python Compiler
    ├── README.md
    ├── index.html
    ├── screenshot.png
    ├── script.js
    └── style.css
├── Day #80 - Google Recaptcha
    ├── README.md
    ├── index.html
    ├── screenshot-1.png
    ├── screenshot-2.png
    ├── script.js
    └── style.css
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_STORE
2 | Day #68 - JSON Parser/desktop.ini
3 | 


--------------------------------------------------------------------------------
/Day #01 - Pixel Art Generator/README.md:
--------------------------------------------------------------------------------
1 | # Day #1
2 | 
3 | ### Pixel Art Generator
4 | In this tutorial ([Open in Youtube](https://youtu.be/DfDPJqD3FjI)), I am gonna showing to you how to build a pixel art generator project with javascript. you can call it pixel paint app too❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #01 - Pixel Art Generator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>#1 - Pixel Art Generator | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="wrapper">
15 |         <div class="options">
16 |             <div class="opt-wrapper">
17 |                 <div class="slider">
18 |                     <label for="width-range">Grid Width</label>
19 |                     <input type="range" id="width-range" min="1" max="35">
20 |                     <span id="width-value">00</span>
21 |                 </div>
22 |                 <div class="slider">
23 |                     <label for="height-range">Grid Height</label>
24 |                     <input type="range" id="height-range" min="1" max="35">
25 |                     <span id="height-value">00</span>
26 |                 </div>
27 |             </div>
28 | 
29 |             <div class="opt-wrapper">
30 |                 <button id="submit-grid">Create Grid</button>
31 |                 <button id="clear-grid">Clear Grid</button>
32 |                 <input type="color" id="color-input">
33 |                 <button id="erase-btn">Erase</button>
34 |                 <button id="paint-btn">Paint</button>
35 |             </div>
36 | 
37 |         </div>
38 |         <div class="container"></div>
39 |     </div>
40 | 
41 | 
42 | 
43 | 
44 |     <script src="index.js"></script>
45 | </body>
46 | 
47 | </html>


--------------------------------------------------------------------------------
/Day #01 - Pixel Art Generator/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #01 - Pixel Art Generator/screenshot.jpg


--------------------------------------------------------------------------------
/Day #01 - Pixel Art Generator/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     padding: 0;
 3 |     margin: 0;
 4 |     box-sizing: border-box;
 5 |     font-family: monospace;
 6 | }
 7 | 
 8 | body{
 9 |     background-color: #43a047;
10 | }
11 | 
12 | .wrapper{
13 |     background-color: #fff;
14 |     width: 80vmin;
15 |     position: absolute;
16 |     transform: translate(-50%, -50%);
17 |     top: 50%;
18 |     left: 50%;
19 |     padding: 40px 20px;
20 |     border-radius: 8px;
21 | }
22 | 
23 | label{
24 |     display: block;
25 | }
26 | 
27 | span{
28 |     position: relative;
29 |     font-size: 22px;
30 |     bottom: -1px;
31 | }
32 | 
33 | .opt-wrapper{
34 |     display: flex;
35 |     justify-content: space-between;
36 |     margin-bottom: 20px;
37 |     gap: 10px;
38 | }
39 | 
40 | button{
41 |     background-color: #43a047;
42 |     border: none;
43 |     border-radius: 5px;
44 |     padding: 5px;
45 |     color: #fff;
46 | }
47 | 
48 | input[type="color"]{
49 |     -webkit-appearance: none;
50 |     -moz-appearance: none;
51 |     appearance: none;
52 |     background-color: transparent;
53 |     width: 70px;
54 |     height: 40px;
55 |     border: none;
56 |     cursor: pointer;
57 | }
58 | 
59 | input[type="color"]::-webkit-color-swatch{
60 |     border-radius: 8px;
61 |     border: 4px solid #000;
62 | }
63 | input[type="color"]::-moz-color-swatch{
64 |     border-radius: 8px;
65 |     border: 4px solid #000;
66 | }
67 | 
68 | .gridCol{
69 |     height: 1em;
70 |     width: 1em;
71 |     border: 1px solid #ddd;
72 | }
73 | 
74 | .gridRow{
75 |     display: flex;
76 | }
77 | 
78 | @media only screen and (max-width: 768px){
79 |     .gridCol{
80 |         height: 0.8em;
81 |         width: 0.8em;
82 |     }
83 | }


--------------------------------------------------------------------------------
/Day #02 - Rich Text Editor/README.md:
--------------------------------------------------------------------------------
 1 | # Day #2
 2 | 
 3 | ### Rich Text Editor
 4 | In this tutorial ([Open in Youtube](https://youtu.be/gRyvG7PZ4m0)),  I am gonna showing to you how to build a online text editor with javascript. this text editor is similar to microsoft office word❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | ![screenshot](screenshot.jpg)
10 | 


--------------------------------------------------------------------------------
/Day #02 - Rich Text Editor/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #02 - Rich Text Editor/screenshot.jpg


--------------------------------------------------------------------------------
/Day #03 - Pass Generator/README.md:
--------------------------------------------------------------------------------
1 | # Day #3
2 | 
3 | ### Password Generator
4 | In this tutorial ([Open in Youtube](https://youtu.be/825u2Puaej0)),  I am gonna showing to you how to build a Password Generator with javascript. this pass generator also have different options to manage password creation❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #03 - Pass Generator/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #03 - Pass Generator/screenshot.jpg


--------------------------------------------------------------------------------
/Day #04 - QR Code Generator/README.md:
--------------------------------------------------------------------------------
 1 | # Day #4
 2 | 
 3 | ### QR Code Generator
 4 | In this tutorial ([Open in Youtube](https://youtu.be/I50Xwve6QW4)),  I am gonna showing to you how to build a QR Code Generator with javascript. this qr code generator also are responsive and have download and share button❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | ![screenshot](screenshot.jpg)
10 | 


--------------------------------------------------------------------------------
/Day #04 - QR Code Generator/download.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	viewBox="0 0 29.978 29.978" style="enable-background:new 0 0 29.978 29.978;" xml:space="preserve" fill="#fff">
 5 | 	<g>
 6 | 		<path d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012
 7 | 		v-8.861H25.462z" />
 8 | 		<path d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723
 9 | 		c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742
10 | 		c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193
11 | 		C15.092,18.979,14.62,18.426,14.62,18.426z" />
12 | 		<g></g>
13 | 		<g></g>
14 | 		<g></g>
15 | 		<g></g>
16 | 		<g></g>
17 | 		<g></g>
18 | 		<g></g>
19 | 		<g></g>
20 | 		<g></g>
21 | 		<g></g>
22 | 		<g></g>
23 | 		<g></g>
24 | 		<g></g>
25 | 		<g></g>
26 | 		<g></g>
27 | 	</g>
28 | 	<g></g>
29 | 	<g></g>
30 | 	<g></g>
31 | 	<g></g>
32 | 	<g></g>
33 | 	<g></g>
34 | 	<g></g>
35 | 	<g></g>
36 | 	<g></g>
37 | 	<g></g>
38 | 	<g></g>
39 | 	<g></g>
40 | 	<g></g>
41 | 	<g></g>
42 | 	<g></g>
43 | </svg>


--------------------------------------------------------------------------------
/Day #04 - QR Code Generator/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #04 - QR Code Generator/screenshot.jpg


--------------------------------------------------------------------------------
/Day #05 - Detect Device Battery/README.md:
--------------------------------------------------------------------------------
 1 | # Day #5
 2 | 
 3 | ### Detect Device Battery
 4 | In this tutorial ([Open in Youtube](https://youtu.be/pXGVgEQntsA)),  I am gonna showing to you how to detect user device battery with javascript. you can use this online javascript battery detector to detect user device battery and detect if it's plugged charger or no❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | ![screenshot](screenshot.jpg)
10 | 


--------------------------------------------------------------------------------
/Day #05 - Detect Device Battery/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
 9 |     <link rel="stylesheet" href="style.css">
10 |     <title>Day #5 - Battery Detector | AsmrProg</title>
11 | </head>
12 | 
13 | <body>
14 | 
15 |     <section class="battery">
16 |         <div class="Bcard">
17 |             <div class="Bpill">
18 |                 <div class="Blevel">
19 |                     <div class="Bliquid"></div>
20 |                 </div>
21 |             </div>
22 |             <div class="Bdata">
23 |                 <p class="Btext">Battery :</p>
24 |                 <h1 class="Bpercentage">20%</h1>
25 |                 <p class="Bstatus">
26 |                     <i class="ri-plug-line"></i>
27 |                 </p>
28 |             </div>
29 |         </div>
30 |     </section>
31 | 
32 | 
33 | 
34 | 
35 |     <script src="index.js"></script>
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/Day #05 - Detect Device Battery/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #05 - Detect Device Battery/screenshot.jpg


--------------------------------------------------------------------------------
/Day #06 - Simple XO Game/README.md:
--------------------------------------------------------------------------------
1 | # Day #6
2 | 
3 | ### XO Game
4 | In this tutorial ([Open in Youtube](https://youtu.be/MgtGHfdpigU)),  I am gonna showing to you how to create simple javascript xo game! this tic tac toe game have very simple code and it's best js tutorial for beginners❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #06 - Simple XO Game/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #06 - Simple XO Game/screenshot.jpg


--------------------------------------------------------------------------------
/Day #07 - Flip a Coin Game/README.md:
--------------------------------------------------------------------------------
1 | # Day #7
2 | 
3 | ### Flip a Coin Game
4 | In this tutorial ([Open in Youtube](https://youtu.be/-o-H1Ecqo_M)),  I am gonna showing to you how to code simple flip a coin game! this heads and tails game have very simple code and it's best js tutorial for beginners❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #07 - Flip a Coin Game/heads.svg:
--------------------------------------------------------------------------------
 1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
 2 |   <title>heads</title>
 3 |   <g>
 4 |     <path d="M114.6,60a54.61206,54.61206,0,0,1-102,27.108,53.80039,53.80039,0,0,1-5.988-15.612A54.94484,54.94484,0,0,1,5.4,60,54.63072,54.63072,0,0,1,73.284,7.032a53.6595,53.6595,0,0,1,15.384,6.504A54.62611,54.62611,0,0,1,114.6,60Z" style="fill: #ffde50"/>
 5 |     <path d="M105,60a44.98374,44.98374,0,0,1-42.684,44.94H62.28c-.756.036-1.512.06-2.28.06a45.00313,45.00313,0,0,1-7.716-89.34h.036A44.98939,44.98939,0,0,1,105,60Z" style="fill: #f68e00"/>
 6 |     <path d="M99.6,60.6a44.99555,44.99555,0,0,1-37.284,44.34H62.28c-.756.036-1.512.06-2.28.06a45.00313,45.00313,0,0,1-7.716-89.34h.036c.756-.036,1.512-.06,2.28-.06a44.98562,44.98562,0,0,1,45,45Z" style="fill: #faa300"/>
 7 |     <path d="M99.804,22.59595l-6.78,6.78-3.096,3.096L29.376,93.024l-6.78,6.78A54.42023,54.42023,0,0,1,13.8,88.308,53.80039,53.80039,0,0,1,7.812,72.696,54.94484,54.94484,0,0,1,6.6,61.2,54.63072,54.63072,0,0,1,74.484,8.232a53.6595,53.6595,0,0,1,15.384,6.504A54.36778,54.36778,0,0,1,99.804,22.59595Z" style="fill: #fff;opacity: 0.14"/>
 8 |     <g>
 9 |       <text transform="translate(23.29687 67.95869)" style="font-size: 21.072948455810547px;fill: #b96b00;font-family: Roboto-Bold, Roboto;font-weight: 700;letter-spacing: 0.04397855451710463em">HEADS</text>
10 |       <text transform="translate(24.49658 69.1584)" style="font-size: 21.072948455810547px;fill: #ffea94;font-family: Roboto-Bold, Roboto;font-weight: 700;letter-spacing: 0.04397855451710463em">HEADS</text>
11 |     </g>
12 |   </g>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/Day #07 - Flip a Coin Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #7 - Flip a coin game | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <div class="stats">
16 |             <p id="heads-count">Heads: 0</p>
17 |             <p id="tails-count">Tails: 0</p>
18 |         </div>
19 |         <div class="coin" id="coin">
20 |             <div class="heads">
21 |                 <img src="heads.svg">
22 |             </div>
23 |             <div class="tails">
24 |                 <img src="tails.svg">
25 |             </div>
26 |         </div>
27 |         <div class="buttons">
28 |             <button id="flip-button">
29 |                 Flip Coin
30 |             </button>
31 |             <button id="reset-button">
32 |                 Reset
33 |             </button>
34 |         </div>
35 |     </div>
36 | 
37 | 
38 |     <script src="index.js"></script>
39 | </body>
40 | 
41 | </html>


--------------------------------------------------------------------------------
/Day #07 - Flip a Coin Game/index.js:
--------------------------------------------------------------------------------
 1 | let heads = 0;
 2 | let tails = 0;
 3 | let coin = document.querySelector(".coin");
 4 | let flipBtn = document.querySelector("#flip-button");
 5 | let resetBtn = document.querySelector("#reset-button");
 6 | 
 7 | flipBtn.addEventListener("click", () => {
 8 |     let i = Math.floor(Math.random() * 2);
 9 |     coin.style.animation = "none";
10 |     if (i) {
11 |         setTimeout(function () {
12 |             coin.style.animation = "spin-heads 3s forwards";
13 |         }, 100);
14 |         heads++;
15 |     } else {
16 |         setTimeout(function () {
17 |             coin.style.animation = "spin-tails 3s forwards";
18 |         }, 100);
19 |         tails++;
20 |     }
21 |     setTimeout(updateStats, 3000);
22 |     disableButton();
23 | });
24 | 
25 | function updateStats() {
26 |     document.querySelector("#heads-count").textContent = `Heads: ${heads}`;
27 |     document.querySelector("#tails-count").textContent = `Tails: ${tails}`;
28 | }
29 | 
30 | function disableButton() {
31 |     flipBtn.disabled = true;
32 |     setTimeout(function () {
33 |         flipBtn.disabled = false;
34 |     }, 3000);
35 | }
36 | 
37 | resetBtn.addEventListener("click", () => {
38 |     coin.style.animation = "none";
39 |     heads = 0;
40 |     tails = 0;
41 |     updateStats();
42 | })


--------------------------------------------------------------------------------
/Day #07 - Flip a Coin Game/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #07 - Flip a Coin Game/screenshot.jpg


--------------------------------------------------------------------------------
/Day #08 - Multi Step Form/README.md:
--------------------------------------------------------------------------------
 1 | # Day #8
 2 | 
 3 | ### Multi Step Form
 4 | In this tutorial ([Open in Youtube](https://youtu.be/DRJasSDpRHg)),  I am gonna showing to you how to code a simple multistep form with javascript. you can use this form in your site to get user data❗️
 5 | this form also is responsive!
 6 | 
 7 | # Screenshot
 8 | Here we have project screenshot :
 9 | 
10 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #08 - Multi Step Form/index.js:
--------------------------------------------------------------------------------
 1 | var form1 = document.getElementById("form1");
 2 | var form2 = document.getElementById("form2");
 3 | var form3 = document.getElementById("form3");
 4 | var next1 = document.getElementById("next1");
 5 | var next2 = document.getElementById("next2");
 6 | var back1 = document.getElementById("back1");
 7 | var back2 = document.getElementById("back2");
 8 | var progress = document.getElementById("progress");
 9 | 
10 | next1.onclick = function () {
11 |     form1.style.left = "-450px";
12 |     form2.style.left = "40px";
13 |     progress.style.width = "240px";
14 | }
15 | back1.onclick = function () {
16 |     form1.style.left = "40px";
17 |     form2.style.left = "450px";
18 |     progress.style.width = "120px";
19 | }
20 | next2.onclick = function () {
21 |     form2.style.left = "-450px";
22 |     form3.style.left = "40px";
23 |     progress.style.width = "360px";
24 | }
25 | back2.onclick = function () {
26 |     form2.style.left = "40px";
27 |     form3.style.left = "450px";
28 |     progress.style.width = "240px";
29 | }


--------------------------------------------------------------------------------
/Day #08 - Multi Step Form/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #08 - Multi Step Form/screenshot.jpg


--------------------------------------------------------------------------------
/Day #09 - Aspect Ratio Calculator/README.md:
--------------------------------------------------------------------------------
1 | # Day #9
2 | 
3 | ### Aspect Ratio Calculator
4 | In this tutorial ([Open in Youtube](https://youtu.be/PitofaBtFxU)),  I am gonna showing to you how to code a simple Aspect ratio calculator with javascript. you can use this form in your sites or apps❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #09 - Aspect Ratio Calculator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #9 - Aspect Ratio Calculator | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <h2>
16 |             <span>Aspect Ratio</span>
17 |             Calculator
18 |         </h2>
19 |         <div class="wrapper-1">
20 |             <input type="number" id="ratio-width" value="16">
21 |             <input type="number" id="ratio-height" value="9">
22 |         </div>
23 |         <div class="box">
24 |             <div class="wrapper-2">
25 |                 <label for="width">Width:</label>
26 |                 <input type="number" id="width" value="1280">
27 |             </div>
28 |             <div class="wrapper-3">
29 |                 <label for="height">Height:</label>
30 |                 <input type="number" id="height" value="720">
31 |             </div>
32 |         </div>
33 |     </div>
34 | 
35 |     <script src="index.js"></script>
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/Day #09 - Aspect Ratio Calculator/index.js:
--------------------------------------------------------------------------------
 1 | let ratioWidth = document.getElementById("ratio-width");
 2 | let ratioHeight = document.getElementById("ratio-height");
 3 | let width = document.getElementById("width");
 4 | let height = document.getElementById("height");
 5 | 
 6 | let calculateWidth = () => {
 7 |     let aspectRatio = ratioWidth.value / ratioHeight.value;
 8 |     width.value = parseFloat((height.value * aspectRatio).toFixed(2));
 9 | };
10 | 
11 | let calculateHeight = () => {
12 |     let aspectRatio = ratioWidth.value / ratioHeight.value;
13 |     height.value = parseFloat((width.value / aspectRatio).toFixed(2));
14 | }
15 | 
16 | height.addEventListener("input", calculateWidth);
17 | width.addEventListener("input", calculateHeight);
18 | ratioHeight.addEventListener("input", calculateWidth);
19 | ratioWidth.addEventListener("input", calculateHeight);


--------------------------------------------------------------------------------
/Day #09 - Aspect Ratio Calculator/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #09 - Aspect Ratio Calculator/screenshot.jpg


--------------------------------------------------------------------------------
/Day #09 - Aspect Ratio Calculator/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
 2 | 
 3 | *{
 4 |     padding: 0;
 5 |     margin: 0;
 6 |     box-sizing: border-box;
 7 |     font-family: 'Poppins', sans-serif;
 8 | }
 9 | 
10 | body{
11 |     background-color: #895cf3;
12 | }
13 | 
14 | .container{
15 |     width: 500px;
16 |     background: #fff;
17 |     padding: 80px 40px;
18 |     position: absolute;
19 |     transform: translate(-50%, -50%);
20 |     top: 50%;
21 |     left: 50%;
22 |     border-radius: 10px;
23 |     box-shadow: 0 30px 45px rgba(18, 8, 39, 0.2);
24 | }
25 | 
26 | h2{
27 |     text-align: center;
28 |     font-size: 40px;
29 |     font-weight: 600;
30 |     letter-spacing: 2px;
31 | }
32 | 
33 | h2 span{
34 |     color: #895cf3;
35 | }
36 | 
37 | .wrapper-1{
38 |     display: flex;
39 |     align-items: center;
40 |     justify-content: center;
41 |     margin: 50px 0 70px 0;
42 |     gap: 10px;
43 | }
44 | 
45 | .wrapper-1 input{
46 |     width: 100px;
47 |     font-size: 30px;
48 |     font-weight: 600;
49 | }
50 | 
51 | input{
52 |     padding: 15px 10px;
53 |     border: 1px solid #bbc0c5;
54 |     border-radius: 5px;
55 |     color: #170444;
56 |     outline: none;
57 | }
58 | 
59 | input:focus{
60 |     border: 2px solid #895cf3;
61 | }
62 | 
63 | label{
64 |     color: #170444;
65 |     font-weight: 600;
66 |     letter-spacing: 0.6px;
67 | }
68 | 
69 | .box{
70 |     display: flex;
71 |     justify-content: space-between;
72 |     gap: 15px;
73 | }
74 | 
75 | .wrapper-2 input, .wrapper-3 input{
76 |     width: 100%;
77 |     font-size: 18px;
78 | }


--------------------------------------------------------------------------------
/Day #10 - Weather App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #10
 2 | 
 3 | ### Weather App
 4 | In this tutorial ([Open in Youtube](https://youtu.be/iILFBGm_I9M)),  I am gonna showing to you how to code a weather app with javascript. in this tutorial also we use a weather api and we get data from api❗️
 5 | 
 6 | ## Warning
 7 | You need to get your own api key (in video we showed how!) and replace it in index.js file on line 9 :
 8 | 
 9 | ```javascript
10 | const APIKey = 'Your Api Key';
11 | ```
12 | 
13 | 
14 | # Screenshot
15 | Here we have project screenshot :
16 | 
17 | ![screenshot](screenshot.jpg)
18 | 


--------------------------------------------------------------------------------
/Day #10 - Weather App/images/404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #10 - Weather App/images/404.png


--------------------------------------------------------------------------------
/Day #10 - Weather App/images/clear.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #10 - Weather App/images/clear.png


--------------------------------------------------------------------------------
/Day #10 - Weather App/images/cloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #10 - Weather App/images/cloud.png


--------------------------------------------------------------------------------
/Day #10 - Weather App/images/mist.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #10 - Weather App/images/mist.png


--------------------------------------------------------------------------------
/Day #10 - Weather App/images/rain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #10 - Weather App/images/rain.png


--------------------------------------------------------------------------------
/Day #10 - Weather App/images/snow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #10 - Weather App/images/snow.png


--------------------------------------------------------------------------------
/Day #10 - Weather App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #10 - Weather App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #11 - Movie Info App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #11
 2 | 
 3 | ### Movie Info App
 4 | In this tutorial ([Open in Youtube](https://youtu.be/J6uam9jEmDU)),  I am gonna showing to you how to code a movie info app with javascript. in this tutorial also we use a movie database api and we get data from api and this code is also responsive❗️
 5 | 
 6 | ## Warning
 7 | You need to get your own api key (in video we showed how!) and replace it in key.js file :
 8 | 
 9 | ```javascript
10 | key = "Your Api Key";
11 | ```
12 | 
13 | 
14 | # Screenshot
15 | Here we have project screenshot :
16 | 
17 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #11 - Movie Info App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #11 - Movie Guid App | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <div class="search-container">
16 |             <input type="text" id="movie-name" placeholder="Enter movie name here..." value="Wednesday">
17 |             <button id="search-btn">Search</button>
18 |         </div>
19 |         <div id="result"></div>
20 |     </div>
21 | 
22 | 
23 | 
24 |     <script src="key.js"></script>
25 |     <script src="index.js"></script>
26 | 
27 | </body>
28 | 
29 | </html>


--------------------------------------------------------------------------------
/Day #11 - Movie Info App/key.js:
--------------------------------------------------------------------------------
1 | //Enter api key that recieved on your email here
2 | 
3 | key = "Your Api Key";


--------------------------------------------------------------------------------
/Day #11 - Movie Info App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #11 - Movie Info App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #11 - Movie Info App/star-icon.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="576" height="512" viewBox="0 0 576 512"><defs><style>.cls-1{fill:#ffb92a;}</style></defs><path class="cls-1" d="M381.2,150.3l143.7,21.2a32,32,0,0,1,17.8,54.4L438.5,328.1l24.6,146.6a32,32,0,0,1-46.6,33.6L288.1,439.8,159.8,508.3A32.22,32.22,0,0,1,126,506a31.84,31.84,0,0,1-12.8-31.3l24.6-146.6L33.58,225.9a32.15,32.15,0,0,1-7.89-32.8,31.81,31.81,0,0,1,25.73-21.6L195,150.3,259.4,18a32,32,0,0,1,57.5,0Z"/></svg>


--------------------------------------------------------------------------------
/Day #12 - Type Test App/README.md:
--------------------------------------------------------------------------------
1 | # Day #12
2 | 
3 | ### Type Test App
4 | In this tutorial ([Open in Youtube](https://youtu.be/uWwDO5n9tO8)),  I am gonna showing to you how to code a speed test app with javascript. in this tutorial also we use a quote database api and we get data from api and this code is also responsive❗️This javascript typing speed test app also show how many words you type per minutes!
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #12 - Type Test App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #12 - Type Test App | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <div class="stats">
16 |             <p>Time: <span id="timer">0s</span></p>
17 |             <p>Mistakes: <span id="mistakes">0</span></p>
18 |         </div>
19 |         <div id="quote" onmousedown="return false" onselectstart="return false"></div>
20 | 
21 |         <textarea id="quote-input" rows="3" placeholder="Type here when test starts..."></textarea>
22 | 
23 |         <button id="start-test" onclick="startTest()">Start Test</button>
24 |         <button id="stop-test" onclick="displayResult()">Stop Test</button>
25 | 
26 |         <div class="result">
27 |             <h3>Result</h3>
28 |             <div class="wrapper">
29 |                 <p>Accuracy: <span id="accuracy"></span></p>
30 |                 <p>Speed: <span id="wpm"></span></p>
31 |             </div>
32 |         </div>
33 | 
34 |     </div>
35 | 
36 |     <script src="index.js"></script>
37 | </body>
38 | 
39 | </html>


--------------------------------------------------------------------------------
/Day #12 - Type Test App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #12 - Type Test App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #12 - Type Test App/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
 2 | 
 3 | *{
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     box-sizing: border-box;
 7 |     font-family: 'Poppins', sans-serif;
 8 | }
 9 | 
10 | body{
11 |     background-color: #1565c0;
12 | }
13 | 
14 | .container{
15 |     width: 80vmin;
16 |     padding: 50px 30px;
17 |     background-color: #fff;
18 |     position: absolute;
19 |     transform: translate(-50%, -50%);
20 |     top: 50%;
21 |     left: 50%;
22 |     border-radius: 10px;
23 |     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
24 | }
25 | 
26 | .stats{
27 |     text-align: right;
28 |     font-size: 18px;
29 |     margin-bottom: 30px;
30 | }
31 | 
32 | .stats span{
33 |     font-weight: 600;
34 | }
35 | 
36 | #quote{
37 |     text-align: justify;
38 |     margin: 50px 0 30px 0;
39 | }
40 | 
41 | textarea{
42 |     resize: none;
43 |     width: 100%;
44 |     border-radius: 5px;
45 |     padding: 10px 5px;
46 |     font-size: 16px;
47 | }
48 | 
49 | button{
50 |     float: right;
51 |     margin-top: 20px;
52 |     background-color: #1565c0;
53 |     color: #fff;
54 |     border: none;
55 |     padding: 10px 30px;
56 |     border-radius: 5px;
57 |     font-size: 18px;
58 | }
59 | 
60 | .result{
61 |     margin-top: 40px;
62 |     display: none;
63 | }
64 | 
65 | .result h3{
66 |     text-align: center;
67 |     margin-bottom: 20px;
68 |     font-size: 22px;
69 | }
70 | 
71 | .wrapper{
72 |     display: flex;
73 |     justify-content: space-around;
74 | }
75 | 
76 | .wrapper span{
77 |     font-weight: 600;
78 | }
79 | 
80 | .success{
81 |     color: #44b267;
82 | }
83 | 
84 | .fail{
85 |     color: #e81c4e;
86 | }


--------------------------------------------------------------------------------
/Day #13 - Translator App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #13
 2 | 
 3 | ### Translator App
 4 | In this tutorial ([Open in Youtube](https://youtu.be/WGRIMv790UI)),  I am gonna showing to you how to code a translator app with javascript. in this tutorial also we use a translate api and we get data from api and this code is also responsive❗️
 5 | in this video we have a google translate clone 😁
 6 | 
 7 | # Screenshot
 8 | Here we have project screenshot :
 9 | 
10 | ![screenshot](screenshot.jpg)
11 | 


--------------------------------------------------------------------------------
/Day #13 - Translator App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>Language Translator | CodingNepal</title>
 7 |   <link rel="stylesheet" href="style.css">
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 9 |   <!-- Font Awesome CDN Link for Icons -->
10 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
11 | </head>
12 | 
13 | <body>
14 |   <div class="container">
15 |     <div class="wrapper">
16 |       <div class="text-input">
17 |         <textarea spellcheck="false" class="from-text" placeholder="Enter text"></textarea>
18 |         <textarea spellcheck="false" readonly disabled class="to-text" placeholder="Translation"></textarea>
19 |       </div>
20 |       <ul class="controls">
21 |         <li class="row from">
22 |           <div class="icons">
23 |             <i id="from" class="fas fa-volume-up"></i>
24 |             <i id="from" class="fas fa-copy"></i>
25 |           </div>
26 |           <select></select>
27 |         </li>
28 |         <li class="exchange"><i class="fas fa-exchange-alt"></i></li>
29 |         <li class="row to">
30 |           <select></select>
31 |           <div class="icons">
32 |             <i id="to" class="fas fa-volume-up"></i>
33 |             <i id="to" class="fas fa-copy"></i>
34 |           </div>
35 |         </li>
36 |       </ul>
37 |     </div>
38 |     <button>Translate Text</button>
39 |   </div>
40 | 
41 |   <script src="js/countries.js"></script>
42 |   <script src="js/script.js"></script>
43 | 
44 | </body>
45 | 
46 | </html>


--------------------------------------------------------------------------------
/Day #13 - Translator App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #13 - Translator App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #14 - Crypto Price App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #14
 2 | 
 3 | ### Crypto Price App
 4 | In this tutorial ([Open in Youtube](https://youtu.be/AZaZOP2sX7Y)),  I am gonna showing to you how to code a crypto price app with javascript. in this tutorial also we use coingecko api and we get data from api❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | ![screenshot](screenshot.jpg)
10 | 


--------------------------------------------------------------------------------
/Day #14 - Crypto Price App/images/bitcoin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #14 - Crypto Price App/images/bitcoin.png


--------------------------------------------------------------------------------
/Day #14 - Crypto Price App/images/cardano.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #14 - Crypto Price App/images/cardano.png


--------------------------------------------------------------------------------
/Day #14 - Crypto Price App/images/dogecoin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #14 - Crypto Price App/images/dogecoin.png


--------------------------------------------------------------------------------
/Day #14 - Crypto Price App/images/ethereum.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #14 - Crypto Price App/images/ethereum.png


--------------------------------------------------------------------------------
/Day #14 - Crypto Price App/images/litecoin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #14 - Crypto Price App/images/litecoin.png


--------------------------------------------------------------------------------
/Day #14 - Crypto Price App/images/tether.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #14 - Crypto Price App/images/tether.png


--------------------------------------------------------------------------------
/Day #14 - Crypto Price App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #14 - Crypto Price App | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container"></div>
15 | 
16 | 
17 |     <script src="index.js"></script>
18 | </body>
19 | 
20 | </html>


--------------------------------------------------------------------------------
/Day #14 - Crypto Price App/index.js:
--------------------------------------------------------------------------------
 1 | fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Ctether%2Cethereum%2Clitecoin%2Ccardano%2Cdogecoin&vs_currencies=usd&include_24hr_change=true')
 2 |     .then(res => res.json())
 3 |     .then(json => {
 4 |         const container = document.querySelector('.container');
 5 |         const coins = Object.getOwnPropertyNames(json);
 6 | 
 7 |         for (let coin of coins) {
 8 |             const coinInfo = json[`${coin}`];
 9 |             const price = coinInfo.usd;
10 |             const change = coinInfo.usd_24h_change.toFixed(5);
11 | 
12 |             container.innerHTML += `
13 |                 <div class="coin ${change < 0 ? 'falling' : 'rising'}">
14 |                     <div class="coin-logo">
15 |                         <img src="images/${coin}.png">
16 |                     </div>
17 |                     <div class="coin-name">
18 |                         <h3>${coin}</h3>
19 |                         <span>/USD</span>
20 |                     </div>
21 |                     <div class="coin-price">
22 |                         <span class="price">$${price}</span>
23 |                         <span class="change">${change}</span>
24 |                     </div>
25 |                 </div>
26 |         `;
27 |         }
28 |     });


--------------------------------------------------------------------------------
/Day #14 - Crypto Price App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #14 - Crypto Price App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #15 - ToDo App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #15
 2 | 
 3 | ### ToDo App
 4 | In this tutorial ([Open in Youtube](https://youtu.be/0Ao1UN1WSCw)),  I am gonna showing to you how to code a ToDo app with javascript. this todo app also have some features such as clear all button and edit and delete button and you can see All, Pending and completed tasks in seperate tabs❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | 
10 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #15 - ToDo App/bars-icon.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
 2 |   <g id="Group_196" data-name="Group 196" transform="translate(-147.835 -146.009)">
 3 |     <rect id="Rectangle_309" data-name="Rectangle 309" width="25" height="25" transform="translate(147.835 146.009)" fill="none"/>
 4 |     <rect id="Rectangle_341" data-name="Rectangle 341" width="22.165" height="2.2" transform="translate(147.835 151)" fill="#bfbfbf"/>
 5 |     <rect id="Rectangle_342" data-name="Rectangle 342" width="17.165" height="2.2" transform="translate(147.835 155.4)" fill="#bfbfbf"/>
 6 |     <rect id="Rectangle_343" data-name="Rectangle 343" width="20.165" height="2.2" transform="translate(147.835 159.8)" fill="#bfbfbf"/>
 7 |     <rect id="Rectangle_344" data-name="Rectangle 344" width="14.165" height="2.2" transform="translate(147.835 164.2)" fill="#bfbfbf"/>
 8 |   </g>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/Day #15 - ToDo App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
 9 |     <link rel="stylesheet" href="style.css">
10 |     <title>Day #15 - ToDo App | AsmrProg</title>
11 | </head>
12 | 
13 | <body>
14 | 
15 |     <div class="wrapper">
16 |         <div class="task-input">
17 |             <img src="bars-icon.svg">
18 |             <input type="text" placeholder="Add a new task">
19 |         </div>
20 | 
21 |         <div class="controls">
22 |             <div class="filters">
23 |                 <span id="all" class="active">
24 |                     All
25 |                 </span>
26 |                 <span id="pending">Pending</span>
27 |                 <span id="completed">Completed</span>
28 |             </div>
29 |             <button class="clear-btn">Clear All</button>
30 |         </div>
31 |         <ul class="task-box"></ul>
32 | 
33 |     </div>
34 | 
35 |     <script src="index.js"></script>
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/Day #15 - ToDo App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #15 - ToDo App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #16 - Geometric Art Generator/README.md:
--------------------------------------------------------------------------------
 1 | # Day #16
 2 | 
 3 | ### Geometric Art Generator
 4 | In this tutorial ([Open in Youtube](https://youtu.be/Kn-nFPT9Qcs)),  I am gonna showing to you how to code a Geometric Art Generator with Javascript. this code will generate different geometric arts with divs, we didn't used any image in this code❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | 
10 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #16 - Geometric Art Generator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #16 - GeoMetric Art Generator | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="wrapper">
15 |         <div class="container">
16 |             <div></div>
17 |             <div></div>
18 |             <div></div>
19 |             <div></div>
20 |             <div></div>
21 |             <div></div>
22 |             <div></div>
23 |             <div></div>
24 |             <div></div>
25 |             <div></div>
26 |             <div></div>
27 |             <div></div>
28 |             <div></div>
29 |             <div></div>
30 |             <div></div>
31 |             <div></div>
32 |             <div></div>
33 |             <div></div>
34 |             <div></div>
35 |             <div></div>
36 |         </div>
37 |         <button id="btn">Generate</button>
38 |     </div>
39 | 
40 | 
41 |     <script src="index.js"></script>
42 | </body>
43 | 
44 | </html>


--------------------------------------------------------------------------------
/Day #16 - Geometric Art Generator/index.js:
--------------------------------------------------------------------------------
 1 | const btn = document.getElementById("btn");
 2 | const shapes = [
 3 |     "quad-circle-1",
 4 |     "quad-circle-2",
 5 |     "quad-circle-3",
 6 |     "quad-circle-4",
 7 |     "triangle-1",
 8 |     "triangle-2",
 9 |     "triangle-3",
10 |     "triangle-4",
11 |     "circle",
12 | ];
13 | 
14 | const colors = ["#01d2fd", "#ffc700", "#fe9f12", "#06d0c7"];
15 | const boxes = document.querySelectorAll(".container div");
16 | 
17 | let generatePattern = () => {
18 |     boxes.forEach((box) => {
19 |         box.className = "";
20 |         let i = Math.floor(Math.random() * shapes.length);
21 |         let j = Math.floor(Math.random() * colors.length);
22 |         box.classList.add(shapes[i]);
23 |         box.style.backgroundColor = colors[j];
24 |     });
25 | };
26 | 
27 | btn.addEventListener("click", generatePattern);
28 | window.addEventListener("load", generatePattern);


--------------------------------------------------------------------------------
/Day #16 - Geometric Art Generator/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #16 - Geometric Art Generator/screenshot.jpg


--------------------------------------------------------------------------------
/Day #17 - Snake Game/README.md:
--------------------------------------------------------------------------------
 1 | # Day #17
 2 | 
 3 | ### Snake Game
 4 | In this tutorial ([Open in Youtube](https://youtu.be/wM7eMJ26kc8)),  I am gonna showing to you how to code a snake game with javascript. this snake game is fully responsive and in touch devices it's have keys that user can use❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | 
10 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #17 - Snake Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
 9 |     <link rel="stylesheet" href="style.css">
10 |     <title>Day #17 - Snake Game | AsmrProg</title>
11 | </head>
12 | 
13 | <body>
14 | 
15 |     <div class="wrapper">
16 |         <div class="game-details">
17 |             <span class="score">Score: 0</span>
18 |             <span class="high-score">High Score: 0</span>
19 |         </div>
20 | 
21 |         <div class="play-board"></div>
22 | 
23 |         <div class="controls">
24 |             <i data-key="ArrowLeft" class="fa-solid fa-arrow-left-long"></i>
25 |             <i data-key="ArrowUp" class="fa-solid fa-arrow-up-long"></i>
26 |             <i data-key="ArrowRight" class="fa-solid fa-arrow-right-long"></i>
27 |             <i data-key="ArrowDown" class="fa-solid fa-arrow-down-long"></i>
28 |         </div>
29 | 
30 |     </div>
31 | 
32 | 
33 |     <script src="index.js"></script>
34 | </body>
35 | 
36 | </html>


--------------------------------------------------------------------------------
/Day #17 - Snake Game/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #17 - Snake Game/screenshot.jpg


--------------------------------------------------------------------------------
/Day #18 - Budget App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #18
 2 | 
 3 | ### Budget App
 4 | In this tutorial ([Open in Youtube](https://youtu.be/G_Prk9-G2Q0)),  I am gonna showing to you how to code a budget app with javascript. this budget app is fully responsive and you can use it in your web projects❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | 
10 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #18 - Budget App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #18 - Budget App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #19 - Text To Speech App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #19
 2 | 
 3 | ### Text To Speech App
 4 | In this tutorial ([Open in Youtube](https://youtu.be/QzmKDr-8n90)),  I am gonna showing to you how to code a text to speech app with javascript. this text to speech is fully responsive and you can use it in your sites❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | 
10 | ![screenshot](screenshot.jpg)
11 | 


--------------------------------------------------------------------------------
/Day #19 - Text To Speech App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #19 - Text To Speech App | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="wrapper">
15 |         <header>Text To Speech</header>
16 |         <form action="">
17 |             <div class="row">
18 |                 <label>Enter Text</label>
19 |                 <textarea></textarea>
20 |             </div>
21 |             <div class="row">
22 |                 <label>Select Voice</label>
23 |                 <div class="outer">
24 |                     <select></select>
25 |                 </div>
26 |             </div>
27 |             <button>Convert To Speech</button>
28 |         </form>
29 |     </div>
30 | 
31 | 
32 |     <script src="index.js"></script>
33 | </body>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/Day #19 - Text To Speech App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #19 - Text To Speech App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #20 - QR Code Reader/README.md:
--------------------------------------------------------------------------------
 1 | # Day #20
 2 | 
 3 | ### QR Code Reader
 4 | In this tutorial ([Open in Youtube](https://youtu.be/e13YYMna74s)),  I am gonna showing to you how to build a QR Code Reader with javascript. this qr code reader also use QR Reader api and you can read qr codes that we generate with day #4 of 100 days❗️
 5 | 
 6 | #### Day #4 Link
 7 | 
 8 | <a href="https://github.com/AsmrProg-YT/100-days-of-javascript/tree/master/Day%20%2304%20-%20QR%20Code%20Generator" target="_blank">QR Code Generator Source</a>
 9 | 
10 | # Screenshot
11 | Here we have project screenshot :
12 | 
13 | 
14 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #20 - QR Code Reader/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
 9 |     <link rel="stylesheet" href="style.css">
10 |     <title>Day #20 - QR Code Reader | AsmrProg</title>
11 | </head>
12 | 
13 | <body>
14 | 
15 |     <div class="wrapper">
16 |         <form action="#">
17 |             <input type="file" hidden>
18 |             <img src="#" alt="">
19 |             <div class="content">
20 |                 <i class="fa-solid fa-cloud-arrow-up"></i>
21 |                 <p>Upload QR Code To Read</p>
22 |             </div>
23 |         </form>
24 |         <div class="details">
25 |             <textarea spellcheck="false" disabled></textarea>
26 |             <div class="buttons">
27 |                 <button class="close">Close</button>
28 |                 <button class="copy">Copy Text</button>
29 |             </div>
30 |         </div>
31 |     </div>
32 | 
33 | 
34 |     <script src="index.js"></script>
35 | </body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/Day #20 - QR Code Reader/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #20 - QR Code Reader/screenshot.jpg


--------------------------------------------------------------------------------
/Day #21 - Spin Wheel App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #21
 2 | 
 3 | ### Spin Wheel App
 4 | In this tutorial ([Open in Youtube](https://youtu.be/ZBHbmSfFPyk)),  I am gonna showing to you how to code a spin wheel app with javascript. you see this app in bet or lottery sites and also this design is full responsive❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | 
10 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #21 - Spin Wheel App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap" rel="stylesheet" />
 9 |     <link rel="stylesheet" href="style.css">
10 |     <title>Day #21 - Spin Wheel App | AsmrProg</title>
11 | </head>
12 | 
13 | <body>
14 | 
15 |     <div class="wrapper">
16 |         <div class="container">
17 |             <canvas id="wheel"></canvas>
18 |             <button id="spin-btn">Spin</button>
19 |             <img src="spinner-arrow.svg" alt="">
20 |         </div>
21 |         <div id="final-value">
22 |             <p>Click on spin button to start</p>
23 |         </div>
24 |     </div>
25 | 
26 | 
27 | 
28 |     <!-- Chart JS -->
29 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
30 |     <!-- Chart JS Plugin for displaying text over chart -->
31 |     <script
32 |         src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js"></script>
33 |     <script src="index.js"></script>
34 | 
35 | </body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/Day #21 - Spin Wheel App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #21 - Spin Wheel App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #21 - Spin Wheel App/spinner-arrow.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <svg id="Layer_1" data-name="Layer 1" width="65" height="65" viewBox="0 0 65 65" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
 3 |   <defs>
 4 |     <style>.cls-1{fill:url(#linear-gradient);}</style>
 5 |     <linearGradient id="gradient-0" bx:pinned="true">
 6 |       <stop offset="0" style="stop-color: rgb(76, 175, 79);"/>
 7 |       <stop offset="1" style="stop-color: rgb(27, 94, 31);"/>
 8 |     </linearGradient>
 9 |     <linearGradient id="gradient-1" bx:pinned="true">
10 |       <stop offset="0.48" style="stop-color: rgb(27, 94, 32);"/>
11 |     </linearGradient>
12 |     <linearGradient id="color-0" gradientUnits="userSpaceOnUse" bx:pinned="true">
13 |       <stop style="stop-color: rgb(76, 175, 80);"/>
14 |     </linearGradient>
15 |   </defs>
16 |   <path class="cls-1" d="M2.39,28.37,60.27,3.29a2.93,2.93,0,0,1,3.84,3.89L53.33,31.25a2.94,2.94,0,0,0,0,2.29l9.86,24.38a2.93,2.93,0,0,1-4,3.73l-56.88-28A2.93,2.93,0,0,1,2.39,28.37Z" style="fill: rgb(67, 160, 71);"/>
17 | </svg>


--------------------------------------------------------------------------------
/Day #22 - Gradient Generator/README.md:
--------------------------------------------------------------------------------
1 | # Day #22
2 | 
3 | ### Gradient Generator
4 | In this tutorial ([Open in Youtube](https://youtu.be/zUOunkcZcjI)),  I am gonna showing to you how to code a gradient generator app with javascript. with this javascript gradient generator you can generate gradients with codes and use it in your site design projects❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #22 - Gradient Generator/index.js:
--------------------------------------------------------------------------------
 1 | let colorOne = document.getElementById("color-a");
 2 | let colorTwo = document.getElementById("color-b");
 3 | let currentDirection = 'to bottom';
 4 | let outputCode = document.getElementById("code");
 5 | 
 6 | function setDirection(value, _this) {
 7 |     let direcrtions = document.querySelectorAll(".buttons button");
 8 |     for (let i of direcrtions) {
 9 |         i.classList.remove("active");
10 |     }
11 |     _this.classList.add("active");
12 |     currentDirection = value;
13 | }
14 | 
15 | function generateCode() {
16 |     outputCode.value = `background-image: linear-gradient(${currentDirection}, ${colorOne.value}, ${colorTwo.value})`;
17 |     document.getElementsByTagName("BODY")[0].style.backgroundImage = `linear-gradient(${currentDirection}, ${colorOne.value}, ${colorTwo.value})`;
18 | }
19 | 
20 | function copyText() {
21 |     outputCode.select();
22 |     document.execCommand('copy');
23 |     alert("Gradient Copied!");
24 | }
25 | 
26 | 
27 | generateCode();


--------------------------------------------------------------------------------
/Day #22 - Gradient Generator/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #22 - Gradient Generator/screenshot.jpg


--------------------------------------------------------------------------------
/Day #23 - Guess The Word Game/README.md:
--------------------------------------------------------------------------------
1 | # Day #23
2 | 
3 | ### Guess The Word Game
4 | In this tutorial ([Open in Youtube](https://youtu.be/9uEaNSiXJeQ)),  I am gonna showing to you how to code a guess the word game with javascript. this game also is responsive❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #23 - Guess The Word Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #23 - Guess The Word | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="wrapper">
15 |         <h1>Guess Word Game</h1>
16 |         <div class="content">
17 |             <input type="text" class="type-input" maxlength="1">
18 |             <div class="word"></div>
19 |             <div class="info">
20 |                 <p class="guess">Guesses: <span></span></p>
21 |                 <p class="wrong">Mistakes: <span></span></p>
22 |                 <p class="hint">Hint: <span></span></p>
23 |             </div>
24 |             <div class="buttons">
25 |                 <button class="reset">Reset Game</button>
26 |                 <button class="showhint">Show Hint</button>
27 |             </div>
28 |         </div>
29 |     </div>
30 | 
31 | 
32 |     <script src="words-db.js"></script>
33 |     <script src="index.js"></script>
34 | </body>
35 | 
36 | </html>


--------------------------------------------------------------------------------
/Day #23 - Guess The Word Game/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #23 - Guess The Word Game/screenshot.jpg


--------------------------------------------------------------------------------
/Day #24 - Simon Game/README.md:
--------------------------------------------------------------------------------
1 | # Day #24
2 | 
3 | ### Simon Game
4 | In this tutorial ([Open in Youtube](https://youtu.be/8g5nz_6kZW0)),  I am gonna showing to you how to code a simon game with javascript. this game's javascript code is fully commented❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #24 - Simon Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #24 - Simon Game | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <p id="score-result" class="hide">Your Score : 0</p>
16 |         <button id="start-btn">Start Game</button>
17 |     </div>
18 | 
19 |     <div class="wrapper hide">
20 | 
21 |         <div class="game">
22 |             <div class="color1 colors"></div>
23 |             <div class="color2 colors"></div>
24 |             <div class="color3 colors"></div>
25 |             <div class="color4 colors"></div>
26 |             <div id="score">00</div>
27 |         </div>
28 | 
29 |     </div>
30 | 
31 |     <script src="index.js"></script>
32 | 
33 | </body>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/Day #24 - Simon Game/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #24 - Simon Game/screenshot.jpg


--------------------------------------------------------------------------------
/Day #25 - JS Charts/README.md:
--------------------------------------------------------------------------------
1 | # Day #25
2 | 
3 | ### Apex Chats
4 | In this tutorial ([Open in Youtube](https://youtu.be/rOC_2DDAIPk)),  I am gonna showing to you how to work with charts in javascript. you can use this charts in your site dashboards❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #25 - JS Charts/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #25 - JS Charts | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="card">
15 |         <h2>Channel Views</h2>
16 |         <p>By Month</p>
17 |         <div class="pulse"></div>
18 |         <div class="chart-area">
19 |             <div class="grid"></div>
20 |         </div>
21 |     </div>
22 | 
23 |     <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
24 |     <script src="index.js"></script>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/Day #25 - JS Charts/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #25 - JS Charts/screenshot.jpg


--------------------------------------------------------------------------------
/Day #26 - Recipe Guide App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #26
 2 | 
 3 | ### Recipe Guide App
 4 | In this tutorial ([Open in Youtube](https://youtu.be/KASIDsuSPnQ)),  I am gonna showing to you how to work with recipe api in javascript. we create a responsive recipe guide app in this video❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | ![screenshot](screenshot.jpg)
10 | 


--------------------------------------------------------------------------------
/Day #26 - Recipe Guide App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet" />
 9 |     <link rel="stylesheet" href="style.css">
10 |     <title>Day #26 - Recipe Guide App | AsmrProg</title>
11 | </head>
12 | 
13 | <body>
14 | 
15 |     <div class="container">
16 |         <div class="search-box">
17 |             <input type="text" id="search-input" placeholder="Type Dish Name...">
18 |             <button id="search-button">Search</button>
19 |         </div>
20 |         <div id="result"></div>
21 |     </div>
22 | 
23 | 
24 |     <script src="index.js"></script>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/Day #26 - Recipe Guide App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #26 - Recipe Guide App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #27 - MineSweeper Game/README.md:
--------------------------------------------------------------------------------
1 | # Day #27
2 | 
3 | ### Mine Sweeper Game
4 | In this tutorial ([Open in Youtube](https://youtu.be/Fv8wsgkQXrM)),  I am gonna showing to you how to create minesweeper game with javascript. we create this game with grids in css and javascript❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #27 - MineSweeper Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #27 - MineSweeper Game | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <h1>MineSweeper</h1>
15 |     <table id="grid"></table>
16 |     <button onclick="generateGrid();">Reset Game</button>
17 | 
18 |     <script src="index.js"></script>
19 | </body>
20 | 
21 | </html>


--------------------------------------------------------------------------------
/Day #27 - MineSweeper Game/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #27 - MineSweeper Game/screenshot.jpg


--------------------------------------------------------------------------------
/Day #27 - MineSweeper Game/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color: #263238;
 3 |     color: #ddd;
 4 |     font-family: courier;
 5 |     display: grid;
 6 |     align-content: center;
 7 |     justify-content: center;
 8 |     height: 100vh;
 9 |     overflow: hidden;
10 | }
11 | 
12 | h1{
13 |     font-size: 14pt;
14 |     font-weight: normal;
15 | }
16 | 
17 | #grid{
18 |     margin-left: auto;
19 |     margin-right: auto;
20 | }
21 | 
22 | #grid tr td{
23 |     border: 1px solid #fff;
24 |     background-color: #999;
25 |     width: 20px;
26 |     height: 20px;
27 |     text-align: center;
28 | }
29 | 
30 | #grid tr td.active{
31 |     background-color: #333;
32 | }
33 | 
34 | #grid tr td.mine{
35 |     background-color: #d84315;
36 | }
37 | 
38 | button{
39 |     margin: 12px 0;
40 |     padding: 4px 0;
41 |     border: none;
42 |     outline: none;
43 |     cursor: pointer;
44 | }


--------------------------------------------------------------------------------
/Day #28 - Github Api/README.md:
--------------------------------------------------------------------------------
1 | # Day #28
2 | 
3 | ### Github Api
4 | In this tutorial ([Open in Youtube](https://youtu.be/M6p5ybSsVq4)),  I am gonna showing to you how to use github api in javascript. we create a project that you can search github usernames and see their details with javascript❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #28 - Github Api/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #28 - Github Api | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <h1>Work With Github Api</h1>
16 |         <div class="searchBox">
17 |             <input type="text" id="searchInput" placeholder="Enter Github Username">
18 |             <button onclick="searchGithub()">Search</button>
19 |         </div>
20 | 
21 |         <div class="details" id="result"></div>
22 | 
23 |     </div>
24 | 
25 |     <script src="index.js"></script>
26 | </body>
27 | 
28 | </html>


--------------------------------------------------------------------------------
/Day #28 - Github Api/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #28 - Github Api/screenshot.jpg


--------------------------------------------------------------------------------
/Day #29 - Breakout Game/README.md:
--------------------------------------------------------------------------------
1 | # Day #29
2 | 
3 | ### Breakout Game
4 | In this tutorial ([Open in Youtube](https://youtu.be/VG28CuvY_ZA)),  I am gonna showing to you how to code a bouncing ball game with javascript. we create a project that you can play breakout game with javascript❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #29 - Breakout Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #29 - Bounce Ball Game | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <canvas id="game" width="650" height="450"></canvas>
15 | 
16 |     <script src="index.js"></script>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/Day #29 - Breakout Game/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #29 - Breakout Game/screenshot.jpg


--------------------------------------------------------------------------------
/Day #29 - Breakout Game/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     height: 100%;
 3 |     display: flex;
 4 |     align-items: center;
 5 |     justify-content: center;
 6 |     background-color: #efefef;
 7 | }
 8 | 
 9 | #game{
10 |     background-color: #ccc;
11 |     margin-top: 10rem;
12 |     border: 2px solid #333;
13 | }


--------------------------------------------------------------------------------
/Day #30 - Music Player App/README.md:
--------------------------------------------------------------------------------
1 | # Day #30
2 | 
3 | ### Music Player App
4 | In this tutorial ([Open in Youtube](https://youtu.be/KndQpfPkOOY)),  I am gonna showing to you how to code a music player in javascript. we create a project that you can play audio files with javascript from local folder or any url❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #30 - Music Player App/assets/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #30 - Music Player App/assets/1.jpg


--------------------------------------------------------------------------------
/Day #30 - Music Player App/assets/1.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #30 - Music Player App/assets/1.mp3


--------------------------------------------------------------------------------
/Day #30 - Music Player App/assets/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #30 - Music Player App/assets/2.jpg


--------------------------------------------------------------------------------
/Day #30 - Music Player App/assets/2.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #30 - Music Player App/assets/2.mp3


--------------------------------------------------------------------------------
/Day #30 - Music Player App/assets/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #30 - Music Player App/assets/3.jpg


--------------------------------------------------------------------------------
/Day #30 - Music Player App/assets/3.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #30 - Music Player App/assets/3.mp3


--------------------------------------------------------------------------------
/Day #30 - Music Player App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 9 |     <link rel="stylesheet" href="style.css">
10 |     <title>Day #30 - Music Player | AsmrProg</title>
11 | </head>
12 | 
13 | <body>
14 | 
15 |     <div class="background">
16 |         <img src="" id="bg-img">
17 |     </div>
18 | 
19 |     <div class="container">
20 |         <div class="player-img">
21 |             <img src="" class="active" id="cover">
22 |         </div>
23 | 
24 |         <h2 id="music-title"></h2>
25 |         <h3 id="music-artist"></h3>
26 | 
27 |         <div class="player-progress" id="player-progress">
28 |             <div class="progress" id="progress"></div>
29 |             <div class="music-duration">
30 |                 <span id="current-time">0:00</span>
31 |                 <span id="duration">0:00</span>
32 |             </div>
33 |         </div>
34 | 
35 |         <div class="player-controls">
36 |             <i class="fa-solid fa-backward" title="Previous" id="prev"></i>
37 |             <i class="fa-solid fa-play play-button" title="Play" id="play"></i>
38 |             <i class="fa-solid fa-forward" title="Next" id="next"></i>
39 |         </div>
40 | 
41 |     </div>
42 | 
43 |     <script src="index.js"></script>
44 | </body>
45 | 
46 | </html>


--------------------------------------------------------------------------------
/Day #30 - Music Player App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #30 - Music Player App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #31 - ChatGPT Bot/README.md:
--------------------------------------------------------------------------------
 1 | # Day #31
 2 | 
 3 | ### ChatGPT Bot
 4 | In this tutorial ([Open in Youtube](https://youtu.be/xsNKwwhKfRI)),  I am gonna showing to you how to use chatgpt api to code a chatgpt bot with javascript. we create a project that you can ask anything from chatgpt with javascript❗️
 5 | Also we use Rapidapi in this bot too! we use official chatgpt api.
 6 | 
 7 | ## Warning
 8 | You need to get your own api key (in video we showed how!) and replace it in index.js file on line 46 :
 9 | 
10 | ```javascript
11 | 'X-RapidAPI-Key': 'Your Key',
12 | ```
13 | 
14 | 
15 | # Screenshot
16 | Here we have project screenshot :
17 | 
18 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #31 - ChatGPT Bot/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 9 |     <link rel="stylesheet" href="style.css">
10 |     <title>Day #31 - ChatGPT Bot | AsmrProg</title>
11 | </head>
12 | 
13 | <body>
14 | 
15 |     <div class="container">
16 |         <div class="header">
17 |             <h3>AsmrProg ChatGPT Bot</h3>
18 |         </div>
19 | 
20 |         <div class="info">
21 |             <a href="https://Youtube.com/@AsmrProg" target="_blank">
22 |                 Coded By Reza Mehdikhanlou
23 |             </a>
24 |         </div>
25 | 
26 |         <div class="chat-container">
27 |             <div id="chat-log"></div>
28 |         </div>
29 | 
30 |         <div class="input-container">
31 |             <input type="text" id="user-input" placeholder="Send a message.">
32 |             <button id="send-button">
33 |                 <i class="fa-solid fa-paper-plane" id="button-icon"></i>
34 |             </button>
35 |         </div>
36 | 
37 |     </div>
38 | 
39 | 
40 |     <script src="index.js"></script>
41 | </body>
42 | 
43 | </html>


--------------------------------------------------------------------------------
/Day #31 - ChatGPT Bot/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #31 - ChatGPT Bot/screenshot.jpg


--------------------------------------------------------------------------------
/Day #32 - Google Maps Api/README.md:
--------------------------------------------------------------------------------
1 | # Day #32
2 | 
3 | ### Google Maps
4 | In this tutorial ([Open in Youtube](https://youtu.be/g3IVpsF38S8)),  I am gonna showing to you how to use google maps api in javascript. we create a project that you can work with google map in javascript❗️Also this project is full responsive!
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #32 - Google Maps Api/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #31 - Google Maps Api | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <div id="map"></div>
16 |     </div>
17 | 
18 |     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
19 |     <script src="index.js"></script>
20 | </body>
21 | 
22 | </html>


--------------------------------------------------------------------------------
/Day #32 - Google Maps Api/index.js:
--------------------------------------------------------------------------------
 1 | // Set map
 2 | function initialize() {
 3 |     var mapOptions = {
 4 |         // Zoom of map on start
 5 |         zoom: 10,
 6 |         // Initial center cordinates on start (NewYork)
 7 |         center: new google.maps.LatLng(40.7128, -74.0060),
 8 |         // Type of map (ROADMAP, SATELLITE, HYBRID, TERRAIN)
 9 |         mapTypeId: google.maps.MapTypeId.ROADMAP,
10 |         // Minimum zoom of map
11 |         minZoom: 2
12 |     };
13 | 
14 |     // Create a new map instance using provided options
15 |     var map = new google.maps.Map(document.getElementById('map'), mapOptions);
16 | 
17 |     // Create an info window to display location info
18 |     var infoWindow = new google.maps.InfoWindow();
19 | 
20 |     // Create a marker for example : Iran, Zanjan
21 |     var marker = new google.maps.Marker({
22 |         // Cordinates for Iran, Zanjan
23 |         position: new google.maps.LatLng(36.6769, 48.4963),
24 |         // Attach the marker
25 |         map: map,
26 |         // Tooltip on hover
27 |         title: 'Iran, Zanjan'
28 |     });
29 | 
30 |     // Add click event listener for marker
31 |     marker.addListener('click', function () {
32 |         infoWindow.setContent(marker.title);
33 |         infoWindow.open(map, marker);
34 |     });
35 | 
36 |     // Adjust map center when the window is resized
37 |     google.maps.event.addDomListener(window, "resize", function () {
38 |         map.setCenter(mapOptions.center);
39 |     });
40 | 
41 | 
42 | }
43 | 
44 | // Initialize the map when window loading finished
45 | google.maps.event.addDomListener(window, 'load', initialize);


--------------------------------------------------------------------------------
/Day #32 - Google Maps Api/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #32 - Google Maps Api/screenshot.jpg


--------------------------------------------------------------------------------
/Day #32 - Google Maps Api/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color: #ccc;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | .container{
 8 |     height: 100vh;
 9 |     display: flex;
10 |     align-items: center;
11 |     justify-content: center;
12 | }
13 | 
14 | #map{
15 |     border-radius: 15px;
16 |     width: 90%;
17 |     height: 90vh;
18 |     margin: 0 auto;
19 | }


--------------------------------------------------------------------------------
/Day #33 - Pong Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #33 - Pong Game | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <canvas id="game"></canvas>
15 | 
16 |     <script src="index.js"></script>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/Day #33 - Pong Game/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #33 - Pong Game/screenshot.jpg


--------------------------------------------------------------------------------
/Day #33 - Pong Game/style.css:
--------------------------------------------------------------------------------
1 | body{
2 |     margin: 0;
3 |     padding: 0;
4 |     text-align: center;
5 |     overflow: hidden;
6 | }


--------------------------------------------------------------------------------
/Day #34 - Chrome Color Picker Extension/README.md:
--------------------------------------------------------------------------------
1 | # Day #33
2 | 
3 | ### Chrome Color Picker Extension
4 | In this tutorial ([Open in Youtube](https://youtu.be/76fEOCaRLY0)),  In this tutorial, I am gonna showing to you how to code a chrome extension with javascript. we create a project that you can pick colors as a chrome extension with javascript❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #34 - Chrome Color Picker Extension/icons/icon128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #34 - Chrome Color Picker Extension/icons/icon128.png


--------------------------------------------------------------------------------
/Day #34 - Chrome Color Picker Extension/icons/icon16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #34 - Chrome Color Picker Extension/icons/icon16.png


--------------------------------------------------------------------------------
/Day #34 - Chrome Color Picker Extension/icons/icon32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #34 - Chrome Color Picker Extension/icons/icon32.png


--------------------------------------------------------------------------------
/Day #34 - Chrome Color Picker Extension/icons/icon48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #34 - Chrome Color Picker Extension/icons/icon48.png


--------------------------------------------------------------------------------
/Day #34 - Chrome Color Picker Extension/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #34 - Chrome Color Picker Extension | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <div class="picker">
16 |             <button id="picker-btn">Pick Color</button>
17 |             <button id="export-btn">Export Colors</button>
18 |         </div>
19 |         <div class="colors-list hide">
20 |             <header>
21 |                 <p class="title">
22 |                     Picked Colors
23 |                 </p>
24 |                 <span id="clear-btn">Clear All</span>
25 |             </header>
26 |             <ul class="all-colors"></ul>
27 |         </div>
28 |     </div>
29 | 
30 | 
31 |     <script src="index.js"></script>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/Day #34 - Chrome Color Picker Extension/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "manifest_version": 3,
 3 |     "name": "Color Picker",
 4 |     "description": "Simple Color Picker Extension that we created in AsmrProg Channel. Pick any color on web page, Picked Colors history, Copy RGB and Hex or Clear them with a single click.",
 5 |     "version": "1.0",
 6 |     "action": {
 7 |         "default_popup": "index.html"
 8 |     },
 9 |     "icons": {
10 |         "16": "icons/icon16.png",
11 |         "32": "icons/icon32.png",
12 |         "48": "icons/icon48.png",
13 |         "128": "icons/icon128.png"
14 |     }
15 | }


--------------------------------------------------------------------------------
/Day #34 - Chrome Color Picker Extension/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #34 - Chrome Color Picker Extension/screenshot.jpg


--------------------------------------------------------------------------------
/Day #35 - ASCII Donut Animation/README.md:
--------------------------------------------------------------------------------
1 | # Day #35
2 | 
3 | ### ASCII Donut Animation
4 | In this tutorial ([Open in Youtube](https://youtu.be/gBdXDs6Xo0E)),  In this tutorial, I am gonna showing to you how to code a ascii spinning donut animation with javascript. we create a project that we use too many math calculation in it❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #35 - ASCII Donut Animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #35 - ASCII Donut Animation | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="donut-container">
15 |         <pre id="donut"></pre>
16 |     </div>
17 | 
18 |     <script src="index.js"></script>
19 | </body>
20 | 
21 | </html>


--------------------------------------------------------------------------------
/Day #35 - ASCII Donut Animation/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #35 - ASCII Donut Animation/screenshot.jpg


--------------------------------------------------------------------------------
/Day #35 - ASCII Donut Animation/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color: #000;
 3 |     color: #fff;
 4 |     height: 100vh;
 5 |     overflow: hidden;
 6 | }
 7 | 
 8 | pre{
 9 |     font-family: monospace;
10 |     font-size: 10px;
11 | }
12 | 
13 | .donut-container{
14 |     display: flex;
15 |     align-items: center;
16 |     justify-content: center;
17 |     height: 100%;
18 | }


--------------------------------------------------------------------------------
/Day #36 - Stock Tracker App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #36
 2 | 
 3 | ### Stock Tracker App
 4 | In this tutorial ([Open in Youtube](https://youtu.be/Z01isPiKt_M)),  In this tutorial, I am gonna showing to you how to code a stock tracker with javascript. we create a project that you can search stock symbols and see change percentage❗️
 5 | 
 6 | ## Warning
 7 | You need to get your own api key (in video we showed how!) and replace it in index.js file on line 7 and 37 :
 8 | 
 9 | ##### Line 7 :
10 | 
11 | ```javascript
12 | 'https://www.alphavantage.co/query?function=SECTOR&apikey=YOUR_API_KEY'
13 | ```
14 | 
15 | ##### Line 37 :
16 | 
17 | ```javascript
18 | https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=YOUR_API_KEY
19 | ```
20 | 
21 | 
22 | # Screenshot
23 | Here we have project screenshot :
24 | 
25 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #36 - Stock Tracker App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #36 - Stock Tracker App | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="container">
14 |         <h1>Stock Tracker</h1>
15 |         <form>
16 |             <input type="text" id="symbol" placeholder="Enter Stock Symbol">
17 |             <button type="submit">Search</button>
18 |         </form>
19 |         <ul id="stock-list"></ul>
20 |     </div>
21 | 
22 | 
23 | 
24 |     <script src="index.js"></script>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/Day #36 - Stock Tracker App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #36 - Stock Tracker App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #37 - Shadow Generator/README.md:
--------------------------------------------------------------------------------
1 | # Day #37
2 | 
3 | ### Box Shadow Generator
4 | In this tutorial ([Open in Youtube](https://youtu.be/m31q1Aorkkc)),  I am gonna showing to you how to code a css box shadow generator with javascript. we create a project that you can generate css box shadow styles and project show you the generated shadow style codes and you can copy and use it in your site designs❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #37 - Shadow Generator/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #37 - Shadow Generator/screenshot.jpg


--------------------------------------------------------------------------------
/Day #38 - Movie App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #38
 2 | 
 3 | ### Movie App (TheMovieDB)
 4 | In this tutorial ([Open in Youtube](https://youtu.be/dButm3gpZDA)),  I am gonna showing to you how to code a Movie App using JavaScript. in this video i'm using TheMovieDB api to get movies info. Also this code is fully responsive and when you scroll it will load more results❗️
 5 | 
 6 | ## Warning
 7 | You need to get your own api key (in video we showed how!) and replace it in index.js file on line 1 :
 8 | 
 9 | ```javascript
10 | const apiKey = "YOUR_API_KEY";
11 | ```
12 | 
13 | 
14 | # Screenshot
15 | Here we have project screenshot :
16 | 
17 | ![screenshot](screenshot.jpg)
18 | 


--------------------------------------------------------------------------------
/Day #38 - Movie App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #38 - Movie App | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="container">
14 |         <div class="search-box">
15 |             <a href="#">
16 |                 <h1>MovieDB Api</h1>
17 |             </a>
18 |             <form id="search-form">
19 |                 <input type="text" id="search-input" placeholder="Search Movies ...">
20 |                 <button class="search-btn" type="submit">Search</button>
21 |             </form>
22 |         </div>
23 | 
24 |         <div id="result"></div>
25 | 
26 |     </div>
27 | 
28 |     <script src="index.js"></script>
29 | 
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/Day #38 - Movie App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #38 - Movie App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #39 - Tradingview Widget/Method-2/style.css:
--------------------------------------------------------------------------------
1 | #tradingview_33f92{
2 |     width: 100%;
3 |     height: 100vh;
4 | }


--------------------------------------------------------------------------------
/Day #39 - Tradingview Widget/README.md:
--------------------------------------------------------------------------------
 1 | # Day #39
 2 | 
 3 | ### Tradingview Widget
 4 | In this tutorial ([Open in Youtube](https://youtu.be/zAwzrIHP7wE)), I am gonna showing to you how to use tradingview widget api in javascript. Also this code is fully responsive and we show you 2 method of coding for it❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | ![screenshot](screenshot.png)
10 | ![screenshot](screenshot2.png)
11 | 


--------------------------------------------------------------------------------
/Day #39 - Tradingview Widget/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #39 - Tradingview Widget | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="tradingview-widget-container">
14 |         <div id="chart"></div>
15 |         <div class="tradingview-widget-copyright">
16 |             <a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank">
17 |                 <span class="blue-text">
18 |                     Track all markets on Tradingview
19 |                 </span>
20 |             </a>
21 |         </div>
22 |     </div>
23 | 
24 | 
25 |     <script src="https://s3.tradingview.com/tv.js"></script>
26 |     <script src="index.js"></script>
27 | </body>
28 | 
29 | </html>


--------------------------------------------------------------------------------
/Day #39 - Tradingview Widget/index.js:
--------------------------------------------------------------------------------
 1 | new TradingView.widget(
 2 |     {
 3 |         "autosize": true,
 4 |         "symbol": "BINANCE:BTCUSDT",
 5 |         "interval": "240",
 6 |         "timezzone": "Etc/Utc",
 7 |         "theme": "dark",
 8 |         "style": "1",
 9 |         "locale": "en",
10 |         "toolbar_bg": "#f1f3f6",
11 |         "enable_publishing": true,
12 |         "withdateranges": false,
13 |         "hide_side_toolbar": true,
14 |         "allow_symbol_change": true,
15 |         "watchlist": [
16 |             "BINANCE:BTCUSDT",
17 |             "BINANCE:ETHUSDT"
18 |         ],
19 |         "details": true,
20 |         "hotlist": true,
21 |         "calendar": true,
22 |         "studies": [
23 |             "STD;SMA"
24 |         ],
25 |         "container_id": "chart",
26 |         "show_popup_button": true,
27 |         "popup_width": "1000",
28 |         "popup_height": "650"
29 |     }
30 | );


--------------------------------------------------------------------------------
/Day #39 - Tradingview Widget/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #39 - Tradingview Widget/screenshot.png


--------------------------------------------------------------------------------
/Day #39 - Tradingview Widget/screenshot2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #39 - Tradingview Widget/screenshot2.png


--------------------------------------------------------------------------------
/Day #39 - Tradingview Widget/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | #chart{
 8 |     width: 100%;
 9 |     height: 100vh;
10 | }


--------------------------------------------------------------------------------
/Day #40 - Detect Internet Speed/README.md:
--------------------------------------------------------------------------------
 1 | # Day #40
 2 | 
 3 | ### Detect Internet Speed
 4 | In this tutorial ([Open in Youtube](https://youtu.be/Tvr0m1Wa4RM)), I am gonna showing to you how to code a Internet Speed Test using JavaScript. in this video we Detect Internet Speed with downloading images from unsplash api and calculating image download time depending on it's size❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | ![screenshot](screenshot.jpg)
10 | 


--------------------------------------------------------------------------------
/Day #40 - Detect Internet Speed/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #40 - Detect Internet Speed | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="container">
14 |         <img src="speedometer.png">
15 |         <p id="info"><span>...</span></p>
16 |         <p id="mbs"><span>Speed In Mbs: </span></p>
17 |         <p id="kbs"><span>Speed In Kbs: </span></p>
18 |         <p id="bits"><span>Speed In Bits: </span></p>
19 |     </div>
20 | 
21 | 
22 |     <script src="index.js"></script>
23 | </body>
24 | 
25 | </html>


--------------------------------------------------------------------------------
/Day #40 - Detect Internet Speed/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #40 - Detect Internet Speed/screenshot.jpg


--------------------------------------------------------------------------------
/Day #40 - Detect Internet Speed/speedometer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #40 - Detect Internet Speed/speedometer.png


--------------------------------------------------------------------------------
/Day #40 - Detect Internet Speed/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
 2 | 
 3 | *{
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     box-sizing: border-box;
 7 |     font-family: 'Poppins', sans-serif;
 8 | }
 9 | 
10 | body{
11 |     height: 100vh;
12 |     background: linear-gradient(#27272a 50%, #075985 50%);
13 |     display: flex;
14 |     align-items: center;
15 |     justify-content: center;
16 | }
17 | 
18 | .container{
19 |     background-color: #fff;
20 |     display: flex;
21 |     flex-direction: column;
22 |     align-items: center;
23 |     width: 350px;
24 |     padding: 0 2em 1em;
25 |     border-radius: 1em;
26 |     font-size: 1.2em;
27 |     line-height: 1.6em;
28 |     box-shadow: 0 1.6em 2.4em rgba(40, 4, 67, 0.3);
29 | }
30 | 
31 | .container img{
32 |     width: 100%;
33 | }
34 | 
35 | p{
36 |     font-weight: 400;
37 |     color: #747497;
38 | }
39 | 
40 | span{
41 |     font-weight: 400;
42 |     color: #090931;
43 | }


--------------------------------------------------------------------------------
/Day #41 - Currency Converter/README.md:
--------------------------------------------------------------------------------
 1 | # Day #41
 2 | 
 3 | ### Movie App (TheMovieDB)
 4 | In this tutorial ([Open in Youtube](https://youtu.be/Zy_bCioEJhM)), I am gonna showing to you how to code a currency converter using JavaScript with api. in this video i'm using exchangerate-api to get exchange rates. Also this code is fully responsive and we used a flag icons api in this project❗️
 5 | 
 6 | ## Warning
 7 | You need to get your own api key (in video we showed how!) and replace it in index.js file on line 28 :
 8 | 
 9 | ```javascript
10 | const response = await fetch(`https://v6.exchangerate-api.com/v6/[YOUR_KEY]]/latest/${fromCur.value}`);
11 | ```
12 | 
13 | 
14 | 
15 | # Screenshot
16 | Here we have project screenshot :
17 | 
18 | ![screenshot](screenshot.jpg)
19 | 


--------------------------------------------------------------------------------
/Day #41 - Currency Converter/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #41 - Currency Converter/screenshot.jpg


--------------------------------------------------------------------------------
/Day #42 - Live Code Editor/README.md:
--------------------------------------------------------------------------------
 1 | # Day #42
 2 | 
 3 | ### Live Code Editor
 4 | In this tutorial ([Open in Youtube](https://youtu.be/qKWpd-uneJg)), I am gonna showing to you how to code a code editor using JavaScript with CodeMirror library. in this video i'm using Code Mirror library with it's settings to create a code editor with live code preview. Also this code is fully responsive and we can change it's theme, this code is codepen site clone❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | ![screenshot](screenshot.png)
10 | 


--------------------------------------------------------------------------------
/Day #42 - Live Code Editor/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #42 - Live Code Editor/screenshot.png


--------------------------------------------------------------------------------
/Day #43 - Parallex Slider/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #43 - Parallex Slider/1.jpg


--------------------------------------------------------------------------------
/Day #43 - Parallex Slider/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #43 - Parallex Slider/2.jpg


--------------------------------------------------------------------------------
/Day #43 - Parallex Slider/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #43 - Parallex Slider/3.jpg


--------------------------------------------------------------------------------
/Day #43 - Parallex Slider/README.md:
--------------------------------------------------------------------------------
 1 | # Day #43
 2 | 
 3 | ### Parallex Slider With Flickity
 4 | In this tutorial ([Open in Youtube](https://youtu.be/8WUajxQa-bw)), I am gonna showing to you how to use flickity library in javascript to create a Parallex Slider. Also this slider is full responsive and you can use it as carousel in your website designs❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | ![screenshot](screenshot.jpg)
10 | 


--------------------------------------------------------------------------------
/Day #43 - Parallex Slider/index.js:
--------------------------------------------------------------------------------
 1 | const options = {
 2 |     accessibility: true,
 3 |     prevNextButtons: true,
 4 |     pageDots: true,
 5 |     setGallerySize: false,
 6 |     arrowShape: {
 7 |         x0: 1,
 8 |         x1: 58,
 9 |         y1: 62,
10 |         x2: 55,
11 |         y2: 48,
12 |         x3: 18
13 |     }
14 | };
15 | 
16 | // Function to set background position forr slides
17 | function setBgPosition(slide, index) {
18 |     const x = -(slide.target + flkty.x) / 3;
19 |     slides[index].style.backgroundPosition = `${x}px`;
20 | }
21 | 
22 | // Slides initialization
23 | const carousel = document.querySelector('[carousel]');
24 | const slides = Array.from(document.getElementsByClassName('carousel-cell'));
25 | const flkty = new Flickity(carousel, options);
26 | 
27 | // Event listener using bg position
28 | flkty.on('scroll', () => {
29 |     flkty.slides.forEach(setBgPosition);
30 | });


--------------------------------------------------------------------------------
/Day #43 - Parallex Slider/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #43 - Parallex Slider/screenshot.jpg


--------------------------------------------------------------------------------
/Day #44 - Minimal Weather App With Api/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #44 - Minimal Weather App With Api/1.jpg


--------------------------------------------------------------------------------
/Day #44 - Minimal Weather App With Api/README.md:
--------------------------------------------------------------------------------
 1 | # Day #44
 2 | 
 3 | ### Minimal Weather App
 4 | In this tutorial ([Open in Youtube](https://youtu.be/PvRtd72xagE)), I am gonna showing to you how to add api to Minimal Weather App Ui Design that we coded here (https://youtu.be/qC_DtdhH-J4), i'm used openweather api to connect this app to api to get weather info❗️
 5 | 
 6 | ## Warning
 7 | You need to get your own api key (in video we showed how!) and replace it in index.js file on line 1 :
 8 | 
 9 | ```javascript
10 | const apiKey = 'YOUR_API_KEY';
11 | ```
12 | 
13 | # Screenshot
14 | Here we have project screenshot :
15 | 
16 | ![screenshot](screenshot.jpg)
17 | 


--------------------------------------------------------------------------------
/Day #44 - Minimal Weather App With Api/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #44 - Minimal Weather App With Api/screenshot.jpg


--------------------------------------------------------------------------------
/Day #45 - Particles Portfolio/README.md:
--------------------------------------------------------------------------------
 1 | # Day #45
 2 | 
 3 | ### Particles Portfolio
 4 | In this tutorial ([Open in Youtube](https://youtu.be/kE6EnyHo2A8)), I am gonna showing to you how to code a portfolio with particles.js background animation, Also in this video we used Skeleton.css for our grids. Hope you enjoy it❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | ![screenshot](screenshot.jpg)
10 | 


--------------------------------------------------------------------------------
/Day #45 - Particles Portfolio/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #45 - Particles Portfolio/screenshot.jpg


--------------------------------------------------------------------------------
/Day #45 - Particles Portfolio/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Monoton&family=Ubuntu:wght@300;400;500;700&display=swap');
 2 | 
 3 | *{
 4 |     padding: 0;
 5 |     margin: 0;
 6 |     box-sizing: border-box;
 7 | }
 8 | 
 9 | body{
10 |     font-family: 'Ubuntu', sans-serif;
11 |     height: 100%;
12 |     background: #2a2b32;
13 | }
14 | 
15 | a{
16 |     color: #ccc;
17 |     text-decoration: none;
18 |     transition: 0.3s;
19 | }
20 | 
21 | a:hover{
22 |     color: #e91e63;
23 | }
24 | 
25 | h1.header{
26 |     color: #e91e63;
27 |     font-size: 2.5rem;
28 |     font-weight: bold;
29 | }
30 | 
31 | h2{
32 |     color: #616161;
33 |     font-size: 2.5rem;
34 |     font-weight: bold;
35 | }
36 | 
37 | canvas{
38 |     height: 100vh;
39 |     z-index: -100000;
40 |     position: fixed;
41 |     top: 0px;
42 | }
43 | 
44 | .mb{
45 |     margin-bottom: 3rem;
46 | }
47 | 
48 | .logo{
49 |     font-family: 'Monoton', cursive;
50 |     color: #fff;
51 |     font-size: 10rem;
52 | }
53 | 
54 | .links-list ul li{
55 |     list-style: none;
56 |     margin-right: 2rem;
57 |     font-size: 1.8rem;
58 |     margin-bottom: 0;
59 | }
60 | 
61 | .links-list h1{
62 |     color: #fff;
63 |     font-size: 2.5rem;
64 | }
65 | 
66 | .links-list ul li span{
67 |     background-color: #e91e63;
68 |     font-size: 1.2rem;
69 |     border-radius: 10px;
70 |     padding: 3px 6px;
71 |     font-weight: bold;
72 |     margin-left: 0.5rem;
73 |     color: #fff;
74 | }
75 | 
76 | .footer{
77 |     margin-top: 6rem;
78 | }
79 | 
80 | .footer p{
81 |     color: #fff;
82 |     font-size: 1.3rem;
83 | }


--------------------------------------------------------------------------------
/Day #46 - Sudoku Solver/README.md:
--------------------------------------------------------------------------------
 1 | # Day #46
 2 | 
 3 | ### Sudoku Solver
 4 | In this tutorial ([Open in Youtube](https://youtu.be/t8MdFS0Evbk)), I am gonna showing to you how to code a Sudoku Solver with JavaScript. With this code you can solve any sudoku puzzles! just input numbers then click on solve puzzle❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | ![screenshot](screenshot.jpg)
10 | 


--------------------------------------------------------------------------------
/Day #46 - Sudoku Solver/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #46 - Sudoku Solver | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <h1>Sudoku Solver</h1>
14 |     <div class="sudoku-container">
15 |         <table>
16 |             <tbody id="sudoku-grid">
17 |                 <!-- The grid will be dynamically generated by JavaScript -->
18 |             </tbody>
19 |         </table>
20 |     </div>
21 | 
22 |     <button id="solve-btn">Solve Puzzle</button>
23 | 
24 |     <script src="index.js"></script>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/Day #46 - Sudoku Solver/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #46 - Sudoku Solver/screenshot.jpg


--------------------------------------------------------------------------------
/Day #46 - Sudoku Solver/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | 
 6 | body{
 7 |     font-family: Arial, Helvetica, sans-serif;
 8 |     text-align: center;
 9 |     background: #d4d4d4;
10 |     display: flex;
11 |     align-items: center;
12 |     justify-content: center;
13 |     flex-direction: column;
14 |     height: 100vh;
15 | }
16 | 
17 | h1{
18 |     font-weight: 500;
19 | }
20 | 
21 | .sudoku-container{
22 |     margin-top: 20px;
23 |     display: flex;
24 |     justify-content: center;
25 | }
26 | 
27 | table{
28 |     border-collapse: collapse;
29 |     border: 4px solid #000;
30 | }
31 | 
32 | .cell{
33 |     width: 40px;
34 |     height: 40px;
35 |     text-align: center;
36 |     font-size: 20px;
37 |     border: 1px solid #999;
38 |     transition: all 0.3s ease-in-out;
39 | }
40 | 
41 | table tr:nth-child(3n) td,
42 | table tr:nth-child(3n+3) td{
43 |     border-bottom: 2px solid #000;
44 | }
45 | 
46 | table td:nth-child(3n){
47 |     border-right: 2px solid #000;
48 | }
49 | 
50 | input{
51 |     outline: none;
52 | }
53 | 
54 | input::-webkit-outer-spin-button,
55 | input::-webkit-inner-spin-button{
56 |     -webkit-appearance: none;
57 |     margin: 0;
58 | }
59 | 
60 | button{
61 |     margin-top: 20px;
62 |     padding: 10px 20px;
63 |     font-size: 16px;
64 |     background-color: #039be5;
65 |     color: #fff;
66 |     border: none;
67 |     cursor: pointer;
68 |     border-radius: 4px;
69 |     transition: all 0.3s ease;
70 | }
71 | 
72 | button:hover{
73 |     background-color: #0056b3;
74 | }
75 | 
76 | .solved{
77 |     background-color: #9ccc65;
78 |     transition: all 0.2s ease-in-out;
79 | }


--------------------------------------------------------------------------------
/Day #47 - Text Encryptor/README.md:
--------------------------------------------------------------------------------
 1 | # Day #47
 2 | 
 3 | ### Text Encryptor
 4 | In this tutorial ([Open in Youtube](https://youtu.be/v6XdqdByL5c)), I am gonna showing to you how to code a text encryptor using javascript. with this text encryptor you can encrypt your text using random passwords and make it secure and only who know password can decrypt text❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | ![screenshot](screenshot.jpg)
10 | 


--------------------------------------------------------------------------------
/Day #47 - Text Encryptor/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #47 - Text Encryptor | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="container">
14 |         <h1>AsmrProg Text Encryptor</h1>
15 |         <label for="message">Message :</label>
16 |         <textarea id="message" rows="5"
17 |             cols="50">This is a secret message to encrypt! Don't forget subscribe to my channel :)</textarea>
18 |         <label for="key">Key :</label>
19 |         <input type="text" id="key" value="AsmrProg" size="50">
20 |         <div class="buttons">
21 |             <button id="enc-btn">Encrypt</button>
22 |             <button id="dec-btn">Decrypt</button>
23 |         </div>
24 | 
25 |         <h2>Result:</h2>
26 |         <div id="result"></div>
27 | 
28 |     </div>
29 | 
30 | 
31 |     <script src="index.js"></script>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/Day #47 - Text Encryptor/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #47 - Text Encryptor/screenshot.jpg


--------------------------------------------------------------------------------
/Day #48 - Ai Image Generator/README.md:
--------------------------------------------------------------------------------
 1 | # Day #48
 2 | 
 3 | ### Ai Image Generator
 4 | In this tutorial ([Open in Youtube](https://youtu.be/KBbeUCQXBys)), I am gonna showing to you how to code your own ai image generator completely free! we will use huggingface api to create our own ai image generator app❗️
 5 | 
 6 | ## Warning
 7 | You need to get your own api key (in video we showed how!) and replace it in script.js file on line 1 :
 8 | 
 9 | ```javascript
10 | const apiKey = "YOUR_API_KEY";
11 | ```
12 | 
13 | 
14 | # Screenshot
15 | Here we have project screenshot :
16 | 
17 | ![screenshot](screenshot.jpg)
18 | 


--------------------------------------------------------------------------------
/Day #48 - Ai Image Generator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #48 - Ai Image Generator | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="container">
14 |         <h1>AsmrProg Ai Image Generator</h1>
15 |         <p>Write your prompt here to generate images with power of Ai, For example : "Best Quality, Masterpiece,
16 |             Exteremly Detailed, High Resolution, 4K, Ultra High Resolution, Detailed Shadows, (Two Girls in Cosumes
17 |             Taking Selfies on The Street), Colorful Braids, Mixed Fujifilm, Cute, Laugh".</p>
18 |         <form class="gen-form">
19 |             <input type="text" id="user-prompt" , placeholder="Type your prompt here..." autocomplete="off">
20 |             <button type="button" id="generate">Generate</button>
21 |         </form>
22 | 
23 |         <div class="result">
24 |             <div id="loading">Generating...</div>
25 |             <div id="image-grid"></div>
26 |         </div>
27 | 
28 |     </div>
29 | 
30 |     <script src="script.js"></script>
31 | </body>
32 | 
33 | </html>


--------------------------------------------------------------------------------
/Day #48 - Ai Image Generator/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #48 - Ai Image Generator/screenshot.jpg


--------------------------------------------------------------------------------
/Day #49 - Chess Game/css/chessboard-1.0.0.min.css:
--------------------------------------------------------------------------------
1 | /*! chessboard.js v1.0.0 | (c) 2019 Chris Oakman | MIT License chessboardjs.com/license */
2 | .clearfix-7da63{clear:both}.board-b72b1{border:2px solid #404040;box-sizing:content-box}.square-55d63{float:left;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.white-1e1d7{background-color:#f0d9b5;color:#b58863}.black-3c85d{background-color:#b58863;color:#f0d9b5}.highlight1-32417,.highlight2-9c5d2{box-shadow:inset 0 0 3px 3px #ff0}.notation-322f9{cursor:default;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;position:absolute}.alpha-d2270{bottom:1px;right:3px}.numeric-fc462{top:2px;left:2px}


--------------------------------------------------------------------------------
/Day #49 - Chess Game/img/chesspieces/wikipedia/bB.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #49 - Chess Game/img/chesspieces/wikipedia/bB.png


--------------------------------------------------------------------------------
/Day #49 - Chess Game/img/chesspieces/wikipedia/bK.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #49 - Chess Game/img/chesspieces/wikipedia/bK.png


--------------------------------------------------------------------------------
/Day #49 - Chess Game/img/chesspieces/wikipedia/bN.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #49 - Chess Game/img/chesspieces/wikipedia/bN.png


--------------------------------------------------------------------------------
/Day #49 - Chess Game/img/chesspieces/wikipedia/bP.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #49 - Chess Game/img/chesspieces/wikipedia/bP.png


--------------------------------------------------------------------------------
/Day #49 - Chess Game/img/chesspieces/wikipedia/bQ.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #49 - Chess Game/img/chesspieces/wikipedia/bQ.png


--------------------------------------------------------------------------------
/Day #49 - Chess Game/img/chesspieces/wikipedia/bR.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #49 - Chess Game/img/chesspieces/wikipedia/bR.png


--------------------------------------------------------------------------------
/Day #49 - Chess Game/img/chesspieces/wikipedia/wB.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #49 - Chess Game/img/chesspieces/wikipedia/wB.png


--------------------------------------------------------------------------------
/Day #49 - Chess Game/img/chesspieces/wikipedia/wK.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #49 - Chess Game/img/chesspieces/wikipedia/wK.png


--------------------------------------------------------------------------------
/Day #49 - Chess Game/img/chesspieces/wikipedia/wN.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #49 - Chess Game/img/chesspieces/wikipedia/wN.png


--------------------------------------------------------------------------------
/Day #49 - Chess Game/img/chesspieces/wikipedia/wP.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #49 - Chess Game/img/chesspieces/wikipedia/wP.png


--------------------------------------------------------------------------------
/Day #49 - Chess Game/img/chesspieces/wikipedia/wQ.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #49 - Chess Game/img/chesspieces/wikipedia/wQ.png


--------------------------------------------------------------------------------
/Day #49 - Chess Game/img/chesspieces/wikipedia/wR.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #49 - Chess Game/img/chesspieces/wikipedia/wR.png


--------------------------------------------------------------------------------
/Day #49 - Chess Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <link rel="stylesheet" href="css/chessboard-1.0.0.min.css">
 9 |     <title>Day #49 - Chess Game | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <h1>AsmrProg Chess Game</h1>
16 |         <div class="board" id="board"></div>
17 |         <div class="buttons">
18 |             <button class="play-again">Play Again</button>
19 |             <button class="set-pos">Set Position</button>
20 |             <button class="flip-board">Flip Board</button>
21 |         </div>
22 |         <div id="move-history" class="move-history"></div>
23 |     </div>
24 | 
25 | 
26 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
27 |     <script src="js/chessboard-1.0.0.min.js"></script>
28 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.3/chess.min.js"></script>
29 |     <script src="script.js"></script>
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/Day #49 - Chess Game/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #49 - Chess Game/screenshot.jpg


--------------------------------------------------------------------------------
/Day #49 - Chess Game/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
 2 | 
 3 | *{
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     box-sizing: border-box;
 7 |     font-family: 'Poppins', sans-serif;
 8 | }
 9 | 
10 | body{
11 |     height: 100vh;
12 |     display: flex;
13 |     align-items: center;
14 |     justify-content: center;
15 |     background-color: #f2f2f2;
16 | }
17 | 
18 | .container{
19 |     background-color: #fff;
20 |     padding: 2rem;
21 |     border-radius: 10px;
22 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
23 | }
24 | 
25 | h1{
26 |     text-align: center;
27 |     font-weight: 500;
28 | }
29 | 
30 | .board{
31 |     width: 400px;
32 |     margin: 20px auto;
33 | }
34 | 
35 | .buttons{
36 |     margin-top: 20px;
37 |     display: flex;
38 |     justify-content: center;
39 |     gap: 10px;
40 | }
41 | 
42 | button{
43 |     color: #fff;
44 |     background-color: #000;
45 |     border: none;
46 |     width: 120px;
47 |     height: 40px;
48 |     border-radius: 6px;
49 |     font-size: 0.9rem;
50 |     cursor: pointer;
51 |     transition: all 0.3s ease;
52 | }
53 | 
54 | button:hover{
55 |     background-color: #434343;
56 | }
57 | 
58 | .move-history{
59 |     margin-top: 20px;
60 |     border: 1px solid #ccc;
61 |     padding: 10px;
62 |     border-radius: 5px;
63 |     height: 100px;
64 |     width: 400px;
65 |     overflow-y: scroll;
66 |     background-color: #f2f2f2;
67 | }


--------------------------------------------------------------------------------
/Day #50 - Food Recipe App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #50
 2 | 
 3 | ### Food Recipe Website
 4 | In this tutorial ([Open in Youtube](https://youtu.be/VRgA9NkhSEk)), I am gonna showing to you how to code a food recipe app using javascript. also this project is fully responsive and you can use it in your website coding ❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | ![screenshot](screenshot.jpg)
10 | 


--------------------------------------------------------------------------------
/Day #50 - Food Recipe App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #50 - Food Recipe App | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <header>
14 |         <h1>AsmrProg Food Recipe App</h1>
15 |         <div class="search">
16 |             <input type="text" id="searchInput" placeholder="Enter an ingredient...">
17 |             <button id="searchButton">Search</button>
18 |         </div>
19 |     </header>
20 | 
21 |     <div id="mealList" class="meal-list"></div>
22 |     <div class="modal-container">
23 |         <button id="recipeCloseBtn" class="close-button">&times;</button>
24 |         <div class="meal-details-content">
25 |             <!-- Content from js will be inserted here -->
26 |         </div>
27 |     </div>
28 | 
29 | 
30 | 
31 |     <script src="script.js"></script>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/Day #50 - Food Recipe App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #50 - Food Recipe App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #51 - Draggable Profile Card/README.md:
--------------------------------------------------------------------------------
 1 | # Day #51
 2 | 
 3 | ### Draggable Profile Card
 4 | In this tutorial ([Open in Youtube](https://youtu.be/HWrKyboQNn4)), I am gonna showing to you how to code a Glassmorphism Profile Card using Html CSS and JavaScript. We use javascript to make this profile card draggable (support drag and drop) ❗️
 5 | 
 6 | # Screenshot
 7 | Here we have project screenshot :
 8 | 
 9 | ![screenshot](screenshot.jpg)
10 | 


--------------------------------------------------------------------------------
/Day #51 - Draggable Profile Card/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #51 - Draggable Profile Card/background.jpg


--------------------------------------------------------------------------------
/Day #51 - Draggable Profile Card/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #51 - Draggable Profile Card/logo.png


--------------------------------------------------------------------------------
/Day #51 - Draggable Profile Card/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #51 - Draggable Profile Card/screenshot.jpg


--------------------------------------------------------------------------------
/Day #52 - Email Sender App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #52
 2 | 
 3 | ### Email Sender App
 4 | In this tutorial ([Open in Youtube](https://youtu.be/7H8mrKTyYT4)),  I am gonna showing to you how to code a Responsive Email Sender using html, css and javascript! in this project we will use Emailjs api to send emails. Also we have a awesome modern design in this project ❗️
 5 | 
 6 | ## Warning
 7 | You need to get your own api keys (in video we showed how!) and replace it in script.js file on line 1 and 15 :
 8 | 
 9 | ```javascript
10 | emailjs.init("PUBLIC_KEY");
11 | ```
12 | ```javascript
13 | emailjs.send("SERVICE_ID", "TEMPLATE_ID", {
14 | ```
15 | 
16 | 
17 | # Screenshot
18 | Here we have project screenshot :
19 | 
20 | ![screenshot](screenshot.jpg)
21 | 


--------------------------------------------------------------------------------
/Day #52 - Email Sender App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #52 - Email Sender App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #52 - Email Sender App/script.js:
--------------------------------------------------------------------------------
 1 | emailjs.init("PUBLIC_KEY"); // Replace with your EmailJS User ID
 2 | 
 3 | const sendBtn = document.querySelector('.send-btn');
 4 | const result = document.querySelector('.result');
 5 | 
 6 | sendBtn.addEventListener('click', sendEmail);
 7 | 
 8 | function sendEmail() {
 9 |     // Get the form data
10 |     const to = document.getElementById("to").value;
11 |     const subject = document.getElementById("subject").value;
12 |     const message = document.getElementById("message").value;
13 | 
14 |     // Send the email using EmailJS
15 |     emailjs.send("SERVICE_ID", "TEMPLATE_ID", {
16 |         to_email: to,
17 |         subject: subject,
18 |         message: message
19 |     })
20 |         .then(function () {
21 |             result.innerHTML = "Email sent successfully!";
22 |             result.style.opacity = 1;
23 |         }, function (error) {
24 |             result.innerHTML = "Email sending failed!";
25 |             result.style.opacity = 1;
26 |         });
27 | }


--------------------------------------------------------------------------------
/Day #53 - Url Shortner/README.md:
--------------------------------------------------------------------------------
1 | # Day #53
2 | 
3 | ### Url Shortner
4 | In this tutorial ([Open in Youtube](https://youtu.be/DFZ2SX0-Ou4)),  I am gonna showing to you how to code a url shortner with api in javascript! Also we have a great mesh gradient background and glassmorphism design for it and we used tinyurl website api❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #53 - Url Shortner/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #53 - Url Shortner</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <i class="bx bx-link-alt"></i>
16 |         <h1>Url Shortner</h1>
17 |         <label for="originalUrl">Enter URL To Shorten :</label>
18 |         <input type="text" id="originalUrl" placeholder="https://example.com">
19 |         <div class="buttons">
20 |             <button id="reload-btn">Reload</button>
21 |             <button id="short-btn">Short It</button>
22 |         </div>
23 |         <label for="shortenedUrl">Shortened URL :</label>
24 |         <textarea id="shortenedUrl" rows="3" readonly></textarea>
25 |     </div>
26 | 
27 |     <script src="script.js"></script>
28 | </body>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/Day #53 - Url Shortner/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #53 - Url Shortner/screenshot.jpg


--------------------------------------------------------------------------------
/Day #53 - Url Shortner/script.js:
--------------------------------------------------------------------------------
 1 | const shortBtn = document.getElementById('short-btn');
 2 | const reloadBtn = document.getElementById('reload-btn');
 3 | 
 4 | shortBtn.addEventListener('click', shortenUrl);
 5 | 
 6 | function shortenUrl() {
 7 |     var originalUrl = document.getElementById("originalUrl").value;
 8 |     var apiUrl = "https://tinyurl.com/api-create.php?url=" + encodeURIComponent(originalUrl);
 9 |     shortenedUrlTextarea = document.getElementById("shortenedUrl");
10 | 
11 |     fetch(apiUrl).then(response => response.text()).then(data => {
12 |         shortenedUrlTextarea.value = data;
13 |     }).catch(error => {
14 |         shortenedUrlTextarea.value = "Error : Unable to shorten URL!";
15 |     });
16 | 
17 | }
18 | 
19 | reloadBtn.addEventListener('click', () => {
20 |     location.reload();
21 | });


--------------------------------------------------------------------------------
/Day #54 - Glassmorphism Creator/README.md:
--------------------------------------------------------------------------------
1 | # Day #54
2 | 
3 | ### Glassmorphism Generator
4 | In this tutorial ([Open in Youtube](https://youtu.be/oVAet9CRwqI)),  I am gonna showing to you how to code a Glassmorphism Generator with html, css and javascript! With this tutorial you can create your own glassmorphism generator and use it in your websites to create awesome web designs❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #54 - Glassmorphism Creator/Usage Example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #54 - Usage Example | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 |     <div class="container"></div>
13 | </body>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/Day #54 - Glassmorphism Creator/Usage Example/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     background-color: hsla(0, 100%, 50%, 1);
 3 |     background-image:
 4 |         radial-gradient(at 40% 20%, hsla(28, 100%, 74%, 1) 0px, transparent 50%),
 5 |         radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 1) 0px, transparent 50%),
 6 |         radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 1) 0px, transparent 50%),
 7 |         radial-gradient(at 80% 50%, hsla(340, 100%, 76%, 1) 0px, transparent 50%),
 8 |         radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 1) 0px, transparent 50%),
 9 |         radial-gradient(at 80% 100%, hsla(242, 100%, 70%, 1) 0px, transparent 50%),
10 |         radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 1) 0px, transparent 50%);
11 |     display: flex;
12 |     align-items: center;
13 |     justify-content: center;
14 |     min-height: 100vh;
15 | }
16 | 
17 | .container {
18 |     width: 400px;
19 |     height: 400px;
20 |     background-color: rgba(0, 0, 0, 0.47);
21 | backdrop-filter: blur(1px);
22 | -webkit-backdrop-filter: blur(1px);
23 | outline: 2px solid #000000;
24 | border-radius: 10px;
25 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
26 | }


--------------------------------------------------------------------------------
/Day #54 - Glassmorphism Creator/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #54 - Glassmorphism Creator/screenshot.jpg


--------------------------------------------------------------------------------
/Day #55 - Alarm App/README.md:
--------------------------------------------------------------------------------
1 | # Day #55
2 | 
3 | ### Alarm App
4 | In this tutorial ([Open in Youtube](https://youtu.be/J_exGTc7CEU)),  I am gonna showing to you how to code a Alarm App with html, css and javascript! With this tutorial you can create your own responsive alarm app and set alarms in it, then on time it's starts ringing❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #55 - Alarm App/alarm.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #55 - Alarm App/alarm.mp3


--------------------------------------------------------------------------------
/Day #55 - Alarm App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #55 - Alarm App | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="wrapper">
15 |         <div class="current-time">00:00:00</div>
16 |         <div class="container">
17 |             <div class="inputs">
18 |                 <input type="number" id="hour-input" placeholder="00" min="0" max="23">
19 |                 <input type="number" id="minute-input" placeholder="00" min="0" max="59">
20 |             </div>
21 |             <div class="buttons">
22 |                 <button id="set">Add Alarm</button>
23 |                 <button id="set" class="clear">Clear All</button>
24 |             </div>
25 |             <div class="alarms-list"></div>
26 |         </div>
27 |     </div>
28 | 
29 |     <script src="script.js"></script>
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/Day #55 - Alarm App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #55 - Alarm App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #56 - Image Color Picker/README.md:
--------------------------------------------------------------------------------
1 | # Day #56
2 | 
3 | ### Image Color Picker
4 | In this tutorial ([Open in Youtube](https://youtu.be/ENFIrHO83Xg)),  I am gonna showing to you how to code a image color picker app with html, css and javascript. with this color picker app you can open image and pick any color that you want with Eyedropper. in this video you will learn eyedropper api❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #56 - Image Color Picker/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #56 - Image Color Picker/bg.jpg


--------------------------------------------------------------------------------
/Day #56 - Image Color Picker/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #56 - Image Color Picker | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <div class="img-section">
16 |             <img src="bg.jpg" id="image">
17 |         </div>
18 |         <div class="btns-container">
19 |             <input type="file" id="file" accesskey="image/*">
20 |             <label for="file">Open a Photo</label>
21 |             <button id="pick-btn">Pick Color</button>
22 |         </div>
23 |         <div id="result" class="hide">
24 |             <div>
25 |                 <input type="text" id="hex-input" readonly>
26 |                 <button onclick="copyToClipboard('hex-input')">
27 |                     <i class="fa-regular fa-copy"></i>
28 |                 </button>
29 |             </div>
30 |             <div>
31 |                 <input type="text" id="rgb-input" readonly>
32 |                 <button onclick="copyToClipboard('rgb-input')">
33 |                     <i class="fa-regular fa-copy"></i>
34 |                 </button>
35 |             </div>
36 |             <div id="picked-color"></div>
37 |         </div>
38 |     </div>
39 | 
40 | 
41 |     <script src="script.js"></script>
42 | </body>
43 | 
44 | </html>


--------------------------------------------------------------------------------
/Day #56 - Image Color Picker/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #56 - Image Color Picker/screenshot.jpg


--------------------------------------------------------------------------------
/Day #57 - 2048 Game/README.md:
--------------------------------------------------------------------------------
1 | # Day #57
2 | 
3 | ### 2048 Game
4 | In this tutorial ([Open in Youtube](https://youtu.be/rWNHIUjfsvw)),  I am gonna showing to you how to code a javascript 2048 game with most simple logic in the world! Also we will use css grids for design, flexbox and some animations for it❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #57 - 2048 Game/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #57 - 2048 Game/screenshot.jpg


--------------------------------------------------------------------------------
/Day #58 - Games Release Calendar/README.md:
--------------------------------------------------------------------------------
 1 | # Day #58
 2 | 
 3 | ### Games Release Calendar
 4 | In this tutorial ([Open in Youtube](https://youtu.be/4soJ_kW487s)),  I am gonna showing to you how to code responsive video games release calendar using html, css and javascript! this project also is have a great dark theme, with this calendar you can know previous and next month upcoming video games and we will use rawg api in it❗️
 5 | 
 6 | ## Warning
 7 | You need to get your own api key (in video we showed how!) and replace it in index.js file on line 1 :
 8 | 
 9 | ```javascript
10 | const API_KEY = 'Your_Api_Key';
11 | ```
12 | 
13 | 
14 | # Screenshot
15 | Here we have project screenshot :
16 | 
17 | ![screenshot](screenshot.png)
18 | 


--------------------------------------------------------------------------------
/Day #58 - Games Release Calendar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #58 - Games Release Calendar | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <h1>Video Games Release Calendar</h1>
14 |     <div class="controls">
15 |         <button id="prevMonth">Previous</button>
16 |         <span id="currentMonthYear"></span>
17 |         <button id="nextMonth">Next</button>
18 |     </div>
19 | 
20 |     <div id="calendar"></div>
21 | 
22 |     <div id="gameModal" class="modal">
23 |         <div class="modal-content">
24 |             <span class="close">&times;</span>
25 |             <img src="" id="gameImage">
26 |             <h2 id="gameTitle"></h2>
27 |             <p><strong>Description:</strong> <span id="gameDescription"></span></p>
28 |             <p><strong>Release Date:</strong> <span id="gameReleaseDate"></span></p>
29 |             <p><strong>Rating:</strong> <span id="gameRating"></span></p>
30 |             <p><strong>Platforms:</strong> <span id="gamePlatforms"></span></p>
31 |         </div>
32 |     </div>
33 | 
34 |     <script src="script.js"></script>
35 | </body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/Day #58 - Games Release Calendar/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #58 - Games Release Calendar/screenshot.png


--------------------------------------------------------------------------------
/Day #59 - Snake Pong/README.md:
--------------------------------------------------------------------------------
1 | # Day #59
2 | 
3 | ### Snake Pong Game
4 | In this tutorial ([Open in Youtube](https://youtu.be/jyhtQSjEP4s)),  I am gonna showing to you how to combine snake and pong game with javascript! we will code a snake game but food moves as pong game, this javascript project is very good for who one need javascript project with logic
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #59 - Snake Pong/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #59 - Snake Pong | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="score-container">
14 |         <div>Score : <span id="current-score">0</span></div>
15 |         <div>High Score : <span id="high-score">0</span></div>
16 |     </div>
17 | 
18 |     <canvas id="gameCanvas" width="420" height="420"></canvas>
19 |     <div id="game-over">
20 |         Game Over!
21 |         <button id="restart-btn">Restart Game</button>
22 |     </div>
23 | 
24 |     <script src="script.js"></script>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/Day #59 - Snake Pong/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #59 - Snake Pong/screenshot.jpg


--------------------------------------------------------------------------------
/Day #59 - Snake Pong/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
 2 | 
 3 | body{
 4 |     display: flex;
 5 |     flex-direction: column;
 6 |     align-items: center;
 7 |     justify-content: center;
 8 |     height: 100vh;
 9 |     background-color: #333;
10 |     color: #fff;
11 |     overflow: hidden;
12 |     font-family: 'Poppins',sans-serif;
13 | }
14 | 
15 | canvas{
16 |     border: 2px solid #fff;
17 | }
18 | 
19 | .score-container{
20 |     display: flex;
21 |     justify-content: space-between;
22 |     width: 420px;
23 |     font-size: 18px;
24 | }
25 | 
26 | #restart-btn{
27 |     margin-top: 15px;
28 |     padding: 10px 15px;
29 |     background-color: #f4f4f4;
30 |     border: none;
31 |     cursor: pointer;
32 |     transition: all 0.3s ease;
33 | }
34 | 
35 | #game-over{
36 |     position: absolute;
37 |     top: 50%;
38 |     left: 50%;
39 |     transform: translate(-50%, -50%);
40 |     background-color: rgba(0, 0, 0, 0.8);
41 |     padding: 20px;
42 |     color: #fff;
43 |     display: none;
44 |     flex-direction: column;
45 |     align-items: center;
46 |     justify-content: center;
47 | }


--------------------------------------------------------------------------------
/Day #60 - Wikipedia Searcher/README.md:
--------------------------------------------------------------------------------
1 | # Day #60
2 | 
3 | ### Wikipedia Searcher
4 | In this tutorial ([Open in Youtube](https://youtu.be/v1t3STcPRqI)),  I am gonna showing to you how to code a wikipedia search app in javascript! you will learn how to use wikipedia api to search around wikipedia wih html css and js, this project also is fully responsive❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #60 - Wikipedia Searcher/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #60 - Wikipedia Searcher | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="container">
14 |         <header>
15 |             <h1>Wiki Searcher</h1>
16 |             <form class="search-box">
17 |                 <input type="search" placeholder="What do you want to search?">
18 |             </form>
19 |             <p>Results Count : 0</p>
20 |         </header>
21 |         <div class="results"></div>
22 |     </div>
23 | 
24 |     <script src="script.js"></script>
25 | </body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/Day #60 - Wikipedia Searcher/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #60 - Wikipedia Searcher/screenshot.jpg


--------------------------------------------------------------------------------
/Day #61 - Api Quiz Game/README.md:
--------------------------------------------------------------------------------
1 | # Day #61
2 | 
3 | ### Api Quiz Game
4 | In this tutorial ([Open in Youtube](https://youtu.be/so_FzCUMlf0)),  I am gonna showing to you how to code a quiz game with html, css and javascript! this game get questions and answers from api and you don't need to manually add questions to it! also you can choose difficulty and category of questions and also number of questions. it also add points to your score depending on time that you answered the question❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #61 - Api Quiz Game/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #61 - Api Quiz Game/screenshot.jpg


--------------------------------------------------------------------------------
/Day #62 - Chrome Todo Extension/README.md:
--------------------------------------------------------------------------------
1 | # Day #62
2 | 
3 | ### Chrome ToDo Extension
4 | In this tutorial ([Open in Youtube](https://youtu.be/ny-L_KLrKIU)),  I am gonna showing to you how to code a chrome extension with javascript. we will create a simple todo app extension for chrome using html, css and javascript❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #62 - Chrome Todo Extension/icons/icon128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #62 - Chrome Todo Extension/icons/icon128.png


--------------------------------------------------------------------------------
/Day #62 - Chrome Todo Extension/icons/icon16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #62 - Chrome Todo Extension/icons/icon16.png


--------------------------------------------------------------------------------
/Day #62 - Chrome Todo Extension/icons/icon32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #62 - Chrome Todo Extension/icons/icon32.png


--------------------------------------------------------------------------------
/Day #62 - Chrome Todo Extension/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #62 - Chrome Todo Extension | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div id="container">
14 |         <input type="text" id="new-task" placeholder="Add a new task...">
15 |         <button id="add-task">Add Task</button>
16 |         <ul id="task-list"></ul>
17 |     </div>
18 | 
19 | 
20 |     <script src="script.js"></script>
21 | </body>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/Day #62 - Chrome Todo Extension/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "manifest_version": 3,
 3 |     "name": "Chrome To-Do",
 4 |     "description": "A simple and clean to-do list extension! Coded by AsmrProg.",
 5 |     "version": "1.0",
 6 |     "action": {
 7 |         "default_popup": "index.html"
 8 |     },
 9 |     "permissions": [
10 |         "storage"
11 |     ],
12 |     "icons": {
13 |         "16": "icons/icon16.png",
14 |         "32": "icons/icon32.png",
15 |         "128": "icons/icon128.png"
16 |     }
17 | }


--------------------------------------------------------------------------------
/Day #62 - Chrome Todo Extension/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #62 - Chrome Todo Extension/screenshot.jpg


--------------------------------------------------------------------------------
/Day #62 - Chrome Todo Extension/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     font-family: 'Arial', sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     background-color: #f4f4f4;
 6 |     width: 350px;
 7 | }
 8 | 
 9 | #container{
10 |     background-color: #fff;
11 |     padding: 15px;
12 |     border-radius: 8px;
13 |     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
14 | }
15 | 
16 | #new-task{
17 |     padding: 10px;
18 |     width: calc(100% - 20px);
19 |     margin-bottom: 10px;
20 |     border: 1px solid #ddd;
21 |     border-radius: 4px;
22 |     outline: none;
23 | }
24 | 
25 | #add-task{
26 |     padding: 10px;
27 |     width: 100%;
28 |     background-color: #4caf50;
29 |     color: #fff;
30 |     border: none;
31 |     border-radius: 4px;
32 |     cursor: pointer;
33 |     margin-top: 10px;
34 |     font-size: 13px;
35 |     transition: opacity 0.3s ease;
36 | }
37 | 
38 | #task-list{
39 |     margin-top: 20px;
40 |     list-style: none;
41 |     padding: 0;
42 | }
43 | 
44 | #task-list li{
45 |     display: flex;
46 |     align-items: center;
47 |     padding: 10px;
48 |     background-color: #e0e0e0;
49 |     margin-bottom: 5px;
50 |     border-radius: 4px;
51 |     overflow: hidden;
52 | }
53 | 
54 | #task-list li span{
55 |     flex-grow: 1;
56 |     margin-left: 10px;
57 |     word-break: break-all;
58 | }
59 | 
60 | input[type='checkbox']{
61 |     cursor: pointer;
62 | }
63 | 
64 | button:not(#add-task){
65 |     margin-left: 5px;
66 |     padding: 5px 8px;
67 |     border: none;
68 |     border-radius: 4px;
69 |     cursor: pointer;
70 |     font-size: 12px;
71 | }
72 | 
73 | button:hover{
74 |     opacity: 0.8;
75 | }


--------------------------------------------------------------------------------
/Day #63 - Chrome Translator Extension/README.md:
--------------------------------------------------------------------------------
1 | # Day #63
2 | 
3 | ### Chrome Translator Extension
4 | In this tutorial ([Open in Youtube](https://youtu.be/KHkNc67c5Mc)),  I am gonna showing to you how to code a chrome extension with javascript. we will create a language translator extension for chrome using html, css and javascript❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #63 - Chrome Translator Extension/icons/icon128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #63 - Chrome Translator Extension/icons/icon128.png


--------------------------------------------------------------------------------
/Day #63 - Chrome Translator Extension/icons/icon16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #63 - Chrome Translator Extension/icons/icon16.png


--------------------------------------------------------------------------------
/Day #63 - Chrome Translator Extension/icons/icon32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #63 - Chrome Translator Extension/icons/icon32.png


--------------------------------------------------------------------------------
/Day #63 - Chrome Translator Extension/icons/icon64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #63 - Chrome Translator Extension/icons/icon64.png


--------------------------------------------------------------------------------
/Day #63 - Chrome Translator Extension/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #63 - Chrome Translator Extension | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <label for="inputText">Your Text:</label>
14 |     <textarea id="inputText" rows="10" placeholder="Type text here..."></textarea>
15 | 
16 |     <div>
17 |         <label for="translateFrom">Translate From:</label>
18 |         <select id="translateFrom">
19 |             <option value="en">English</option>
20 |         </select>
21 |         <label for="translateFrom">Translate To:</label>
22 |         <select id="translateTo">
23 |             <option value="es">Spanish</option>
24 |         </select>
25 |     </div>
26 | 
27 |     <button id="translateBtn">Translate</button>
28 |     <button id="speakBtn">Speak</button>
29 |     <div id="outputText" aria-readonly="true"></div>
30 | 
31 |     <script src="countries.js"></script>
32 |     <script src="script.js"></script>
33 | </body>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/Day #63 - Chrome Translator Extension/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "manifest_version": 3,
 3 |     "name": "AsmrProg Translator",
 4 |     "version": "1.0",
 5 |     "description": "A simple translator extension coded by : AsmrProg",
 6 |     "action": {
 7 |         "default_popup": "index.html"
 8 |     },
 9 |     "icons": {
10 |         "16": "icons/icon16.png",
11 |         "32": "icons/icon32.png",
12 |         "64": "icons/icon64.png",
13 |         "128": "icons/icon128.png"
14 |     }
15 | }


--------------------------------------------------------------------------------
/Day #63 - Chrome Translator Extension/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #63 - Chrome Translator Extension/screenshot.jpg


--------------------------------------------------------------------------------
/Day #63 - Chrome Translator Extension/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     outline: none;
 3 |     font-family: 'Arial', sans-serif;
 4 | }
 5 | 
 6 | body{
 7 |     background-color: #f3f4f6;
 8 |     padding: 15px;
 9 |     margin: 0;
10 |     color: #333;
11 |     width: 350px;
12 | }
13 | 
14 | label{
15 |     display: block;
16 |     margin-bottom: 10px;
17 |     font-weight: bold;
18 |     font-size: 13px;
19 | }
20 | 
21 | textarea,
22 | select,
23 | button{
24 |     width: 100%;
25 |     padding: 10px;
26 |     margin-bottom: 10px;
27 |     border: 1px solid #ddd;
28 |     border-radius: 4px;
29 |     box-sizing: border-box;
30 | }
31 | 
32 | textarea{
33 |     resize: none;
34 |     overflow-y: scroll;
35 | }
36 | 
37 | button{
38 |     background-color: #4caf50;
39 |     color: #fff;
40 |     border: none;
41 |     cursor: pointer;
42 |     transition: background-color 0.3s ease;
43 | }
44 | 
45 | button:hover{
46 |     background-color: #45a049;
47 | }
48 | 
49 | #outputText{
50 |     background-color: #fff;
51 |     min-height: 80px;
52 |     border: 1px solid #ddd;
53 |     border-radius: 4px;
54 |     padding: 10px;
55 |     font-size: 13px;
56 |     white-space: pre-wrap;
57 | }


--------------------------------------------------------------------------------
/Day #64 - Speech To Text/README.md:
--------------------------------------------------------------------------------
1 | # Day #64
2 | 
3 | ### Chrome Translator Extension
4 | In this tutorial ([Open in Youtube](https://youtu.be/4-kXrePE2xs)),  I am gonna showing to you how to code a speech to text app. we will code an app that you can speak and it write text for you,we code this speech to text in html, css and javascript❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #64 - Speech To Text/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #64 - Speech To Text | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <p class="header">AsmrProg Speech To Text</p>
16 |         <div class="settings">
17 |             <div class="language">
18 |                 <p>Language :</p>
19 |                 <select id="language"></select>
20 |             </div>
21 |         </div>
22 |         <div class="separator"></div>
23 |         <button class="btn record">
24 |             <div class="icon">
25 |                 <i class='bx bx-microphone'></i>
26 |                 <i class='bx bx-loader bx-spin'></i>
27 |             </div>
28 |             <p>Start Listening</p>
29 |         </button>
30 | 
31 |         <p>Result :</p>
32 |         <div class="result" spellcheck="false">
33 |             <p class="resultText"></p>
34 |         </div>
35 | 
36 |         <div class="separator"></div>
37 | 
38 |         <div class="buttons">
39 |             <button class="btn clear">
40 |                 Clear
41 |             </button>
42 |             <button class="btn download" disabled>Download</button>
43 |         </div>
44 | 
45 |     </div>
46 | 
47 |     <script src="languages.js"></script>
48 |     <script src="script.js"></script>
49 | </body>
50 | 
51 | </html>


--------------------------------------------------------------------------------
/Day #64 - Speech To Text/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #64 - Speech To Text/screenshot.jpg


--------------------------------------------------------------------------------
/Day #65 - Capture Screen Shot/README.md:
--------------------------------------------------------------------------------
1 | # Day #65
2 | 
3 | ### Capture Screenshot
4 | In this tutorial ([Open in Youtube](https://youtu.be/uVzwT8UOla0)),  I am gonna showing to you how to take screenshot with javascript from webpage! we will use html2canvs library to take screenshots from website with javascript coding❗️
5 | 
6 | # Screenshot
7 | Here we have project screenshot :
8 | 
9 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #65 - Capture Screen Shot/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #65 - Capture Screenshot | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="login-container">
14 |         <form class="login-form">
15 |             <h2>Login</h2>
16 |             <div class="input-group">
17 |                 <label for="username">Username</label>
18 |                 <input type="text" id="username" placeholder="Enter username" required autocomplete="off">
19 |             </div>
20 |             <div class="input-group">
21 |                 <label for="password">Password</label>
22 |                 <input type="password" id="password" placeholder="Enter password" required>
23 |             </div>
24 |             <button type="submit">Login</button>
25 |         </form>
26 |     </div>
27 | 
28 |     <button id="screenshotBtn">Take Screenshot</button>
29 | 
30 | 
31 |     <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
32 |     <script src="script.js"></script>
33 | </body>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/Day #65 - Capture Screen Shot/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #65 - Capture Screen Shot/screenshot.jpg


--------------------------------------------------------------------------------
/Day #65 - Capture Screen Shot/script.js:
--------------------------------------------------------------------------------
 1 | document.getElementById('screenshotBtn').addEventListener('click', function () {
 2 |     // Hide screenshot button from captured screenshot
 3 |     this.classList.add('hidden');
 4 | 
 5 |     // Take the screenshot
 6 |     html2canvas(document.documentElement, {
 7 |         scale: window.devicePixelRatio, // Capture at the device's pixel ratio
 8 |         logging: true, // Enable logging for debugging
 9 |         useCORS: true, // Use CORS to handle cross-origin images
10 |         windowHeight: window.innerHeight,
11 |         windowWidth: window.innerWidth
12 |     }).then(canvas => {
13 |         // Create an image
14 |         var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
15 | 
16 |         // Create a link to download the image
17 |         var link = document.createElement('a');
18 |         link.download = 'screenshot.png';
19 |         link.href = image;
20 |         link.click();
21 | 
22 |         // Show the button again
23 |         this.classList.remove('hidden');
24 |     });
25 | 
26 | });


--------------------------------------------------------------------------------
/Day #66 - Live Chart Generator/README.md:
--------------------------------------------------------------------------------
 1 | # Day #66
 2 | 
 3 | ### Live Chart Generator
 4 | In this tutorial ([Open in YouTube](https://youtu.be/1hgBrruTk1Y)),  we delve into the world of real-time data visualization using JavaScript and the powerful Chart.js library. This video is a must-watch for anyone looking to enhance their web development skills, especially in the area of data representation and dynamic charting❗️
 5 | 
 6 | ### 🌟 What You'll Learn:
 7 | - Understanding Chart.js: Get to grips with the basics of this versatile library and how it can transform your data visualization game.
 8 | - Real-Time Data Integration: Learn how to seamlessly feed live data into your charts.
 9 | - Five Chart Modes: Explore five different chart types - from line graphs to bar charts, and understand when and how to use them effectively.
10 | 
11 | 
12 | # Screenshot
13 | Here we have project screenshot :
14 | 
15 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #66 - Live Chart Generator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #66 - Live Chart Generator | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="container">
14 |         <div class="chart-container">
15 |             <div id="canvas-container"></div>
16 |         </div>
17 | 
18 |         <div class="controls">
19 |             <select id="chartType" class="select">
20 |                 <option value="bar">Bar</option>
21 |                 <option value="line">Line</option>
22 |                 <option value="pie">Pie</option>
23 |                 <option value="doughnut">Doughnut</option>
24 |                 <option value="radar">Radar</option>
25 |             </select>
26 |             <input type="text" id="labelInput" class="input" placeholder="Label">
27 |             <input type="number" id="dataInput" class="input" placeholder="Data">
28 |             <button onclick="addData()" class="btn">Add Data</button>
29 |             <button onclick="updateChartType()" class="btn">Change Chart Type</button>
30 |         </div>
31 | 
32 |     </div>
33 | 
34 | 
35 |     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
36 |     <script src="script.js"></script>
37 | </body>
38 | 
39 | </html>


--------------------------------------------------------------------------------
/Day #66 - Live Chart Generator/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #66 - Live Chart Generator/screenshot.jpg


--------------------------------------------------------------------------------
/Day #66 - Live Chart Generator/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
 2 | 
 3 | *{
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     outline: none;
 7 |     font-family: 'Poppins', sans-serif;
 8 | }
 9 | 
10 | body{
11 |     background-color: #f4f4f4;
12 |     color: #333;
13 |     display: flex;
14 |     align-items: center;
15 |     justify-content: center;
16 |     height: 100vh;
17 | }
18 | 
19 | .container{
20 |     background-color: #fff;
21 |     padding: 30px;
22 |     border-radius: 20px;
23 |     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
24 | }
25 | 
26 | .controls{
27 |     margin-top: 30px;
28 |     text-align: center;
29 | }
30 | 
31 | .select,
32 | .input{
33 |     padding: 8px;
34 |     margin-right: 10px;
35 |     border: 1px solid #ddd;
36 |     border-radius: 4px;
37 | }
38 | 
39 | .btn{
40 |     padding: 8px 15px;
41 |     border: none;
42 |     background-color: #303f9f;
43 |     color: #fff;
44 |     border-radius: 4px;
45 |     cursor: pointer;
46 |     transition: all 0.3s ease;
47 | }
48 | 
49 | .btn:hover{
50 |     background-color: #0056b3;
51 | }
52 | 
53 | #canvas-container{
54 |     width: 100%;
55 |     height: 100%;
56 |     display: flex;
57 |     align-items: center;
58 |     justify-content: center;
59 | }


--------------------------------------------------------------------------------
/Day #67 - Capthca App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #67
 2 | 
 3 | ### Captcha App
 4 | In this tutorial ([Open in YouTube](https://youtu.be/KPR-s3JIh1Q)),  we delve into the world of captcha using JavaScript. This video is a must-watch for anyone looking to enhance their web development skills, especially in the area of captcha codes❗️
 5 | 
 6 | ### 🌟 What You'll Learn:
 7 | - Understanding Captcha: Learn how captcha codes work!
 8 | - How To Add Noise To Captcha
 9 | - Working With Canvas
10 | 
11 | # Screenshot
12 | Here we have project screenshot :
13 | 
14 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #67 - Capthca App/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #67 - Capthca App/bg.png


--------------------------------------------------------------------------------
/Day #67 - Capthca App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #67 - Captcha App | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div id="captcha-container">
14 |         <img src="bg.png">
15 |         <div class="captcha">
16 |             <canvas id="captcha" width="200" height="40"></canvas>
17 |             <button id="reload-captcha">Reload</button>
18 |         </div>
19 |         <div class="user">
20 |             <input type="text" id="captcha-input" placeholder="Enter CAPTCHA">
21 |             <button id="check-captcha">Check</button>
22 |         </div>
23 |         <p id="captcha-status">Status : IDLE</p>
24 |     </div>
25 | 
26 |     <script src="script.js"></script>
27 | </body>
28 | 
29 | </html>


--------------------------------------------------------------------------------
/Day #67 - Capthca App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #67 - Capthca App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #68 - JSON Parser/README.md:
--------------------------------------------------------------------------------
 1 | # Day #68
 2 | 
 3 | ### JSON Parser
 4 | In this tutorial ([Open in YouTube](https://youtu.be/pX1xymfEH-Q)),  we delve into the world of json files in JavaScript. This video is a must-watch for anyone looking to enhance their web development skills, especially in the area of json codes, json parsing is most important thing when you want to work with api❗️
 5 | 
 6 | ### 🌟 What You'll Learn:
 7 | - Understanding JSON: Learn how to parse json files!
 8 | - How to get type of data
 9 | - Working with all json types
10 | 
11 | # Screenshot
12 | Here we have project screenshot :
13 | 
14 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #68 - JSON Parser/Test.json:
--------------------------------------------------------------------------------
 1 | {
 2 |    "people": [
 3 |       {
 4 |          "firstName": "Joe",
 5 |          "lastName": "Jackson",
 6 |          "gender": "male",
 7 |          "age": 28,
 8 |          "number": "7349282382"
 9 |       },
10 |       {
11 |          "firstName": "James",
12 |          "lastName": "Smith",
13 |          "gender": "male",
14 |          "age": 32,
15 |          "number": [
16 |             {
17 |                "test": 10,
18 |                "test2": 15
19 |             }
20 |          ]
21 |       },
22 |       {
23 |          "firstName": "Emily",
24 |          "lastName": "Jones",
25 |          "gender": "female",
26 |          "age": 24,
27 |          "number": "456754675"
28 |       }
29 |    ]
30 | }


--------------------------------------------------------------------------------
/Day #68 - JSON Parser/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #68 - JSON Parser App | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <textarea id="jsonInput" cols="30" rows="10"></textarea>
14 |     <div class="buttons">
15 |         <button onclick="parseAndDisplayJson()">Parse And Display JSON</button>
16 |         <input type="file" id="fileInput" accept=".json, .txt">
17 |     </div>
18 |     <div id="jsonViewer"></div>
19 | 
20 |     <script src="script.js"></script>
21 | </body>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/Day #68 - JSON Parser/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #68 - JSON Parser/screenshot.jpg


--------------------------------------------------------------------------------
/Day #69 - JavaScript Form Validator/README.md:
--------------------------------------------------------------------------------
 1 | # Day #69
 2 | 
 3 | ### JSON Parser
 4 | In this tutorial ([Open in YouTube](https://youtu.be/wzrHNx9WTFQ)), we will know how to validate form with javascript. we will use javascript functions to validate phone, email and other fields❗️
 5 | 
 6 | ### 🌟 What You'll Learn:
 7 | - Understanding JS Functions: Learn how to use javascript functions!
 8 | - How to validate forms
 9 | - Working with html inputs
10 | 
11 | # Screenshot
12 | Here we have project screenshot :
13 | 
14 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #69 - JavaScript Form Validator/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #69 - JavaScript Form Validator/bg.png


--------------------------------------------------------------------------------
/Day #69 - JavaScript Form Validator/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #69 - JavaScript Form Validator/screenshot.jpg


--------------------------------------------------------------------------------
/Day #70 - Event Calendar/README.md:
--------------------------------------------------------------------------------
 1 | # Day #70
 2 | 
 3 | ### Calendar With Events
 4 | In this tutorial ([Open in YouTube](https://youtu.be/QiVoPKzylck)), we'll dive deep into the world of JavaScript and demonstrate how to build a dynamic calendar that not only displays dates but also allows users to add, edit, and delete events with ease. 💻🌟
 5 | <br>
 6 | You'll learn how to leverage the power of JavaScript to handle user interactions, manipulate the DOM, and manage event data effectively. We'll cover topics such as event listeners, DOM manipulation, date handling, and more, providing you with the essential knowledge to create a fully functional event calendar from scratch.
 7 | <br>
 8 | Whether you're building a personal planner, scheduling app, or integrating a calendar into your website, this tutorial has got you covered. So grab your favorite coding tools, fire up your text editor, and let's dive into the world of JavaScript event calendars together! 🔥 Don't forget to like, share, and subscribe for more awesome tutorials! 🚀
 9 | 
10 | # Screenshot
11 | Here we have project screenshot :
12 | 
13 | ![screenshot](screenshot.png)


--------------------------------------------------------------------------------
/Day #70 - Event Calendar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Event Calendar App | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="planner">
14 |         <h1>Event Calendar</h1>
15 |         <div id="calendar" class="calendar-grid"></div>
16 |     </div>
17 | 
18 |     <button class="add-task-btn" onclick="showAddTaskModal()">Add Task</button>
19 | 
20 |     <div id="addTaskModal" class="modal">
21 |         <div class="modal-content">
22 |             <span class="close" onclick="closeAddTaskModal()">&times;</span>
23 |             <h2>Add Task</h2>
24 |             <input type="date" id="task-date">
25 |             <input type="text" id="task-desc" placeholder="Task Description" autocomplete="off">
26 |             <button onclick="addTask()">Add Task</button>
27 |         </div>
28 |     </div>
29 | 
30 | 
31 |     <script src="script.js"></script>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/Day #70 - Event Calendar/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #70 - Event Calendar/screenshot.png


--------------------------------------------------------------------------------
/Day #71 - News Aggregator App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #71
 2 | 
 3 | ### Weather App
 4 | In this tutorial ([Open in Youtube](https://youtu.be/yXl6N9UqpUQ)), we're diving into the world of web development to create a sleek and functional news aggregator website from scratch using HTML, CSS, and JavaScript.
 5 | 
 6 | 🎥 In this video, you'll learn step-by-step how to:
 7 | 1. Set up the basic structure of our website using HTML.
 8 | 2. Style our website to perfection with CSS, making it visually appealing and user-friendly.
 9 | Implement dynamic functionality using JavaScript to fetch and display news articles from various sources.
10 | 3. Enhance user experience by adding features like search functionality and category filtering.
11 | 4. Optimize our code for performance and responsiveness, ensuring our website looks great on all devices.
12 | 
13 | Whether you're a beginner looking to expand your coding skills or a seasoned developer seeking a fun project to tackle, this tutorial has something for everyone!
14 | So grab your favorite coding beverage ☕️, fire up your text editor, and let's embark on this coding adventure together. By the end of this video, you'll have a fully functional news aggregator website to impress your friends and add to your portfolio.
15 | 
16 | ## Warning
17 | You need to get your own api key (in video we showed how!) and replace it in script.js file on line 1 :
18 | 
19 | ```javascript
20 | const API_KEY = 'YOUR_API_KEY';
21 | ```
22 | 
23 | 
24 | # Screenshot
25 | Here we have project screenshot :
26 | 
27 | ![screenshot](screenshot.jpg)
28 | 


--------------------------------------------------------------------------------
/Day #71 - News Aggregator App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #71 - News Aggregator App | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="container">
14 |         <h1>News Aggregator</h1>
15 | 
16 |         <div class="selectionContainer">
17 |             <label for="category">Choose Category :</label>
18 |             <select id="category">
19 |                 <option value="business">Business</option>
20 |                 <option value="entertainment">Entertainment</option>
21 |                 <option value="general">General</option>
22 |                 <option value="health">Health</option>
23 |                 <option value="science">Science</option>
24 |                 <option value="sports">Sports</option>
25 |                 <option value="technology">Technology</option>
26 |             </select>
27 |             <button id="fetchCategory">Fetch News</button>
28 |         </div>
29 | 
30 |         <div class="searchContainer">
31 |             <input type="text" id="searchKeyword" placeholder="Search for news...">
32 |             <button onclick="fetchNews(true)">Search Key</button>
33 |         </div>
34 |         <div id="newsContainer"></div>
35 |     </div>
36 | 
37 |     <script src="script.js"></script>
38 | </body>
39 | 
40 | </html>


--------------------------------------------------------------------------------
/Day #71 - News Aggregator App/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #71 - News Aggregator App/screenshot.jpg


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Card Slider/assets/profile-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #72 - Common Sliders/Card Slider/assets/profile-1.png


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Card Slider/assets/profile-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #72 - Common Sliders/Card Slider/assets/profile-2.png


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Card Slider/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Card Slider | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="container">
14 |         <div class="slider"></div>
15 |         <button id="prev">&lt;</button>
16 |         <button id="next">&gt;</button>
17 |     </div>
18 | 
19 |     <script src="script.js"></script>
20 | </body>
21 | 
22 | </html>


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Draggable Slider/assets/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #72 - Common Sliders/Draggable Slider/assets/image-1.jpg


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Draggable Slider/assets/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #72 - Common Sliders/Draggable Slider/assets/image-2.jpg


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Draggable Slider/assets/image-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #72 - Common Sliders/Draggable Slider/assets/image-3.jpg


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Draggable Slider/assets/image-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #72 - Common Sliders/Draggable Slider/assets/image-4.jpg


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Draggable Slider/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Draggable Slider | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="container">
14 |         <div class="slider"></div>
15 |     </div>
16 | 
17 | 
18 |     <script src="script.js"></script>
19 | </body>
20 | 
21 | </html>


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Draggable Slider/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body{
 6 |     margin: 0;
 7 |     padding: 0;
 8 |     background-color: #1976d2;
 9 |     display: flex;
10 |     align-items: center;
11 |     justify-content: center;
12 |     height: 100vh;
13 | }
14 | 
15 | .container{
16 |     padding: 10px;
17 |     background: #fff;
18 |     width: 80%;
19 |     max-width: 818px;
20 |     height: 75vh;
21 |     overflow: hidden;
22 |     cursor: grab;
23 |     border-radius: 10px;
24 |     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
25 | }
26 | 
27 | .slider{
28 |     width: 500%;
29 |     display: flex;
30 |     gap: 1rem;
31 |     pointer-events: none;
32 | }
33 | 
34 | img{
35 |     width: 800px;
36 |     height: 564px;
37 |     object-fit: cover;
38 |     border-radius: 10px;
39 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
40 | }


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Image Slider/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Image Slider/assets/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #72 - Common Sliders/Image Slider/assets/image-1.jpg


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Image Slider/assets/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #72 - Common Sliders/Image Slider/assets/image-2.jpg


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Image Slider/assets/image-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #72 - Common Sliders/Image Slider/assets/image-3.jpg


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Image Slider/assets/image-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #72 - Common Sliders/Image Slider/assets/image-4.jpg


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Image Slider/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Image Slider | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="container">
14 |         <div class="images">
15 |             <img src="assets/image-1.jpg" class="active">
16 |             <img src="assets/image-2.jpg">
17 |             <img src="assets/image-3.jpg">
18 |             <img src="assets/image-4.jpg">
19 |         </div>
20 |         <div class="dots">
21 |             <button onclick="dot(1)"></button>
22 |             <button onclick="dot(2)"></button>
23 |             <button onclick="dot(3)"></button>
24 |             <button onclick="dot(4)"></button>
25 |         </div>
26 |         <button id="prev" onclick="prev()"> &lt; </button>
27 |         <button id="next" onclick="next()"> &gt; </button>
28 |     </div>
29 | 
30 | 
31 |     <script src="script.js"></script>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/Image Slider/script.js:
--------------------------------------------------------------------------------
 1 | const TOTAL_SLIDES = 4;
 2 | let currentIndex = 0;
 3 | 
 4 | const dots = document.querySelectorAll(".dots button");
 5 | const images = document.querySelectorAll(".images img");
 6 | 
 7 | function showSlide(index) {
 8 |     images.forEach(image => image.style.display = "none");
 9 |     dots.forEach(dot => dot.style.backgroundColor = "transparent");
10 | 
11 |     images[index].style.display = "block";
12 |     dots[index].style.backgroundColor = "#000";
13 | }
14 | 
15 | function gotoSlide(index) {
16 |     currentIndex = (TOTAL_SLIDES + index) % TOTAL_SLIDES;
17 |     showSlide(currentIndex);
18 | }
19 | 
20 | function next() {
21 |     gotoSlide(currentIndex + 1);
22 | }
23 | 
24 | function prev() {
25 |     gotoSlide(currentIndex - 1);
26 | }
27 | 
28 | function dotClicked(index) {
29 |     gotoSlide(index);
30 | }
31 | 
32 | dots.forEach((dot, index) => {
33 |     dot.addEventListener("click", () => dotClicked(index));
34 | });
35 | 
36 | showSlide(currentIndex);


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/README.md:
--------------------------------------------------------------------------------
 1 | # Day #72
 2 | 
 3 | ### Common Sliders
 4 | In this tutorial ([Open in Youtube](https://youtu.be/7eevh8QXsL4)), we'll dive into the fascinating world of JavaScript sliders. Whether you're a beginner or an experienced developer, mastering sliders is essential for creating dynamic and engaging web experiences. Join us as we explore the "3 Most Simple Sliders You Must Know in JavaScript"!
 5 | 
 6 | 🚀 Ready to take your web development skills to the next level? We've got you covered! From basic implementations to more advanced techniques, these sliders will add flair and functionality to your projects in no time.
 7 | 
 8 | Whether you're building a portfolio website, an e-commerce platform, or a multimedia-rich application, understanding these slider techniques will give you the tools you need to stand out in the competitive world of web development.🌟✨
 9 | 
10 | # Screenshot
11 | Here we have project screenshot :
12 | 
13 | ![screenshot-1](screenshot-1.jpg)
14 | ![screenshot-2](screenshot-2.jpg)
15 | ![screenshot-3](screenshot-3.jpg)
16 | 


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/screenshot-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #72 - Common Sliders/screenshot-1.jpg


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/screenshot-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #72 - Common Sliders/screenshot-2.jpg


--------------------------------------------------------------------------------
/Day #72 - Common Sliders/screenshot-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #72 - Common Sliders/screenshot-3.jpg


--------------------------------------------------------------------------------
/Day #73 - Gameboy Tetris Clone/README.md:
--------------------------------------------------------------------------------
 1 | # Day #73
 2 | 
 3 | ### Gameboy Tetris Clone
 4 | In this tutorial ([Open in Youtube](https://youtu.be/oNjkDTOj-n8)), we'll explore the process of recreating the iconic Tetris experience right in your browser. From designing the layout with HTML to styling it with CSS for that retro vibe, to implementing the game logic with JavaScript, every step is covered to help you understand the magic behind this timeless game.
 5 | 
 6 | Join us as we delve into the code, unraveling the secrets of game mechanics and user interactions. Whether you're a seasoned developer looking to brush up on your skills or a Tetris enthusiast eager to relive the thrill of stacking blocks, this tutorial has something for everyone.
 7 | 
 8 | So grab your virtual Gameboy and let's embark on this coding adventure together! Don't forget to like, subscribe, and hit the bell icon for more exciting content. Happy coding and happy gaming! 🚀🎮
 9 | 
10 | # Screenshot
11 | Here we have project screenshot :
12 | 
13 | ![screenshot-1](screenshot.jpg)
14 | 


--------------------------------------------------------------------------------
/Day #73 - Gameboy Tetris Clone/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Day #73 - gameboy Tetris Clone</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 | 
14 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.min.js"></script>
15 |     <script src="pieces.js"></script>
16 |     <script src="script.js"></script>
17 | 
18 | </body>
19 | 
20 | </html>


--------------------------------------------------------------------------------
/Day #73 - Gameboy Tetris Clone/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #73 - Gameboy Tetris Clone/screenshot.jpg


--------------------------------------------------------------------------------
/Day #73 - Gameboy Tetris Clone/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 2 | 
 3 | body{
 4 |     margin: 0;
 5 |     background: #000;
 6 |     display: flex;
 7 |     align-items: center;
 8 |     justify-content: center;
 9 |     height: 100vh;
10 | }


--------------------------------------------------------------------------------
/Day #74 - Flashcard App/README.md:
--------------------------------------------------------------------------------
 1 | # Day #74
 2 | 
 3 | ### Gameboy Tetris Clone
 4 | In this tutorial ([Open in Youtube](https://youtu.be/Lmj3zkVSJY4)), Welcome to our web coding tutorial on building a dynamic flashcard app from scratch! In this beginner-friendly video, we'll walk you through the step-by-step process of creating a fully functional flashcard application using HTML, CSS, and JavaScript.
 5 | 
 6 | Here's what you'll learn:
 7 | 🔹 Setting up the basic structure of our HTML file to accommodate flashcards.
 8 | 🔹 Styling our flashcards with CSS to make them visually appealing and user-friendly.
 9 | 🔹 Implementing JavaScript functionality to add, edit, delete, and show/hide answers on our flashcards.
10 | 🔹 Leveraging local storage to persist user-created flashcards, ensuring data persistence between sessions.
11 | 
12 | # Screenshot
13 | Here we have project screenshot :
14 | 
15 | ![screenshot-1](screenshot.png)
16 | 


--------------------------------------------------------------------------------
/Day #74 - Flashcard App/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #74 - Flashcard App/screenshot.png


--------------------------------------------------------------------------------
/Day #75 - Mini Music Player/README.md:
--------------------------------------------------------------------------------
 1 | # Day #75
 2 | 
 3 | ### Mini Music Player
 4 | In this tutorial ([Open in Youtube](https://youtu.be/SAzB_M2wpR0)), We will work on building a mini music player from scratch! In this beginner-friendly video, we'll walk you through the step-by-step process of creating a fully functional music player using HTML, CSS, and JavaScript.
 5 | 
 6 | Here's what you'll learn:
 7 | 
 8 | 🔹 Setting up the basic structure of our HTML file to accommodate the music player.
 9 | 🔹 Styling our music player with CSS to make it visually appealing and user-friendly.
10 | 🔹 Implementing JavaScript functionality to handle play, pause, next and previous.
11 | 🔹 Enhancing user experience with additional features like track progress control.
12 | 
13 | # Screenshot
14 | Here we have project screenshot :
15 | 
16 | ![screenshot-1](screenshot.jpg)
17 | 


--------------------------------------------------------------------------------
/Day #75 - Mini Music Player/assets/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #75 - Mini Music Player/assets/1.jpg


--------------------------------------------------------------------------------
/Day #75 - Mini Music Player/assets/1.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #75 - Mini Music Player/assets/1.mp3


--------------------------------------------------------------------------------
/Day #75 - Mini Music Player/assets/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #75 - Mini Music Player/assets/2.jpg


--------------------------------------------------------------------------------
/Day #75 - Mini Music Player/assets/2.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #75 - Mini Music Player/assets/2.mp3


--------------------------------------------------------------------------------
/Day #75 - Mini Music Player/assets/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #75 - Mini Music Player/assets/3.jpg


--------------------------------------------------------------------------------
/Day #75 - Mini Music Player/assets/3.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #75 - Mini Music Player/assets/3.mp3


--------------------------------------------------------------------------------
/Day #75 - Mini Music Player/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>Day #75 - Mini Music Player | AsmrProg</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <div class="song-info">
16 |             <div class="artist-name"></div>
17 |             <div class="song-name"></div>
18 |             <div class="progress-bar">
19 |                 <div class="fill-bar"></div>
20 |             </div>
21 |             <div class="time">0:00 - 0:00</div>
22 |         </div>
23 |         <div class="disk">
24 |             <div class="circle"></div>
25 |             <div id="cover" class="cover"></div>
26 |         </div>
27 |         <div class="controls">
28 |             <i id="prev" class="prev-btn fa-solid fa-backward"></i>
29 |             <i id="play" class="play-btn fa-solid fa-play"></i>
30 |             <i id="next" class="next-btn fa-solid fa-forward"></i>
31 |         </div>
32 |     </div>
33 | 
34 | 
35 |     <script src="script.js"></script>
36 | 
37 | </body>
38 | 
39 | </html>


--------------------------------------------------------------------------------
/Day #75 - Mini Music Player/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #75 - Mini Music Player/screenshot.jpg


--------------------------------------------------------------------------------
/Day #76 - Page Translator Extension/README.md:
--------------------------------------------------------------------------------
 1 | # Day #76
 2 | 
 3 | ### Page Translator Extension
 4 | In this tutorial ([Open in Youtube](https://youtu.be/ZgjWHabI8Fs)),  In this tutorial, we'll walk you through the step-by-step process of creating a fully functional page translator using HTML, CSS, and JavaScript.️
 5 | 
 6 | #### Here's what you'll learn:
 7 | 
 8 | 🔹 Setting up the basic structure of our extension, including the manifest file.
 9 | 
10 | 🔹 Designing the extension popup with HTML and CSS for a clean and intuitive interface.
11 | 
12 | 🔹 Implementing JavaScript to handle translation requests and inject translations into web pages.
13 | 
14 | 🔹 Integrating with translation APIs to provide accurate and reliable translations.
15 | 
16 | # Screenshot
17 | Here we have project screenshot :
18 | 
19 | ![screenshot](screenshot.jpg)


--------------------------------------------------------------------------------
/Day #76 - Page Translator Extension/background.js:
--------------------------------------------------------------------------------
1 | chrome.runtime.onInstalled.addListener(() => {
2 |     console.log("Page Translator Extension Installed.")
3 | });


--------------------------------------------------------------------------------
/Day #76 - Page Translator Extension/icons/icon128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #76 - Page Translator Extension/icons/icon128.png


--------------------------------------------------------------------------------
/Day #76 - Page Translator Extension/icons/icon16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #76 - Page Translator Extension/icons/icon16.png


--------------------------------------------------------------------------------
/Day #76 - Page Translator Extension/icons/icon32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #76 - Page Translator Extension/icons/icon32.png


--------------------------------------------------------------------------------
/Day #76 - Page Translator Extension/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 3,
 3 |   "name": "Page Translator",
 4 |   "version": "1.0",
 5 |   "description": "Simple Page Translator Extension that we created in AsmrProg Channel.",
 6 |   "permissions": [
 7 |     "activeTab",
 8 |     "scripting"
 9 |   ],
10 |   "background": {
11 |     "service_worker": "background.js"
12 |   },
13 |   "action": {
14 |     "default_popup": "popup.html",
15 |     "default_icon": {
16 |       "16": "icons/icon16.png",
17 |       "32": "icons/icon32.png",
18 |       "128": "icons/icon128.png"
19 |     }
20 |   },
21 |   "icons": {
22 |     "16": "icons/icon16.png",
23 |     "32": "icons/icon32.png",
24 |     "128": "icons/icon128.png"
25 |   }
26 | }


--------------------------------------------------------------------------------
/Day #76 - Page Translator Extension/popup.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     outline: none;
 3 | }
 4 | 
 5 | body{
 6 |     font-family: Arial, sans-serif;
 7 |     padding: 20px;
 8 |     width: 250px;
 9 | }
10 | 
11 | h1{
12 |     font-size: 18px;
13 |     margin: 0;
14 |     padding-bottom: 10px;
15 |     border-bottom: 1px solid #ccc;
16 | }
17 | 
18 | label, select, button{
19 |     margin-top: 10px;
20 |     display: block;
21 |     width: 100%;
22 | }
23 | 
24 | select{
25 |     padding: 5px;
26 |     font-size: 14px;
27 |     cursor: pointer;
28 | }
29 | 
30 | button{
31 |     padding: 10px;
32 |     background-color: #4caf50;
33 |     color: #fff;
34 |     border: none;
35 |     border-radius: 5px;
36 |     cursor: pointer;
37 |     font-size: 14px;
38 |     transition: all 0.3s ease;
39 | }
40 | 
41 | button:hover{
42 |     background-color: #45a049;
43 | }


--------------------------------------------------------------------------------
/Day #76 - Page Translator Extension/popup.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="popup.css">
 8 |     <title>Day #76 - Page Translator Extension | AsmrProg</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <h1>Translate Page</h1>
14 |     <label for="language">Choose Language:</label>
15 |     <select id="language"></select>
16 |     <button id="translate">Translate</button>
17 | 
18 |     <script src="langs.js"></script>
19 |     <script src="popup.js"></script>
20 | </body>
21 | 
22 | </html>


--------------------------------------------------------------------------------
/Day #76 - Page Translator Extension/popup.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', () => {
 2 |     const langSelect = document.getElementById('language');
 3 |     languages.forEach(lang => {
 4 |         const option = document.createElement('option');
 5 |         option.value = lang.code;
 6 |         option.textContent = lang.name;
 7 |         langSelect.appendChild(option);
 8 |     });
 9 | 
10 |     document.getElementById('translate').addEventListener('click', () => {
11 |         const language = langSelect.value;
12 |         chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
13 |             chrome.scripting.executeScript({
14 |                 target: { tabId: tabs[0].id },
15 |                 files: ['translate.js']
16 |             }, () => {
17 |                 chrome.tabs.sendMessage(tabs[0].id, { language });
18 |             });
19 |         });
20 |     });
21 | });


--------------------------------------------------------------------------------
/Day #76 - Page Translator Extension/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #76 - Page Translator Extension/screenshot.jpg


--------------------------------------------------------------------------------
/Day #76 - Page Translator Extension/translate.js:
--------------------------------------------------------------------------------
1 | chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
2 |     if (request.language) {
3 |         const translateApi = `https://translate.google.com/translate?hl=${request.language}&sl=auto&tl=${request.language}&u=${window.location.href}`;
4 |         window.location.href = translateApi;
5 |     }
6 | });


--------------------------------------------------------------------------------
/Day #77 - Image Detector AI/README.md:
--------------------------------------------------------------------------------
 1 | # Day #77
 2 | 
 3 | ### AI Image Detector
 4 | JavaScript AI Image Detector: Analyze Images and Extract Tags & Colors! 🌈
 5 | 
 6 | Ready to supercharge your JavaScript skills with AI? In this tutorial, we'll build an incredible AI Image Detector from scratch! 🚀 Perfect for developers eager to dive into machine learning with JavaScript, this video ([Open in Youtube](https://youtu.be/5gajzXHLhVY)) covers:
 7 | 
 8 | - Introduction to AI-Powered Image Detection API: We will use Imagga API to analyze images🤖
 9 | - Tagging and Color Extraction: See how to analyze images, extract relevant tags, and identify dominant colors to create stunning user experiences. 🎨
10 | - Step-by-Step JavaScript Implementation: Follow along with our detailed coding tutorial, from setting up your project to integrating AI features. 💻
11 | - User-Friendly Interface: Learn to design a responsive, engaging interface that displays image analysis results smoothly. 🌟
12 | - Optimize for Performance: Tips and tricks to ensure your AI image detector runs efficiently on all devices! 📱
13 | 
14 | ## Warning
15 | You need to get your own **API Key** and **API Secret** (in video we showed how!) and replace it in script.js file on line 22 and 23 :
16 | 
17 | ```javascript
18 | const apiKey = 'YOUR_API_KEY';
19 | const apiSecret = 'YOUR_API_SECRET';
20 | ```
21 | 
22 | # Screenshot
23 | Here we have project screenshot :
24 | 
25 | ![screenshot](screenshot.png)


--------------------------------------------------------------------------------
/Day #77 - Image Detector AI/not-found.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #77 - Image Detector AI/not-found.jpg


--------------------------------------------------------------------------------
/Day #77 - Image Detector AI/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #77 - Image Detector AI/screenshot.png


--------------------------------------------------------------------------------
/Day #78 - Google Gemini Clone/README.md:
--------------------------------------------------------------------------------
 1 | # Day #78
 2 | 
 3 | ### Google Gemini Clone
 4 | Build your own Generative AI App using Google Gemini API with Vanilla JavaScript. Create AI App like Google Gemini or ChatGPT step by step tutorial.
 5 | 
 6 | In this tutorial ([Open in Youtube](https://youtu.be/Klcpzw_nvLU)), you will learn to create your own Generative AI app like Google Gemini or ChatGPT using vanilla JavaScript. In this step-by-step tutorial, we will create a Gemini clone app using the Gemini API for absolutely free. You can build this Google Gemini app for your college project or personal portfolio.
 7 | 
 8 | - Introduction to AI-Powered Chat Apps: Learn how to create a generative AI app similar to Google Gemini or ChatGPT using vanilla JavaScript. 🤖
 9 | - Connecting with the Gemini API: Discover how to use the Gemini API to add AI capabilities to your app, allowing for natural language conversations and responses. 🌐
10 | - Step-by-Step JavaScript Implementation: Follow our detailed guide, from setting up your project to implementing AI-powered chat features using vanilla JavaScript. 💻
11 | - User-Friendly Interface: Design a sleek, responsive interface for an engaging chat experience, ensuring smooth interactions and real-time responses. 🌟
12 | - Optimizing Performance: Learn how to keep your AI chat app efficient, running smoothly across different devices and platforms. 📱
13 | 
14 | ## Warning
15 | You need to get your own **API Key** (in video we showed how!) and replace it in script.js file on line 12 :
16 | 
17 | ```javascript
18 | const GOOGLE_API_KEY = "YOUR_API_KEY";
19 | ```
20 | 
21 | # Screenshot
22 | Here we have project screenshot :
23 | 
24 | ![screenshot](screenshot.png)


--------------------------------------------------------------------------------
/Day #78 - Google Gemini Clone/assets/Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #78 - Google Gemini Clone/assets/Logo.png


--------------------------------------------------------------------------------
/Day #78 - Google Gemini Clone/assets/gemini.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M16 8.016A8.522 8.522 0 008.016 16h-.032A8.521 8.521 0 000 8.016v-.032A8.521 8.521 0 007.984 0h.032A8.522 8.522 0 0016 7.984v.032z" fill="url(#prefix__paint0_radial_980_20147)"/><defs><radialGradient id="prefix__paint0_radial_980_20147" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(16.1326 5.4553 -43.70045 129.2322 1.588 6.503)"><stop offset=".067" stop-color="#9168C0"/><stop offset=".343" stop-color="#5684D1"/><stop offset=".672" stop-color="#1BA1E3"/></radialGradient></defs></svg>


--------------------------------------------------------------------------------
/Day #78 - Google Gemini Clone/assets/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #78 - Google Gemini Clone/assets/profile.png


--------------------------------------------------------------------------------
/Day #78 - Google Gemini Clone/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #78 - Google Gemini Clone/screenshot.png


--------------------------------------------------------------------------------
/Day #79 - Simple Python Compiler/README.md:
--------------------------------------------------------------------------------
 1 | # Day #79
 2 | 
 3 | ### Simple Python Compiler
 4 | Want to build your own Python Compiler with a professional code editor? In this tutorial, we’ll create a Simple Python Compiler using CodeMirror (Python mode) for syntax highlighting, indentation, and smooth code editing! 🚀
 5 | 
 6 | 🔥 What You’ll Learn:
 7 | ✅ Integrating CodeMirror (Python Mode) – Set up a feature-rich Python editor with syntax highlighting. ✨
 8 | ✅ Executing Python Code in Real-Time – Handle user input and display instant output dynamically. 🔄
 9 |  Building a User-Friendly UI – Create a responsive and interactive interface for a seamless experience. 🖥️
10 | ✅ Optimizing Performance & Security – Ensure fast and secure Python execution in the browser. 🚀
11 | 
12 | # Screenshot
13 | Here we have project screenshot :
14 | 
15 | ![screenshot](screenshot.png)


--------------------------------------------------------------------------------
/Day #79 - Simple Python Compiler/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Day #79 - Simple Python Compiler | AsmrProg</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/material.min.css">
10 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
11 | </head>
12 | 
13 | <body>
14 | 
15 |     <div class="container">
16 |         <h1>Simple Python Compiler</h1>
17 |         <div id="editor-wrapper">
18 |             <textarea id="code"></textarea>
19 |         </div>
20 |         <button class="run-btn">Run</button>
21 |         <div class="output-container">
22 |             <pre id="output">> Output will appear here...</pre>
23 |         </div>
24 |     </div>
25 | 
26 | 
27 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
28 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/python/python.min.js"></script>
29 |     <script src="script.js"></script>
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/Day #79 - Simple Python Compiler/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #79 - Simple Python Compiler/screenshot.png


--------------------------------------------------------------------------------
/Day #80 - Google Recaptcha/README.md:
--------------------------------------------------------------------------------
 1 | # Day #80
 2 | 
 3 | ### Google reCAPTCHA
 4 | 🛡️ Want to Protect Your Forms from Spam and Bots using Google reCAPTCHA? In this tutorial, we’ll integrate Google reCAPTCHA v2 & v3 step-by-step with HTML, JavaScript, and a touch of modern styling! 💻🤖
 5 | 
 6 | 🔥 What You’ll Learn:
 7 | ✅ Integrating Google reCAPTCHA – Add powerful spam protection to your forms with just HTML, CSS & JS. 🔐
 8 | ✅ reCAPTCHA v2 vs v3 – Understand the differences and choose what’s best for your site. 🧠
 9 | ✅ Seamless User Experience – Keep your UI clean while securing your forms. ✨
10 | ✅ Bonus Tips – reCAPTCHA best practices and error handling techniques. 💡
11 | 
12 | ## Warning
13 | You need to get your own api key (in video we showed how!) and replace it in index.html file on line 29 :
14 | 
15 | ```html
16 | <div class="g-recaptcha" data-sitekey="<YOUR_API_KEY>"></div>
17 | ```
18 | 
19 | # Screenshot
20 | Here we have project screenshot :
21 | 
22 | ![screenshot-1](screenshot-1.png)
23 | ![screenshot-2](screenshot-2.png)


--------------------------------------------------------------------------------
/Day #80 - Google Recaptcha/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <script src="https://www.google.com/recaptcha/api.js"></script>
 9 |     <title>Day #80 - Google Recaptcha API</title>
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <h1>Contact Form</h1>
16 |         <form id="contactForm">
17 |             <div class="form-group">
18 |                 <label for="name">Name:</label>
19 |                 <input type="text" name="name" id="name" required>
20 |             </div>
21 |             <div class="form-group">
22 |                 <label for="email">Email:</label>
23 |                 <input type="email" name="email" id="email" required>
24 |             </div>
25 |             <div class="form-group">
26 |                 <label for="message">Message:</label>
27 |                 <textarea name="message" id="message" required></textarea>
28 |             </div>
29 |             <div class="g-recaptcha" data-sitekey="<YOUR_API_KEY>"></div>
30 |             <button type="submit" class="submit-btn">Submit</button>
31 |         </form>
32 |         <div id="messageContainer"></div>
33 |     </div>
34 | 
35 | 
36 |     <script src="script.js"></script>
37 | </body>
38 | 
39 | </html>


--------------------------------------------------------------------------------
/Day #80 - Google Recaptcha/screenshot-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #80 - Google Recaptcha/screenshot-1.png


--------------------------------------------------------------------------------
/Day #80 - Google Recaptcha/screenshot-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/e218a6453fffeeb8ef8791b65d139238dec6142d/Day #80 - Google Recaptcha/screenshot-2.png


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