├── .vscode
    └── settings.json
├── 23-Loader
    ├── Without_Using_JavaScript(Kinetic)
    │   ├── script.js
    │   ├── index.html
    │   └── style.css
    └── Using_JavaScript
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
├── 14-Animated_Navigation
    ├── script.js
    ├── index.html
    └── style.css
├── 12-FAQ
    ├── script.js
    ├── style.css
    └── index.html
├── 04-Hidden_Search
    ├── script.js
    ├── index.html
    └── style.css
├── 08-Form_Input_Wave
    ├── script.js
    ├── index.html
    └── style.css
├── 44-Custom_Range_Slider
    ├── script.js
    ├── index.html
    └── style.css
├── 03-Rotating_Navigation
    ├── script.js
    ├── style.css
    └── index.html
├── 39-Password_Strength_Background
    ├── script.js
    ├── index.html
    └── style.css
├── 09-Purple_Heart_Rain
    ├── index.html
    ├── script.js
    └── style.css
├── 01-Expanding_Cards
    ├── script.js
    ├── style.css
    └── index.html
├── 20-Button_Ripple_Effect
    ├── index.html
    ├── script.js
    └── style.css
├── 05-Blurry_Loading
    ├── index.html
    ├── script.js
    └── style.css
├── 36-HoverBoard
    ├── index.html
    ├── style.css
    └── script.js
├── 27-Toast_Notification
    ├── index.html
    ├── script.js
    └── style.css
├── 45-Netflix_Mobile_Navigation
    ├── script.js
    ├── index.html
    └── style.css
├── 48-Random_Image_Feed
    ├── index.html
    ├── script.js
    └── style.css
├── 11-Event_KeyCodes
    ├── index.html
    ├── script.js
    └── style.css
├── 37-Pokedex
    ├── index.html
    ├── style.css
    └── script.js
├── 07-Split_Landing_Page
    ├── script.js
    ├── index.html
    └── style.css
├── 10-Dad_Jokes
    ├── script.js
    ├── index.html
    └── style.css
├── 41-Verify_Account
    ├── script.js
    ├── index.html
    └── style.css
├── 17-Movie_App
    ├── index.html
    ├── script.js
    └── style.css
├── 40-3D_Boxes_Background
    ├── script.js
    ├── index.html
    └── style.css
├── 21-Drag_And_Drop
    ├── index.html
    ├── style.css
    └── script.js
├── 15-Increment_Counter
    ├── script.js
    ├── style.css
    └── index.html
├── 06-Scroll_Animation
    ├── script.js
    ├── style.css
    └── index.html
├── 38-Mobile_Navigation
    ├── script.js
    ├── style.css
    └── index.html
├── 30-Auto_Text_Effect
    ├── index.html
    ├── script.js
    └── style.css
├── 13-Random_Choice_Picker
    ├── index.html
    ├── style.css
    └── script.js
├── 22-Drawing_App
    ├── index.html
    ├── style.css
    └── script.js
├── 25-Stick_Navigation
    ├── script.js
    ├── index.html
    └── style.css
├── 32-Good,Cheap,Fast
    ├── script.js
    ├── index.html
    └── style.css
├── 28-Github_Profiles
    ├── index.html
    ├── script.js
    └── style.css
├── 19-Theme_Clock
    ├── index.html
    ├── script.js
    └── style.css
├── 29-Double_Click_Heart
    ├── index.html
    ├── style.css
    └── script.js
├── 49-Todo_List
    ├── index.html
    ├── style.css
    └── script.js
├── 34-Animated_CountDown
    ├── index.html
    ├── script.js
    └── style.css
├── 33-Notes_App
    ├── index.html
    ├── style.css
    └── script.js
├── 02-Progress_Bar
    ├── index.html
    ├── script.js
    └── style.css
├── 35-Image_Carousel
    ├── script.js
    ├── style.css
    └── index.html
├── 42-Live_User_Filter
    ├── index.html
    ├── script.js
    └── style.css
├── 18-Background_Slider
    ├── script.js
    ├── style.css
    └── index.html
├── 43-FeedBack_UI_Design
    ├── script.js
    ├── index.html
    └── style.css
├── 16-Drink_Water
    ├── index.html
    ├── script.js
    └── style.css
├── 24-Content_Placeholder
    ├── script.js
    ├── index.html
    └── style.css
├── 26-Vertical_Slider
    ├── script.js
    ├── style.css
    └── index.html
├── 47-Testimonial_Box_Switcher
    ├── style.css
    └── index.html
├── 46-Quiz_App
    ├── style.css
    ├── index.html
    └── script.js
├── 51-Form_Validation
    ├── index.html
    └── style.css
├── 31-Random_Password_Generator
    ├── style.css
    ├── index.html
    └── script.js
├── 50-Insect_Catch_Game
    ├── index.html
    ├── script.js
    └── style.css
└── README.md


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "cmake.configureOnOpen": true,
3 |     "liveServer.settings.port": 5501
4 | }


--------------------------------------------------------------------------------
/23-Loader/Without_Using_JavaScript(Kinetic)/script.js:
--------------------------------------------------------------------------------
1 | console.log("No JavaScript is Used./nCan be done with keyframes");


--------------------------------------------------------------------------------
/14-Animated_Navigation/script.js:
--------------------------------------------------------------------------------
1 | const toggle = document.getElementById('toggle')
2 | const nav = document.getElementById('nav')
3 | 
4 | toggle.addEventListener('click', () => nav.classList.toggle('active'))


--------------------------------------------------------------------------------
/12-FAQ/script.js:
--------------------------------------------------------------------------------
1 | const toggles = document.querySelectorAll('.faq-toggle');
2 | 
3 | toggles.forEach(toggle => {
4 |     toggle.addEventListener('click', () => {
5 |         toggle.parentNode.classList.toggle('active');
6 |     })
7 | })


--------------------------------------------------------------------------------
/04-Hidden_Search/script.js:
--------------------------------------------------------------------------------
1 | const search = document.querySelector('.search');
2 | const input = document.querySelector('.input');
3 | const btn = document.querySelector('.btn');
4 | 
5 | btn.addEventListener('click', () => {
6 |     search.classList.toggle('active');
7 |     input.focus();
8 | })


--------------------------------------------------------------------------------
/08-Form_Input_Wave/script.js:
--------------------------------------------------------------------------------
1 | const labels = document.querySelectorAll('.form-control label');
2 | 
3 | labels.forEach(label => {
4 |     label.innerHTML = label.innerText
5 |         .split('')
6 |         .map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)
7 |         .join('')
8 | })


--------------------------------------------------------------------------------
/44-Custom_Range_Slider/script.js:
--------------------------------------------------------------------------------
1 | const input = document.querySelector(`input`);
2 | const label = document.querySelector(`label`);
3 | 
4 | input.addEventListener('input', () => {
5 |     const value = Number(input.value)/100;
6 |     input.style.setProperty("--thumb-rotate", `${value*720}deg`);
7 |     label.innerText = Math.round(value*100);
8 | })


--------------------------------------------------------------------------------
/03-Rotating_Navigation/script.js:
--------------------------------------------------------------------------------
1 | const open = document.getElementById('open');
2 | const close = document.getElementById('close');
3 | 
4 | const container = document.querySelector('.container');
5 | 
6 | open.addEventListener('click', () => container.classList.add('show-nav'));
7 | 
8 | close.addEventListener('click', () => container.classList.remove('show-nav'));


--------------------------------------------------------------------------------
/39-Password_Strength_Background/script.js:
--------------------------------------------------------------------------------
 1 | const password = document.querySelector(`#password`);
 2 | const bg = document.querySelector('.background');
 3 | 
 4 | password.addEventListener(`input`, (e) => {
 5 |     const value = e.target.value;
 6 |     const len = value.length;
 7 | 
 8 |     const blur = 20 - len * 2;
 9 | 
10 |     bg.style.filter = `blur(${blur}px)`;
11 | })


--------------------------------------------------------------------------------
/09-Purple_Heart_Rain/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>Purple Heart Rain...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 | </body>
14 | 
15 | <script src="script.js"></script>
16 | 
17 | </html>


--------------------------------------------------------------------------------
/01-Expanding_Cards/script.js:
--------------------------------------------------------------------------------
 1 | let panels = document.getElementsByClassName("panel");
 2 | 
 3 | Array.from(panels).forEach((panel) => {
 4 |     panel.addEventListener("click", () => {
 5 |         removeActive();
 6 |         panel.classList.add("active");
 7 |     });
 8 | });
 9 | 
10 | function removeActive() {
11 |     Array.from(panels).forEach((panel) => {
12 |         panel.classList.remove("active");
13 |     });
14 | }


--------------------------------------------------------------------------------
/20-Button_Ripple_Effect/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>Button Ripple Effect...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <button class="btn">Click Me</button>
14 | 
15 | </body>
16 | <script src="script.js"></script>
17 | 
18 | </html>


--------------------------------------------------------------------------------
/23-Loader/Without_Using_JavaScript(Kinetic)/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>Kinetic Loader...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="kinetic"></div>
14 | 
15 | </body>
16 | 
17 | <script src="script.js"></script>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/05-Blurry_Loading/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>Blurry Loading...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <section class="bg"></section>
14 |     <div class="loading">0%</div>
15 | </body>
16 | 
17 | <script src="script.js"></script>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/36-HoverBoard/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 |     <title>Hoverboard...</title>
 9 |     <link rel="stylesheet" href="style.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="board"></div>
15 | 
16 | </body>
17 | <script src="script.js"></script>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/09-Purple_Heart_Rain/script.js:
--------------------------------------------------------------------------------
 1 | function createHeart() {
 2 |     const heart = document.createElement("div");
 3 |     heart.classList.add("heart");
 4 | 
 5 |     heart.style.left = Math.random() * 100 + "vw";
 6 |     heart.style.animationDuration = Math.random() * 2 + 3 + "s";
 7 | 
 8 |     heart.innerText = "💜";
 9 | 
10 |     document.body.appendChild(heart);
11 | 
12 |     setTimeout(() => {
13 |         heart.remove();
14 |     }, 5000);
15 | }
16 | 
17 | setInterval(createHeart, 300);


--------------------------------------------------------------------------------
/27-Toast_Notification/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>Toast Notification...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 |     <div id="toasts"></div>
13 | 
14 |     <button class="btn" id="button">Show Notification</button>
15 | 
16 | </body>
17 | <script src="script.js"></script>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/45-Netflix_Mobile_Navigation/script.js:
--------------------------------------------------------------------------------
 1 | const slider=document.querySelectorAll(`.slider`);
 2 | const open_btn = document.querySelector(`.open-btn`);
 3 | const close_btn = document.querySelector(`.close-btn`);
 4 | 
 5 | open_btn.addEventListener('click', () => {
 6 |     slider.forEach(slide => {
 7 |         slide.classList.add(`visible`);
 8 |     })
 9 | })
10 | 
11 | close_btn.addEventListener('click', () => {
12 |     slider.forEach(slide => {
13 |         slide.classList.remove(`visible`);
14 |     })
15 | })


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


--------------------------------------------------------------------------------
/48-Random_Image_Feed/script.js:
--------------------------------------------------------------------------------
 1 | const container = document.querySelector(`.container`);
 2 | const url = 'https://source.unsplash.com/random/';
 3 | let row=5;
 4 | 
 5 | for(let i=0;i<row*3;i++) {
 6 |     const img = document.createElement(`img`);
 7 |     img.src=`${url}${getRandomSize()}`;
 8 |     container.appendChild(img);
 9 | }
10 | 
11 | function getRandomSize() {
12 |     return `${getRandomNum()}x${getRandomNum()}`;
13 | }
14 | 
15 | function getRandomNum() {
16 |     return Math.floor(Math.random()*10)+300;
17 | }


--------------------------------------------------------------------------------
/11-Event_KeyCodes/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>Event KeyCodes</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 |     <div id="insert">
13 |         <div class="key">
14 |             Press any key to get keyCode.
15 |         </div>
16 |     </div>
17 | </body>
18 | 
19 | <script src="script.js"></script>
20 | 
21 | </html>


--------------------------------------------------------------------------------
/37-Pokedex/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 |     <title>Pokedex</title>
 9 |     <link rel="stylesheet" href="style.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <h1>Pokedex</h1>
15 | 
16 |     <div class="container" id="container"></div>
17 | 
18 | </body>
19 | <script src="script.js"></script>
20 | 
21 | </html>


--------------------------------------------------------------------------------
/11-Event_KeyCodes/script.js:
--------------------------------------------------------------------------------
 1 | const insert = document.getElementById(`insert`);
 2 | 
 3 | window.addEventListener('keydown', (event) => {
 4 |     insert.innerHTML = `
 5 |     <div class="key">
 6 |     ${event.key === ' ' ? 'Space' : event.key}
 7 |     <small>event.key</small>
 8 |     </div>
 9 | 
10 |     <div class="key">
11 |     ${event.keyCode}
12 |     <small>event.keyCode</small>
13 |     </div>
14 | 
15 |     <div class="key">
16 |     ${event.code}
17 |     <small>event.code</small>
18 |     </div>
19 | 
20 |     `
21 | })


--------------------------------------------------------------------------------
/07-Split_Landing_Page/script.js:
--------------------------------------------------------------------------------
1 | const left = document.querySelector('.left');
2 | const right = document.querySelector('.right');
3 | const container = document.querySelector('.container');
4 | 
5 | left.addEventListener('mouseenter', () => container.classList.add('hover-left'));
6 | left.addEventListener('mouseleave', () => container.classList.remove('hover-left'));
7 | 
8 | right.addEventListener('mouseenter', () => container.classList.add('hover-right'));
9 | right.addEventListener('mouseleave', () => container.classList.remove('hover-right'));


--------------------------------------------------------------------------------
/10-Dad_Jokes/script.js:
--------------------------------------------------------------------------------
 1 | const jokeEl = document.getElementById(`joke`);
 2 | const jokeBtn = document.getElementById(`jokeBtn`);
 3 | 
 4 | jokeBtn.addEventListener('click', generateJoke);
 5 | 
 6 | generateJoke();
 7 | 
 8 | async function generateJoke() {
 9 |     const config = {
10 |         headers: {
11 |             Accept: 'application/json',
12 |         },
13 |     }
14 | 
15 |     const res = await fetch('https://icanhazdadjoke.com', config);
16 |     const data = await res.json();
17 | 
18 |     jokeEl.innerHTML = data.joke;
19 | }


--------------------------------------------------------------------------------
/44-Custom_Range_Slider/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Custom Ranage Slider...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | <body>
11 | 
12 |     <input type="range" id="slider" name="slider" value="0">
13 |     <label for="slider">0</label>
14 | </body>
15 | 
16 | <script src="script.js"></script>
17 | </html>


--------------------------------------------------------------------------------
/48-Random_Image_Feed/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   display: flex;
 7 |   align-items: center;
 8 |   justify-content: center;
 9 |   margin: 0;
10 |   min-height: 100vh;
11 |   flex-direction: column;
12 | }
13 | 
14 | .container {
15 |     display: flex;
16 |     align-items: center;
17 |     justify-content: center;
18 |     max-width: 1000px;
19 |     flex-wrap: wrap;
20 | }
21 | 
22 | .container img {
23 |     object-fit: cover;
24 |     margin: 10px;
25 |     height: 300px;
26 |     width: 300px;
27 |     max-width: 100%;
28 | }


--------------------------------------------------------------------------------
/41-Verify_Account/script.js:
--------------------------------------------------------------------------------
 1 | const codes = document.querySelectorAll(`.code`);
 2 | 
 3 | codes[0].focus();
 4 | const len = codes.length;
 5 | 
 6 | codes.forEach((code, idx) => {
 7 |     code.addEventListener('keydown', (e) => {
 8 |         if (e.key >= 0 && e.key <= 9) {
 9 |             codes[idx].value = ``;
10 |             if (idx != (len - 1))
11 |                 setTimeout(() => codes[idx + 1].focus(), 10);
12 |         } else if (e.key == 'Backspace') {
13 |             if (idx != 0)
14 |                 setTimeout(() => codes[idx - 1].focus(), 10);
15 |         }
16 |     })
17 | });


--------------------------------------------------------------------------------
/17-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 |     <title>Movie App...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <header>
14 |         <form id="form">
15 |             <input type="text" id="search" class="search" placeholder="Search">
16 |         </form>
17 |     </header>
18 | 
19 |     <main id="main"></main>
20 | 
21 | </body>
22 | 
23 | <script src="script.js"></script>
24 | 
25 | </html>


--------------------------------------------------------------------------------
/10-Dad_Jokes/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>Dad Jokes...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="container">
14 |         <h3>Don't Laugh Challenge</h3>
15 |         <div class="joke" id="joke">// Joke goes here</div>
16 |         <button class="btn" id="jokeBtn">Get Another Joke</button>
17 |     </div>
18 | 
19 | </body>
20 | 
21 | <script src="script.js"></script>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/09-Purple_Heart_Rain/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     display: flex;
 7 |     align-items: center;
 8 |     justify-content: center;
 9 |     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10 |     margin: 0;
11 |     min-height: 100vh;
12 |     background-color: cornflowerblue;
13 | }
14 | 
15 | .heart {
16 |     position: fixed;
17 |     top: -1vh;
18 |     font-size: 2rem;
19 |     transform: translateY(0);
20 |     animation: fall 3s linear forwards;
21 | }
22 | 
23 | @keyframes fall {
24 |     to {
25 |         transform: translateY(105vh);
26 |     }
27 | }


--------------------------------------------------------------------------------
/40-3D_Boxes_Background/script.js:
--------------------------------------------------------------------------------
 1 | const boxesContainer = document.getElementById('boxes');
 2 | const btn = document.getElementById('btn');
 3 | 
 4 | btn.addEventListener('click', () => boxesContainer.classList.toggle('big'));
 5 | 
 6 | function createBoxes() {
 7 |     for (let i = 0; i < 4; i++) {
 8 |         for (let j = 0; j < 4; j++) {
 9 |             const box = document.createElement('div');
10 |             box.classList.add('box');
11 |             box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`;
12 |             boxesContainer.appendChild(box);
13 |         }
14 |     }
15 | }
16 | 
17 | createBoxes();


--------------------------------------------------------------------------------
/21-Drag_And_Drop/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>Drag and Drop...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="empty">
14 |         <div class="fill" draggable="true"></div>
15 |     </div>
16 |     <div class="empty"></div>
17 |     <div class="empty"></div>
18 |     <div class="empty"></div>
19 |     <div class="empty"></div>
20 | 
21 | </body>
22 | 
23 | <script src="script.js"></script>
24 | 
25 | </html>


--------------------------------------------------------------------------------
/15-Increment_Counter/script.js:
--------------------------------------------------------------------------------
 1 | const counters = document.querySelectorAll(`.counter`);
 2 | 
 3 | counters.forEach(counter => {
 4 |     counter.innerText = `0`;
 5 | 
 6 |     const updateCounter = () => {
 7 |         const target = +counter.getAttribute(`data-target`);
 8 |         const c = +counter.innerText;
 9 | 
10 |         const increment = target / 200;
11 | 
12 |         if (c < target) {
13 |             counter.innerText = `${Math.ceil(c+increment)}`;
14 |             setTimeout(updateCounter, 1);
15 |         } else {
16 |             counter.innerText = target;
17 |         }
18 |     }
19 | 
20 |     updateCounter();
21 | });


--------------------------------------------------------------------------------
/05-Blurry_Loading/script.js:
--------------------------------------------------------------------------------
 1 | const loadText = document.querySelector('.loading');
 2 | const bg = document.querySelector('.bg');
 3 | 
 4 | let load = 0;
 5 | 
 6 | let int = setInterval(blurring, 30);
 7 | 
 8 | function blurring() {
 9 |     load++;
10 | 
11 |     if (load > 99)
12 |         clearInterval(int);
13 | 
14 |     loadText.innerText = `${load}%`;
15 |     loadText.style.opacity = scale(load, 0, 100, 1, 0);
16 |     bg.style.filter = `blur(${scale(load,0,100,30,0)}px)`;
17 | }
18 | 
19 | const scale = (num, in_min, in_max, out_min, out_max) => {
20 |     return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
21 | }


--------------------------------------------------------------------------------
/06-Scroll_Animation/script.js:
--------------------------------------------------------------------------------
 1 | const boxes = document.querySelectorAll('.box');
 2 | 
 3 | window.addEventListener('scroll', showBox);
 4 | 
 5 | showBox();
 6 | 
 7 | function showBox() {
 8 |     const top = window.scrollY;
 9 |     const bottom = window.innerHeight + window.scrollY;
10 | 
11 |     Array.from(boxes).forEach(box => {
12 |         const boxMid = box.offsetTop + box.offsetHeight / 2;
13 |         const boxTop = box.offsetTop + box.offsetHeight / 2;
14 |         if (boxMid >= window.scrollY && boxTop <= bottom)
15 |             box.classList.add('active');
16 |         else
17 |             box.classList.remove('active');
18 |     })
19 | }


--------------------------------------------------------------------------------
/38-Mobile_Navigation/script.js:
--------------------------------------------------------------------------------
 1 | const contents = document.querySelectorAll('.content');
 2 | const listItems = document.querySelectorAll('nav ul li');
 3 | 
 4 | listItems.forEach((item, idx) => {
 5 |     item.addEventListener('click', () => {
 6 |         hideAllContents();
 7 |         hideAllItems();
 8 | 
 9 |         item.classList.add(`active`);
10 |         contents[idx].classList.add(`show`);
11 |     })
12 | })
13 | 
14 | function hideAllContents() {
15 |     contents.forEach(content => content.classList.remove(`show`));
16 | }
17 | 
18 | 
19 | function hideAllItems() {
20 |     listItems.forEach(item => item.classList.remove(`active`));
21 | }


--------------------------------------------------------------------------------
/20-Button_Ripple_Effect/script.js:
--------------------------------------------------------------------------------
 1 | const btn = document.querySelector(`.btn`);
 2 | 
 3 | btn.addEventListener(`click`, function(e) {
 4 |     const x = e.clientX;
 5 |     const y = e.clientY;
 6 | 
 7 |     const buttonTop = e.target.offsetTop;
 8 |     const buttonLeft = e.target.offsetLeft;
 9 | 
10 |     const actualX = x - buttonLeft;
11 |     const actualY = y - buttonTop;
12 | 
13 |     const circle = document.createElement(`span`);
14 |     circle.classList.add(`circle`);
15 |     circle.style.top = `${actualY}px`;
16 |     circle.style.left = `${actualX}px`;
17 | 
18 | 
19 |     this.appendChild(circle);
20 | 
21 |     setTimeout(() => circle.remove(), 500)
22 | })


--------------------------------------------------------------------------------
/30-Auto_Text_Effect/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>Auto Text Effect</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="text">
14 |         <div class="content"></div>
15 |     </div>
16 | 
17 |     <div class="speed">
18 |         <div class="control">
19 |             <span id="span">Speed:<input type="number" id="speed" min="1" max="10"></span>
20 |         </div>
21 |     </div>
22 | 
23 | </body>
24 | 
25 | <script src="script.js"></script>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/13-Random_Choice_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 |     <title>Random_Choice_Picker</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="container">
14 |         <h3>Enter all of the choices divided by a comma (','). <br> Press enter when you're done</h3>
15 |         <textarea id="textarea" placeholder="Enter choices here..."></textarea>
16 | 
17 |         <div id="tags"></div>
18 |     </div>
19 | 
20 | 
21 | </body>
22 | <script src="script.js"></script>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/36-HoverBoard/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | body {
 8 |     background-color: #111;
 9 |     display: flex;
10 |     align-items: center;
11 |     justify-content: center;
12 |     height: 100vh;
13 |     overflow: hidden;
14 | }
15 | 
16 | .board {
17 |     display: flex;
18 |     align-items: center;
19 |     justify-content: center;
20 |     flex-wrap: wrap;
21 |     max-width: 400px;
22 | }
23 | 
24 | .square {
25 |     height: 16px;
26 |     width: 16px;
27 |     margin: 2px;
28 |     box-shadow: 0 0 2px white;
29 |     background-color: black;
30 |     transition: all 2s ease;
31 | }
32 | 
33 | .square:hover {
34 |     transition-duration: 0s;
35 | }


--------------------------------------------------------------------------------
/22-Drawing_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 |     <title>Drawing App...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 |     <canvas id="canvas" width="550" height="550"></canvas>
13 | 
14 |     <div class="toolbox">
15 |         <button id="decrease">-</button>
16 |         <span id="size">10</span>
17 |         <button id="increase">+</button>
18 |         <input type="color" name="color" id="color">
19 |         <button id="clear">Clear</button>
20 |     </div>
21 | 
22 | </body>
23 | 
24 | <script src="script.js"></script>
25 | 
26 | </html>


--------------------------------------------------------------------------------
/25-Stick_Navigation/script.js:
--------------------------------------------------------------------------------
 1 | const navbar = document.querySelector(`.navbar`);
 2 | const title = document.querySelector(`.title`);
 3 | const list = document.querySelector(`.list`);
 4 | const navdiv = document.querySelector(`.navdiv`);
 5 | 
 6 | 
 7 | window.addEventListener('scroll', () => {
 8 |     if (window.scrollY > navbar.offsetHeight + 150) {
 9 |         navbar.classList.add(`active`);
10 |         title.classList.add(`active`);
11 |         list.classList.add('active');
12 |         navdiv.classList.add('active');
13 |     } else {
14 |         navbar.classList.remove(`active`);
15 |         title.classList.remove(`active`);
16 |         list.classList.remove('active');
17 |         navdiv.classList.remove('active');
18 |     }
19 | })


--------------------------------------------------------------------------------
/32-Good,Cheap,Fast/script.js:
--------------------------------------------------------------------------------
 1 | const toggles = document.querySelectorAll('.toggle')
 2 | const good = document.querySelector('#good')
 3 | const cheap = document.querySelector('#cheap')
 4 | const fast = document.querySelector('#fast')
 5 | 
 6 | toggles.forEach(toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target)))
 7 | 
 8 | function doTheTrick(theClickedOne) {
 9 |     if (good.checked && cheap.checked && fast.checked) {
10 |         if (good === theClickedOne) {
11 |             fast.checked = false
12 |         }
13 | 
14 |         if (cheap === theClickedOne) {
15 |             good.checked = false
16 |         }
17 | 
18 |         if (fast === theClickedOne) {
19 |             cheap.checked = false
20 |         }
21 |     }
22 | }


--------------------------------------------------------------------------------
/07-Split_Landing_Page/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>Split Landing Page...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="container">
14 |         <div class="split left">
15 |             <h1>The Mountains</h1>
16 |             <a href="#" class="btn">Click To Visit</a>
17 |         </div>
18 |         <div class="split right">
19 |             <h1>The Tower</h1>
20 |             <a href="#" class="btn">Click To Visit</a>
21 |         </div>
22 |     </div>
23 | 
24 | </body>
25 | <script src="script.js"></script>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/05-Blurry_Loading/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     font-family: Georgia, 'Times New Roman', Times, serif;
 7 |     display: flex;
 8 |     align-items: center;
 9 |     justify-content: center;
10 |     height: 100vh;
11 |     overflow: hidden;
12 |     margin: 0;
13 | }
14 | 
15 | .bg {
16 |     background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80') no-repeat center center/cover;
17 |     position: absolute;
18 |     top: -30px;
19 |     left: -30px;
20 |     width: calc(100vw + 60px);
21 |     height: calc(100vh + 60px);
22 |     z-index: -1;
23 |     filter: blur(0px);
24 | }
25 | 
26 | .loading {
27 |     font-size: 50px;
28 |     color: white;
29 | }


--------------------------------------------------------------------------------
/28-Github_Profiles/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>Github Profiles...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <form class="form">
14 |         <input type="text" id="search" class="search" placeholder="Search a Github User">
15 |     </form>
16 | 
17 |     <main class="main">
18 |     </main>
19 | 
20 | </body>
21 | <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js" integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==" crossorigin="anonymous"></script>
22 | <script src="script.js"></script>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/40-3D_Boxes_Background/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 |     <title>3D Boxes Background...</title>
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
10 |     <link rel="stylesheet" href="style.css">
11 | </head>
12 | 
13 | <body>
14 | 
15 |     <div id="btn" class="magic">Magic 🎩</div>
16 |     <div class="boxes big" id="boxes"></div>
17 | 
18 | </body>
19 | <script src="script.js"></script>
20 | 
21 | </html>


--------------------------------------------------------------------------------
/30-Auto_Text_Effect/script.js:
--------------------------------------------------------------------------------
 1 | const content = document.querySelector(`.content`);
 2 | const control = document.querySelector(`#speed`);
 3 | 
 4 | const text = `Hi 👋 all, welcome to Anshul's world of Javascript Project. Thanks for visiting 🙏. `;
 5 | 
 6 | var val = 3;
 7 | control.value = val;
 8 | var speed = 300 / val;
 9 | 
10 | var idx = 0;
11 | const length = text.length;
12 | 
13 | control.addEventListener('change', (e) => {
14 |     val = e.target.value;
15 |     speed = 300 / val;
16 | })
17 | 
18 | function writeText() {
19 |     console.log(`call`);
20 |     if (idx === length) {
21 |         content.innerText = ``;
22 |         idx = 0;
23 |     } else {
24 |         content.innerText = text.slice(0, idx);
25 |         idx++;
26 |     }
27 | 
28 |     setTimeout(writeText, speed);
29 | }
30 | 
31 | writeText();


--------------------------------------------------------------------------------
/15-Increment_Counter/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@600&display=swap');
 2 | * {
 3 |     box-sizing: border-box;
 4 | }
 5 | 
 6 | body {
 7 |     background-color: #8e44ad;
 8 |     color: white;
 9 |     font-family: 'Baloo Bhaina 2', cursive;
10 |     display: flex;
11 |     align-items: center;
12 |     justify-content: center;
13 |     height: 100vh;
14 |     margin: 0px;
15 |     overflow: hidden;
16 | }
17 | 
18 | .counter-countainer {
19 |     display: flex;
20 |     align-items: center;
21 |     justify-content: center;
22 |     flex-direction: column;
23 |     margin: 30px 50px;
24 | }
25 | 
26 | .counter {
27 |     font-size: 60px;
28 |     margin-top: 10px;
29 | }
30 | 
31 | @media (max-width: 580px) {
32 |     body {
33 |         flex-direction: column;
34 |     }
35 | }


--------------------------------------------------------------------------------
/19-Theme_Clock/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>Theme Clock...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <button class="toggle">Dark mode</button>
14 | 
15 |     <div class="clock-container">
16 |         <div class="clock">
17 |             <div class="needle hour"></div>
18 |             <div class="needle minute"></div>
19 |             <div class="needle second"></div>
20 |             <div class="center-point"></div>
21 |         </div>
22 | 
23 |         <div class="time"></div>
24 |         <div class="date"></div>
25 |     </div>
26 | 
27 | </body>
28 | <script src="script.js"></script>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/29-Double_Click_Heart/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>Double Click Heart...</title>
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
 9 |     <link rel="stylesheet" href="style.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <h2>Double Click on Image to <i class="fas fa-heart"></i> it.</h2>
15 |     <p class="text">You liked it <span class="times">0</span> times.</p>
16 | 
17 |     <div class="img_block"></div>
18 | 
19 | </body>
20 | <script src="script.js"></script>
21 | 
22 | </html>


--------------------------------------------------------------------------------
/04-Hidden_Search/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>Hidden Search Button...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
10 | 
11 | </head>
12 | 
13 | <body>
14 |     <div class="search">
15 |         <input type="text" class="input" placeholder="Search...">
16 |         <button class="btn">
17 |         <i class="fas fa-search"></i>
18 |     </button>
19 |     </div>
20 | </body>
21 | <script src="script.js"></script>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/49-Todo_List/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |         <title>ToDo List...</title>
 8 |         <link rel="stylesheet" href="style.css">
 9 |     </head>
10 |     <body>
11 |         <h1>todos</h1>
12 | 
13 |         <form class="form">
14 | 
15 |             <input type="text" id="input" class="input" placeholder="Enter your todo" autocomplete="off">
16 | 
17 |             <ul class="todos" id="todos"></ul>
18 |         </form>
19 | 
20 |         <small>Left click to toggle completed.
21 |             <br>
22 |             Right click to delete todo</small>
23 |     </body>
24 |     <script src="script.js"></script>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/14-Animated_Navigation/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>Animated Navigation...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <nav class="active" id="nav">
14 |         <ul>
15 |             <li><a href="#">Home</a></li>
16 |             <li><a href="#">Works</a></li>
17 |             <li><a href="#">About</a></li>
18 |             <li><a href="#">Contact</a></li>
19 |         </ul>
20 | 
21 |         <button class="icon" id="toggle">
22 |             <div class="line line1"></div>
23 |             <div class="line line2"></div>
24 |         </button>
25 |     </nav>
26 | 
27 | </body>
28 | <script src="script.js"></script>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/34-Animated_CountDown/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 |     <title>Animated Countdown...</title>
 9 |     <link rel="stylesheet" href="style.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="counter">
15 |         <div class="nums">
16 |             <span>3</span>
17 |             <span>2</span>
18 |             <span>1</span>
19 |             <span>0</span>
20 |         </div>
21 |         <h3>Get Ready</h3>
22 |     </div>
23 | 
24 |     <div id="final" class="final removed">
25 |         <h1>GO</h1>
26 |         <button id="btn">Replay</button>
27 |     </div>
28 | 
29 | 
30 | </body>
31 | <script src="script.js"></script>
32 | 
33 | </html>


--------------------------------------------------------------------------------
/36-HoverBoard/script.js:
--------------------------------------------------------------------------------
 1 | const board = document.querySelector('.board');
 2 | const colors = [`#c859e7`, `#59e7d7`, '#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71'];
 3 | 
 4 | const totalSubBoxes = 500;
 5 | const len = colors.length;
 6 | 
 7 | for (let i = 0; i < totalSubBoxes; i++) {
 8 |     const square = document.createElement(`div`);
 9 |     square.classList.add(`square`);
10 | 
11 |     square.addEventListener('mouseover', () => {
12 |         const idx = Math.floor(Math.random() * len);
13 |         square.style.background = colors[idx];
14 |         square.style.boxShadow = `0 0 2px ${colors[idx]}, 0 0 10x ${colors[idx]}`;
15 |     });
16 | 
17 |     square.addEventListener('mouseout', () => {
18 |         square.style.background = `black`;
19 |         element.style.boxShadow = '0 0 2px white'
20 |     });
21 | 
22 |     board.appendChild(square);
23 | }


--------------------------------------------------------------------------------
/23-Loader/Using_JavaScript/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,
 7 |             initial-scale=1.0">
 8 |     <title>
 9 |         Kinetic Loader...
10 |     </title>
11 |     <link rel="stylesheet" href="style.css">
12 | </head>
13 | 
14 | <body>
15 |     <h1 class="intro">
16 |         Click Button to Continue.
17 |     </h1>
18 |     <button id="btn">
19 |         Click
20 |         Me
21 |     </button>
22 |     <div class="before
23 |             none"></div>
24 |     <div class="after
25 |             none"></div>
26 |     <div class="count
27 |             none">0%</div>
28 |     <h1 class="end
29 |             none">
30 |         Congratulations you'ar done 🎉🎉🎉.
31 |     </h1>
32 | </body>
33 | <script src="script.js"></script>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/33-Notes_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 |     <title>Notes App</title>
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
10 |     <link rel="stylesheet" href="style.css">
11 | 
12 | </head>
13 | 
14 | <body>
15 | 
16 |     <button class="add" id="add">
17 |         <i class="fas fa-plus"></i>Add Note
18 |     </button>
19 | 
20 | </body>
21 | <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.2/marked.min.js"></script>
22 | <script src="script.js"></script>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/11-Event_KeyCodes/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     background-color: #e1e1e1;
 7 |     font-family: 'Arial Narrow', Arial, sans-serif;
 8 |     display: flex;
 9 |     align-items: center;
10 |     justify-content: center;
11 |     text-align: center;
12 |     height: 100vh;
13 |     overflow: hidden;
14 |     margin: 0;
15 | }
16 | 
17 | .key {
18 |     border: 1px solid #999;
19 |     background-color: #eee;
20 |     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
21 |     display: inline-flex;
22 |     align-items: center;
23 |     font-size: 20px;
24 |     font-weight: bold;
25 |     padding: 20px;
26 |     flex-direction: column;
27 |     margin: 10px;
28 |     min-width: 150px;
29 |     position: relative;
30 | }
31 | 
32 | .key small {
33 |     position: absolute;
34 |     top: -24px;
35 |     left: 0;
36 |     text-align: center;
37 |     width: 100%;
38 |     color: #555;
39 |     font-size: 14px;
40 | }


--------------------------------------------------------------------------------
/21-Drag_And_Drop/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     display: flex;
 7 |     align-items: center;
 8 |     justify-content: center;
 9 |     height: 100vh;
10 |     overflow: hidden;
11 |     margin: 0;
12 |     background-color: coral;
13 | }
14 | 
15 | .empty {
16 |     margin: 15px;
17 |     height: 150px;
18 |     width: 150px;
19 |     background-color: white;
20 |     border-radius: 5px;
21 |     border: 4px solid black;
22 |     overflow: hidden;
23 | }
24 | 
25 | .fill {
26 |     background-image: url(https://source.unsplash.com/random/150x150);
27 |     height: 142px;
28 |     width: 142px;
29 |     cursor: pointer;
30 |     box-shadow: none;
31 | }
32 | 
33 | .hold {
34 |     border: 5px solid white;
35 | }
36 | 
37 | .hovered {
38 |     background-color: grey;
39 |     border: 5px dotted white;
40 | }
41 | 
42 | @media (max-width:800px) {
43 |     body {
44 |         flex-direction: column;
45 |     }
46 | }


--------------------------------------------------------------------------------
/02-Progress_Bar/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>Progress Bar...</title>
 8 |     <link rel="stylesheet" type="text/css" href="style.css" />
 9 | </head>
10 | 
11 | <body>
12 |     <div class="container">
13 |         <div class="box circle active">1</div>
14 |         <div class="box line"></div>
15 |         <div class="box circle">2</div>
16 |         <div class="box line"></div>
17 |         <div class="box circle">3</div>
18 |         <div class="box line"></div>
19 |         <div class="box circle">4</div>
20 |     </div>
21 | 
22 |     <div class="another">
23 |         <div class="nav">
24 |             <button class="btn disabled" id="prev">Prev</button>
25 |             <button class="btn" id="next">Next</button>
26 |         </div>
27 |     </div>
28 | </body>
29 | <script src="script.js"></script>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/08-Form_Input_Wave/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>Form Input Wave...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="container">
14 |         <h1>Login Here</h1>
15 |         <form>
16 |             <div class="form-control">
17 |                 <input type="text " required>
18 |                 <label>Email</label>
19 |             </div>
20 |             <div class="form-control">
21 |                 <input type="password " required>
22 |                 <label>Password</label>
23 |             </div>
24 | 
25 |             <button class="btn">Login</button>
26 | 
27 |             <p class="text">Don't have an account? <a href="#">Register</a></p>
28 |         </form>
29 |     </div>
30 | 
31 | </body>
32 | 
33 | <script src="script.js"></script>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/35-Image_Carousel/script.js:
--------------------------------------------------------------------------------
 1 | const imgs = document.getElementById(`imgs`);
 2 | const leftBtn = document.getElementById(`left`);
 3 | const rightBtn = document.getElementById(`right`);
 4 | 
 5 | const img = document.querySelectorAll(`#imgs img`);
 6 | const len = img.length;
 7 | 
 8 | let idx = 0;
 9 | 
10 | let interval = setInterval(run, 2000);
11 | 
12 | function run() {
13 |     idx++;
14 |     changeImage();
15 | }
16 | 
17 | function changeImage() {
18 |     if (idx > len - 1)
19 |         idx = 0;
20 |     else if (idx < 0)
21 |         idx = len - 1;
22 | 
23 |     imgs.style.transform = `translateX(${-idx*550}px)`;
24 | }
25 | 
26 | function resetInterval() {
27 |     clearInterval(interval);
28 |     interval = setInterval(run, 2000);
29 | }
30 | 
31 | rightBtn.addEventListener('click', () => {
32 |     idx++;
33 |     changeImage();
34 |     resetInterval();
35 | })
36 | 
37 | leftBtn.addEventListener('click', () => {
38 |     idx--;
39 |     changeImage();
40 |     resetInterval();
41 | })


--------------------------------------------------------------------------------
/42-Live_User_Filter/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 |     <title>Live User Filter...</title>
 9 |     <link rel="stylesheet" href="style.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <header class="header">
16 |             <h4 class="title">
17 |                 Live User Filter
18 |             </h4>
19 | 
20 |             <small class="subtitle">
21 |                 Search by Name and/or Location
22 |             </small>
23 | 
24 |             <input type="text" id="filter" placeholder="Search">
25 |         </header>
26 | 
27 |         <ul class="user-list" id="result">
28 |             <li>
29 |                 <h3>Loading...</h3>
30 |             </li>
31 |         </ul>
32 |     </div>
33 | 
34 | </body>
35 | <script src="script.js"></script>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/06-Scroll_Animation/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     background-color: rgb(247, 237, 155);
 7 |     font-family: 'Courier New', Courier, monospace;
 8 |     display: flex;
 9 |     align-items: center;
10 |     justify-content: center;
11 |     flex-direction: column;
12 |     overflow-x: hidden;
13 |     margin: 0;
14 | }
15 | 
16 | h1 {
17 |     margin: 10px;
18 | }
19 | 
20 | .box {
21 |     font-size: 30px;
22 |     font-style: bold italic;
23 |     background-color: rgb(105, 81, 241);
24 |     color: white;
25 |     width: 400px;
26 |     height: 200px;
27 |     display: flex;
28 |     align-items: center;
29 |     justify-content: center;
30 |     margin: 10px;
31 |     border-radius: 10px;
32 |     box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.5);
33 |     transform: translateX(400%);
34 |     transition: all 0.5s ease-in-out;
35 | }
36 | 
37 | .box:nth-of-type(even) {
38 |     transform: translateX(-400%);
39 | }
40 | 
41 | .box.active {
42 |     transform: translateX(0);
43 | }


--------------------------------------------------------------------------------
/27-Toast_Notification/script.js:
--------------------------------------------------------------------------------
 1 | const button = document.getElementById('button')
 2 | const toasts = document.getElementById('toasts')
 3 | 
 4 | const messages = [
 5 |     'Message One',
 6 |     'Message Two',
 7 |     'Message Three',
 8 |     'Message Four',
 9 | ]
10 | 
11 | const types = ['info', 'success', 'error']
12 | 
13 | button.addEventListener('click', () => createNotification())
14 | 
15 | function createNotification(message = null, type = null) {
16 |     const notif = document.createElement('div')
17 |     notif.classList.add('toast')
18 |     notif.classList.add(type ? type : getRandomType())
19 | 
20 |     notif.innerText = message ? message : getRandomMessage()
21 | 
22 |     toasts.appendChild(notif)
23 | 
24 |     setTimeout(() => {
25 |         notif.remove()
26 |     }, 3000)
27 | }
28 | 
29 | function getRandomMessage() {
30 |     return messages[Math.floor(Math.random() * messages.length)]
31 | }
32 | 
33 | function getRandomType() {
34 |     return types[Math.floor(Math.random() * types.length)]
35 | }


--------------------------------------------------------------------------------
/18-Background_Slider/script.js:
--------------------------------------------------------------------------------
 1 | const body = document.body;
 2 | const slides = document.querySelectorAll(`.slide`);
 3 | const leftBtn = document.getElementById(`left`);
 4 | const rightBtn = document.getElementById(`right`);
 5 | 
 6 | let activeSlide = 0;
 7 | 
 8 | setBgToBody();
 9 | 
10 | rightBtn.addEventListener(`click`, () => {
11 |     activeSlide++;
12 | 
13 |     if (activeSlide >= slides.length)
14 |         activeSlide = 0;
15 | 
16 |     setBgToBody();
17 |     setActiveSlide();
18 | })
19 | 
20 | leftBtn.addEventListener(`click`, () => {
21 |     activeSlide--;
22 | 
23 |     if (activeSlide < 0)
24 |         activeSlide = slides.length - 1;
25 | 
26 |     setBgToBody();
27 |     setActiveSlide();
28 | })
29 | 
30 | function setBgToBody() {
31 |     body.style.backgroundImage = slides[activeSlide].style.backgroundImage
32 | }
33 | 
34 | function setActiveSlide() {
35 |     slides.forEach((slide) => {
36 |         slide.classList.remove(`active`);
37 |     })
38 | 
39 |     slides[activeSlide].classList.add(`active`);
40 | }


--------------------------------------------------------------------------------
/21-Drag_And_Drop/script.js:
--------------------------------------------------------------------------------
 1 | const fill = document.querySelector(`.fill`);
 2 | const empties = document.querySelectorAll(`.empty`);
 3 | 
 4 | function dragStart() {
 5 |     this.className += ' hold';
 6 |     setTimeout(() => this.className = 'invisible', 0);
 7 | }
 8 | 
 9 | function dragEnd() {
10 |     this.className = 'fill';
11 | }
12 | 
13 | function dragOver(e) {
14 |     e.preventDefault();
15 | }
16 | 
17 | function dragEnter(e) {
18 |     e.preventDefault();
19 |     this.className += ' hovered';
20 | }
21 | 
22 | function dragLeave() {
23 |     this.className = 'empty';
24 | }
25 | 
26 | function dragDrop() {
27 |     this.className = 'empty';
28 |     this.append(fill);
29 | }
30 | 
31 | fill.addEventListener('dragstart', dragStart);
32 | fill.addEventListener('dragend', dragEnd);
33 | 
34 | empties.forEach((empty) => {
35 |     empty.addEventListener('dragover', dragOver);
36 |     empty.addEventListener('dragenter', dragEnter);
37 |     empty.addEventListener('dragleave', dragLeave);
38 |     empty.addEventListener('drop', dragDrop);
39 | })


--------------------------------------------------------------------------------
/43-FeedBack_UI_Design/script.js:
--------------------------------------------------------------------------------
 1 | const container = document.querySelector(`.container`);
 2 | const choices = document.querySelectorAll(`.choice`);
 3 | const btn = document.getElementById(`btn`);
 4 | const match = [ `Unhappy` , `Neutral` , 'Satisfied'];
 5 | 
 6 | choices.forEach(choice => {
 7 |     choice.addEventListener('click', () => {
 8 |         choices.forEach(temp => {
 9 |             temp.classList.remove(`active`);
10 |         })
11 | 
12 |         choice.classList.add(`active`);
13 |     })
14 | })
15 | 
16 | btn.addEventListener('click', () => {
17 |     let rating =``;
18 |     choices.forEach((choice, idx) => {
19 |         if(choice.classList.contains(`active`)) 
20 |             rating = match[idx];
21 |     })
22 |     
23 |     container.innerHTML = `
24 |     <i class="fas fa-heart"></i>
25 |     <strong class="greeting">Thank You!</strong>
26 | 
27 |     <p class="feedback">FeedBack : <strong>${rating}</strong></p>
28 |     <p class="feedbackPromise">We'll use your feedback to improve our customer support</p>
29 |     `;
30 | })


--------------------------------------------------------------------------------
/20-Button_Ripple_Effect/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     background-color: black;
 7 |     display: flex;
 8 |     align-items: center;
 9 |     justify-content: center;
10 |     height: 100vh;
11 |     overflow: hidden;
12 |     margin: 0;
13 | }
14 | 
15 | button {
16 |     font-size: 23px;
17 |     color: white;
18 |     background-color: crimson;
19 |     border: 0;
20 |     padding: 20px 30px;
21 |     border-radius: 5px;
22 |     text-transform: uppercase;
23 |     letter-spacing: 4px;
24 |     cursor: pointer;
25 |     overflow: hidden;
26 |     position: relative;
27 | }
28 | 
29 | button:focus {
30 |     outline: none;
31 | }
32 | 
33 | button .circle {
34 |     position: absolute;
35 |     background-color: white;
36 |     width: 100px;
37 |     height: 100px;
38 |     border-radius: 50%;
39 |     transform: translate(-50%, -50%) scale(0);
40 |     animation: scale 0.5s ease-in-out;
41 | }
42 | 
43 | @keyframes scale {
44 |     to {
45 |         transform: translate(-50%, -50%) scale(4);
46 |         opacity: 0;
47 |     }
48 | }


--------------------------------------------------------------------------------
/30-Auto_Text_Effect/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@700&display=swap');
 2 | * {
 3 |     box-sizing: border-box;
 4 |     margin: 0;
 5 |     padding: 0;
 6 | }
 7 | 
 8 | body {
 9 |     background-color: lightcoral;
10 |     font-family: 'Anonymous Pro', monospace;
11 | }
12 | 
13 | .text {
14 |     display: flex;
15 |     align-items: center;
16 |     justify-content: center;
17 |     height: 85vh;
18 | }
19 | 
20 | .content {
21 |     max-width: 75vw;
22 |     text-align: center;
23 |     font-size: 25px;
24 |     font-weight: bolder;
25 | }
26 | 
27 | .speed {
28 |     display: flex;
29 |     align-items: center;
30 |     justify-content: center;
31 | }
32 | 
33 | .control {
34 |     display: inline-block;
35 |     padding: 15px 20px;
36 |     background-color: rgba(145, 126, 126, 0.541);
37 |     font-size: 30px;
38 | }
39 | 
40 | #speed {
41 |     font-size: 25px;
42 |     text-align: center;
43 |     border-radius: 5px;
44 |     border: none;
45 |     margin: 0px 5px;
46 | }
47 | 
48 | #speed:focus {
49 |     outline: none;
50 | }


--------------------------------------------------------------------------------
/35-Image_Carousel/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | body {
 8 |     display: flex;
 9 |     align-items: center;
10 |     justify-content: center;
11 |     height: 100vh;
12 | }
13 | 
14 | img {
15 |     width: 550px;
16 |     height: 500px;
17 |     object-fit: cover;
18 | }
19 | 
20 | .container {
21 |     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
22 |     height: 530px;
23 |     width: 550px;
24 |     overflow: hidden;
25 | }
26 | 
27 | .img_container {
28 |     display: flex;
29 |     transform: translateX(0);
30 |     transition: transform 0.5s ease-in-out;
31 | }
32 | 
33 | .buttons {
34 |     display: flex;
35 |     justify-content: space-between;
36 | }
37 | 
38 | .btn {
39 |     background-color: rebeccapurple;
40 |     color: white;
41 |     border: none;
42 |     padding: 0.5rem;
43 |     cursor: pointer;
44 |     width: 49.5%;
45 | }
46 | 
47 | .btn:hover {
48 |     opacity: 0.9;
49 | }
50 | 
51 | .btn:focus {
52 |     outline: none;
53 | }
54 | 
55 | .btn:active {
56 |     transform: scale(0.98);
57 | }


--------------------------------------------------------------------------------
/13-Random_Choice_Picker/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     background-color: #2b88f0;
 7 |     font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 8 |     display: flex;
 9 |     flex-direction: column;
10 |     align-items: center;
11 |     justify-content: center;
12 |     height: 100vh;
13 |     overflow: hidden;
14 |     margin: 0;
15 | }
16 | 
17 | h3 {
18 |     color: white;
19 |     margin: 10px 0px 20px 0px;
20 |     text-align: center;
21 | }
22 | 
23 | .container {
24 |     width: 500px;
25 | }
26 | 
27 | textarea {
28 |     border: none;
29 |     display: block;
30 |     width: 100%;
31 |     height: 100px;
32 |     font-family: inherit;
33 |     padding: 10px;
34 |     margin: 0px 0px 20px 0px;
35 |     font-size: 16px;
36 | }
37 | 
38 | .tag {
39 |     background-color: #f0932b;
40 |     color: #fff;
41 |     border-radius: 50px;
42 |     padding: 10px 20px;
43 |     margin: 0px 5px 10px 0px;
44 |     font-size: 14px;
45 |     display: inline-block;
46 | }
47 | 
48 | .tag.highlight {
49 |     background-color: #273c75;
50 | }


--------------------------------------------------------------------------------
/29-Double_Click_Heart/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | body {
 8 |     text-align: center;
 9 |     overflow: hidden;
10 |     background-color: rgb(165, 85, 240);
11 | }
12 | 
13 | .fa-heart {
14 |     color: red;
15 | }
16 | 
17 | h2,
18 | p {
19 |     margin: 15px;
20 |     color: white;
21 | }
22 | 
23 | .img_block {
24 |     height: 440px;
25 |     width: 330px;
26 |     background: url('https://images.unsplash.com/photo-1548437983-5d3c209764a1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=375&q=80');
27 |     margin: auto;
28 |     cursor: pointer;
29 |     max-width: 100%;
30 |     position: relative;
31 |     box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
32 | }
33 | 
34 | .img_block .fa-heart {
35 |     position: absolute;
36 |     animation: grow 0.6s linear;
37 |     transform: translate(-50%, -50%) scale(0);
38 | }
39 | 
40 | @keyframes grow {
41 |     to {
42 |         transform: translate(-50%, -50%) scale(10);
43 |         opacity: 0;
44 |     }
45 | }


--------------------------------------------------------------------------------
/04-Hidden_Search/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     background-image: -webkit-linear-gradient(0deg, #bd63a9, #7727f7);
 7 |     font-family: monospace;
 8 |     display: flex;
 9 |     height: 100vh;
10 |     align-items: center;
11 |     justify-content: center;
12 |     overflow: hidden;
13 |     margin: 0;
14 | }
15 | 
16 | .search {
17 |     position: relative;
18 |     height: 50px;
19 | }
20 | 
21 | .search .input {
22 |     background-color: white;
23 |     border: 0;
24 |     font-size: 18px;
25 |     padding: 15px;
26 |     height: 50px;
27 |     width: 50px;
28 |     transition: all 0.3s ease;
29 | }
30 | 
31 | .btn {
32 |     background-color: white;
33 |     border: 0;
34 |     cursor: pointer;
35 |     font-size: 24px;
36 |     position: absolute;
37 |     top: 0;
38 |     left: 0;
39 |     height: 50px;
40 |     width: 50px;
41 |     transition: all 0.3s ease;
42 | }
43 | 
44 | .btn:focus,
45 | .input:focus {
46 |     outline: none;
47 | }
48 | 
49 | .search.active .btn {
50 |     transform: translateX(248px);
51 | }
52 | 
53 | .search.active .input {
54 |     width: 250px;
55 | }


--------------------------------------------------------------------------------
/01-Expanding_Cards/style.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     display: flex;
 7 |     align-items: center;
 8 |     justify-content: center;
 9 |     height: 100vh;
10 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
11 |     overflow: hidden;
12 |     margin: 0;
13 | }
14 | 
15 | .container {
16 |     display: flex;
17 |     width: 90%;
18 | }
19 | 
20 | .panel {
21 |     background-size: cover;
22 |     background-position: center;
23 |     background-repeat: no-repeat;
24 |     height: 80vh;
25 |     border-radius: 50px;
26 |     color: white;
27 |     flex: 1;
28 |     margin: 10px;
29 |     cursor: pointer;
30 |     position: relative;
31 |     transition: all 0.8s ease-in-out;
32 | }
33 | 
34 | .panel h3 {
35 |     position: absolute;
36 |     font-size: 25px;
37 |     left: 20px;
38 |     bottom: 0;
39 |     opacity: 0;
40 | }
41 | 
42 | .panel.active {
43 |     flex: 10;
44 |     transition: all 0.8s ease-in-out;
45 | }
46 | 
47 | .panel.active h3 {
48 |     opacity: 1;
49 |     transition: all 0.8s ease-in-out;
50 | }


--------------------------------------------------------------------------------
/06-Scroll_Animation/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>Scroll Animation...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 |     <h1>Scroll to see the animations</h1>
13 |     <div class="box">
14 | 
15 |         <h2>Content</h2>
16 |     </div>
17 |     <div class="box">
18 |         <h2>Content</h2>
19 |     </div>
20 |     <div class="box">
21 |         <h2>Content</h2>
22 |     </div>
23 |     <div class="box">
24 |         <h2>Content</h2>
25 |     </div>
26 |     <div class="box">
27 |         <h2>Content</h2>
28 |     </div>
29 |     <div class="box">
30 |         <h2>Content</h2>
31 |     </div>
32 |     <div class="box">
33 |         <h2>Content</h2>
34 |     </div>
35 |     <div class="box">
36 |         <h2>Content</h2>
37 |     </div>
38 |     <div class="box">
39 |         <h2>Content</h2>
40 |     </div>
41 |     <div class="box">
42 |         <h2>Content</h2>
43 |     </div>
44 | 
45 | </body>
46 | 
47 | <script src="script.js"></script>
48 | 
49 | </html>


--------------------------------------------------------------------------------
/29-Double_Click_Heart/script.js:
--------------------------------------------------------------------------------
 1 | const img_block = document.querySelector(`.img_block`);
 2 | const times = document.querySelector(`.times`);
 3 | 
 4 | let clickTime = 0;
 5 | let timesClicked = 0;
 6 | 
 7 | img_block.addEventListener('click', (e) => {
 8 |     if (clickTime == 0)
 9 |         clickTime = new Date().getTime();
10 |     else {
11 |         if (new Date().getTime() - clickTime < 800) {
12 |             createHeart(e);
13 |             clickTime = 0;
14 |         } else
15 |             clickTime = new Date().getTime();
16 |     }
17 | })
18 | 
19 | const createHeart = (e) => {
20 |     const heart = document.createElement(`i`);
21 |     heart.classList.add('fas');
22 |     heart.classList.add('fa-heart');
23 | 
24 |     const x = e.clientX;
25 |     const y = e.clientY;
26 | 
27 |     const leftOffSet = e.target.offsetLeft;
28 |     const topOffSet = e.target.offsetTop;
29 | 
30 |     const xInside = x - leftOffSet;
31 |     const yInside = y - topOffSet;
32 | 
33 |     heart.style.top = `${yInside}px`;
34 |     heart.style.left = `${xInside}px`;
35 | 
36 |     img_block.appendChild(heart);
37 | 
38 |     times.innerHTML = ++timesClicked;
39 | 
40 |     setTimeout(() => heart.remove(), 1000);
41 | 
42 | 
43 | }


--------------------------------------------------------------------------------
/16-Drink_Water/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>Drink Water...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <h1>Drink Water</h1>
14 |     <h3>Goal: 2 Liters</h3>
15 | 
16 |     <div class="glass">
17 |         <div class="remained" id="remained">
18 |             <span id="liters"></span>
19 |             <small>Remained</small>
20 |         </div>
21 | 
22 |         <div class="percantage"></div>
23 |     </div>
24 | 
25 |     <div class="text">Select how many glasses of water that you have drank</div>
26 | 
27 | 
28 |     <div class="sub-glass">
29 |         <div class="mini-glass">250 ml</div>
30 |         <div class="mini-glass">250 ml</div>
31 |         <div class="mini-glass">250 ml</div>
32 |         <div class="mini-glass">250 ml</div>
33 |         <div class="mini-glass">250 ml</div>
34 |         <div class="mini-glass">250 ml</div>
35 |         <div class="mini-glass">250 ml</div>
36 |         <div class="mini-glass">250 ml</div>
37 |     </div>
38 | 
39 | </body>
40 | <script src="script.js"></script>
41 | 
42 | </html>


--------------------------------------------------------------------------------
/24-Content_Placeholder/script.js:
--------------------------------------------------------------------------------
 1 | const header = document.getElementById(`header`);
 2 | const title = document.getElementById(`title`);
 3 | const excerpt = document.getElementById(`excerpt`);
 4 | const profile_img = document.getElementById(`profile_img`);
 5 | const name = document.getElementById(`name`);
 6 | const date = document.getElementById(`date`);
 7 | 
 8 | const animated_bgs = document.querySelectorAll(`.animated-bg`);
 9 | const animated_bg_texts = document.querySelectorAll(`.animated-bg-text`);
10 | 
11 | setTimeout(getData, 2500);
12 | 
13 | function getData() {
14 |     header.innerHTML = '<img src="https://th.bing.com/th/id/OIP.UGiZv-3wR2nW-Gadf7NtngHaE9?pid=Api&rs=1" alt="" />';
15 |     title.innerHTML = `Lorem ipsum dolor sit amet`;
16 |     excerpt.innerHTML = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis`;
17 |     profile_img.innerHTML = `<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="" />`;
18 |     name.innerHTML = `John Doe`;
19 |     date.innerHTML = `Jan 24,2021`;
20 | 
21 |     animated_bgs.forEach((bg) => {
22 |         bg.classList.remove(`animated-bg`);
23 |     })
24 |     animated_bg_texts.forEach((bg) => {
25 |         bg.classList.remove(`animated-bg-text`);
26 |     })
27 | }


--------------------------------------------------------------------------------
/39-Password_Strength_Background/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 |     <title>Password Strength Background...</title>
 9 |     <link rel="stylesheet" href="style.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="background"></div>
15 |     <div class="container">
16 | 
17 |         <h2>Image Password Strength</h2>
18 |         <h4>Change the Password to see the effect</h4>
19 | 
20 |         <form class="form">
21 |             <div class="emailContainer">
22 |                 <label for="email">Email:</label>
23 |                 <input type="text" id="email" placeholder="Enter your email" required>
24 |             </div>
25 |             <div class="passwordContainer">
26 |                 <label for="password">Password:</label>
27 |                 <input type="password" id="password" placeholder="Enter your password" required>
28 |             </div>
29 | 
30 |             <button type="submit" class="btn">Submit</button>
31 |         </form>
32 |     </div>
33 | </body>
34 | <script src="script.js"></script>
35 | 
36 | </html>


--------------------------------------------------------------------------------
/42-Live_User_Filter/script.js:
--------------------------------------------------------------------------------
 1 | const result = document.getElementById(`result`);
 2 | const filter = document.getElementById(`filter`);
 3 | const listItems = [];
 4 | 
 5 | getData();
 6 | 
 7 | filter.addEventListener('input', (e) => filterData(e.target.value));
 8 | 
 9 | async function getData() {
10 |     const res = await fetch(`https://randomuser.me/api?results=50`);
11 | 
12 |     const { results } = await res.json();
13 | 
14 |     result.innerHTML = ``;
15 | 
16 |     results.forEach(user => {
17 |         const li = document.createElement(`li`);
18 |         listItems.push(li);
19 | 
20 |         li.innerHTML = `
21 |             <img src="${user.picture.large}" alt="${user.name.first}">
22 |             <div class="user-info">
23 |                 <h4>${user.name.first} ${user.name.last}</h4>
24 |                 <p>${user.location.city} ${user.location.country}</p>
25 |             </div>
26 |         `
27 | 
28 |         result.appendChild(li);
29 |     })
30 | }
31 | 
32 | function filterData(searchTerm) {
33 |     listItems.forEach(item => {
34 |         if (item.innerText.toLowerCase().includes(searchTerm.toLowerCase())) {
35 |             item.classList.remove('hide');
36 |         } else
37 |             item.classList.add('hide');
38 |     })
39 | }


--------------------------------------------------------------------------------
/15-Increment_Counter/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>Increment Counter...</title>
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
 9 |     <link rel="stylesheet" href="style.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="counter-countainer">
15 |         <i class="fab fa-twitter fa-3x"></i>
16 |         <div class="counter" data-target="12000"></div>
17 |         <span>Twitter Followers</span>
18 |     </div>
19 |     <div class="counter-countainer">
20 |         <i class="fab fa-youtube fa-3x"></i>
21 |         <div class="counter" data-target="5000"></div>
22 |         <span>YouTube Subscribers</span>
23 |     </div>
24 |     <div class="counter-countainer">
25 |         <i class="fab fa-facebook fa-3x"></i>
26 |         <div class="counter" data-target="7500"></div>
27 |         <span>FaceBook Fans</span>
28 |     </div>
29 | 
30 | </body>
31 | <script src="script.js"></script>
32 | 
33 | </html>


--------------------------------------------------------------------------------
/26-Vertical_Slider/script.js:
--------------------------------------------------------------------------------
 1 | const sliderContainer = document.querySelector('.slider-container')
 2 | const slideRight = document.querySelector('.right-slide')
 3 | const slideLeft = document.querySelector('.left-slide')
 4 | const upButton = document.querySelector('.up-button')
 5 | const downButton = document.querySelector('.down-button')
 6 | const slidesLength = slideRight.querySelectorAll('div').length
 7 | 
 8 | let activeSlideIndex = 0
 9 | 
10 | slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`
11 | 
12 | upButton.addEventListener('click', () => changeSlide('up'))
13 | downButton.addEventListener('click', () => changeSlide('down'))
14 | 
15 | const changeSlide = (direction) => {
16 |     const sliderHeight = sliderContainer.clientHeight
17 |     if (direction === 'up') {
18 |         activeSlideIndex++
19 |         if (activeSlideIndex > slidesLength - 1) {
20 |             activeSlideIndex = 0
21 |         }
22 |     } else if (direction === 'down') {
23 |         activeSlideIndex--
24 |         if (activeSlideIndex < 0) {
25 |             activeSlideIndex = slidesLength - 1
26 |         }
27 |     }
28 | 
29 |     slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)`
30 |     slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`
31 | }


--------------------------------------------------------------------------------
/27-Toast_Notification/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap');
 2 | * {
 3 |     box-sizing: border-box;
 4 | }
 5 | 
 6 | body {
 7 |     background-color: rebeccapurple;
 8 |     font-family: 'Oswald', sans-serif;
 9 |     display: flex;
10 |     flex-direction: column;
11 |     align-items: center;
12 |     justify-content: center;
13 |     height: 100vh;
14 |     overflow: hidden;
15 |     margin: 0;
16 | }
17 | 
18 | .btn {
19 |     background-color: #ffffff;
20 |     color: rebeccapurple;
21 |     font-size: 15px;
22 |     font-weight: bold;
23 |     padding: 1rem;
24 |     border-radius: 5px;
25 |     border: none;
26 |     cursor: pointer;
27 | }
28 | 
29 | .btn:focus {
30 |     outline: none;
31 | }
32 | 
33 | .btn:active {
34 |     transform: scale(0.98);
35 | }
36 | 
37 | #toasts {
38 |     position: fixed;
39 |     bottom: 10px;
40 |     right: 10px;
41 |     display: flex;
42 |     flex-direction: column;
43 |     align-items: flex-end;
44 | }
45 | 
46 | .toast {
47 |     background-color: #fff;
48 |     border-radius: 5px;
49 |     padding: 1rem 2rem;
50 |     margin: 0.5rem;
51 | }
52 | 
53 | .toast.info {
54 |     color: rebeccapurple;
55 | }
56 | 
57 | .toast.success {
58 |     color: green;
59 | }
60 | 
61 | .toast.error {
62 |     color: red;
63 | }


--------------------------------------------------------------------------------
/32-Good,Cheap,Fast/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 |     <title>Good,Cheap,Fast...</title>
 9 | </head>
10 | 
11 | <link rel="stylesheet" href="style.css">
12 | 
13 | <body>
14 | 
15 |     <h2 class="heading">How you want your project to be?</h2>
16 | 
17 |     <div class="toggle-container">
18 |         <input type="checkbox" id="good" class="toggle">
19 |         <label for="good" class="label">
20 |             <div class="ball"></div>
21 |         </label>
22 | 
23 |         <span>Good</span>
24 |     </div>
25 | 
26 |     <div class="toggle-container">
27 |         <input type="checkbox" id="cheap" class="toggle">
28 |         <label for="cheap" class="label">
29 |             <div class="ball"></div>
30 |         </label>
31 | 
32 |         <span>Cheap</span>
33 |     </div>
34 | 
35 |     <div class="toggle-container">
36 |         <input type="checkbox" id="fast" class="toggle">
37 |         <label for="fast" class="label">
38 |             <div class="ball"></div>
39 |         </label>
40 | 
41 |         <span>Fast</span>
42 |     </div>
43 | 
44 | </body>
45 | <script src="script.js"></script>
46 | 
47 | </html>


--------------------------------------------------------------------------------
/22-Drawing_App/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 |     scroll-behavior: smooth;
 4 | }
 5 | 
 6 | body {
 7 |     display: flex;
 8 |     flex-direction: column;
 9 |     align-items: center;
10 |     justify-content: center;
11 |     height: 100vh;
12 |     margin: 0;
13 |     background-color: peachpuff;
14 | }
15 | 
16 | canvas {
17 |     border: 2px solid rgb(247, 77, 77);
18 |     margin: 5px;
19 |     background-color: white;
20 | }
21 | 
22 | .toolbox {
23 |     background-color: rgb(68, 92, 230);
24 |     border: none;
25 |     display: flex;
26 |     width: 554px;
27 |     padding: 1rem;
28 |     border-radius: 5px;
29 | }
30 | 
31 | .toolbox>* {
32 |     background-color: white;
33 |     border: none;
34 |     display: inline-flex;
35 |     align-items: center;
36 |     justify-content: center;
37 |     font-size: 1.5rem;
38 |     height: 50px;
39 |     width: 50px;
40 |     margin: 0.25rem;
41 |     cursor: pointer;
42 | }
43 | 
44 | .toolbox>*:last-child {
45 |     margin-left: auto;
46 |     width: 75px;
47 | }
48 | 
49 | button {
50 |     transition: all 0.2s ease;
51 | }
52 | 
53 | button:focus {
54 |     outline: none;
55 | }
56 | 
57 | button:active {
58 |     transform: scale(0.95);
59 | }
60 | 
61 | input:focus {
62 |     outline: none;
63 | }
64 | 
65 | button,
66 | input,
67 | span {
68 |     border-radius: 5px;
69 | }


--------------------------------------------------------------------------------
/23-Loader/Without_Using_JavaScript(Kinetic)/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     background-color: #2c3e50;
 7 |     display: flex;
 8 |     align-items: center;
 9 |     justify-content: center;
10 |     height: 100vh;
11 |     overflow: hidden;
12 |     margin: 0;
13 | }
14 | 
15 | .kinetic {
16 |     position: relative;
17 |     height: 80px;
18 |     width: 80px;
19 | }
20 | 
21 | .kinetic::after,
22 | .kinetic::before {
23 |     content: '';
24 |     position: absolute;
25 |     top: 0;
26 |     left: 0;
27 |     height: 0;
28 |     width: 0;
29 |     border: 50px solid transparent;
30 |     border-bottom-color: white;
31 |     animation: rotateA 2s linear infinite 0.5s;
32 | }
33 | 
34 | .kinetic::before {
35 |     transform: rotate(90deg);
36 |     animation: rotateB 2s linear infinite;
37 | }
38 | 
39 | @keyframes rotateA {
40 |     0%,
41 |     25% {
42 |         transform: rotate(0deg);
43 |     }
44 |     50%,
45 |     75% {
46 |         transform: rotate(180deg);
47 |     }
48 |     100% {
49 |         transform: rotate(360deg);
50 |     }
51 | }
52 | 
53 | @keyframes rotateB {
54 |     0%,
55 |     25% {
56 |         transform: rotate(90deg);
57 |     }
58 |     50%,
59 |     75% {
60 |         transform: rotate(270deg);
61 |     }
62 |     100% {
63 |         transform: rotate(450deg);
64 |     }
65 | }


--------------------------------------------------------------------------------
/49-Todo_List/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     background-color: rgb(221, 245, 177);
 7 |     display: flex;
 8 |     align-items: center;
 9 |     justify-content: center;
10 |     min-height: 100vh;
11 |     flex-direction: column;
12 | }
13 | 
14 | h1 {
15 |     color: rgb(161, 42, 216);
16 |     font-size: 200px;
17 |     letter-spacing: 5px;
18 |     opacity: 0.6;
19 |     margin-top: 5rem;
20 | }
21 | 
22 | form {
23 |     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.39);
24 |     max-width: 100%;
25 |     width: 400px;
26 |     margin-top: 0.5rem;
27 | }
28 | 
29 | .input {
30 |     border: none;
31 |     color: black;
32 |     font-size: 2rem;
33 |     padding: 1rem 2rem;
34 |     width: 100%;
35 |     display: block;
36 | }
37 | 
38 | input::placeholder {
39 |     color:grey;
40 | }
41 | 
42 | input:focus {
43 |     outline-color: rgb(0, 167, 0);
44 | }
45 | 
46 | .todos {
47 |     background-color: white;
48 |     padding: 0;
49 |     margin: 0;
50 |     list-style-type: none;
51 | }
52 | 
53 | .todos li {
54 |     border-top: 2px solid #e5e5e5;
55 |     cursor: pointer;
56 |     font-size: 1.5rem;
57 |     padding: 1rem 2rem;
58 | }
59 | 
60 | .todos li.completed {
61 |     color:grey;
62 |     text-decoration: line-through;
63 | }
64 | 
65 | small {
66 |     margin-top: 3rem;
67 |     text-align: center;
68 | }


--------------------------------------------------------------------------------
/34-Animated_CountDown/script.js:
--------------------------------------------------------------------------------
 1 | const span = document.querySelectorAll('span');
 2 | const final = document.getElementById('final');
 3 | const counter = document.querySelector(`.counter`);
 4 | const btn = document.getElementById(`btn`);
 5 | 
 6 | var idx = 0;
 7 | const len = span.length;
 8 | startTimer();
 9 | 
10 | var interval;
11 | 
12 | function startTimer() {
13 |     span.forEach((temp) => {
14 |         temp.classList.remove(`inNums`);
15 |         temp.classList.remove(`outNums`);
16 |     })
17 |     idx = 0;
18 | 
19 |     interval = setInterval(animate, 1000);
20 | }
21 | 
22 | function animate() {
23 |     if (idx == len) {
24 |         clearInterval(interval);
25 |         counter.classList.add(`removed`);
26 |         final.classList.remove(`removed`);
27 |         return;
28 |     }
29 | 
30 |     span.forEach((temp) => {
31 |         temp.classList.remove(`outNums`);
32 |     })
33 | 
34 |     if (idx == 0) {
35 |         span[idx].classList.add(`inNums`);
36 |         idx++;
37 |         return;
38 |     }
39 | 
40 |     span[idx - 1].classList.remove(`inNums`);
41 |     span[idx - 1].classList.add(`outNums`);
42 | 
43 |     span[idx].classList.add(`inNums`);
44 | 
45 |     idx++;
46 |     return;
47 | }
48 | 
49 | btn.addEventListener('click', () => {
50 |     counter.classList.remove(`removed`);
51 |     final.classList.add(`removed`);
52 | 
53 |     startTimer();
54 | })


--------------------------------------------------------------------------------
/38-Mobile_Navigation/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     background-color: rgba(155, 89, 182, 0.7);
 7 |     display: flex;
 8 |     align-items: center;
 9 |     justify-content: center;
10 |     height: 100vh;
11 |     margin: 0;
12 |     overflow: hidden;
13 | }
14 | 
15 | .phone {
16 |     position: relative;
17 |     overflow: hidden;
18 |     border: 3px solid #eee;
19 |     border-radius: 15px;
20 |     height: 600px;
21 |     width: 340px;
22 | }
23 | 
24 | .phone .content {
25 |     opacity: 0;
26 |     object-fit: cover;
27 |     position: absolute;
28 |     top: 0;
29 |     left: 0;
30 |     height: calc(100% - 60px);
31 |     width: 100%;
32 |     transition: opacity 0.4s ease;
33 | }
34 | 
35 | .phone .content.show {
36 |     opacity: 1;
37 | }
38 | 
39 | nav {
40 |     position: absolute;
41 |     bottom: 0;
42 |     left: 0;
43 |     margin-top: -5px;
44 |     width: 100%;
45 | }
46 | 
47 | nav ul {
48 |     background-color: #fff;
49 |     display: flex;
50 |     list-style-type: none;
51 |     padding: 0;
52 |     margin: 0;
53 |     height: 60px;
54 | }
55 | 
56 | nav li {
57 |     color: #777;
58 |     cursor: pointer;
59 |     flex: 1;
60 |     padding: 10px;
61 |     text-align: center;
62 | }
63 | 
64 | nav ul li p {
65 |     font-size: 12px;
66 |     margin: 2px 0;
67 | }
68 | 
69 | nav ul li:hover,
70 | nav ul li.active {
71 |     color: #8e44ad;
72 | }


--------------------------------------------------------------------------------
/10-Dad_Jokes/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     background-color: #686de0;
 7 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 8 |     display: flex;
 9 |     justify-content: center;
10 |     align-items: center;
11 |     height: 100vh;
12 |     flex-direction: column;
13 |     overflow: hidden;
14 |     margin: 0;
15 |     padding: 20px;
16 | }
17 | 
18 | .container {
19 |     background-color: white;
20 |     border-radius: 10px;
21 |     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
22 |     padding: 50px 20px;
23 |     text-align: center;
24 |     max-width: 100%;
25 |     width: 800px;
26 | }
27 | 
28 | h3 {
29 |     margin: 0;
30 |     opacity: 0.5;
31 |     letter-spacing: 2px;
32 | }
33 | 
34 | .joke {
35 |     font-size: 30px;
36 |     letter-spacing: 1px;
37 |     line-height: 40px;
38 |     margin: 50px auto;
39 |     max-width: 600px;
40 | }
41 | 
42 | .btn {
43 |     background-color: #9f68e0;
44 |     color: white;
45 |     border: 0;
46 |     border-radius: 10px;
47 |     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
48 |     padding: 14px 40px;
49 |     font-size: 16px;
50 |     cursor: pointer;
51 | }
52 | 
53 | .btn:active {
54 |     transform: scale(0.98);
55 | }
56 | 
57 | .btn:focus {
58 |     outline: none;
59 | }


--------------------------------------------------------------------------------
/33-Notes_App/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 |     outline: none;
 4 |     margin: 0;
 5 |     padding: 0;
 6 | }
 7 | 
 8 | body {
 9 |     background-color: #7bdaf3;
10 |     display: flex;
11 |     flex-wrap: wrap;
12 |     padding-top: 3rem;
13 | }
14 | 
15 | .add {
16 |     position: fixed;
17 |     top: 1rem;
18 |     right: 1rem;
19 |     background-color: #9ec862;
20 |     color: white;
21 |     border: none;
22 |     border-radius: 3px;
23 |     padding: 0.5rem 1rem;
24 |     cursor: pointer;
25 | }
26 | 
27 | .add:active {
28 |     transform: scale(0.98);
29 | }
30 | 
31 | .note {
32 |     background-color: white;
33 |     box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
34 |     margin: 30px 20px;
35 |     height: 400px;
36 |     width: 400px;
37 | }
38 | 
39 | .note .tools {
40 |     background-color: #9ec862;
41 |     display: flex;
42 |     justify-content: flex-end;
43 |     padding: 0.5rem;
44 | }
45 | 
46 | .note .tools button {
47 |     background-color: transparent;
48 |     border: none;
49 |     color: white;
50 |     cursor: pointer;
51 |     font-size: 1rem;
52 |     margin-left: 0.5rem;
53 | }
54 | 
55 | .note textarea {
56 |     outline: none;
57 |     font-family: inherit;
58 |     font-size: 1.2rem;
59 |     border: none;
60 |     height: 400px;
61 |     width: 100%;
62 |     padding: 20px;
63 | }
64 | 
65 | .main {
66 |     padding: 0;
67 | }
68 | 
69 | .hidden {
70 |     display: none;
71 | }


--------------------------------------------------------------------------------
/02-Progress_Bar/script.js:
--------------------------------------------------------------------------------
 1 | let circleCount = 0;
 2 | let lineCount = -1;
 3 | 
 4 | let circle = document.getElementsByClassName("circle");
 5 | let line = document.getElementsByClassName("line");
 6 | 
 7 | let next = document.getElementById("next");
 8 | let prev = document.getElementById("prev");
 9 | 
10 | next.addEventListener("click", () => {
11 |     if (circleCount == 3) return;
12 |     circleCount++;
13 |     lineCount++;
14 | 
15 |     let arrCircle = Array.from(circle);
16 |     let arrLine = Array.from(line);
17 |     arrCircle[circleCount].classList.add("active");
18 |     arrLine[lineCount].classList.add("active");
19 |     prev.classList.remove("disabled");
20 | 
21 |     if (circleCount == 3) {
22 |         next.classList.add("disabled");
23 |         prev.classList.remove("disabled");
24 |     } else {
25 |         next.classList.remove("disabled");
26 |     }
27 | });
28 | 
29 | prev.addEventListener("click", () => {
30 |     if (circleCount == 0) return;
31 | 
32 |     let arrCircle = Array.from(circle);
33 |     let arrLine = Array.from(line);
34 |     arrCircle[circleCount].classList.remove("active");
35 |     arrLine[lineCount].classList.remove("active");
36 |     next.classList.remove("disabled");
37 | 
38 |     circleCount--;
39 |     lineCount--;
40 | 
41 |     if (circleCount == 0) {
42 |         prev.classList.add("disabled");
43 |     } else {
44 |         prev.classList.remove("disabled");
45 |     }
46 | });


--------------------------------------------------------------------------------
/24-Content_Placeholder/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>Content Placeholder...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 | 
13 |     <div class="card">
14 |         <div class="card-header animated-bg" id="header">&nbsp;</div>
15 | 
16 |         <div class="card-content">
17 |             <h3 class="card-title animated-bg animated-bg-text" id="title">&nbsp;</h3>
18 | 
19 |             <p class="card-excerpt" id="excerpt">
20 |                 &nbsp;
21 |                 <span class="animated-bg animated-bg-text">&nbsp;</span>
22 |                 <span class="animated-bg animated-bg-text">&nbsp;</span>
23 |                 <span class="animated-bg animated-bg-text">&nbsp;</span>
24 |             </p>
25 | 
26 |             <div class="author">
27 |                 <div class="profile-img animated-bg" id="profile_img">&nbsp;</div>
28 |                 <div class="author-info">
29 |                     <strong class="animated-bg animated-bg-text" id="name">&nbsp;</strong>
30 |                     <small class="animated-bg animated-bg-text" id="date">&nbsp;</small>
31 |                 </div>
32 |             </div>
33 | 
34 | 
35 |         </div>
36 |     </div>
37 | 
38 | </body>
39 | 
40 | <script src="script.js"></script>
41 | 
42 | </html>


--------------------------------------------------------------------------------
/41-Verify_Account/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 |     <title>Verify Account...</title>
 9 |     <link rel="stylesheet" href="style.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="container">
15 |         <h2>Verify Your Account</h2>
16 |         <p>We emailed you the six digit code to random@email.com </br>Enter the code below to confirm your email address.</p>
17 | 
18 |         <div class="otpCode">
19 |             <input type="number" class="code" placeholder="0" min="0" max="9" required>
20 |             <input type="number" class="code" placeholder="0" min="0" max="9" required>
21 |             <input type="number" class="code" placeholder="0" min="0" max="9" required>
22 |             <input type="number" class="code" placeholder="0" min="0" max="9" required>
23 |             <input type="number" class="code" placeholder="0" min="0" max="9" required>
24 |             <input type="number" class="code" placeholder="0" min="0" max="9" required>
25 |         </div>
26 | 
27 |         <div class="info">
28 |             This is design only. We didn't actually send you an email as we don't have your email, right? 😅😅😅
29 |         </div>
30 |     </div>
31 | 
32 | </body>
33 | <script src="script.js"></script>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/37-Pokedex/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Reggae+One&display=swap');
 2 | * {
 3 |     box-sizing: border-box;
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     font-family: 'Reggae One', cursive;
 7 | }
 8 | 
 9 | body {
10 |     background-color: #efefbb;
11 |     background: linear-gradient(to right, #d4d3dd, #efefbb);
12 |     display: flex;
13 |     align-items: center;
14 |     justify-content: center;
15 |     flex-direction: column;
16 | }
17 | 
18 | h1 {
19 |     letter-spacing: 3px;
20 | }
21 | 
22 | .container {
23 |     display: flex;
24 |     flex-wrap: wrap;
25 |     align-items: space-between;
26 |     justify-content: center;
27 |     margin: 0 auto;
28 |     max-width: 1200px;
29 | }
30 | 
31 | .poke {
32 |     background: #eee;
33 |     margin: 10px;
34 |     padding: 20px;
35 |     text-align: center;
36 |     border-radius: 10px;
37 |     box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);
38 | }
39 | 
40 | .poke .img-container {
41 |     width: 120px;
42 |     height: 120px;
43 |     background-color: rgba(255, 255, 255, 0.6);
44 |     border-radius: 50%;
45 |     text-align: center;
46 | }
47 | 
48 | .poke .img-container img {
49 |     max-width: 90%;
50 |     margin-top: 20px;
51 | }
52 | 
53 | .poke .info {
54 |     margin-top: 20px;
55 | }
56 | 
57 | .poke .info .number {
58 |     background-color: rgba(0, 0, 0, 0.1);
59 |     padding: 5px 10px;
60 |     border-radius: 10px;
61 |     font-size: 0.8rem;
62 | }
63 | 
64 | .poke .info .name {
65 |     margin: 15px 0 7px;
66 |     letter-spacing: 1px;
67 | }


--------------------------------------------------------------------------------
/18-Background_Slider/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     display: flex;
 7 |     flex-direction: column;
 8 |     align-items: center;
 9 |     justify-content: center;
10 |     height: 100vh;
11 |     overflow: hidden;
12 |     margin: 0;
13 |     background-position: center center;
14 |     background-size: cover;
15 |     transition: 0.4s;
16 | }
17 | 
18 | body::before {
19 |     content: '';
20 |     position: absolute;
21 |     top: 0;
22 |     left: 0;
23 |     width: 100%;
24 |     height: 100vh;
25 |     background-color: rgba(0, 0, 0, 0.7);
26 |     z-index: -1;
27 | }
28 | 
29 | .slider-container {
30 |     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
31 |     height: 70vh;
32 |     width: 70vw;
33 |     position: relative;
34 |     overflow: hidden;
35 | }
36 | 
37 | .slide {
38 |     opacity: 0;
39 |     height: 100vh;
40 |     width: 100vw;
41 |     background-position: center center;
42 |     background-size: cover;
43 |     position: absolute;
44 |     top: -15vh;
45 |     left: -15vw;
46 |     transition: 0.4s ease;
47 |     z-index: 1;
48 | }
49 | 
50 | .slide.active {
51 |     opacity: 1;
52 | }
53 | 
54 | .arrow {
55 |     position: fixed;
56 |     background-color: transparent;
57 |     color: white;
58 |     padding: 20px;
59 |     font-size: 30px;
60 |     border: 2px solid orange;
61 |     top: 50%;
62 |     transform: translateY(-50%);
63 |     cursor: pointer;
64 | }
65 | 
66 | .arrow:focus {
67 |     outline: none;
68 | }
69 | 
70 | .left-arrow {
71 |     left: calc(15vw - 65px);
72 | }
73 | 
74 | .right-arrow {
75 |     right: calc(15vw - 65px);
76 | }


--------------------------------------------------------------------------------
/49-Todo_List/script.js:
--------------------------------------------------------------------------------
 1 | const form = document.querySelector(`.form`);
 2 | const input = document.querySelector(`#input`);
 3 | const todoList = document.querySelector(`#todos`);
 4 | 
 5 | const todos = JSON.parse(localStorage.getItem(`todos`));
 6 | 
 7 | if (todos) {
 8 |     todos.forEach(todo => addTodo(todo));
 9 | }
10 | 
11 | form.addEventListener('submit', (e) => {
12 |     e.preventDefault();
13 | 
14 |     addTodo();
15 | })
16 | 
17 | function addTodo(todo) {
18 |     let todoText = input.value;
19 | 
20 |     if (todo)
21 |         todoText = todo.text;
22 | 
23 |     if (todoText) {
24 |         const todoEl = document.createElement(`li`);
25 |         todoEl.innerText = todoText;
26 | 
27 |         if (todo && todo.completed)
28 |             todoEl.classList.add(`completed`);
29 | 
30 |         todoEl.addEventListener('click', () => {
31 |             todoEl.classList.toggle('completed');
32 |             updateList();
33 |         })
34 | 
35 |         todoEl.addEventListener('contextmenu', (e) => {
36 |             e.preventDefault();
37 | 
38 |             todoEl.remove();
39 |             updateList();
40 |         })
41 | 
42 |         todoList.appendChild(todoEl);
43 |         input.value = ``;
44 |         updateList();
45 |     }
46 | }
47 | 
48 | function updateList() {
49 |     todosEle = document.querySelectorAll(`li`);
50 | 
51 |     const todos = [];
52 | 
53 |     todosEle.forEach(todoEle => {
54 |         todos.push({ 
55 |             text : todoEle.innerText,
56 |             completed : todoEle.classList.contains(`completed`)
57 |         })
58 |     })
59 | 
60 |     localStorage.setItem(`todos`,JSON.stringify(todos));
61 | }


--------------------------------------------------------------------------------
/43-FeedBack_UI_Design/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 |     <title>Let Us Know Your FeedBack...</title>
 9 |     <link rel="stylesheet" href="style.css" />
10 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
11 | </head>
12 | 
13 | <body>
14 |     <div class="container">
15 |         <h3>How satisfied are you with our customer support performance?</h3>
16 |         <div class="options">
17 |             <div class="choice">
18 |                 <img src="https://image.flaticon.com/icons/svg/187/187150.svg" alt="Unhappy">
19 |                 <small>Unhappy</small>
20 |             </div>
21 |                 <div class="choice">
22 |                     <img src="https://image.flaticon.com/icons/svg/187/187136.svg" alt="Neutral">
23 |                     <small>Neutral</small>
24 |                 </div>
25 |             <div class="choice active">
26 |                     <img src="https://image.flaticon.com/icons/svg/187/187133.svg" alt="Satisfied">
27 |                     <small>Satisfied</small>
28 |             </div>
29 |         </div>
30 | 
31 |         <div class="button">
32 |             <button class="btn" id="btn">Send Review</button>
33 |         </div>
34 |     </div>
35 | </body>
36 | <script src="script.js"></script>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/16-Drink_Water/script.js:
--------------------------------------------------------------------------------
 1 | const percentage = document.querySelector(`.percantage`);
 2 | const remained = document.querySelector(`.remained`);
 3 | const subGlass = document.querySelectorAll(`.mini-glass`);
 4 | const fill = document.querySelector(`#liters`);
 5 | 
 6 | updateBigCup(-1);
 7 | 
 8 | subGlass.forEach((cup, idx) => {
 9 |     cup.addEventListener('click', () => highLightCup(idx))
10 | })
11 | 
12 | function highLightCup(idx) {
13 |     if (subGlass[idx].classList.contains(`active`) && idx < 7 && !subGlass[idx].nextElementSibling.classList.contains(`active`))
14 |         idx--;
15 | 
16 |     subGlass.forEach((cup, idx2) => {
17 |         if (idx2 <= idx) {
18 |             cup.classList.add(`active`);
19 |         } else
20 |             cup.classList.remove(`active`);
21 |     })
22 | 
23 |     updateBigCup(idx);
24 | }
25 | 
26 | function updateBigCup(idx) {
27 |     let percent = ((idx + 1) / 8) * 100;
28 |     let percentHeight = (350 * percent) / 100;
29 |     let remainedHeight = 350 - percentHeight;
30 | 
31 |     if (percent == 100) {
32 |         remained.style.visibility = `hidden`;
33 |         percentage.style.visibility = `visible`;
34 |     } else if (percent == 0) {
35 |         remained.style.visibility = `visible`;
36 |         percentage.style.visibility = `hidden`;
37 |     } else {
38 |         remained.style.visibility = `visible`;
39 |         percentage.style.visibility = `visible`;
40 |     }
41 | 
42 |     fill.innerText = `${2-(idx+1)*0.250}L`;
43 |     remained.style.height = `${remainedHeight}px`;
44 |     percentage.style.height = `${percentHeight}px`;
45 |     percentage.innerText = `${percent}%`
46 | 
47 |     console.log(percent);
48 | }


--------------------------------------------------------------------------------
/47-Testimonial_Box_Switcher/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
 2 | 
 3 | * {
 4 |   box-sizing: border-box;
 5 |   font-family: 'Quicksand', sans-serif;
 6 | }
 7 | 
 8 | body {
 9 |   display: flex;
10 |   align-items: center;
11 |   justify-content: center;
12 |   height: 100vh;
13 |   overflow: hidden;
14 |   margin: 0;
15 | }
16 | 
17 | .testimonial-continer {
18 |   background-color: blueviolet;
19 |   color: white;
20 |   border-radius: 15px;
21 |   padding: 50px 80px;
22 |   margin: 20px auto;
23 |   max-width: 750px;
24 |   position: relative;
25 | }
26 | 
27 | .fa-quote {
28 |   color: rgba(255, 255, 255, 0.3);
29 |   font-size: 28px;
30 |   position: absolute;
31 |   top: 70px;
32 | }
33 | 
34 | .fa-quote-right {
35 |   left: 40px;
36 | }
37 | 
38 | .fa-quote-left {
39 |   right: 40px;
40 | }
41 | 
42 | .testimonial {
43 |     line-height: 28px;
44 |     text-align: justify;
45 | }
46 | 
47 | .user {
48 |     display: flex;
49 |     align-items: center;
50 |     justify-content: center;
51 | }
52 | 
53 | .user .user-image {
54 |     border-radius: 50%;
55 |     height: 75px;
56 |     width: 75px;
57 |     object-fit: cover;
58 | }
59 | 
60 | .user .user-info {
61 |     margin-left: 10px;
62 | }
63 | 
64 | .user .username {
65 |     margin: 0;
66 | }
67 | 
68 | .user .role {
69 |     font-weight: normal;
70 |     margin: 10px 0;
71 | }
72 | 
73 | .progressBar {
74 |     background-color: white;
75 |     height: 4px;
76 |     width: 100%;
77 |     animation: grow 10s linear infinite;
78 |     transform-origin: left;
79 | }
80 | 
81 | @keyframes grow {
82 |     0% {
83 |         transform: scaleX(0);
84 |     }
85 | }


--------------------------------------------------------------------------------
/23-Loader/Using_JavaScript/script.js:
--------------------------------------------------------------------------------
 1 | const afterBlock = document.querySelector(`.after`);
 2 | const beforeBlock = document.querySelector(`.before`);
 3 | const count = document.querySelector(`.count`);
 4 | const intro = document.querySelector(`.intro`);
 5 | const btn = document.querySelector(`#btn`);
 6 | const end = document.querySelector(`.end`);
 7 | 
 8 | btn.addEventListener('click', () => {
 9 |     intro.classList.add(`none`);
10 |     btn.classList.add(`none`);
11 |     afterBlock.classList.remove(`none`);
12 |     beforeBlock.classList.remove(`none`);
13 |     count.classList.remove(`none`);
14 |     intervalB = setInterval(rotateB, 1000);
15 |     setTimeout(helper, 500);
16 |     intervalCount = setInterval(increaseCount, 100);
17 | })
18 | 
19 | var intervalB;
20 | var intervalCount;
21 | var intervalA;
22 | 
23 | let degA = 0;
24 | let degB = 90;
25 | let value = 0;
26 | 
27 | function rotateB() {
28 |     degB += 180;
29 |     beforeBlock.style.transform = `rotate(${degB}deg)`;
30 | }
31 | 
32 | function helper() {
33 |     intervalA = setInterval(rotateA, 1000);
34 | }
35 | 
36 | function rotateA() {
37 |     degA += 180;
38 |     afterBlock.style.transform = `rotate(${degA}deg)`;
39 | }
40 | 
41 | function increaseCount() {
42 |     value++;
43 |     if (value >= 100) {
44 |         clearInterval(intervalB);
45 |         clearInterval(intervalCount);
46 |         clearInterval(intervalA);
47 | 
48 |         setTimeout(BlockAll, 1500);
49 | 
50 |     }
51 |     count.innerText = `${value}%`;
52 | }
53 | 
54 | function BlockAll() {
55 |     afterBlock.classList.add(`none`);
56 |     beforeBlock.classList.add(`none`);
57 |     count.classList.add(`none`);
58 |     end.classList.remove(`none`);
59 | }


--------------------------------------------------------------------------------
/13-Random_Choice_Picker/script.js:
--------------------------------------------------------------------------------
 1 | const tagsEl = document.getElementById(`tags`);
 2 | const textarea = document.getElementById(`textarea`);
 3 | 
 4 | textarea.focus();
 5 | textarea.addEventListener('keyup', (e) => {
 6 |     createTags(e.target.value);
 7 | 
 8 |     if (e.key === `Enter`) {
 9 |         setTimeout(() => {
10 |             e.target.value = ``
11 |         }, 10)
12 | 
13 |         randomSelect();
14 |     }
15 | })
16 | 
17 | function createTags(input) {
18 |     const tags = input.split(`,`).filter(tag => tag.trim() !== ``).map(tag => tag.trim());
19 | 
20 |     tagsEl.innerHTML = ``;
21 | 
22 |     tags.forEach(tag => {
23 |         const tagEl = document.createElement('span');
24 |         tagEl.classList.add(`tag`);
25 |         tagEl.innerText = tag;
26 |         tagsEl.appendChild(tagEl);
27 |     })
28 | }
29 | 
30 | function randomSelect() {
31 |     const times = 30;
32 |     const interval = setInterval(() => {
33 |         const randomTag = pickRandomTag();
34 | 
35 |         highlightTag(randomTag);
36 |         setTimeout(() => {
37 |             unHighlightTag(randomTag);
38 |         }, 100)
39 |     }, 100);
40 | 
41 |     setTimeout(() => {
42 |         clearInterval(interval);
43 |         setTimeout(() => {
44 |             const randomTag = pickRandomTag();
45 | 
46 |             highlightTag(randomTag);
47 |         }, 100)
48 |     }, times * 100)
49 | }
50 | 
51 | function pickRandomTag() {
52 |     const tags = document.querySelectorAll(`.tag`);
53 |     return tags[Math.floor(Math.random() * tags.length)];
54 | }
55 | 
56 | function highlightTag(tag) {
57 |     tag.classList.add(`highlight`);
58 | }
59 | 
60 | function unHighlightTag(tag) {
61 |     tag.classList.remove(`highlight`);
62 | }


--------------------------------------------------------------------------------
/23-Loader/Using_JavaScript/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     background-color: #2c3e50;
 7 |     display: flex;
 8 |     align-items: center;
 9 |     justify-content: center;
10 |     height: 100vh;
11 |     overflow: hidden;
12 |     margin: 0;
13 | }
14 | 
15 | .after {
16 |     content: '';
17 |     position: absolute;
18 |     top: 50vh-50px;
19 |     left: 50vw-50px;
20 |     width: 0;
21 |     height: 0;
22 |     border: 50px solid transparent;
23 |     border-bottom-color: white;
24 |     transition: all 0.5s linear;
25 |     transform: rotate(0deg);
26 | }
27 | 
28 | .before {
29 |     content: '';
30 |     position: absolute;
31 |     top: 50vh-50px;
32 |     left: 50vw-50px;
33 |     width: 0;
34 |     height: 0;
35 |     border: 50px solid transparent;
36 |     border-bottom-color: white;
37 |     transition: all 0.5s linear;
38 |     transform: rotate(90deg);
39 | }
40 | 
41 | .count {
42 |     position: absolute;
43 |     top: 70vh;
44 |     left: 48.9vw;
45 |     font-size: 30px;
46 |     color: white;
47 | }
48 | 
49 | .intro {
50 |     position: absolute;
51 |     top: 36vh;
52 |     left: 33vw;
53 |     color: white;
54 |     text-transform: uppercase;
55 | }
56 | 
57 | #btn {
58 |     position: absolute;
59 |     top: 51vh;
60 |     left: 46vw;
61 |     font-size: 25px;
62 |     padding: 0.7rem;
63 |     border: none;
64 |     border-radius: 5px;
65 |     color: white;
66 |     background-color: peru;
67 |     cursor: pointer;
68 | }
69 | 
70 | #btn:focus {
71 |     outline: none;
72 | }
73 | 
74 | #btn:active {
75 |     transform: scale(0.98);
76 | }
77 | 
78 | .none {
79 |     display: none;
80 | }
81 | 
82 | .end {
83 |     color: white;
84 |     text-transform: uppercase;
85 | }


--------------------------------------------------------------------------------
/32-Good,Cheap,Fast/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     overflow: hidden;
 6 |     font-family: 'Roboto', sans-serif;
 7 | }
 8 | 
 9 | body {
10 |     display: flex;
11 |     align-items: center;
12 |     justify-content: center;
13 |     height: 100vh;
14 |     flex-direction: column;
15 | }
16 | 
17 | .toggle-container {
18 |     display: flex;
19 |     align-items: center;
20 |     margin: 10px 0;
21 |     width: 200px;
22 | }
23 | 
24 | .toggle {
25 |     visibility: hidden;
26 | }
27 | 
28 | .label {
29 |     position: relative;
30 |     background-color: #d0d0d0;
31 |     border-radius: 50px;
32 |     cursor: pointer;
33 |     display: inline-block;
34 |     margin: 0 15px 0;
35 |     width: 80px;
36 |     height: 40px;
37 | }
38 | 
39 | .toggle:checked+.label {
40 |     background-color: #8e44ad;
41 | }
42 | 
43 | .ball {
44 |     background-color: white;
45 |     height: 34px;
46 |     width: 34px;
47 |     border-radius: 50%;
48 |     position: absolute;
49 |     top: 3px;
50 |     left: 3px;
51 |     align-items: center;
52 |     justify-content: center;
53 |     animation: slideOff 0.3s linear forwards;
54 | }
55 | 
56 | .toggle:checked+.label .ball {
57 |     animation: slideOn 0.3s linear forwards;
58 | }
59 | 
60 | @keyframes slideOn {
61 |     0% {
62 |         transform: translateX(0) scale(1);
63 |     }
64 |     50% {
65 |         transform: translateX(20px) scale(1.2);
66 |     }
67 |     100% {
68 |         transform: translateX(40px) scale(1);
69 |     }
70 | }
71 | 
72 | @keyframes slideOff {
73 |     0% {
74 |         transform: translateX(40px) scale(1);
75 |     }
76 |     50% {
77 |         transform: translateX(20px) scale(1.2);
78 |     }
79 |     100% {
80 |         transform: translateX(0) scale(1);
81 |     }
82 | }


--------------------------------------------------------------------------------
/41-Verify_Account/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | body {
 8 |     background: #a650df;
 9 |     display: flex;
10 |     align-items: center;
11 |     justify-content: center;
12 |     height: 100vh;
13 |     overflow: hidden;
14 | }
15 | 
16 | .container {
17 |     display: flex;
18 |     align-items: center;
19 |     justify-content: center;
20 |     flex-direction: column;
21 |     border: 2px solid black;
22 |     border-radius: 5px;
23 |     padding: 10px;
24 |     max-width: 1000px;
25 |     text-align: center;
26 |     background-color: white;
27 | }
28 | 
29 | .container h2 {
30 |     margin: 4px;
31 |     font-size: 30px;
32 |     text-transform: uppercase;
33 | }
34 | 
35 | .container p {
36 |     margin: 10px;
37 |     padding: 10px;
38 |     text-align: center;
39 |     line-height: 18px;
40 |     letter-spacing: 0.6px;
41 | }
42 | 
43 | .otpCode {
44 |     display: flex;
45 |     align-items: center;
46 |     justify-content: center;
47 |     margin: 40px 0;
48 | }
49 | 
50 | .code {
51 |     border-radius: 5px;
52 |     height: 120px;
53 |     width: 100px;
54 |     margin: 10px;
55 |     border: 1px solid black;
56 |     font-size: 75px;
57 |     text-align: center;
58 | }
59 | 
60 | .code::-webkit-outer-spin-button,
61 | .code::-webkit-inner-spin-button {
62 |     -webkit-appearance: none;
63 | }
64 | 
65 | .code:focus {
66 |     outline: none;
67 | }
68 | 
69 | .info {
70 |     background-color: lightgray;
71 |     max-width: 500px;
72 |     border-radius: 5px;
73 |     padding: 5px;
74 | }
75 | 
76 | .code:valid {
77 |     border: 2px solid rgb(105, 105, 233);
78 |     box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
79 | }
80 | 
81 | .code:focus {
82 |     transform: scale(1.05);
83 |     border: 2px solid black;
84 | }


--------------------------------------------------------------------------------
/47-Testimonial_Box_Switcher/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |         <title>Testimonial Box...</title>
 8 |         <link rel="stylesheet" href="style.css">
 9 |         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous"/>
10 |     </head>
11 |     <body>
12 | 
13 |         <div class="testimonial-continer">
14 |             <div class="progressBar"></div>
15 |             <div class="fas fa-quote-right fa-quote"></div>
16 |             <div class="fas fa-quote-left fa-quote"></div>
17 | 
18 |             <p class="testimonial">I've worked with literally hundreds of HTML/CSS developers and I have to say the top spot goes to this guy. This guy is an amazing developer. He stresses on good, clean code and pays heed to the details. I love developers who respect each and every aspect of a throughly thought out design and do their best to put it in code. He goes over and beyond and transforms ART into PIXELS - without a glitch, every time.</p>
19 | 
20 |             <div class="user">
21 |                 <img src="https://randomuser.me/api/portraits/women/46.jpg" alt="user" class="user-image"/>
22 | 
23 |                 <div class="user-info">
24 |                     <h4 class="userName">Miyah Myles</h4>
25 |                     <div class="role">Marketing</div>
26 |                 </div>
27 |             </div>
28 | 
29 |         </div>
30 | 
31 |     </body>
32 |     <script src="script.js"></script>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/02-Progress_Bar/style.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     background-color: #f6f7fb;
 7 | }
 8 | 
 9 | .container {
10 |     display: flex;
11 |     padding: 250px 500px 0px 497px;
12 | }
13 | 
14 | .box {
15 |     position: relative;
16 |     max-width: fit-content;
17 |     margin: auto;
18 | }
19 | 
20 | .nav {
21 |     position: relative;
22 |     max-width: fit-content;
23 |     margin: 0px auto;
24 | }
25 | 
26 | .btn {
27 |     font-size: 18px;
28 |     padding: 5px 20px;
29 |     border: 0;
30 |     appearance: button;
31 |     margin: 30px;
32 |     border-radius: 6px;
33 |     cursor: pointer;
34 |     background-color: #3498db;
35 |     color: azure;
36 |     font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
37 | }
38 | 
39 | .btn:focus {
40 |     outline: 0;
41 | }
42 | 
43 | .btn:active {
44 |     transform: scale(0.98);
45 | }
46 | 
47 | .circle.active {
48 |     border: 6px solid #3498db;
49 | }
50 | 
51 | .line.active {
52 |     border: 2px solid #3498db;
53 | }
54 | 
55 | .circle {
56 |     background-color: white;
57 |     border-radius: 50%;
58 |     border: 6px solid #e0e0e0;
59 |     padding: 4px;
60 |     /* margin: 0px; */
61 |     font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
62 |     transition: 0.6s ease;
63 | }
64 | 
65 | .line {
66 |     min-width: 73px;
67 |     margin: 20px 0px;
68 |     min-height: 0px;
69 |     max-height: 0px;
70 |     padding: 0px;
71 |     border: 2px solid #e0e0e0;
72 |     transition: 0.6s ease;
73 | }
74 | 
75 | .btn.disabled {
76 |     cursor: not-allowed;
77 |     background-color: #e0e0e0;
78 | }
79 | 
80 | .btn.disabled:focus {
81 |     outline: 0;
82 |     transform: scale(1);
83 | }


--------------------------------------------------------------------------------
/46-Quiz_App/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap');
 2 | @import url('https://fonts.googleapis.com/css2?family=Rokkitt&display=swap');
 3 | 
 4 | * {
 5 |   box-sizing: border-box;
 6 | }
 7 | 
 8 | body {
 9 |   display: flex;
10 |   align-items: center;
11 |   justify-content: center;
12 |   height: 100vh;
13 |   margin: 0;
14 |   overflow: hidden;
15 |   background-color: rgb(196, 252, 238);
16 |   background-image: linear-gradient(
17 |     315deg,
18 |     rgb(196, 252, 238) 0%,
19 |     #f5f7fa 100%
20 |   );
21 | }
22 | 
23 | ul li {
24 |   list-style-type: none;
25 |   margin: 0;
26 |   padding: 0;
27 | }
28 | 
29 | .quizContainer {
30 |   background-color: white;
31 |   border-radius: 7px;
32 |   box-shadow: 3px 3px 10px 8px rgba(63, 62, 62, 0.1);
33 | }
34 | 
35 | .selection {
36 |   margin: 40px 25px;
37 |   width: 600px;
38 | }
39 | 
40 | .selection h2 {
41 |   text-align: center;
42 |   font-size: 25px;
43 |   letter-spacing: 1.5px;
44 |   padding: 0 15px;
45 |   font-family: 'Rokkitt', serif;
46 | }
47 | 
48 | .option ul li {
49 |   padding: 10px 0;
50 |   font-size: 1.3rem;
51 |   font-family: 'Rokkitt', serif;
52 | }
53 | 
54 | .option ul li label {
55 |   cursor: pointer;
56 | }
57 | 
58 | .quizContainer .submit button {
59 |   width: 100%;
60 |   font-size: 1.3rem;
61 |   padding: 17px;
62 |   border: none;
63 |   border-radius: 0 0 7px 7px;
64 |   color: white;
65 |   background-color: blueviolet;
66 |   cursor: pointer;
67 |   letter-spacing: 2px;
68 |   font-family: 'ZCOOL XiaoWei', serif;
69 | }
70 | 
71 | .quizContainer .submit button:hover {
72 |   background-color: #732d91;
73 | }
74 | 
75 | .quizContainer .submit button:focus {
76 |   outline: none;
77 | }
78 | .quizContainer .submit button:active {
79 |   background-color: #5e3370;
80 | }
81 | 


--------------------------------------------------------------------------------
/35-Image_Carousel/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 |     <title>Image Carousel...</title>
 9 |     <link rel="stylesheet" href="style.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 | 
15 |     <div class="container">
16 |         <div class="img_container" id="imgs">
17 |             <img src="https://i.ytimg.com/vi/zPCZWn_iWb0/maxresdefault.jpg" alt="">
18 |             <img src="https://th.bing.com/th/id/R5b2b65c390263761e8089fe42c617512?rik=Krk%2bsJW%2baIUIWw&riu=http%3a%2f%2fimages5.fanpop.com%2fimage%2fphotos%2f28000000%2frandomised-random-28065165-1024-819.jpg&ehk=5EwtKjhNaCpv2WoxrGQ6hQfUGbEnlkAb3g5OZSIKIhc%3d&risl=&pid=ImgRaw"
19 |                 alt="">
20 |             <img src="https://th.bing.com/th/id/R2556dd2bf6d531d4d4ca99f9e1c90a38?rik=ge7xHLe4i%2b5pkA&riu=http%3a%2f%2f4.bp.blogspot.com%2f-q-VHgpuM_oI%2fTiFmXRpS-PI%2fAAAAAAAABOA%2fFefPKsGdKvs%2fs1600%2fcow-and-dolphin-fake-comedy-funny-animal-wallpapers.jpg&ehk=AyqLF6OQJR3ewrkc%2bZpIZC218wDe6FmFD0NYSCSkBHo%3d&risl=&pid=ImgRaw"
21 |                 alt="">
22 |             <img src="https://th.bing.com/th/id/R6d3acf4cc122a9f42276164496545bef?rik=Y6EBG2Do9%2f1n%2fw&riu=http%3a%2f%2fsnappypixels.com%2fwp-content%2fuploads%2f2013%2f08%2fbunch-of-random-funny-pictures-16.jpg&ehk=GOsGW8umIdioXgJjrIE%2frNFM%2bo4hwVxQFCt8NS%2b%2fXtI%3d&risl=&pid=ImgRaw"
23 |                 alt="">
24 |         </div>
25 | 
26 |         <div class="buttons">
27 |             <button class="btn" id="left">Prev</button>
28 |             <button class="btn" id="right">Next</button>
29 |         </div>
30 |     </div>
31 | 
32 | </body>
33 | <script src="script.js"></script>
34 | 
35 | </html>


--------------------------------------------------------------------------------
/39-Password_Strength_Background/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | body {
 8 |     display: flex;
 9 |     align-items: center;
10 |     justify-content: center;
11 |     height: 100vh;
12 | }
13 | 
14 | .background {
15 |     position: absolute;
16 |     height: 100vh;
17 |     width: 100vw;
18 |     background: url('https://images.unsplash.com/photo-1551091708-fda32ed3178c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80') center center no-repeat;
19 |     background-size: cover;
20 |     z-index: -1;
21 |     filter: blur(20px);
22 | }
23 | 
24 | .container {
25 |     display: flex;
26 |     justify-content: center;
27 |     flex-direction: column;
28 |     background-color: white;
29 |     width: 400px;
30 |     padding: 20px;
31 |     border-radius: 5px;
32 | }
33 | 
34 | .container h2 {
35 |     margin-top: 25px;
36 |     font-size: 30px;
37 |     text-align: center;
38 |     letter-spacing: 1px;
39 |     font-weight: 500;
40 | }
41 | 
42 | .container h4 {
43 |     text-align: center;
44 |     font-weight: 100;
45 | }
46 | 
47 | .form {
48 |     margin: 10px 0px;
49 |     font-size: 18px;
50 | }
51 | 
52 | .form label {
53 |     display: block;
54 |     margin: 5px 0;
55 | }
56 | 
57 | .form input {
58 |     margin: 5px 0;
59 |     width: 100%;
60 |     height: 40px;
61 |     font-size: 15px;
62 |     padding: 10px;
63 |     outline: none;
64 |     border: 0.5px solid rgb(189, 189, 189);
65 |     border-radius: 4px;
66 | }
67 | 
68 | .form .btn {
69 |     margin: 15px 0;
70 |     width: 100%;
71 |     height: 35px;
72 |     font-size: 17px;
73 |     border-radius: 5px;
74 |     outline: none;
75 |     background-color: black;
76 |     color: white;
77 |     border: none;
78 |     cursor: pointer;
79 | }
80 | 
81 | .btn:active {
82 |     transform: scale(0.98);
83 | }


--------------------------------------------------------------------------------
/33-Notes_App/script.js:
--------------------------------------------------------------------------------
 1 | const addBtn = document.getElementById('add');
 2 | 
 3 | const notes = JSON.parse(localStorage.getItem('notes'));
 4 | 
 5 | 
 6 | if (notes) {
 7 |     notes.forEach(note => addNote(note));
 8 | }
 9 | 
10 | addBtn.addEventListener('click', () => addNote());
11 | 
12 | function addNote(text = '') {
13 |     const note = document.createElement(`div`);
14 |     note.classList.add(`note`);
15 | 
16 |     note.innerHTML = `
17 |         <div class="tools">
18 |             <button class="edit"><i class="fas fa-edit"></i></button>
19 |             <button class="delete"><i class="fas fa-trash-alt"></i></button>
20 |         </div>
21 | 
22 |         <div class="main ${text ? "" : "hidden"}"></div>
23 |         <textarea class="${text ? "hidden" : ""}"></textarea>
24 |     `
25 | 
26 |     const editBtn = note.querySelector(`.edit`);
27 |     const deleteBtn = note.querySelector(`.delete`);
28 |     const main = note.querySelector(`.main`);
29 |     const textArea = note.querySelector(`textarea`);
30 | 
31 |     textArea.value = text;
32 |     main.innerHTML = marked(text);
33 | 
34 |     deleteBtn.addEventListener('click', () => {
35 |         note.remove();
36 | 
37 |         updateLS();
38 |     })
39 | 
40 |     editBtn.addEventListener('click', () => {
41 |         main.classList.toggle(`hidden`);
42 |         textArea.classList.toggle(`hidden`);
43 |     })
44 | 
45 |     textArea.addEventListener('input', (e) => {
46 |         const { value } = e.target;
47 | 
48 |         main.innerHTML = marked(value);
49 | 
50 |         updateLS();
51 | 
52 |     })
53 | 
54 |     document.body.appendChild(note);
55 | }
56 | 
57 | function updateLS() {
58 |     const notesText = document.querySelectorAll('textarea');
59 | 
60 |     const notes = [];
61 | 
62 |     notesText.forEach(note => notes.push(note.value));
63 | 
64 |     localStorage.setItem('notes', JSON.stringify(notes));
65 | }


--------------------------------------------------------------------------------
/24-Content_Placeholder/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     margin: 0;
 7 |     display: flex;
 8 |     align-items: center;
 9 |     justify-content: center;
10 |     height: 100vh;
11 |     overflow: hidden;
12 |     background-color: #ecf0f1;
13 | }
14 | 
15 | img {
16 |     max-width: 100%;
17 | }
18 | 
19 | .card {
20 |     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
21 |     border-radius: 10px;
22 |     overflow: hidden;
23 |     width: 350px;
24 | }
25 | 
26 | .card-header {
27 |     height: 200px;
28 | }
29 | 
30 | .card-header img {
31 |     object-fit: cover;
32 |     height: 100%;
33 |     width: 100%;
34 | }
35 | 
36 | .card-content {
37 |     background-color: #fff;
38 |     padding: 30px;
39 | }
40 | 
41 | .card-title {
42 |     height: 20px;
43 |     margin: 0;
44 | }
45 | 
46 | .card-excerpt {
47 |     color: #777;
48 |     margin: 10px 0 20px;
49 | }
50 | 
51 | .author {
52 |     display: flex;
53 | }
54 | 
55 | .profile-img {
56 |     border-radius: 50%;
57 |     overflow: hidden;
58 |     height: 40px;
59 |     width: 40px;
60 | }
61 | 
62 | .author-info {
63 |     display: flex;
64 |     flex-direction: column;
65 |     justify-content: space-around;
66 |     margin-left: 10px;
67 |     width: 100px;
68 | }
69 | 
70 | .author-info small {
71 |     color: #aaa;
72 |     margin-top: 5px;
73 | }
74 | 
75 | .animated-bg {
76 |     background-image: linear-gradient( to right, #f6f7f8 0%, #edeef1 10%, #f6f7f8 20%, #f6f7f8 100%);
77 |     background-size: 200% 100%;
78 |     animation: bgPos 1s linear infinite;
79 | }
80 | 
81 | .animated-bg-text {
82 |     border-radius: 50px;
83 |     display: inline-block;
84 |     margin: 0;
85 |     height: 10px;
86 |     width: 100%;
87 | }
88 | 
89 | @keyframes bgPos {
90 |     0% {
91 |         background-position: 50% 0;
92 |     }
93 |     100% {
94 |         background-position: -150% 0;
95 |     }
96 | }


--------------------------------------------------------------------------------
/46-Quiz_App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |         <title>Quiz App...</title>
 8 |         <link rel="stylesheet" href="style.css">
 9 |     </head>
10 |     <body>
11 | 
12 |         <div class="quizContainer" id="quiz">
13 |             <div class="selection">
14 |                 <div class="question" >
15 |                     <h2 id="question">Question Text</h2>
16 |                 </div>
17 | 
18 |                 <div class="option">
19 | 
20 |                     <ul>
21 |                         <li>
22 |                             <input type="radio" name="answer" id="a" class="answer">
23 |                             <label for="a" id="a_text">A</label>
24 |                         </li>
25 |                         <li>
26 |                             <input type="radio" name="answer" id="b" class="answer">
27 |                             <label for="b" id="b_text">B</label>
28 |                         </li>
29 |                         <li>
30 |                             <input type="radio" name="answer" id="c" class="answer">
31 |                             <label for="c" id="c_text">C</label>
32 |                         </li>
33 |                         <li>
34 |                             <input type="radio" name="answer" id="d" class="answer">
35 |                             <label for="d" id="d_text">D</label>
36 |                         </li>
37 |                     </ul>
38 | 
39 |                 </div>
40 |             </div>
41 | 
42 |             <div class="submit">
43 |                 <button id="submit">Submit</button>
44 |             </div>
45 |         </div>
46 | 
47 |     </body>
48 |     <script src="script.js"></script>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/42-Live_User_Filter/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600&display=swap');
 2 | * {
 3 |     box-sizing: border-box;
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     font-family: 'Baloo 2', cursive;
 7 | }
 8 | 
 9 | body {
10 |     background-color: blueviolet;
11 |     display: flex;
12 |     align-items: center;
13 |     justify-content: center;
14 |     height: 100vh;
15 |     overflow: hidden;
16 | }
17 | 
18 | .container {
19 |     box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
20 |     border-radius: 5px;
21 |     overflow: hidden;
22 |     width: 350px;
23 | }
24 | 
25 | .subtitle {
26 |     display: inline-block;
27 |     margin: 5px 0 20px;
28 |     opacity: 0.8;
29 | }
30 | 
31 | .title {
32 |     font-size: 24px;
33 | }
34 | 
35 | .header {
36 |     background-color: #3e57db;
37 |     color: #fff;
38 |     padding: 30px 20px;
39 |     text-align: center;
40 | }
41 | 
42 | .header input {
43 |     background-color: rgba(0, 0, 0, 0.3);
44 |     border: 0;
45 |     border-radius: 50px;
46 |     color: #fff;
47 |     font-size: 14px;
48 |     padding: 10px 15px;
49 |     width: 100%;
50 | }
51 | 
52 | .header input:focus {
53 |     outline: none;
54 | }
55 | 
56 | .user-list {
57 |     background-color: white;
58 |     list-style-type: none;
59 |     max-height: 400px;
60 |     overflow-y: auto;
61 | }
62 | 
63 | .user-list li {
64 |     display: flex;
65 |     padding: 20px;
66 | }
67 | 
68 | .user-list img {
69 |     border-radius: 50%;
70 |     object-fit: cover;
71 |     height: 50px;
72 |     width: 50px;
73 | }
74 | 
75 | .user-list .user-info {
76 |     margin-left: 10px;
77 | }
78 | 
79 | .user-list .user-info h4 {
80 |     margin-left: 0 0 10px;
81 | }
82 | 
83 | .user-list .user-info p {
84 |     font-size: 12px;
85 | }
86 | 
87 | .user-list li:not(:last-of-type) {
88 |     border-bottom: 1px solid #eee;
89 | }
90 | 
91 | .user-list li.hide {
92 |     display: none;
93 | }


--------------------------------------------------------------------------------
/01-Expanding_Cards/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,
 7 |             initial-scale=1.0" />
 8 |     <title>Expanding Cards
 9 |     </title>
10 |     <link rel="stylesheet" href="style.css">
11 | </head>
12 | 
13 | <body>
14 |     <div class="container">
15 |         <div class="panel" style="background-image:
16 |                 url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');">
17 |             <h3>Explore The World
18 |             </h3>
19 |         </div>
20 |         <div class="panel" style="background-image:
21 |                 url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');">
22 |             <h3>Wild Forest
23 |             </h3>
24 |         </div>
25 |         <div class="panel
26 |                 active" style="background-image:
27 |                 url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80');">
28 |             <h3>Sunny Beach
29 |             </h3>
30 |         </div>
31 |         <div class="panel" style="background-image:
32 |                 url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80');">
33 |             <h3>City on Winter
34 |             </h3>
35 |         </div>
36 |         <div class="panel" style="background-image:
37 |                 url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');">
38 |             <h3>Mountains - Clouds
39 |             </h3>
40 |         </div>
41 |     </div>
42 | </body>
43 | 
44 | <script src="script.js"></script>
45 | 
46 | </html>


--------------------------------------------------------------------------------
/37-Pokedex/script.js:
--------------------------------------------------------------------------------
 1 | const container = document.querySelector('.container');
 2 | const pokeCount = 150;
 3 | 
 4 | const colors = {
 5 |     fire: '#FDDFDF',
 6 |     grass: '#DEFDE0',
 7 |     electric: '#FCF7DE',
 8 |     water: '#DEF3FD',
 9 |     ground: '#f4e7da',
10 |     rock: '#d5d5d4',
11 |     fairy: '#fceaff',
12 |     poison: '#98d7a5',
13 |     bug: '#f8d5a3',
14 |     dragon: '#97b3e6',
15 |     psychic: '#eaeda1',
16 |     flying: '#F5F5F5',
17 |     fighting: '#E6E0D4',
18 |     normal: '#F5F5F5'
19 | }
20 | 
21 | const main_types = Object.keys(colors)
22 | 
23 | const fetchPokemons = async() => {
24 |     for (let i = 0; i < pokeCount; i++) {
25 |         await getPokemon(i + 1);
26 |     }
27 | }
28 | 
29 | const getPokemon = async(id) => {
30 |     const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
31 |     const res = await fetch(url);
32 |     const data = await res.json();
33 |     createPokemonCard(data);
34 | 
35 |     // console.log(data.name);
36 | }
37 | 
38 | function createPokemonCard(pokemon) {
39 |     const pokeCard = document.createElement(`div`);
40 |     pokeCard.classList.add(`poke`);
41 | 
42 |     const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
43 |     const id = pokemon.id.toString().padStart(3, '0');
44 | 
45 |     const pokeType = pokemon.types.map(type => type.type.name);
46 | 
47 |     const type = main_types.find(type => pokeType.indexOf(type) > -1);
48 | 
49 |     const color = colors[type];
50 | 
51 |     pokeCard.style.background = color;
52 | 
53 |     pokeCard.innerHTML = `
54 |         <div class="img-container">
55 |         <img src="https://pokeres.bastionbot.org/images/pokemon/${pokemon.id}.png" alt="">
56 |     </div>
57 |     <div class="info">
58 |         <span class="number">#${id}</span>
59 |         <h3 class="name">${name}</h3>
60 |         <small class="type">Type : <span>${type}</span></small>
61 |     </div>
62 |     `
63 | 
64 |     container.appendChild(pokeCard);
65 | }
66 | 
67 | fetchPokemons();


--------------------------------------------------------------------------------
/51-Form_Validation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |         <title>Form Validation...</title>
 8 |         <link rel="stylesheet" href="style.css">
 9 |     </head>
10 |     <body>
11 | 
12 |         <div class="externalContainer">
13 | 
14 |             <div class="heading">
15 |                 <h1>Create a new Account</h1>
16 |             </div>
17 | 
18 | 
19 |             <form class="form" id="form">
20 |                 <div class="container">
21 |                     <label for="username">Username</label>
22 |                     <input type="text" id="username" >
23 |                     <small id="usernameText">Username can't be blank</small>
24 |                 </div>
25 | 
26 |                 <div class="container">
27 |                     <label for="email">Email</label>
28 |                     <input type="email" id="email">
29 |                     <small id="emailText">Enter a valid email address</small>
30 |                 </div>
31 | 
32 |                 <div class="container">
33 |                     <label for="password1">Password</label>
34 |                     <input type="password" id="password1">
35 |                     <small id="password1Text">Password should be 8 characters long</small>
36 |                 </div>
37 | 
38 |                 <div class="container">
39 |                     <label for="password2">Passsword Confirmation</label>
40 |                     <input type="password" id="password2">
41 |                     <small id="password2Text">Password confirmation required</small>
42 |                 </div>
43 | 
44 |                 <button type="submit" class="submit" id="submit">Create Account</button>
45 |             </form>
46 |         </div>
47 |     </body>
48 |     <script src="script.js"></script>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/26-Vertical_Slider/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | body {
 8 |     height: 100vh;
 9 | }
10 | 
11 | .slider-container {
12 |     position: relative;
13 |     overflow: hidden;
14 |     height: 100vh;
15 |     width: 100vw;
16 | }
17 | 
18 | .left-slide {
19 |     position: absolute;
20 |     width: 35%;
21 |     height: 100%;
22 |     top: 0;
23 |     left: 0;
24 |     transition: transform 0.5s ease-in-out;
25 | }
26 | 
27 | .left-slide>div {
28 |     height: 100%;
29 |     width: 100%;
30 |     display: flex;
31 |     flex-direction: column;
32 |     align-items: center;
33 |     justify-content: center;
34 |     color: white;
35 | }
36 | 
37 | .left-slide h1 {
38 |     font-size: 40px;
39 |     margin-bottom: 10px;
40 |     margin-top: -30px;
41 | }
42 | 
43 | .right-slide {
44 |     height: 100%;
45 |     position: absolute;
46 |     top: 0;
47 |     left: 35%;
48 |     width: 65%;
49 |     transition: transform 0.5s ease-in-out;
50 | }
51 | 
52 | .right-slide>div {
53 |     height: 100%;
54 |     width: 100%;
55 |     background-repeat: no-repeat;
56 |     background-size: cover;
57 |     background-position: center center;
58 | }
59 | 
60 | button {
61 |     background-color: white;
62 |     border: none;
63 |     color: #aaa;
64 |     cursor: pointer;
65 |     font-size: 16px;
66 |     padding: 15px;
67 | }
68 | 
69 | button:hover {
70 |     color: #222;
71 | }
72 | 
73 | button:focus {
74 |     outline: none;
75 | }
76 | 
77 | .slider-container .action-buttons button {
78 |     position: absolute;
79 |     left: 35%;
80 |     top: 50%;
81 |     z-index: 100;
82 | }
83 | 
84 | .slider-container .action-buttons .down-button {
85 |     transform: translateX(-100%);
86 |     border-top-left-radius: 5px;
87 |     border-bottom-left-radius: 5px;
88 | }
89 | 
90 | .slider-container .action-buttons .up-button {
91 |     transform: translateY(-100%);
92 |     border-top-right-radius: 5px;
93 |     border-bottom-right-radius: 5px;
94 | }


--------------------------------------------------------------------------------
/31-Random_Password_Generator/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@600&display=swap');
 2 | * {
 3 |     box-sizing: border-box;
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     font-family: 'Baloo Paaji 2', cursive;
 7 | }
 8 | 
 9 | body {
10 |     background-color: #3b3b98;
11 |     color: white;
12 |     display: flex;
13 |     flex-direction: column;
14 |     align-items: center;
15 |     justify-content: center;
16 |     height: 100vh;
17 |     overflow: hidden;
18 |     padding: 10px;
19 | }
20 | 
21 | h2 {
22 |     margin: 10px 0 20px;
23 |     text-align: center;
24 | }
25 | 
26 | .container {
27 |     background-color: #23235b;
28 |     box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
29 |     padding: 20px;
30 |     width: 350px;
31 |     max-width: 100%;
32 | }
33 | 
34 | .result-container {
35 |     background-color: rgba(0, 0, 0, 0.4);
36 |     display: flex;
37 |     justify-content: flex-start;
38 |     align-items: center;
39 |     position: relative;
40 |     font-size: 18px;
41 |     letter-spacing: 1px;
42 |     padding: 12px 10px;
43 |     height: 50px;
44 |     width: 100%;
45 | }
46 | 
47 | .result-container #result {
48 |     word-wrap: break-word;
49 |     max-width: calc(100% - 40px);
50 | }
51 | 
52 | .result-container .btn {
53 |     position: absolute;
54 |     top: 5px;
55 |     right: 5px;
56 |     width: 40px;
57 |     height: 40px;
58 |     font-size: 20px;
59 | }
60 | 
61 | .btn {
62 |     border: none;
63 |     background-color: #3b3b98;
64 |     color: white;
65 |     font-size: 16px;
66 |     padding: 8px 12px;
67 |     cursor: pointer;
68 |     transition: all 0.3s ease-in;
69 | }
70 | 
71 | .btn-large {
72 |     display: block;
73 |     width: 100%;
74 | }
75 | 
76 | .setting {
77 |     display: flex;
78 |     align-items: center;
79 |     justify-content: space-between;
80 |     margin: 15px 0px;
81 | }
82 | 
83 | .btn:focus {
84 |     outline: none;
85 | }
86 | 
87 | .btn:active {
88 |     transform: scale(0.95);
89 | }


--------------------------------------------------------------------------------
/40-3D_Boxes_Background/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 |     margin: 0;
 4 |     padding: 0;
 5 | }
 6 | 
 7 | body {
 8 |     background-color: #fafafa;
 9 |     display: flex;
10 |     align-items: center;
11 |     justify-content: center;
12 |     height: 100vh;
13 |     overflow: hidden;
14 |     flex-direction: column;
15 | }
16 | 
17 | .magic {
18 |     background-color: #f9ca24;
19 |     color: #fff;
20 |     border: 0;
21 |     border-radius: 3px;
22 |     font-size: 16px;
23 |     padding: 12px 20px;
24 |     cursor: pointer;
25 |     position: fixed;
26 |     top: 20px;
27 |     letter-spacing: 1px;
28 |     box-shadow: 0 3px rgba(249, 202, 36, 0.5);
29 |     z-index: 100;
30 | }
31 | 
32 | .magic:focus {
33 |     outline: none;
34 | }
35 | 
36 | .magic:active {
37 |     box-shadow: none;
38 |     transform: translateY(2px);
39 | }
40 | 
41 | .boxes {
42 |     display: flex;
43 |     flex-wrap: wrap;
44 |     justify-content: space-around;
45 |     height: 500px;
46 |     width: 500px;
47 |     position: relative;
48 |     transform: 0.4s ease;
49 |     /* border: 2px solid red; */
50 | }
51 | 
52 | .boxes.big {
53 |     width: 600px;
54 |     height: 600px;
55 | }
56 | 
57 | .boxes.big .box {
58 |     transform: rotateZ(360deg);
59 | }
60 | 
61 | .box {
62 |     background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif');
63 |     background-repeat: no-repeat;
64 |     background-size: 500px 500px;
65 |     position: relative;
66 |     height: 125px;
67 |     width: 125px;
68 |     transition: 0.4s ease;
69 | }
70 | 
71 | .box::after {
72 |     content: '';
73 |     background-color: #f6e58d;
74 |     position: absolute;
75 |     top: 8px;
76 |     right: -15px;
77 |     height: 100%;
78 |     width: 15px;
79 |     transform: skewY(45deg);
80 | }
81 | 
82 | .box::before {
83 |     content: '';
84 |     background-color: #f9ca24;
85 |     position: absolute;
86 |     bottom: -15px;
87 |     left: 8px;
88 |     height: 15px;
89 |     width: 100%;
90 |     transform: skewX(45deg);
91 | }


--------------------------------------------------------------------------------
/19-Theme_Clock/script.js:
--------------------------------------------------------------------------------
 1 | const hourEl = document.querySelector(`.hour`);
 2 | const minuteEl = document.querySelector(`.minute`);
 3 | const secondEl = document.querySelector(`.second`);
 4 | const timeEl = document.querySelector(`.time`);
 5 | const dateEl = document.querySelector(`.date`);
 6 | const toggle = document.querySelector(`.toggle`);
 7 | 
 8 | const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 9 | const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
10 | 
11 | toggle.addEventListener('click', (e) => {
12 |     const html = document.querySelector(`html`);
13 |     if (html.classList.contains(`dark`)) {
14 |         html.classList.remove(`dark`);
15 |         e.target.innerHTML = `Dark mode`;
16 |     } else {
17 |         html.classList.add(`dark`);
18 |         e.target.innerHTML = `Light mode`;
19 |     }
20 | })
21 | 
22 | function setTime() {
23 |     const time = new Date();
24 |     const month = time.getMonth();
25 |     const day = time.getDay();
26 |     const date = time.getDate();
27 |     const hours = time.getHours();
28 |     const hoursForClock = hours % 12;
29 |     const minutes = time.getMinutes();
30 |     const seconds = time.getSeconds();
31 |     const ampm = hours >= 12 ? `PM` : `AM`;
32 | 
33 |     hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock,0,11,0,360)}deg)`;
34 |     minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes,0,59,0,360)}deg)`;
35 |     secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds,0,59,0,360)}deg)`;
36 | 
37 |     timeEl.innerHTML = `${hoursForClock}:${minutes<10 ? `0${minutes}` : minutes} ${ampm}`;
38 |     dateEl.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`;
39 | }
40 | 
41 | const scale = (num, in_min, in_max, out_min, out_max) => {
42 |     return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
43 | }
44 | 
45 | setTime();
46 | 
47 | setInterval(setTime,1000)


--------------------------------------------------------------------------------
/17-Movie_App/script.js:
--------------------------------------------------------------------------------
 1 | const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1';
 2 | const IMG_PATH = 'https://image.tmdb.org/t/p/w1280';
 3 | const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query="';
 4 | 
 5 | const main = document.getElementById(`main`);
 6 | const search = document.getElementById(`search`);
 7 | const form = document.getElementById(`form`);
 8 | 
 9 | getMovies(API_URL);
10 | 
11 | async function getMovies(url) {
12 |     const res = await fetch(url);
13 |     const data = await res.json();
14 | 
15 |     // console.log(data);
16 | 
17 |     showMovies(data.results);
18 | }
19 | 
20 | function showMovies(movies) {
21 |     main.innerHTML = ``;
22 | 
23 |     movies.forEach((movie) => {
24 |         const { title, poster_path, vote_average, overview } = movie;
25 |         const movieEl = document.createElement(`div`);
26 |         movieEl.classList.add(`movie`);
27 | 
28 |         movieEl.innerHTML = `
29 |             <img src="${IMG_PATH + poster_path}" alt="${title}">
30 |             <div class="movie-info">
31 |                 <h3>"${title}"</h3>
32 |                 <span class="${getClassByRate(vote_average)}">${vote_average}</span>
33 |             </div>
34 | 
35 |             <div class="overview">
36 |             <h3>Overview</h3>
37 |             ${overview}
38 |             </div>       
39 |         `
40 | 
41 |         main.appendChild(movieEl)
42 |     })
43 | }
44 | 
45 | function getClassByRate(vote) {
46 |     if (vote >= 8) {
47 |         return `green`;
48 |     } else if (vote >= 5) {
49 |         return `orange`;
50 |     } else
51 |         return `red`;
52 | }
53 | 
54 | form.addEventListener('submit', (e) => {
55 |     e.preventDefault();
56 | 
57 |     const searchTerm = search.value;
58 | 
59 |     if (searchTerm && searchTerm !== ``) {
60 |         getMovies(SEARCH_API + searchTerm)
61 | 
62 |         search.value = ``;
63 |     } else {
64 |         window.location.reload();
65 |     }
66 | })


--------------------------------------------------------------------------------
/31-Random_Password_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 |     <title>Random Password Generator...</title>
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
 9 |     <link rel="stylesheet" href="style.css">
10 | </head>
11 | 
12 | <body>
13 |     <div class="container">
14 |         <h2>Random Password Generator</h2>
15 |         <div class="result-container">
16 |             <span id="result"></span>
17 |             <button class="btn" id="clipboard">
18 |                 <i class="far fa-clipboard"></i>
19 |             </button>
20 |         </div>
21 | 
22 |         <div class="settings">
23 |             <div class="setting">
24 |                 <label> Password Length</label>
25 |                 <input type="number" id="length" min="4" max="20" value="12">
26 |             </div>
27 |             <div class="setting">
28 |                 <label>Include Uppercase Letters</label>
29 |                 <input type="checkbox" id="uppercase" checked>
30 |             </div>
31 |             <div class="setting">
32 |                 <label>Include Lowercase Letters</label>
33 |                 <input type="checkbox" id="lowercase" checked>
34 |             </div>
35 |             <div class="setting">
36 |                 <label>Include Numbers</label>
37 |                 <input type="checkbox" id="numbers" checked>
38 |             </div>
39 |             <div class="setting">
40 |                 <label>Include Symbols</label>
41 |                 <input type="checkbox" id="symbols" checked>
42 |             </div>
43 |         </div>
44 | 
45 |         <button class="btn btn-large" id="generate">
46 |             Generate Password
47 |         </button>
48 |     </div>
49 | 
50 | </body>
51 | 
52 | <script src="script.js"></script>
53 | 
54 | </html>


--------------------------------------------------------------------------------
/45-Netflix_Mobile_Navigation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Netflix Mobile Navigation...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
10 | </head>
11 | <body>
12 | 
13 |     <button class="nav-btn open-btn">
14 |         <i class="fas fa-bars"></i>
15 |     </button>
16 | 
17 |     <img src="https://logos-download.com/wp-content/uploads/2016/03/Netflix_logo.png" alt="Logo" class="logo">
18 |     <p class="text">Mobile Navigation</p>
19 | 
20 |     <div class="nav nav-black slider">
21 |         <div class="nav-red slider">
22 |             <div class="nav-main slider">
23 |                 <img src="https://logos-download.com/wp-content/uploads/2016/03/Netflix_logo.png" alt="Logo" class="logo">
24 |                 <button class="nav-btn close-btn">
25 |                     <i class="fas fa-times"></i>
26 |                   </button>
27 |                 <ul class="list">
28 |                     <li><a href="#"> Teams</a></li>
29 |                     <li><a href="#"> Location</a></li>
30 |                     <li><a href="#"> Life at Netflix</a></li>
31 |                     <li>
32 |                         <ul>
33 |                             <li><a href="#"> Netflix culture memo</a></li>
34 |                             <li><a href="#"> Work life balance</a></li>
35 |                             <li><a href="#"> Inclusion and Diversity</a></li>
36 |                             <li><a href="#"> Blog</a></li>
37 |                         </ul>
38 |                     </li>
39 |                 </ul>
40 |             </div>
41 |         </div>
42 |     </div>
43 |     
44 | </body>
45 | 
46 | <script src="script.js"></script>
47 | </html>


--------------------------------------------------------------------------------
/08-Form_Input_Wave/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     background-color: steelblue;
 7 |     color: white;
 8 |     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 9 |     display: flex;
10 |     flex-direction: column;
11 |     align-items: center;
12 |     justify-content: center;
13 |     height: 100vh;
14 |     overflow: hidden;
15 |     margin: 0;
16 | }
17 | 
18 | .container {
19 |     background-color: rgba(0, 0, 0, 0.4);
20 |     padding: 20px 40px;
21 |     border-radius: 5px;
22 | }
23 | 
24 | .container h1 {
25 |     text-align: center;
26 |     margin-bottom: 30px;
27 | }
28 | 
29 | .container a {
30 |     text-decoration: none;
31 |     color: lightblue;
32 | }
33 | 
34 | .btn {
35 |     cursor: pointer;
36 |     display: inline-block;
37 |     width: 100%;
38 |     background: lightblue;
39 |     padding: 15px;
40 |     font-family: inherit;
41 |     font-size: 16px;
42 |     border: 0;
43 |     border-radius: 5px;
44 | }
45 | 
46 | .btn:focus {
47 |     outline: none;
48 | }
49 | 
50 | .btn:active {
51 |     transform: scale(0.98);
52 | }
53 | 
54 | .text {
55 |     margin-top: 30px;
56 | }
57 | 
58 | .form-control {
59 |     position: relative;
60 |     margin: 20px 0px 40px;
61 |     width: 300px;
62 | }
63 | 
64 | .form-control input {
65 |     background-color: transparent;
66 |     border: 0;
67 |     border-bottom: 2px white solid;
68 |     display: block;
69 |     width: 100%;
70 |     padding: 15px 0px;
71 |     font-size: 18px;
72 |     color: white;
73 | }
74 | 
75 | .form-control input:focus,
76 | .form-control input:valid {
77 |     outline: none;
78 |     border-bottom-color: lightblue;
79 | }
80 | 
81 | .form-control label {
82 |     position: absolute;
83 |     top: 15px;
84 |     left: 0px;
85 | }
86 | 
87 | .form-control label span {
88 |     display: inline-block;
89 |     font-size: 18px;
90 |     min-width: 5px;
91 |     transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
92 | }
93 | 
94 | .form-control input:focus+label span,
95 | .form-control input:valid+label span {
96 |     color: lightblue;
97 |     transform: translateY(-30px);
98 | }


--------------------------------------------------------------------------------
/14-Animated_Navigation/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |     background-color: #eafbff;
 7 |     background-image: linear-gradient( to bottom, #eafbff 0%, #eafbff 50%, #5290f9 50%, #5290f9 100%);
 8 |     font-family: Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 9 |     display: flex;
10 |     align-items: center;
11 |     justify-content: center;
12 |     height: 100vh;
13 |     margin: 0;
14 | }
15 | 
16 | nav {
17 |     background-color: #fff;
18 |     padding: 20px;
19 |     width: 80px;
20 |     display: flex;
21 |     align-items: center;
22 |     justify-content: center;
23 |     border-radius: 3px;
24 |     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
25 |     transition: width 0.6s linear;
26 | }
27 | 
28 | nav.active {
29 |     width: 350px;
30 | }
31 | 
32 | nav ul {
33 |     display: flex;
34 |     list-style-type: none;
35 |     padding: 0;
36 |     margin: 0;
37 |     width: 0;
38 |     transition: width 0.6s linear;
39 | }
40 | 
41 | nav.active ul {
42 |     width: 100%;
43 | }
44 | 
45 | nav ul li {
46 |     transform: rotateY(0deg);
47 |     opacity: 0;
48 |     transition: transform 0.6s linear, opacity 0.6s linear;
49 | }
50 | 
51 | nav.active ul li {
52 |     opacity: 1;
53 |     transform: rotateY(360deg);
54 | }
55 | 
56 | nav ul a {
57 |     position: relative;
58 |     color: #000;
59 |     text-decoration: none;
60 |     margin: 0 10px;
61 | }
62 | 
63 | .icon {
64 |     background-color: #fff;
65 |     border: 0;
66 |     cursor: pointer;
67 |     padding: 0;
68 |     position: relative;
69 |     height: 30px;
70 |     width: 30px;
71 | }
72 | 
73 | .icon:focus {
74 |     outline: 0;
75 | }
76 | 
77 | .icon .line {
78 |     background-color: #5290f9;
79 |     height: 2px;
80 |     width: 20px;
81 |     position: absolute;
82 |     top: 10px;
83 |     left: 5px;
84 |     transition: transform 0.6s linear;
85 | }
86 | 
87 | .icon .line2 {
88 |     top: auto;
89 |     bottom: 10px;
90 | }
91 | 
92 | nav.active .icon .line1 {
93 |     transform: rotate(-765deg) translateY(5.5px);
94 | }
95 | 
96 | nav.active .icon .line2 {
97 |     transform: rotate(765deg) translateY(-5.5px);
98 | }


--------------------------------------------------------------------------------
/38-Mobile_Navigation/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 |     <title>Mobile Navigation...</title>
 9 |     <link rel="stylesheet" href="style.css">
10 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
11 | </head>
12 | 
13 | <body>
14 | 
15 |     <div class="phone">
16 |         <img src="https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80" alt="home" class="content show">
17 |         <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="work" class="content">
18 |         <img src="https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80" alt="blog" class="content">
19 |         <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" alt="about" class="content">
20 | 
21 |         <nav>
22 |             <ul>
23 |                 <li class="active">
24 |                     <i class="fas fa-home"></i>
25 |                     <p>Home</p>
26 |                 </li>
27 |                 <li>
28 |                     <i class="fas fa-box"></i>
29 |                     <p>Work</p>
30 |                 </li>
31 |                 <li>
32 |                     <i class="fas fa-book-open"></i>
33 |                     <p>Blog</p>
34 |                 </li>
35 |                 <li>
36 |                     <i class="fas fa-users"></i>
37 |                     <p>About Us</p>
38 |                 </li>
39 |             </ul>
40 |         </nav>
41 |     </div>
42 | 
43 | </body>
44 | <script src="script.js"></script>
45 | 
46 | </html>


--------------------------------------------------------------------------------
/22-Drawing_App/script.js:
--------------------------------------------------------------------------------
 1 | const canvas = document.getElementById(`canvas`);
 2 | const decButton = document.getElementById(`decrease`);
 3 | const incButton = document.getElementById(`increase`);
 4 | const sizeEl = document.getElementById(`size`);
 5 | const colorEl = document.getElementById(`color`);
 6 | const clearEl = document.getElementById(`clear`);
 7 | 
 8 | const ctx = canvas.getContext(`2d`);
 9 | 
10 | let size = 10;
11 | let isPressed = false;
12 | let color = 'black';
13 | let x;
14 | let y;
15 | 
16 | canvas.addEventListener('mousedown', (e) => {
17 |     isPressed = true;
18 | 
19 |     x = e.offsetX;
20 |     y = e.offsetY;
21 | })
22 | 
23 | canvas.addEventListener('mouseup', (e) => {
24 |     isPressed = false;
25 | 
26 |     x = undefined;
27 |     y = undefined;
28 | })
29 | 
30 | function drawCircle(x, y) {
31 |     ctx.beginPath();
32 |     ctx.arc(x, y, size, 0, Math.PI * 2);
33 |     ctx.fillStyle = color;
34 |     ctx.fill();
35 | }
36 | 
37 | function drawLine(x1, y1, x2, y2) {
38 |     ctx.beginPath();
39 |     ctx.moveTo(x1, y1);
40 |     ctx.lineTo(x2, y2);
41 |     ctx.strokeStyle = color;
42 |     ctx.lineWidth = size * 2;
43 |     ctx.stroke();
44 | }
45 | 
46 | canvas.addEventListener('mousemove', (e) => {
47 |     if (isPressed) {
48 |         const x2 = e.offsetX;
49 |         const y2 = e.offsetY;
50 | 
51 |         drawCircle(x2, y2);
52 |         drawLine(x, y, x2, y2);
53 | 
54 |         x = x2;
55 |         y = y2;
56 |     }
57 | })
58 | 
59 | function updateSizeOnScreen() {
60 |     sizeEl.innerText = size;
61 | }
62 | 
63 | decButton.addEventListener('click', () => {
64 |     console.log("Event Dec Fired");
65 |     size -= 5;
66 | 
67 |     if (size < 5)
68 |         size = 5;
69 | 
70 |     updateSizeOnScreen();
71 | })
72 | 
73 | 
74 | incButton.addEventListener('click', () => {
75 |     console.log("Event Inc Fired");
76 |     size += 5;
77 | 
78 |     if (size > 50)
79 |         size = 50;
80 | 
81 |     updateSizeOnScreen();
82 | })
83 | 
84 | colorEl.addEventListener('change', (e) => {
85 |     color = e.target.value;
86 | })
87 | 
88 | clearEl.addEventListener('click', () => {
89 |     ctx.clearRect(0, 0, canvas.width, canvas.height);
90 | })


--------------------------------------------------------------------------------
/18-Background_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,
 7 |             initial-scale=1.0">
 8 |     <title>Background Slider...
 9 |     </title>
10 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
11 |     <link rel="stylesheet" href="style.css">
12 | </head>
13 | 
14 | <body>
15 | 
16 |     <div class="slider-container">
17 |         <div class="slide active" style="background-image:
18 |                 url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');">
19 |         </div>
20 |         <div class="slide" style="background-image:
21 |                 url('https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80');">
22 |         </div>
23 |         <div class="slide" style="background-image:
24 |                 url('https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');">
25 |         </div>
26 |         <div class="slide" style="background-image:
27 |                 url('https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80');">
28 |         </div>
29 |         <div class="slide" style="background-image:
30 |                 url('https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');">
31 |         </div>
32 | 
33 |         <button class="arrow left-arrow" id="left">
34 |                 <i class="fas fa-arrow-left"></i>
35 |             </button>
36 |         <button class="arrow right-arrow" id="right">
37 |                 <i class="fas fa-arrow-right"></i>
38 |             </button>
39 |     </div>
40 | </body>
41 | 
42 | <script src="script.js"></script>
43 | 
44 | </html>


--------------------------------------------------------------------------------
/17-Movie_App/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     box-sizing: border-box;
  3 | }
  4 | 
  5 | body {
  6 |     background-color: #22254b;
  7 |     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  8 |     margin: 0;
  9 | }
 10 | 
 11 | header {
 12 |     padding: 1rem;
 13 |     display: flex;
 14 |     justify-content: flex-end;
 15 |     background-color: #373b69;
 16 | }
 17 | 
 18 | .search {
 19 |     background-color: transparent;
 20 |     border: 2px solid #22254b;
 21 |     border-radius: 50px;
 22 |     font-family: inherit;
 23 |     padding: 0.5rem 1rem;
 24 |     color: white;
 25 |     font-size: 1rem;
 26 | }
 27 | 
 28 | .search::placeholder {
 29 |     color: #7378c5;
 30 | }
 31 | 
 32 | .search:focus {
 33 |     outline: none;
 34 |     background-color: #22254b;
 35 | }
 36 | 
 37 | main {
 38 |     display: flex;
 39 |     flex-wrap: wrap;
 40 | }
 41 | 
 42 | .movie {
 43 |     width: 300px;
 44 |     margin: 1rem;
 45 |     background-color: #373b69;
 46 |     box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
 47 |     position: relative;
 48 |     overflow: hidden;
 49 |     border-radius: 3px;
 50 | }
 51 | 
 52 | .movie img {
 53 |     width: 100%;
 54 | }
 55 | 
 56 | .movie-info {
 57 |     color: #eee;
 58 |     display: flex;
 59 |     align-items: center;
 60 |     justify-content: space-between;
 61 |     padding: 0.5rem 1rem 1rem;
 62 |     letter-spacing: 0.5px;
 63 | }
 64 | 
 65 | .movie-info h3 {
 66 |     margin-top: 0px;
 67 | }
 68 | 
 69 | .movie-info span {
 70 |     background-color: #22254b;
 71 |     padding: 0.25rem 0.5rem;
 72 |     border-radius: 3px;
 73 |     font-weight: bold;
 74 | }
 75 | 
 76 | .movie-info span.green {
 77 |     color: lightgreen;
 78 | }
 79 | 
 80 | .movie-info span.orange {
 81 |     color: orange;
 82 | }
 83 | 
 84 | .movie-info span.red {
 85 |     color: red;
 86 | }
 87 | 
 88 | .overview {
 89 |     background-color: #fff;
 90 |     padding: 2rem;
 91 |     position: absolute;
 92 |     left: 0;
 93 |     right: 0;
 94 |     bottom: 0;
 95 |     max-height: 100%;
 96 |     transform: translateY(101%);
 97 |     transition: transform 0.3s ease;
 98 | }
 99 | 
100 | .movie:hover .overview {
101 |     transform: translateY(0%);
102 | }


--------------------------------------------------------------------------------
/43-FeedBack_UI_Design/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     box-sizing: border-box;
  3 |     margin: 0;
  4 |     padding: 0;
  5 | }
  6 | 
  7 | body {
  8 |     display: flex;
  9 |     align-items: center;
 10 |     justify-content: center;
 11 |     height: 100vh;
 12 |     /* overflow: hidden; */
 13 |     background-color: rgb(230, 211, 195);
 14 | }
 15 | 
 16 | .container {
 17 |     display: flex;
 18 |     align-items: center;
 19 |     justify-content: center;
 20 |     flex-direction: column;
 21 |     max-width:400px;
 22 |     /* border: 2px solid red; */
 23 |     padding: 15px;
 24 |     background-color: rgb(238, 234, 234);
 25 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 26 |     border-radius: 12px;
 27 | }
 28 | 
 29 | .container h3 {
 30 |     width: 350px;
 31 |     text-align: center;
 32 |     margin: 0 auto;
 33 |     /* border: 2px solid green; */
 34 |     padding: 5px 0;
 35 | }
 36 | 
 37 | .options {
 38 |     display: flex;
 39 |     align-items: center;
 40 |     justify-content: center;
 41 |     /* border: 2px solid blue; */
 42 |     max-width: 400px;
 43 |     text-align: center;
 44 |     padding: 5px;
 45 |     margin: 14px 0;
 46 | }
 47 | 
 48 | .options .choice {
 49 |     /* border: 2px solid purple; */
 50 |     padding: 20px 25px; 
 51 |     margin: 5px;
 52 |     cursor: pointer;
 53 |     transition: all 0.3s ease-in-out;
 54 | }
 55 | 
 56 | 
 57 | .options .choice img {
 58 |     display: block;
 59 |     width: 50px;
 60 |     height: 50px;
 61 | }
 62 | 
 63 | .options .choice.active {
 64 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 65 | }
 66 | 
 67 | .btn {
 68 |     padding: 12px;
 69 |     font-size: 16px;
 70 |     border: none;
 71 |     background-color:black;
 72 |     color: white;
 73 |     border-radius: 5px;
 74 |     font-weight: bold;
 75 |     letter-spacing: 1.5px;
 76 |     cursor: pointer;
 77 | }
 78 | 
 79 | .btn:active {
 80 |     transform: scale(0.98);
 81 | }
 82 | 
 83 | .btn:focus {
 84 |     outline: none;
 85 | }
 86 | 
 87 | .fas.fa-heart {
 88 |     color: red;
 89 |     font-size: 30px;
 90 |     margin: 15px 0 0 0;
 91 | }
 92 | 
 93 | .greeting,
 94 | .feedback {
 95 |     margin: 10px 0 0 0;
 96 |     font-size: 20px;
 97 | }
 98 | 
 99 | .feedbackPromise {
100 |     padding: 12px;
101 |     font-size: 16px;
102 |     text-align: center;
103 | }


--------------------------------------------------------------------------------
/12-FAQ/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     box-sizing: border-box;
  3 | }
  4 | 
  5 | body {
  6 |     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  7 |     background-color: #f0f0f0;
  8 | }
  9 | 
 10 | h1 {
 11 |     margin: 50px 0px 30px;
 12 |     text-align: center;
 13 | }
 14 | 
 15 | .faq-container {
 16 |     max-width: 600px;
 17 |     margin: 0px auto;
 18 | }
 19 | 
 20 | .faq {
 21 |     background-color: transparent;
 22 |     border: 1px solid #9fa4a8;
 23 |     border-radius: 10px;
 24 |     margin: 20px 0px;
 25 |     padding: 30px;
 26 |     position: relative;
 27 |     overflow: hidden;
 28 |     transition: 0.3s ease;
 29 | }
 30 | 
 31 | .faq.active {
 32 |     background-color: white;
 33 |     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
 34 | }
 35 | 
 36 | .faq.active::before,
 37 | .faq.active::after {
 38 |     content: '\f075';
 39 |     font-family: 'Font Awesome 5 Free';
 40 |     color: #2ecc71;
 41 |     font-size: 7rem;
 42 |     position: absolute;
 43 |     opacity: 0.2;
 44 |     top: 20px;
 45 |     left: 20px;
 46 |     z-index: 0;
 47 | }
 48 | 
 49 | .faq.active::before {
 50 |     color: #3498db;
 51 |     top: -10px;
 52 |     left: -30px;
 53 |     transform: rotateY(180deg);
 54 | }
 55 | 
 56 | .faq-title {
 57 |     margin: 0px 35px 0px 0px;
 58 | }
 59 | 
 60 | .faq-text {
 61 |     display: none;
 62 |     margin: 30px 0px 0px;
 63 | }
 64 | 
 65 | .faq.active .faq-text {
 66 |     display: block;
 67 | }
 68 | 
 69 | .faq-toggle {
 70 |     background-color: transparent;
 71 |     border: 0;
 72 |     border-radius: 50%;
 73 |     cursor: pointer;
 74 |     display: flex;
 75 |     align-items: center;
 76 |     justify-content: center;
 77 |     font-size: 16px;
 78 |     padding: 0px;
 79 |     position: absolute;
 80 |     top: 30px;
 81 |     right: 30px;
 82 |     width: 30px;
 83 |     height: 30px;
 84 | }
 85 | 
 86 | .faq-toggle:focus {
 87 |     outline: 0;
 88 | }
 89 | 
 90 | .faq-toggle .fa-times {
 91 |     display: none;
 92 | }
 93 | 
 94 | .faq.active .faq-toggle .fa-times {
 95 |     color: white;
 96 |     display: block;
 97 | }
 98 | 
 99 | .faq.active .faq-toggle .fa-chevron-down {
100 |     display: none;
101 | }
102 | 
103 | .faq.active .faq-toggle {
104 |     background-color: #9fa4a8;
105 | }


--------------------------------------------------------------------------------
/45-Netflix_Mobile_Navigation/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@500&display=swap');
  2 | 
  3 | * {
  4 |   box-sizing: border-box;
  5 |   font-family: 'Baloo Bhaina 2', cursive;
  6 | }
  7 | 
  8 | body {
  9 |   display: flex;
 10 |   align-items: center;
 11 |   justify-content: center;
 12 |   height: 100vh;
 13 |   margin: 0;
 14 |   flex-direction: column;
 15 |   overflow: hidden;
 16 | }
 17 | 
 18 | .nav-btn {
 19 |   background: transparent;
 20 |   border: none;
 21 |   cursor: pointer;
 22 |   font-size: 20px;
 23 | }
 24 | 
 25 | .open-btn {
 26 |   position: fixed;
 27 |   top: 12px;
 28 |   left: 12px;
 29 | }
 30 | 
 31 | .nav {
 32 |   position: fixed;
 33 |   top: 0;
 34 |   left: 0;
 35 |   height: 100vh;
 36 |   /* transform: translateX(-100%); */
 37 | }
 38 | 
 39 | .slider {
 40 |   transform: translateX(-100%);
 41 |   transition: transform 0.4s ease-in-out;
 42 | }
 43 | 
 44 | .slider.visible {
 45 |   transform: translateX(0);
 46 | }
 47 | 
 48 | ul {
 49 |   list-style-type: none;
 50 | }
 51 | .logo {
 52 |     width: 200px;
 53 | }
 54 | 
 55 | .slider .logo {
 56 |   width: 150px;
 57 | }
 58 | 
 59 | 
 60 | .nav-black {
 61 |   width: 500px;
 62 |   background-color: black;
 63 |   border: none;
 64 |   transition-delay: 0.4s;
 65 | }
 66 | 
 67 | .nav-black.visible {
 68 |   transition-delay: 0s;
 69 | }
 70 | 
 71 | .nav-red {
 72 |   width: 90%;
 73 |   background-color: red;
 74 |   height: 100%;
 75 |   border: none;
 76 |   transition-delay: 0.2s;
 77 | }
 78 | 
 79 | .nav-red.visible {
 80 |   transition-delay: 0.2s;
 81 | }
 82 | 
 83 | .nav-main {
 84 |   height: 100%;
 85 |   width: 90%;
 86 |   padding: 50px 35px;
 87 |   background-color: white;
 88 |   margin: 0;
 89 |   border: none;
 90 |   transition-delay: 0s;
 91 | }
 92 | 
 93 | .nav-main.visible {
 94 |   transition-delay: 0.4s;
 95 | }
 96 | 
 97 | .nav-main button.close-btn {
 98 |   position: relative;
 99 |   right: -150px;
100 |   color: grey;
101 |   top: -30px;
102 |   opacity: 0.7;
103 | }
104 | 
105 | a {
106 |   text-decoration: none;
107 |   font-size: 20px;
108 |   color: rgb(97, 91, 91);
109 | }
110 | 
111 | li {
112 |   margin: 10px 0;
113 | }
114 | 
115 | .list {
116 |   padding: 0;
117 | }
118 | 
119 | .nav-btn:active {
120 |   transform: scale(0.95);
121 | }
122 | 
123 | p {
124 |     font-size: 23px;
125 | }


--------------------------------------------------------------------------------
/51-Form_Validation/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Cabin:ital@1&display=swap');
  2 | @import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@500&display=swap');
  3 | 
  4 | * {
  5 |     box-sizing: border-box;
  6 |     font-family: 'Cabin', sans-serif;
  7 | }
  8 | 
  9 | body {
 10 |     display: flex;
 11 |     align-items: center;
 12 |     justify-content: center;
 13 |     height: 100vh;
 14 |     overflow: hidden;
 15 |     margin: 0;
 16 |     flex-direction: column;
 17 |     background: blueviolet;
 18 | }
 19 | 
 20 | 
 21 | .externalContainer {
 22 |     background-color: white;
 23 |     display: flex;
 24 |     align-items: left;
 25 |     justify-content: center;
 26 |     flex-direction: column;
 27 |     padding: 20px 40px;
 28 |     width: 400px;
 29 |     border-radius: 7px;
 30 |     box-shadow: 0px 0px 2px 4px rgb(83, 81, 81);
 31 | }
 32 | 
 33 | .heading {
 34 |     display: flex;
 35 |     justify-content: center;
 36 | }
 37 | 
 38 | h1 {
 39 |     font-size: 25px;
 40 | }
 41 | 
 42 | 
 43 | .form {
 44 |     display: flex;
 45 |     align-items: left;
 46 |     justify-content: center;
 47 |     flex-direction: column;
 48 | }
 49 | 
 50 | .container {
 51 |     display: flex;
 52 |     align-items: left;
 53 |     justify-content: center;
 54 |     flex-direction: column;
 55 |     margin-bottom: 20px;
 56 | }
 57 | 
 58 | button {
 59 |     margin-top: 20px;
 60 | }
 61 | 
 62 | label,input,small {
 63 |     padding: 2px 0 0 0;
 64 |     font-family: 'Baloo Thambi 2', cursive;
 65 | }
 66 | 
 67 | label {
 68 |     font-weight: 700;
 69 | }
 70 | 
 71 | small {
 72 |     color: red;
 73 |     display: none;
 74 | }
 75 | 
 76 | input {
 77 |     margin: 3px 0;
 78 |     padding: 5px;
 79 |     font-size: 16px;
 80 |     border: 1px solid grey;
 81 |     border-radius: 5px;
 82 | }
 83 | 
 84 | input:focus {
 85 |     outline: none;
 86 | }
 87 | 
 88 | input:active {
 89 |     outline: none;
 90 | }
 91 | 
 92 | input.invalid {
 93 |     border: 1px solid red;
 94 | }
 95 | 
 96 | input.valid {
 97 |     border: 1px solid rgb(6, 214, 6);
 98 | }
 99 | 
100 | .submit {
101 |     font-size: 18px;
102 |     padding: 8px 0;
103 |     background-color: blueviolet;
104 |     border: none;
105 |     color: white;
106 |     border-radius: 5px;
107 |     cursor: pointer;
108 | }
109 | 
110 | .submit:focus {
111 |     outline: none;
112 | }
113 | 
114 | .submit:active {
115 |     transform: scale(0.98);
116 | }


--------------------------------------------------------------------------------
/50-Insect_Catch_Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |         <title>Insect Catch Game...</title>
 8 |         <link rel="stylesheet" href="style.css">
 9 |     </head>
10 |     <body>
11 |         <div class="screen" id="startScreen">
12 |             <h1 class="startHeading">Catch The Insect</h1>
13 |             <button class="btn startButton" id="start">Play Game</button>
14 |         </div>
15 | 
16 |         <div class="screen" id="choiceScreen">
17 |             <h1 class="choiceHeading">Which is the most Annoying Insect?</h1>
18 |             <ul class="list">
19 |                 <li>
20 |                     <button class="choiceButton" id="choice1">
21 |                         <p>Fly</p>
22 |                         <img src="http://pngimg.com/uploads/fly/fly_PNG3946.png" alt="Fly">
23 |                     </button>
24 |                 </li>
25 |                 <li>
26 |                     <button class="choiceButton" id="choice2">
27 |                         <p>Mosquito</p>
28 |                         <img src="http://pngimg.com/uploads/mosquito/mosquito_PNG18175.png" alt="Mosquito">
29 |                     </button>
30 |                 </li>
31 |                 <li>
32 |                     <button class="choiceButton" id="choice3">
33 |                         <p>Spider</p>
34 |                         <img src="http://pngimg.com/uploads/spider/spider_PNG12.png" alt="Spider">
35 |                     </button>
36 |                 </li>
37 |                 <li>
38 |                     <button class="choiceButton" id="choice4">
39 |                         <p>Roach</p>
40 |                         <img src="http://pngimg.com/uploads/roach/roach_PNG12163.png" alt="roach">
41 |                     </button>
42 |                 </li>
43 |             </ul>
44 |         </div>
45 | 
46 |         <div class="screen game-container" id="game-container">
47 |             <h3 id="time" class="time">Time: 00:00</h3>
48 |             <h3 id="score" class="score">Score: 0</h3>
49 |             <h5 id="quit" class="quit">
50 |                 Are you annnoyed yet?
51 |                 <br>
52 |                 You are playing an impossible game!!
53 |             </h5>
54 |         </div>
55 |         
56 |     </body>
57 |     <script src="script.js"></script>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/28-Github_Profiles/script.js:
--------------------------------------------------------------------------------
 1 | const APIURL = 'https://api.github.com/users/';
 2 | 
 3 | const main = document.querySelector(`.main`);
 4 | const form = document.querySelector(`.form`);
 5 | const search = document.querySelector(`.search`);
 6 | 
 7 | async function getUser(userName) {
 8 |     try {
 9 |         const { data } = await axios(APIURL + userName);
10 | 
11 |         console.log(data);
12 | 
13 |         createUserCard(data);
14 |         getRepos(userName);
15 |     } catch (err) {
16 |         if (err.response.status == 404) {
17 |             createErrorCard(`No profile with this username`);
18 |         }
19 |     }
20 | }
21 | 
22 | async function getRepos(userName) {
23 |     try {
24 |         const { data } = await axios(APIURL + userName + '/repos?sort=created');
25 |         addReposToCard(data);
26 |     } catch (err) {
27 |         createErrorCard(`Problem fetching repos`);
28 |     }
29 | }
30 | 
31 | function createUserCard(user) {
32 |     const cardHTML = `
33 |     <div class="pf_img" style="background-image: url('${user.avatar_url}');">
34 |     </div>
35 |     <div class="content">
36 |         <div class="name">${user.name}</div>
37 |         <div class="info">${user.bio}</div>
38 |         <div class="social">
39 |             <span class="followers">${user.followers} <strong>Followers</strong></span>
40 |             <span class="following">${user.following} <strong>Following</strong></span>
41 |             <span class="Repos">${user.public_repos} <strong>Repos</strong></span>
42 |         </div>
43 | 
44 |         <div class="repository"></div>
45 |     </div>
46 |     `;
47 | 
48 |     main.innerHTML = cardHTML;
49 | }
50 | 
51 | function createErrorCard(msg) {
52 |     const cardHTML = `
53 |     <div class="error">
54 |             <h1>${msg}</h1>
55 |         </div>
56 |     `
57 |     main.innerHTML = cardHTML;
58 | }
59 | 
60 | function addReposToCard(repos) {
61 |     const reposEl = document.querySelector(`.repository`);
62 | 
63 |     repos
64 |         .slice(0, 5)
65 |         .forEach(repo => {
66 |             const repoEl = document.createElement(`a`);
67 |             repoEl.href = repo.html_url;
68 |             repoEl.target = `_blank`;
69 |             repoEl.innerHTML = repo.name;
70 | 
71 |             reposEl.appendChild(repoEl);
72 |         })
73 | }
74 | 
75 | form.addEventListener('submit', (e) => {
76 |     e.preventDefault();
77 | 
78 |     const user = search.value;
79 | 
80 |     if (user) {
81 |         getUser(user);
82 |         search.value = '';
83 |     }
84 | })


--------------------------------------------------------------------------------
/26-Vertical_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 |     <title>Vertical Slider...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <div class="slider-container">
15 |         <div class="left-slide">
16 |             <div style="background-color: #FD3555">
17 |                 <h1>Nature</h1>
18 |                 <p>all in pink</p>
19 |             </div>
20 |             <div style="background-color: #2A86BA">
21 |                 <h1>Bluuue Sky</h1>
22 |                 <p>with it's mountains</p>
23 |             </div>
24 |             <div style="background-color: #252E33">
25 |                 <h1>Lonely castle</h1>
26 |                 <p>in the wilderness</p>
27 | 
28 |             </div>
29 |             <div style="background-color: #FFB866">
30 |                 <h1>Flying eagle</h1>
31 |                 <p>in the sunset</p>
32 |             </div>
33 |         </div>
34 | 
35 |         <div class="right-slide">
36 |             <div style="background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80')"></div>
37 |             <div style="background-image: url('https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80')"></div>
38 |             <div style="background-image: url('https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80')"></div>
39 |             <div style="background-image: url('https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80')"></div>
40 |         </div>
41 | 
42 |         <div class="action-buttons">
43 |             <button class="down-button">
44 |                 <i class="fas fa-arrow-down"></i>
45 |             </button>
46 | 
47 |             <button class="up-button">
48 |                 <i class="fas fa-arrow-up"></i>
49 |             </button>
50 |         </div>
51 |     </div>
52 | 
53 | </body>
54 | 
55 | <script src="script.js"></script>
56 | 
57 | </html>


--------------------------------------------------------------------------------
/50-Insect_Catch_Game/script.js:
--------------------------------------------------------------------------------
 1 | const screens = document.querySelectorAll('.screen');
 2 | const choiceButton = document.querySelectorAll('.choiceButton');
 3 | const startBtn = document.getElementById('start');
 4 | const gameContainer = document.getElementById(`game-container`);
 5 | const time = document.getElementById(`time`);
 6 | const score = document.getElementById(`score`);
 7 | const message = document.getElementById(`quit`);
 8 | 
 9 | let seconds = 0,
10 |     points = 0,
11 |     selectedInsects = {};
12 | 
13 | startBtn.addEventListener('click', () => screens[0].classList.add(`up`));
14 | 
15 | choiceButton.forEach(btn => {
16 |     btn.addEventListener('click', () => {
17 |         const img = btn.querySelector(`img`);
18 |         const src = img.getAttribute(`src`);
19 |         const alt = img.getAttribute(`alt`);
20 |         selectedInsects = {
21 |             src,
22 |             alt
23 |         };
24 |         screens[1].classList.add(`up`);
25 |         setTimeout(createInsect,1000);
26 |         startGame();
27 |     })
28 | })
29 | 
30 | function startGame() {
31 |     setInterval(increaseTime,1000);
32 | }
33 | 
34 | function increaseTime() {
35 |     let m = Math.floor(seconds / 60);
36 |     let s = seconds % 60;
37 |     m = m < 10 ? `0${m}` : m;
38 |     s = s < 10 ? `0${s}` : s;
39 |     time.innerHTML = `Time: ${m}:${s}`;
40 |     seconds++;
41 | }
42 | 
43 | function createInsect() {
44 |     const insect = document.createElement(`div`);
45 |     insect.classList.add(`insect`);
46 |     const {x,y} = getRandomLocation();
47 |     insect.style.top = `${y}px`;
48 |     insect.style.left = `${x}px`;
49 |     insect.innerHTML = `<img src="${selectedInsects.src}" alt="${selectedInsects.alt}" style="transform: rotate(${Math.random() * 360}deg)" />`;
50 | 
51 |     insect.addEventListener('click', catchInsect);
52 |     gameContainer.appendChild(insect);
53 | }
54 | 
55 | function getRandomLocation() {
56 |     const width = window.innerWidth;
57 |     const height = window.innerHeight;
58 |     const x = Math.random() * (width - 200) + 100;
59 |     const y = Math.random() * (height - 200) + 100;
60 |     return { x, y };
61 | }
62 | 
63 | function catchInsect() {
64 |     increaseScore();
65 |     this.classList.add('caught');
66 |     setTimeout(() => this.remove(), 2000);
67 |     addInsects();
68 | }
69 | 
70 | function addInsects() {
71 |     setTimeout(createInsect, 1000);
72 |     setTimeout(createInsect, 1500);
73 | }
74 | 
75 | function increaseScore() {
76 |     points++
77 |     if(points > 19) {
78 |         message.classList.add('visible')
79 |     }
80 |     score.innerHTML = `Score: ${points}`
81 | }


--------------------------------------------------------------------------------
/31-Random_Password_Generator/script.js:
--------------------------------------------------------------------------------
 1 | const resultEl = document.getElementById(`result`);
 2 | const lengthEl = document.getElementById(`length`);
 3 | const upperCaseEl = document.getElementById(`uppercase`);
 4 | const lowerCaseEl = document.getElementById(`lowercase`);
 5 | const numbersEl = document.getElementById(`numbers`);
 6 | const symbolsEl = document.getElementById(`symbols`);
 7 | const generateEl = document.getElementById(`generate`);
 8 | const clipboardEl = document.getElementById(`clipboard`);
 9 | 
10 | const randFunc = {
11 |     lower: getRandomLower,
12 |     upper: getRandomUpper,
13 |     number: getRandomNumber,
14 |     symbol: getRandomSymbol
15 | };
16 | 
17 | clipboardEl.addEventListener('click', () => {
18 |     const textarea = document.createElement('textarea');
19 |     const password = resultEl.innerText;
20 | 
21 |     if (!password)
22 |         return;
23 | 
24 |     textarea.value = password;
25 |     document.body.appendChild(textarea);
26 |     textarea.select();
27 |     document.execCommand('copy');
28 |     textarea.remove();
29 |     alert(`Password copied to clipboard!`);
30 | })
31 | 
32 | generateEl.addEventListener('click', () => {
33 |     const length = +lengthEl.value;
34 |     const hasLower = lowerCaseEl.checked;
35 |     const hasUpper = upperCaseEl.checked;
36 |     const hasNumber = numbersEl.checked;
37 |     const hasSymbol = symbolsEl.checked;
38 | 
39 |     resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length);
40 | })
41 | 
42 | function generatePassword(lower, upper, number, symbol, length) {
43 |     let generatedPassword = ``;
44 |     const typesCount = lower + upper + number + symbol;
45 | 
46 |     const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(item => Object.values(item)[0])
47 | 
48 |     if (typesCount === 0)
49 |         return '';
50 | 
51 |     for (let i = 0; i < length; i += typesCount) {
52 |         typesArr.forEach(type => {
53 |             const funcName = Object.keys(type)[0];
54 |             generatedPassword += randFunc[funcName]();
55 |         })
56 |     }
57 | 
58 |     const finalPassword = generatedPassword.slice(0, length);
59 | 
60 |     return finalPassword;
61 | }
62 | 
63 | function getRandomLower() {
64 |     return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
65 | }
66 | 
67 | function getRandomUpper() {
68 |     return String.fromCharCode(Math.floor(Math.random() * 26) + 65)
69 | }
70 | 
71 | function getRandomNumber() {
72 |     return String.fromCharCode(Math.floor(Math.random() * 10) + 48)
73 | }
74 | 
75 | function getRandomSymbol() {
76 |     const symbols = '!@#$%^&*(){}[]=<>/,.'
77 |     return symbols[Math.floor(Math.random() * symbols.length)]
78 | }


--------------------------------------------------------------------------------
/16-Drink_Water/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     box-sizing: border-box;
  3 |     margin: 0;
  4 |     padding: 0;
  5 | }
  6 | 
  7 | body {
  8 |     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  9 |     background-color: rgb(48, 146, 185);
 10 |     display: flex;
 11 |     align-items: center;
 12 |     justify-content: center;
 13 |     flex-direction: column;
 14 |     margin: 10px;
 15 |     color: white;
 16 | }
 17 | 
 18 | h1,
 19 | h3 {
 20 |     margin: 5px;
 21 | }
 22 | 
 23 | .glass {
 24 |     margin: 15px;
 25 |     height: 350px;
 26 |     width: 150px;
 27 |     border: 5px solid rgb(22, 20, 126);
 28 |     border-radius: 0 0 30px 30px;
 29 |     display: flex;
 30 |     flex-direction: column;
 31 |     align-items: center;
 32 |     justify-content: center;
 33 |     background-color: white;
 34 |     color: rgb(33, 31, 133);
 35 |     overflow: hidden;
 36 |     font-size: 20px;
 37 |     transition: all 0.5s ease;
 38 | }
 39 | 
 40 | .remained {
 41 |     font-size: 20px;
 42 |     height: 350px;
 43 |     width: 150px;
 44 |     visibility: visible;
 45 |     overflow: visible;
 46 |     display: flex;
 47 |     align-items: center;
 48 |     justify-content: center;
 49 |     flex-direction: column;
 50 |     transition: all 0.5s ease;
 51 | }
 52 | 
 53 | .remained span {
 54 |     display: block;
 55 |     text-align: center;
 56 | }
 57 | 
 58 | .percantage {
 59 |     font-size: 30px;
 60 |     height: 0px;
 61 |     width: 150px;
 62 |     visibility: hidden;
 63 |     background-color: rgb(70, 170, 201);
 64 |     color: white;
 65 |     overflow: hidden;
 66 |     display: flex;
 67 |     flex-direction: column;
 68 |     align-items: center;
 69 |     justify-content: center;
 70 |     transition: all 0.5s ease;
 71 | }
 72 | 
 73 | .text {
 74 |     margin: 20px 0 0 0;
 75 |     font-size: 25px;
 76 | }
 77 | 
 78 | .sub-glass {
 79 |     display: flex;
 80 |     align-items: center;
 81 |     justify-content: center;
 82 |     width: 350px;
 83 |     flex-wrap: wrap;
 84 | }
 85 | 
 86 | .mini-glass {
 87 |     margin: 10px;
 88 |     padding: 10px;
 89 |     background-color: white;
 90 |     overflow: hidden;
 91 |     border: 5px solid rgb(33, 31, 133);
 92 |     color: rgb(33, 31, 133);
 93 |     height: 100px;
 94 |     border-radius: 0 0 20px 20px;
 95 |     width: 55px;
 96 |     display: flex;
 97 |     align-items: center;
 98 |     justify-content: center;
 99 |     text-align: center;
100 |     transition: all 0.5s ease;
101 |     cursor: pointer;
102 | }
103 | 
104 | .mini-glass.active {
105 |     background-color: rgb(70, 170, 201);
106 |     color: white;
107 | }
108 | 
109 | #liters {
110 |     font-weight: bold;
111 | }


--------------------------------------------------------------------------------
/03-Rotating_Navigation/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     box-sizing: border-box;
  3 | }
  4 | 
  5 | body {
  6 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  7 |     background-color: #333;
  8 |     color: #222;
  9 |     overflow-x: hidden;
 10 |     margin: 0;
 11 | }
 12 | 
 13 | .container {
 14 |     background-color: #fafafa;
 15 |     transform-origin: top left;
 16 |     transition: transform 0.5s linear;
 17 |     width: 100vw;
 18 |     padding: 50px;
 19 | }
 20 | 
 21 | .container.show-nav {
 22 |     transform: rotate(-20deg);
 23 | }
 24 | 
 25 | .circle-container {
 26 |     position: fixed;
 27 |     top: -100px;
 28 |     left: -100px;
 29 | }
 30 | 
 31 | .circle {
 32 |     background-color: #ff7979;
 33 |     height: 200px;
 34 |     width: 200px;
 35 |     border-radius: 50%;
 36 |     position: relative;
 37 |     transition: transform 0.5s linear;
 38 | }
 39 | 
 40 | .container.show-nav .circle {
 41 |     transform: rotate(-70deg);
 42 | }
 43 | 
 44 | .circle button {
 45 |     cursor: pointer;
 46 |     position: absolute;
 47 |     top: 50%;
 48 |     left: 50%;
 49 |     height: 100px;
 50 |     background: transparent;
 51 |     border: 0;
 52 |     font-size: 26px;
 53 |     color: #fff;
 54 | }
 55 | 
 56 | .circle button:focus {
 57 |     outline: none;
 58 | }
 59 | 
 60 | .circle button#open {
 61 |     left: 60%;
 62 | }
 63 | 
 64 | .circle button#close {
 65 |     top: 60%;
 66 |     transform: rotate(90deg);
 67 |     transform-origin: top left;
 68 | }
 69 | 
 70 | .container.show-nav+nav li {
 71 |     transform: translateX(0);
 72 |     transition-delay: 0.3s;
 73 | }
 74 | 
 75 | nav {
 76 |     position: fixed;
 77 |     bottom: 40px;
 78 |     left: 0;
 79 |     z-index: 100;
 80 | }
 81 | 
 82 | nav ul {
 83 |     list-style-type: none;
 84 |     padding-left: 30px;
 85 | }
 86 | 
 87 | nav ul li {
 88 |     text-transform: uppercase;
 89 |     color: #fff;
 90 |     margin: 40px 0;
 91 |     transform: translateX(-100%);
 92 |     transition: transform 0.4s ease-in;
 93 | }
 94 | 
 95 | nav ul li i {
 96 |     font-size: 20px;
 97 |     margin-right: 10px;
 98 | }
 99 | 
100 | nav ul li+li {
101 |     margin-left: 15px;
102 |     transform: translateX(-150%);
103 | }
104 | 
105 | nav ul li+li+li {
106 |     margin-left: 30px;
107 |     transform: translateX(-200%);
108 | }
109 | 
110 | .content img {
111 |     max-width: 100%;
112 | }
113 | 
114 | .content {
115 |     max-width: 1000px;
116 |     margin: 50px auto;
117 | }
118 | 
119 | .content h1 {
120 |     margin: 0;
121 | }
122 | 
123 | .content small {
124 |     color: #555;
125 |     font-style: italic;
126 | }
127 | 
128 | .content p {
129 |     color: #333;
130 |     line-height: 1.5;
131 | }


--------------------------------------------------------------------------------
/28-Github_Profiles/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
  2 | * {
  3 |     box-sizing: border-box;
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     font-family: 'Poppins', sans-serif;
  7 | }
  8 | 
  9 | body {
 10 |     background-color: #2a2a72;
 11 |     display: flex;
 12 |     flex-direction: column;
 13 |     align-items: center;
 14 |     justify-content: center;
 15 |     height: 100vh;
 16 |     overflow: hidden;
 17 | }
 18 | 
 19 | .form {
 20 |     width: 100%;
 21 |     max-width: 700px;
 22 |     height: 100%;
 23 |     max-height: 60px;
 24 | }
 25 | 
 26 | input {
 27 |     width: 100%;
 28 |     height: 100%;
 29 |     padding: 25px;
 30 |     border: none;
 31 |     border-radius: 10px;
 32 |     background-color: #4c2885;
 33 |     font-size: 20px;
 34 |     color: white;
 35 | }
 36 | 
 37 | input::placeholder {
 38 |     color: rgb(240, 206, 206);
 39 | }
 40 | 
 41 | input:focus {
 42 |     outline: none;
 43 | }
 44 | 
 45 | .main {
 46 |     display: flex;
 47 |     align-items: center;
 48 |     overflow: hidden;
 49 |     flex-wrap: wrap;
 50 |     padding: 0 0 0 45px;
 51 |     margin-top: 30px;
 52 |     width: 765px;
 53 |     background-color: #4c2885;
 54 |     border-radius: 20px;
 55 | }
 56 | 
 57 | .pf_img {
 58 |     height: 150px;
 59 |     width: 150px;
 60 |     background-position: center;
 61 |     background-repeat: no-repeat;
 62 |     background-size: cover;
 63 |     border-radius: 50%;
 64 |     border: 6px solid rgb(130, 146, 238);
 65 | }
 66 | 
 67 | .content {
 68 |     display: flex;
 69 |     flex-direction: column;
 70 |     align-items: left;
 71 |     justify-content: center;
 72 |     overflow: hidden;
 73 |     margin: 10px 35px;
 74 |     color: white;
 75 | }
 76 | 
 77 | .error {
 78 |     margin: auto;
 79 |     color: white;
 80 | }
 81 | 
 82 | .name {
 83 |     font-size: 25px;
 84 |     padding: 15px 0 15px 0;
 85 |     font-weight: bold;
 86 | }
 87 | 
 88 | .info {
 89 |     font-size: 18px;
 90 |     padding: 15px 0 15px 0;
 91 |     max-width: 450px;
 92 | }
 93 | 
 94 | .social {
 95 |     font-size: 18px;
 96 |     display: flex;
 97 |     flex-direction: row;
 98 |     align-items: center;
 99 |     justify-content: space-between;
100 |     padding: 15px 0;
101 |     max-width: 350px;
102 | }
103 | 
104 | .repository {
105 |     font-size: 12px;
106 |     display: flex;
107 |     flex-direction: row;
108 |     align-items: center;
109 |     justify-content: left;
110 |     max-width: 500px;
111 |     flex-wrap: wrap;
112 | }
113 | 
114 | .repository a {
115 |     color: white;
116 |     text-decoration: none;
117 |     background-color: #2a2a72;
118 |     margin: 0 10px 10px 0;
119 |     padding: 5px;
120 |     border: none;
121 |     border-radius: 5px;
122 | }


--------------------------------------------------------------------------------
/03-Rotating_Navigation/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>Rotating Navigation...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
10 | </head>
11 | 
12 | <body>
13 |     <div class="container">
14 |         <div class="circle-container">
15 |             <div class="circle">
16 |                 <button id="close"> <i class="fas fa-times"></i>
17 |                 </button>
18 |                 <button id="open"> <i class="fas fa-bars"></i>
19 |                 </button>
20 |             </div>
21 |         </div>
22 | 
23 |         <div class="content">
24 |             <h1>Great Article on Dogs</h1>
25 |             <small>Anshul Sharma</small>
26 | 
27 |             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor, culpa! Est vel perferendis unde blanditiis, minus saepe voluptatibus veritatis itaque, quam, tempore explicabo voluptatem distinctio dolore autem voluptatum eum harum! Reiciendis
28 |                 dolor quos facilis inventore nisi exercitationem, velit maiores. Reprehenderit perferendis iusto dolore neque molestiae est dolorem esse, tempora unde quos labore consequatur ipsa voluptatem ipsum hic sapiente et rerum? Itaque non distinctio
29 |                 eligendi quas at tempora molestias ad. Architecto, deleniti totam? Dolores, quo, alias architecto culpa facilis natus, ab nesciunt dicta facere error quam odit nam necessitatibus eius laborum!</p>
30 | 
31 |             <h3>My Dog</h3>
32 | 
33 |             <img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="Puppy" />
34 | 
35 |             <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae iure consectetur eaque, tempore exercitationem possimus inventore sit eveniet saepe, fugiat veritatis impedit repellendus cum vel explicabo laboriosam quis nulla sunt.Consequuntur
36 |                 molestiae similique labore optio, tenetur adipisci exercitationem veritatis aperiam ullam perspiciatis veniam blanditiis numquam a beatae officia, est, ut eveniet excepturi fugiat deleniti. Quo ipsum natus architecto perferendis corporis?</p>
37 |         </div>
38 |     </div>
39 | 
40 |     <nav>
41 |         <ul>
42 |             <li><i class="fas fa-home"></i>Home</li>
43 |             <li><i class="fas fa-user-alt"></i>About</li>
44 |             <li><i class="fas fa-envelope"></i>Contact</li>
45 |         </ul>
46 |     </nav>
47 | 
48 | </body>
49 | 
50 | <script src="script.js"></script>
51 | 
52 | </html>


--------------------------------------------------------------------------------
/50-Insect_Catch_Game/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap");
  2 | 
  3 | * {
  4 |   box-sizing: border-box;
  5 |   font-family: "Press Start 2P", sans-serif;
  6 | }
  7 | 
  8 | body {
  9 |   background-color: #516dff;
 10 |   color: white;
 11 |   height: 100vh;
 12 |   overflow: hidden;
 13 |   margin: 0;
 14 |   text-align: center;
 15 | }
 16 | 
 17 | a {
 18 |     color: white;
 19 | }
 20 | 
 21 | h1 {
 22 |   line-height: 1.4;
 23 | }
 24 | 
 25 | .btn {
 26 |   border: 0;
 27 |   background-color: white;
 28 |   color: #516dff;
 29 |   padding: 15px 20px;
 30 |   cursor: pointer;
 31 | }
 32 | 
 33 | .btn:hover {
 34 |   opacity: 0.9;
 35 | }
 36 | 
 37 | .btn:focus {
 38 |   outline: none;
 39 | }
 40 | 
 41 | .screen {
 42 |   display: flex;
 43 |   align-items: center;
 44 |   justify-content: center;
 45 |   flex-direction: column;
 46 |   height: 100vh;
 47 |   width: 100vw;
 48 |   transition: margin 0.5s ease-out;
 49 | }
 50 | 
 51 | .screen.up {
 52 |   margin-top: -100vh;
 53 | }
 54 | 
 55 | .list {
 56 |   display: flex;
 57 |   flex-wrap: wrap;
 58 |   justify-content: center;
 59 |   list-style-type: none;
 60 |   padding: 0;
 61 | }
 62 | 
 63 | .list li {
 64 |   margin: 10px;
 65 | }
 66 | 
 67 | .choiceButton {
 68 |   background-color: transparent;
 69 |   border: 2px solid white;
 70 |   color: white;
 71 |   cursor: pointer;
 72 |   width: 150px;
 73 |   height: 150px;
 74 | }
 75 | 
 76 | .choiceButton:hover {
 77 |   background-color: white;
 78 |   color: #516dff;
 79 | }
 80 | 
 81 | .choose-insect-btn:active {
 82 |   background-color: rgba(255, 255, 255, 0.7);
 83 | }
 84 | 
 85 | .choiceButton img {
 86 |   width: 100px;
 87 |   height: 100px;
 88 |   object-fit: contain;
 89 | }
 90 | 
 91 | .game-container {
 92 |   position: relative;
 93 | }
 94 | 
 95 | .time {
 96 |   position: absolute;
 97 |   top: 20px;
 98 |   left: 20px;
 99 | }
100 | .score {
101 |   position: absolute;
102 |   top: 20px;
103 |   right: 20px;
104 | }
105 | 
106 | .quit {
107 |   line-height: 1.7;
108 |   background-color: rgba(0, 0, 0, 0.5);
109 |   width: 100%;
110 |   padding: 20px;
111 |   z-index: 100;
112 |   text-align: center;
113 |   position: absolute;
114 |   opacity: 0;
115 |   top: 0;
116 |   left: 50%;
117 |   transform: translate(-50%, -150%);
118 |   transition: transform 0.4s ease-in;
119 | }
120 | 
121 | .quit.visible {
122 |   transform: translate(-50%, 150%);
123 |   opacity: 1;
124 | }
125 | 
126 | .insect {
127 |   cursor: pointer;
128 |   display: flex;
129 |   align-items: center;
130 |   justify-content: center;
131 |   height: 100px;
132 |   width: 100px;
133 |   position: absolute;
134 |   transform: translate(-50%, -50%) scale(1);
135 |   transition: transform 0.3s ease-in-out;
136 | }
137 | 
138 | .insect.caught {
139 |   transform: translate(-50%, -50%) scale(0);
140 | }
141 | 
142 | .insect img {
143 |   width: 100px;
144 |   height: 100px;
145 | }
146 | 


--------------------------------------------------------------------------------
/12-FAQ/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>FAQ</title>
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
 9 |     <link rel="stylesheet" href="style.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |     <h1>Frequently Asked Questions</h1>
15 |     <div class="faq-container">
16 |         <div class="faq active">
17 |             <h3 class="faq-title">
18 |                 Why shouldn't we trust atoms?
19 |             </h3>
20 | 
21 |             <p class="faq-text">
22 |                 They make up everything.
23 |             </p>
24 | 
25 |             <button class="faq-toggle">
26 |                 <i class="fas fa-chevron-down"></i>
27 |                 <i class="fas fa-times"></i>
28 |             </button>
29 |         </div>
30 |         <div class="faq">
31 |             <h3 class="faq-title">
32 |                 What do you call someone with no body and no nose?
33 |             </h3>
34 | 
35 |             <p class="faq-text">
36 |                 Nobody knows.
37 |             </p>
38 | 
39 |             <button class="faq-toggle">
40 |                 <i class="fas fa-chevron-down"></i>
41 |                 <i class="fas fa-times"></i>
42 |             </button>
43 |         </div>
44 |         <div class="faq">
45 |             <h3 class="faq-title">
46 |                 What's the object-oriented way to become wealthy?
47 |             </h3>
48 | 
49 |             <p class="faq-text">
50 |                 Inheritance.
51 |             </p>
52 | 
53 |             <button class="faq-toggle">
54 |                 <i class="fas fa-chevron-down"></i>
55 |                 <i class="fas fa-times"></i>
56 |             </button>
57 |         </div>
58 |         <div class="faq">
59 |             <h3 class="faq-title">
60 |                 How many tickles does it take to tickle an octopus?
61 |             </h3>
62 | 
63 |             <p class="faq-text">
64 |                 Ten-tickles!
65 |             </p>
66 | 
67 |             <button class="faq-toggle">
68 |                 <i class="fas fa-chevron-down"></i>
69 |                 <i class="fas fa-times"></i>
70 |             </button>
71 |         </div>
72 |         <div class="faq">
73 |             <h3 class="faq-title">
74 |                 What is: 1 + 1?
75 |             </h3>
76 | 
77 |             <p class="faq-text">
78 |                 Depends on who are you asking.
79 |             </p>
80 | 
81 |             <button class="faq-toggle">
82 |                 <i class="fas fa-chevron-down"></i>
83 |                 <i class="fas fa-times"></i>
84 |             </button>
85 |         </div>
86 |     </div>
87 | 
88 | </body>
89 | <script src="script.js"></script>
90 | 
91 | </html>


--------------------------------------------------------------------------------
/44-Custom_Range_Slider/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 |   margin: 0;
  4 |   padding: 0;
  5 | }
  6 | 
  7 | body {
  8 |   display: flex;
  9 |   align-items: center;
 10 |   justify-content: center;
 11 |   height: 100vh;
 12 |   overflow: hidden;
 13 |   background-color: rgb(134, 226, 238);
 14 | }
 15 | 
 16 | input[type="range"] {
 17 |   -webkit-appearance: none;
 18 |   background: transparent;
 19 |   width: 90%;
 20 |   max-width: 500px;
 21 |   outline: none;
 22 | }
 23 | 
 24 | input[type="range"]:focus,
 25 | input[type="range"]:active,
 26 | input[type="range"]::-moz-focus-inner,
 27 | input[type="range"]::-moz-focus-outer {
 28 |   border: 2px solid red;
 29 |   outline: none;
 30 | }
 31 | 
 32 | input[type="range"]::-moz-range-thumb {
 33 |   border: none;
 34 |   height: 50px;
 35 |   width: 50px;
 36 |   background-color: transparent;
 37 |   background-image: url("https://storage.googleapis.com/pw-stuff/thumbs-sprite.png");
 38 |   background-position: 0 0;
 39 |   background-size: cover;
 40 |   transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg));
 41 |   cursor: pointer;
 42 | }
 43 | 
 44 | input[type="range"]::-moz-range-thumb:active {
 45 |   background-position: 100% 0px;
 46 |   transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));
 47 | }
 48 | 
 49 | input[type="range"]::-moz-range-track {
 50 |   width: 100%;
 51 |   height: 20px;
 52 |   background: #eee;
 53 |   border-radius: 10px;
 54 |   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
 55 |   cursor: pointer;
 56 | }
 57 | 
 58 | input[type="range"]::-moz-range-progress {
 59 |   height: 20px;
 60 |   background: #4685d7;
 61 |   border-radius: 10px;
 62 |   cursor: pointer;
 63 | }
 64 | 
 65 | input[type="range"]::-webkit-slider-thumb {
 66 |   border: none;
 67 |   height: 50px;
 68 |   width: 50px;
 69 |   background-color: transparent;
 70 |   background-image: url("https://storage.googleapis.com/pw-stuff/thumbs-sprite.png");
 71 |   background-position: 0 0;
 72 |   background-size: cover;
 73 |   transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg));
 74 |   cursor: pointer;
 75 |   margin-top: -15px;
 76 |   -webkit-appearance: none;
 77 | }
 78 | 
 79 | input[type="range"]::-webkit-slider-thumb:active {
 80 |   background-position: 100% 0px;
 81 |   transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));
 82 | }
 83 | 
 84 | input[type="range"]::-webkit-slider-runnable-track {
 85 |   width: 100%;
 86 |   height: 20px;
 87 |   background: #eee;
 88 |   border-radius: 10px;
 89 |   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
 90 |   cursor: pointer;
 91 |   -webkit-appearance: none;
 92 | }
 93 | 
 94 | label {
 95 |   background: #eee;
 96 |   border-radius: 50%;
 97 |   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
 98 |   padding: 14px;
 99 |   margin-left: 10px;
100 |   font-family: Roboto, "Helvetica Neue", Arial;
101 |   font-size: 20px;
102 |   width: fit-content;
103 |   text-align: center;
104 |   color: #2968bb;
105 |   font-weight: bold;
106 |   content: '';
107 | }
108 | 


--------------------------------------------------------------------------------
/19-Theme_Clock/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     box-sizing: border-box;
  3 | }
  4 | 
  5 | :root {
  6 |     --primary-color: #000;
  7 |     --secondary-color: #fff;
  8 | }
  9 | 
 10 | html {
 11 |     transition: all 0.5s ease-in;
 12 | }
 13 | 
 14 | html.dark {
 15 |     --primary-color: #fff;
 16 |     --secondary-color: #333;
 17 | }
 18 | 
 19 | html.dark {
 20 |     background-color: #111;
 21 |     color: var(--primary-color);
 22 | }
 23 | 
 24 | body {
 25 |     display: flex;
 26 |     align-items: center;
 27 |     justify-content: center;
 28 |     height: 100vh;
 29 |     overflow: hidden;
 30 |     margin: 0;
 31 | }
 32 | 
 33 | .toggle {
 34 |     cursor: pointer;
 35 |     background-color: var(--primary-color);
 36 |     color: var(--secondary-color);
 37 |     border: 0;
 38 |     border-radius: 4px;
 39 |     padding: 8px 12px;
 40 |     position: absolute;
 41 |     top: 100px;
 42 | }
 43 | 
 44 | .toggle:focus {
 45 |     outline: none;
 46 | }
 47 | 
 48 | .clock-container {
 49 |     display: flex;
 50 |     flex-direction: column;
 51 |     justify-content: space-between;
 52 |     align-items: center;
 53 | }
 54 | 
 55 | .clock {
 56 |     position: relative;
 57 |     widows: 200px;
 58 |     height: 200px;
 59 | }
 60 | 
 61 | .needle {
 62 |     background-color: var(--primary-color);
 63 |     position: absolute;
 64 |     top: 50%;
 65 |     left: 50%;
 66 |     height: 65px;
 67 |     width: 3px;
 68 |     transform-origin: bottom center;
 69 |     transition: all 0.5s ease-in;
 70 | }
 71 | 
 72 | .needle.hour {
 73 |     transform: translate(-50%, -100%) rotate(0deg);
 74 | }
 75 | 
 76 | .needle.minute {
 77 |     transform: translate(-50%, -100%) rotate(0deg);
 78 |     height: 100px;
 79 | }
 80 | 
 81 | .needle.second {
 82 |     transform: translate(-50%, -100%) rotate(0deg);
 83 |     height: 100px;
 84 |     background-color: #e74c3c;
 85 | }
 86 | 
 87 | .center-point {
 88 |     background-color: #e74c3c;
 89 |     width: 10px;
 90 |     height: 10px;
 91 |     position: absolute;
 92 |     top: 50%;
 93 |     left: 50%;
 94 |     transform: translate(-50%, -50%);
 95 |     border-radius: 50%;
 96 | }
 97 | 
 98 | .center-point::after {
 99 |     content: '';
100 |     background-color: var(--primary-color);
101 |     width: 5px;
102 |     height: 5px;
103 |     position: absolute;
104 |     top: 50%;
105 |     left: 50%;
106 |     transform: translate(-50%, -50%);
107 |     border-radius: 50%;
108 | }
109 | 
110 | .time {
111 |     font-size: 60px;
112 | }
113 | 
114 | .date {
115 |     color: #aaa;
116 |     font-size: 14px;
117 |     letter-spacing: 0.3px;
118 |     text-transform: uppercase;
119 | }
120 | 
121 | .date .circle {
122 |     background-color: var(--primary-color);
123 |     color: var(--secondary-color);
124 |     border-radius: 50%;
125 |     height: 18px;
126 |     width: 18px;
127 |     display: inline-flex;
128 |     align-items: center;
129 |     justify-content: center;
130 |     line-height: 18px;
131 |     font-size: 12px;
132 |     transition: all 0.5s ease-in;
133 | }


--------------------------------------------------------------------------------
/07-Split_Landing_Page/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     box-sizing: border-box;
  3 | }
  4 | 
  5 | body {
  6 |     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  7 |     margin: 0;
  8 |     overflow: hidden;
  9 |     height: 100vh;
 10 | }
 11 | 
 12 | h1 {
 13 |     font-size: 4rem;
 14 |     color: #fff;
 15 |     position: absolute;
 16 |     left: 50%;
 17 |     top: 20%;
 18 |     transform: translateX(-50%);
 19 |     white-space: nowrap;
 20 | }
 21 | 
 22 | .btn {
 23 |     position: absolute;
 24 |     display: flex;
 25 |     align-items: center;
 26 |     justify-content: center;
 27 |     left: 50%;
 28 |     top: 40%;
 29 |     transform: translateX(-50%);
 30 |     text-decoration: none;
 31 |     color: #fff;
 32 |     border: #fff solid 0.2rem;
 33 |     font-size: 1rem;
 34 |     font-weight: bold;
 35 |     text-transform: uppercase;
 36 |     width: 15rem;
 37 |     padding: 1.5rem;
 38 | }
 39 | 
 40 | .split.left .btn:hover {
 41 |     background-color: rgba(87, 84, 236, 1);
 42 |     border-color: rgba(87, 84, 236, 1);
 43 | }
 44 | 
 45 | .split.right .btn:hover {
 46 |     background-color: rgba(28, 122, 28, 1);
 47 |     border-color: rgba(28, 122, 28, 1);
 48 | }
 49 | 
 50 | .container {
 51 |     position: relative;
 52 |     width: 100%;
 53 |     height: 100%;
 54 |     background: #333;
 55 | }
 56 | 
 57 | .split {
 58 |     position: absolute;
 59 |     width: 50%;
 60 |     height: 100%;
 61 |     overflow: hidden;
 62 | }
 63 | 
 64 | .split.left {
 65 |     left: 0;
 66 |     background: url('https://images.unsplash.com/photo-1550133804-0d34e3130759?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTUyfHx8ZW58MHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60');
 67 |     background-repeat: no-repeat;
 68 |     background-size: cover;
 69 | }
 70 | 
 71 | .split.left::before {
 72 |     content: '';
 73 |     position: absolute;
 74 |     width: 100%;
 75 |     height: 100%;
 76 |     background-color: rgba(87, 84, 236, 0.3);
 77 | }
 78 | 
 79 | .split.right {
 80 |     right: 0;
 81 |     background: url('https://images.unsplash.com/photo-1435164205788-305635a36ec2?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NDJ8fGJsYWNrfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
 82 |     background-repeat: no-repeat;
 83 |     background-size: cover;
 84 | }
 85 | 
 86 | .split.right::before {
 87 |     content: '';
 88 |     position: absolute;
 89 |     width: 100%;
 90 |     height: 100%;
 91 |     background-color: rgba(43, 43, 43, 0.5);
 92 | }
 93 | 
 94 | .split.right,
 95 | .split.left,
 96 | .split.right::before,
 97 | .split.left::before {
 98 |     transition: all 1000ms ease-in-out;
 99 | }
100 | 
101 | .hover-left .left {
102 |     width: 75%;
103 | }
104 | 
105 | .hover-left .right {
106 |     width: 25%;
107 | }
108 | 
109 | .hover-right .right {
110 |     width: 75%;
111 | }
112 | 
113 | .hover-right .left {
114 |     width: 25%;
115 | }
116 | 
117 | @media (max-width: 800px) {
118 |     h1 {
119 |         font-size: 2rem;
120 |         top: 30%;
121 |     }
122 |     s .btn {
123 |         padding: 1.2rem;
124 |         width: 12rem;
125 |     }
126 | }


--------------------------------------------------------------------------------
/46-Quiz_App/script.js:
--------------------------------------------------------------------------------
  1 | const quiz = document.querySelector(`#quiz`);
  2 | const question = document.getElementById(`question`);
  3 | const option = document.querySelectorAll(`.answer`);
  4 | const optionA = document.getElementById(`a_text`);
  5 | const optionB = document.getElementById(`b_text`);
  6 | const optionC = document.getElementById(`c_text`);
  7 | const optionD = document.getElementById(`d_text`);
  8 | const submit = document.getElementById(`submit`);
  9 | 
 10 | const quizData = [{
 11 |         question: "Which type of JavaScript language is ___",
 12 |         a: "Object-Oriented",
 13 |         b: "Object-Based",
 14 |         c: "Assembly-language",
 15 |         d: "High-level",
 16 |         correct: "b",
 17 |     },
 18 |     {
 19 |         question: "Which one of the following also known as Conditional Expression:",
 20 |         a: "Alternative to if-else",
 21 |         b: "Switch statement",
 22 |         c: "If-then-else statement",
 23 |         d: "immediate if",
 24 |         correct: "d",
 25 |     },
 26 |     {
 27 |         question: "In JavaScript, what is a block of statement?",
 28 |         a: "Conditional block",
 29 |         b: "block that combines a number of statements into a single compound statement",
 30 |         c: "both conditional block and a single statement",
 31 |         d: "block that contains a single statement",
 32 |         correct: "b",
 33 |     },
 34 |     {
 35 |         question: "Which one of the following is the correct way for calling the JavaScript code?",
 36 |         a: "Preprocessor",
 37 |         b: "Triggering Event",
 38 |         c: "RMI",
 39 |         d: "Function/Method",
 40 |         correct: "d",
 41 |     },
 42 | ];
 43 | 
 44 | let quesNum = 0,
 45 |     score = 0,len=quizData.length;
 46 | 
 47 | function deselectAnswer() {
 48 |     option.forEach(temp => {
 49 |         temp.checked=false;
 50 |     })
 51 | }
 52 | 
 53 | function loadQuiz() {
 54 |     deselectAnswer();
 55 | 
 56 |     question.innerText = quizData[quesNum].question;
 57 |     optionA.innerText = quizData[quesNum].a;
 58 |     optionB.innerText = quizData[quesNum].b;
 59 |     optionC.innerText = quizData[quesNum].c;
 60 |     optionD.innerText = quizData[quesNum].d;
 61 | }
 62 | 
 63 | function getSelected() {
 64 |     let answer ;
 65 | 
 66 |     option.forEach(temp => {
 67 |         if(temp.checked)
 68 |             answer = temp.id;
 69 |     })
 70 | 
 71 |     return answer;
 72 | }
 73 | 
 74 | submit.addEventListener('click', () => {
 75 |     const answer = getSelected();
 76 | 
 77 |     console.log(answer);
 78 | 
 79 |     if(answer) {
 80 |         if(answer===quizData[quesNum].correct)
 81 |             score++;
 82 | 
 83 |         quesNum++;
 84 | 
 85 |         if(quesNum<len) 
 86 |             loadQuiz();
 87 |         else {
 88 |             quiz.innerHTML = `
 89 |                 <div class="selection"> 
 90 |                     <h2> You answered ${score}/${len} questions correctly.</h2>
 91 |                 </div>
 92 | 
 93 |                 <div class="submit">
 94 |                     <button id="submit" onclick="location.reload()">Reload</button>
 95 |             `
 96 |         }
 97 |     }
 98 | 
 99 | })
100 | 
101 | loadQuiz();


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # JavaScript51
 2 | 
 3 | This is a 51 Days 51 Projects JavaScript challenge. HTML,CSS and JavaScript are used to build projects.
 4 | 
 5 | # 51Days-51Projects
 6 |  - Day 01 :- [**Expanding Cards**](01-Expanding_Cards) 
 7 |  - Day 02 :- [**Progress Bar**](02-Progress_Bar)
 8 |  - Day 03 :- [**Rotating Navigation**](03-Rotating_Navigation)
 9 |  - Day 04 :- [**Hidden Search Widget**](04-Hidden_Search)
10 |  - Day 05 :- [**Blurry Loading**](05-Blurry_Loading)
11 |  - Day 06 :- [**Scroll Animation**](06-Scroll_Animation)
12 |  - Day 07 :- [**Split Landing Page**](07-Split_Landing_Page)
13 |  - Day 08 :- [**Form Input Wave**](08-Form_Input_Wave)
14 |  - Day 09 :- [**Purple Heart Rain**](09-Purple_Heart_Rain)
15 |  - Day 10 :- [**Dad Jokes**](10-Dad_Jokes)
16 |  - Day 11 :- [**Event KeyCode**](11-Event_KeyCodes)
17 |  - Day 12 :- [**Frequently Asked Questions**](12-FAQ)
18 |  - Day 13 :- [**Random Choice Picker**](13-Random_Choice_Picker)
19 |  - Day 14 :- [**Animated Navigation**](14-Animated_Navigation)
20 |  - Day 15 :- [**Increment Counter**](15-Increment_Counter)
21 |  - Day 16 :- [**Drink Water**](16-Drink_Water)
22 |  - Day 17 :- [**Movie App**](17-Movie_App)
23 |  - Day 18 :- [**Background Slider**](18-Background_Slider)
24 |  - Day 19 :- [**Theme Clock**](19-Theme_Clock)
25 |  - Day 20 :- [**20-Button_Ripple_Effect**](20-Button_Ripple_Effect)
26 |  - Day 21 :- [**Drag And Drop**](21-Drag_And_Drop)
27 |  - Day 22 :- [**Drawing App**](22-Drawing_App)
28 |  - Day 23 :- [**Kinetic Loader**](23-Loader)
29 |  - Day 24 :- [**Content Placeholder**](24-Content_Placeholder)
30 |  - Day 25 :- [**Stick_Navigation**](25-Stick_Navigation)
31 |  - Day 26 :- [**Vertical Slider**](26-Vertical_Slider)
32 |  - Day 27 :- [**Toast Notification**](27-Toast_Notification)
33 |  - Day 28 :- [**Github Profiles**](28-Github_Profiles)
34 |  - Day 29 :- [**Double Click Heart**](29-Double_Click_Heart)
35 |  - Day 30 :- [**Auto Text Effect**](30-Auto_Text_Effect)
36 |  - Day 31 :- [**Random Password Generator**](31-Random_Password_Generator)
37 |  - Day 32 :- [**Good, Cheap, Fast**](32-Good,Cheap,Fast)
38 |  - Day 33 :- [**Notes App**](33-Notes_App)
39 |  - Day 34 :- [**Animated Countdown**](34-Animated_CountDown)
40 |  - Day 35 :- [**Image Carousel**](35-Image_Carousel)
41 |  - Day 36 :- [**Hoverboard**](36-HoverBoard)
42 |  - Day 37 :- [**Pokedex**](37-Pokedex)
43 |  - Day 38 :- [**Mobile Navigation**](38-Mobile_Navigation)
44 |  - Day 39 :- [**Password Strength Background**](39-Password_Strength_Background)
45 |  - Day 40 :- [**3D Boxes Background**](40-3D_Boxes_Background)
46 |  - Day 41 :- [**Verify Account**](41-Verify_Account)
47 |  - Day 42 :- [**Live User Filter**](42-Live_User_Filter)
48 |  - Day 43 :- [**Let Us Know Your FeedBack**](43-FeedBack_UI_Design)
49 |  - Day 44 :- [**Custom Range Slider**](44-Custom_Range_Slider)
50 |  - Day 45 :- [**Netflix Mobile Navigation**](45-Netflix_Mobile_Navigation)
51 |  - Day 46 :- [**Quiz App**](46-Quiz_App)
52 |  - Day 47 :- [**Testimonial Box**](47-Testimonial_Box_Switcher)
53 |  - Day 48 :- [**Random Image Feed**](48-Random_Image_Feed)
54 |  - Day 49 :- [**Todo List**](49-Todo_List)
55 |  - Day 50 :- [**Catch The Insect**](50-Insect_Catch_Game)
56 |  - Day 51 :- [**Form Validation**](51-Form_Validation)


--------------------------------------------------------------------------------
/25-Stick_Navigation/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>Sticky Navbar...</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 |     <nav class="navbar">
13 | 
14 |         <div class="navdiv">
15 |             <h3 class="title"><a href="">My Website</a></h3>
16 | 
17 |             <ul class="list">
18 |                 <li class="red"><a href="#">Home</a></li>
19 |                 <li><a href="#">About</a></li>
20 |                 <li><a href="#">Services</a></li>
21 |                 <li><a href="#">Contact</a></li>
22 |             </ul>
23 |         </div>
24 | 
25 |     </nav>
26 | 
27 |     <div class="container1">
28 | 
29 |         <h1 class="top_heading">Welcome to Anshul's Website</h1>
30 | 
31 |         <p class="para_top">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores hic pariatur dicta nam quo deleniti exercitationem aut reiciendis.</p>
32 |     </div>
33 | 
34 |     <div class="bottom">
35 |         <h3 class="bott_heading">Para 1</h3>
36 |         <hr>
37 |         <p class="para_bott">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque corporis cupiditate hic eum ipsam a? Cum nemo reprehenderit, beatae illum commodi error harum pariatur voluptatem consequatur est! Obcaecati, veritatis tempora. Lorem ipsum dolor
38 |             sit amet consectetur adipisicing elit. Sequi excepturi dolorum ab quae esse labore laboriosam officiis molestiae animi obcaecati itaque at voluptatibus, expedita natus. Facere fugiat provident libero porro? Lorem ipsum dolor sit amet, consectetur
39 |             adipisicing elit. Nam nisi molestias delectus quo incidunt quisquam reprehenderit laborum sunt, dolores porro? Est itaque culpa mollitia similique sit id unde, neque maxime. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam
40 |             ducimus reprehenderit autem commodi laboriosam sapiente ut deserunt pariatur, officiis, veritatis, quasi quia ratione eligendi voluptate perspiciatis perferendis asperiores nobis nam. </p>
41 |         <h3 class="bott_heading">Para 2</h3>
42 |         <hr>
43 |         <p class="para_bott">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque corporis cupiditate hic eum ipsam a? Cum nemo reprehenderit, beatae illum commodi error harum pariatur voluptatem consequatur est! Obcaecati, veritatis tempora. Lorem ipsum dolor
44 |             sit amet consectetur adipisicing elit. Sequi excepturi dolorum ab quae esse labore laboriosam officiis molestiae animi obcaecati itaque at voluptatibus, expedita natus. Facere fugiat provident libero porro? Lorem ipsum dolor sit amet, consectetur
45 |             adipisicing elit. Nam nisi molestias delectus quo incidunt quisquam reprehenderit laborum sunt, dolores porro? Est itaque culpa mollitia similique sit id unde, neque maxime. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam
46 |             ducimus reprehenderit autem commodi laboriosam sapiente ut deserunt pariatur, officiis, veritatis, quasi quia ratione eligendi voluptate perspiciatis perferendis asperiores nobis nam.</p>
47 |     </div>
48 | 
49 | </body>
50 | 
51 | <script src="script.js"></script>
52 | 
53 | </html>


--------------------------------------------------------------------------------
/25-Stick_Navigation/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital@1&display=swap');
  2 | @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@500&display=swap');
  3 | @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital@1&display=swap');
  4 | * {
  5 |     box-sizing: border-box;
  6 | }
  7 | 
  8 | body {
  9 |     margin: 0;
 10 |     padding: 0;
 11 | }
 12 | 
 13 | .navbar {
 14 |     position: fixed;
 15 |     top: 0;
 16 |     left: 0;
 17 |     right: 0;
 18 |     background-color: #222;
 19 |     transition: all 0.5s ease-in-out;
 20 | }
 21 | 
 22 | .navdiv {
 23 |     max-width: 1200px;
 24 |     margin: 0 auto;
 25 |     display: flex;
 26 |     align-items: center;
 27 |     justify-content: space-between;
 28 |     padding: 10px 0;
 29 |     transition: all 0.5s ease-in-out;
 30 | }
 31 | 
 32 | .navbar.active {
 33 |     background-color: white;
 34 |     border-bottom: 1px solid black;
 35 | }
 36 | 
 37 | .navdiv.active {
 38 |     padding: 0;
 39 | }
 40 | 
 41 | .list.active li a {
 42 |     color: grey;
 43 | }
 44 | 
 45 | .title.active a {
 46 |     color: black;
 47 | }
 48 | 
 49 | .list {
 50 |     display: flex;
 51 |     align-items: center;
 52 |     justify-content: center;
 53 | }
 54 | 
 55 | .list li {
 56 |     padding: 0 15px;
 57 |     list-style-type: none;
 58 | }
 59 | 
 60 | .title a {
 61 |     font-family: 'Courier Prime', monospace;
 62 |     font-size: 25px;
 63 |     font-weight: bolder;
 64 | }
 65 | 
 66 | .list li a {
 67 |     font-family: 'Courier Prime', monospace;
 68 |     font-size: 20px;
 69 | }
 70 | 
 71 | .title a,
 72 | .list li a {
 73 |     color: white;
 74 |     text-decoration: none;
 75 | }
 76 | 
 77 | .container1 {
 78 |     background-image: url('https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
 79 |     background-repeat: no-repeat;
 80 |     background-size: cover;
 81 |     height: 100vh;
 82 |     background-position: bottom center;
 83 |     position: relative;
 84 |     display: flex;
 85 |     align-items: center;
 86 |     justify-content: center;
 87 |     flex-direction: column;
 88 |     margin-bottom: 20px;
 89 |     z-index: -2;
 90 |     color: white;
 91 | }
 92 | 
 93 | .container1::before {
 94 |     content: '';
 95 |     position: absolute;
 96 |     top: 0;
 97 |     left: 0;
 98 |     height: 100%;
 99 |     width: 100%;
100 |     background-color: rgba(0, 0, 0, 0.5);
101 |     z-index: -1;
102 | }
103 | 
104 | .top_heading {
105 |     font-family: 'Baloo Bhai 2', cursive;
106 |     font-size: 45px;
107 |     text-align: center;
108 | }
109 | 
110 | .para_top {
111 |     font-family: 'Baloo Bhai 2', cursive;
112 |     max-width: 65vw;
113 |     font-size: 25px;
114 |     text-align: center;
115 | }
116 | 
117 | .list .red a {
118 |     color: crimson;
119 | }
120 | 
121 | .list.active .red a {
122 |     color: crimson;
123 | }
124 | 
125 | .title a:hover,
126 | .list a:hover {
127 |     color: crimson;
128 | }
129 | 
130 | .bottom {
131 |     margin: 0 55px;
132 |     padding: 15px;
133 | }
134 | 
135 | .bott_heading {
136 |     font-size: 30px;
137 |     color: rgb(49, 46, 46);
138 |     text-align: center;
139 | }
140 | 
141 | .para_bott {
142 |     font-family: 'Source Code Pro', monospace;
143 |     color: grey;
144 |     font-size: 20px;
145 |     text-align: center;
146 | }


--------------------------------------------------------------------------------
/34-Animated_CountDown/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&display=swap');
  2 | * {
  3 |     box-sizing: border-box;
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     font-family: 'Cinzel', serif;
  7 | }
  8 | 
  9 | .counter {
 10 |     position: fixed;
 11 |     top: 50%;
 12 |     left: 50%;
 13 |     transform: translate(-50%, -50%);
 14 |     text-align: center;
 15 |     transition: all 0.3s ease-in-out;
 16 | }
 17 | 
 18 | .nums {
 19 |     align-items: center;
 20 | }
 21 | 
 22 | .nums span {
 23 |     font-size: 55px;
 24 |     color: blue;
 25 |     position: absolute;
 26 |     top: -50%;
 27 |     transform: translate(-50%, -50%) rotate(120deg) scale(0);
 28 |     opacity: 0;
 29 |     transform-origin: bottom center;
 30 | }
 31 | 
 32 | h3 {
 33 |     position: relative;
 34 |     top: 20px;
 35 |     font-size: 25px;
 36 | }
 37 | 
 38 | .nums span.inNums {
 39 |     transform: translate(-50%, -50%) rotate(0deg) scale(1);
 40 |     opacity: 1;
 41 |     animation: numsIn 0.5s ease-in-out;
 42 | }
 43 | 
 44 | @keyframes numsIn {
 45 |     0% {
 46 |         transform: translate(-50%, -50%) rotate(120deg) scale(0);
 47 |         opacity: 0;
 48 |     }
 49 |     40% {
 50 |         transform: translate(-50%, -50%) rotate(60deg) scale(1);
 51 |         opacity: 0.4;
 52 |     }
 53 |     80% {
 54 |         transform: translate(-50%, -50%) rotate(0deg) scale(1);
 55 |         opacity: 0.8;
 56 |     }
 57 |     85% {
 58 |         transform: translate(-50%, -50%) rotate(-25deg) scale(1);
 59 |         opacity: 0.85;
 60 |     }
 61 |     95% {
 62 |         transform: translate(-50%, -50%) rotate(5deg) scale(1);
 63 |         opacity: 0.95;
 64 |     }
 65 |     100% {
 66 |         transform: translate(-50%, -50%) rotate(0deg) scale(1);
 67 |         opacity: 1;
 68 |     }
 69 | }
 70 | 
 71 | .outNums {
 72 |     transform: translate(-50%, -50%) rotate(120deg) scale(0);
 73 |     opacity: 0;
 74 |     animation: numsOut 0.5s ease-in;
 75 | }
 76 | 
 77 | @keyframes numsOut {
 78 |     0% {
 79 |         transform: translate(-50%, -50%) rotate(0deg) scale(1);
 80 |         opacity: 1;
 81 |     }
 82 |     5% {
 83 |         transform: translate(-50%, -50%) rotate(5deg) scale(1);
 84 |         opacity: 0.95;
 85 |     }
 86 |     15% {
 87 |         transform: translate(-50%, -50%) rotate(-15deg) scale(1);
 88 |         opacity: 0.85;
 89 |     }
 90 |     20% {
 91 |         transform: translate(-50%, -50%) rotate(-30deg) scale(1);
 92 |         opacity: 0.8;
 93 |     }
 94 |     60% {
 95 |         transform: translate(-50%, -50%) rotate(-60deg) scale(1);
 96 |         opacity: 0.4;
 97 |     }
 98 |     100% {
 99 |         transform: translate(-50%, -50%) rotate(-120deg) scale(1);
100 |         opacity: 0;
101 |     }
102 | }
103 | 
104 | .final {
105 |     display: flex;
106 |     height: 100vh;
107 |     align-items: center;
108 |     justify-content: center;
109 |     flex-direction: column;
110 |     transition: all 0.3s ease-in-out;
111 | }
112 | 
113 | h1 {
114 |     font-size: 40px;
115 |     padding: 10px;
116 | }
117 | 
118 | button {
119 |     font-size: 18px;
120 |     padding: 5px 15px;
121 |     cursor: pointer;
122 |     border-radius: 5px;
123 |     border: 1px solid black;
124 |     outline: none;
125 | }
126 | 
127 | button:active {
128 |     outline: none;
129 |     transform: scale(0.95);
130 | }
131 | 
132 | button:hover {
133 |     background-color: rgb(199, 196, 196);
134 | }
135 | 
136 | .removed {
137 |     opacity: 0;
138 | }


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