├── Countdown ├── index.html ├── script.js └── style.css ├── Counter ├── index.html ├── script.js └── style.css ├── DrawingApp ├── index.html ├── script.js └── style.css ├── Music Web App ├── img │ ├── Ankhon.jpg │ ├── Nayan.jpg │ ├── Sawan.jpg │ ├── Titliyan.jpg │ └── Vardaan.jpg ├── index.html ├── music │ ├── Ankhon.mp3 │ ├── Nayan.mp3 │ ├── Sawan.mp3 │ ├── Titliyan.mp3 │ └── Vardaan.mp3 ├── script.js └── style.css ├── NumberGuess ├── index.html ├── script.js └── style.css ├── QuizApp ├── index.html ├── script.js └── style.css ├── Random Animals ├── index.html ├── script.js └── style.css ├── Random Jokes ├── index.html ├── script.js └── style.css ├── Random Meal ├── index.html ├── script.js └── style.css ├── Slideshow ├── index.html ├── script.js └── style.css ├── StarRating ├── rate.css ├── rate.html └── rate.js ├── Toast notification ├── index.html ├── script.js └── style.css ├── Toggle dark Mode ├── index.html ├── script.js └── style.css ├── Typing Effect ├── index.html ├── script.js └── style.css ├── double-click-heart ├── index.html ├── script.js └── style.css ├── drag&drop ├── index.html ├── script.js └── style.css ├── hoverboard ├── index.html ├── script.js └── style.css ├── password-generator ├── index.html ├── script.js └── style.css ├── popup ├── index.html ├── script.js └── style.css └── scroll-animation ├── index.html ├── script.js └── style.css /Countdown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |

New Year Countdown

11 |
12 |
13 |

00

14 |

days

15 |
16 |
17 |

00

18 |

hours

19 |
20 |
21 |

00

22 |

minutes

23 |
24 |
25 |

00

26 |

seconds

27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /Countdown/script.js: -------------------------------------------------------------------------------- 1 | const days = document.getElementById("days"); 2 | const hours = document.getElementById("hours"); 3 | const minutes = document.getElementById("minutes"); 4 | const seconds = document.getElementById("seconds"); 5 | const countdown = document.getElementById("countdown"); 6 | const year = document.getElementById("year"); 7 | 8 | const nextYear = new Date().getFullYear() + 1; 9 | const newYearTime = new Date(`January 01 ${nextYear} 00:00:00`); 10 | 11 | function updateCountdown() { 12 | const currentTime = new Date(); 13 | const difference = newYearTime - currentTime; 14 | const currentDays = Math.floor(difference / 1000 / 60 / 60 / 24); 15 | const currentHours = Math.floor(difference / 1000 / 60 / 60) % 24; 16 | const currentMinutes = Math.floor(difference / 1000 / 60) % 60; 17 | const currentSeconds = Math.floor(difference / 1000) % 60; 18 | days.innerText = currentDays; 19 | hours.innerText = currentHours < 10 ? "0" + currentHours : currentHours; 20 | minutes.innerText = 21 | currentMinutes < 10 ? "0" + currentMinutes : currentMinutes; 22 | seconds.innerText = 23 | currentSeconds < 10 ? "0" + currentSeconds : currentSeconds; 24 | } 25 | 26 | setTimeout(() => { 27 | countdown.style.display = "flex"; 28 | }, 1000); 29 | 30 | setInterval(updateCountdown, 1000); 31 | 32 | year.innerText = nextYear; 33 | -------------------------------------------------------------------------------- /Countdown/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #0b3747 url('https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80') no-repeat center center/cover; 9 | color: rgba(255,255,255,0.87); 10 | font-family: "PT Sans Narrow", sans-serif; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content: center; 15 | text-align: center; 16 | height: 100vh; 17 | overflow: hidden; 18 | margin: 0; 19 | } 20 | 21 | body::after { 22 | content: ''; 23 | background-color: rgba(0,0,0,0.5); 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | width: 100%; 28 | height: 100%; 29 | } 30 | 31 | body * { 32 | z-index: 1; 33 | } 34 | 35 | h1 { 36 | font-size: 3.75rem; 37 | margin: -100px 0 30px; 38 | } 39 | 40 | .year { 41 | font-size: 12rem; 42 | z-index: -1; 43 | opacity: 0.2; 44 | position: absolute; 45 | top: 1.25rem; 46 | left: 50%; 47 | transform: translateX(-50%); 48 | } 49 | 50 | .countdown { 51 | display: none; 52 | transform: scale(3); 53 | } 54 | 55 | .time { 56 | display: flex; 57 | flex-direction: column; 58 | align-items: center; 59 | justify-content: center; 60 | margin: 0.25rem; 61 | } 62 | 63 | .time h2 { 64 | font-size: 0.75rem; 65 | margin: 0; 66 | } 67 | 68 | .time p { 69 | font-size: 0.75rem; 70 | margin: 0; 71 | padding: 0; 72 | } 73 | 74 | @media (min-width: 640px) { 75 | h1 { 76 | font-size: 5.5rem; 77 | } 78 | .time { 79 | margin: 1rem; 80 | } 81 | .time h2 { 82 | font-size: 1.5rem; 83 | margin: 0 0 5px; 84 | } 85 | .time p { 86 | font-size: 1rem; 87 | } 88 | } -------------------------------------------------------------------------------- /Counter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Counter 11 | 12 | 13 | 14 | 15 |

16 | 17 | 18 |

0

19 |

Connections

20 |
21 |

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

22 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Counter/script.js: -------------------------------------------------------------------------------- 1 | var counter = document.querySelector("#counter"); 2 | var followers = document.querySelector("#followers"); 3 | 4 | let count = 1; 5 | setInterval(() => { 6 | if (count < 500) { 7 | count++; 8 | counter.innerText = count + " +"; 9 | } 10 | }, 10) 11 | 12 | setTimeout(() => { 13 | followers.innerText = "Connections on LinkedIn!"; 14 | }, 5500) 15 | -------------------------------------------------------------------------------- /Counter/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | 3 | align-content: center; 4 | align-items: center; 5 | } 6 | 7 | .container { 8 | margin-top: 10px; 9 | line-height: 1; 10 | font-size: 44px; 11 | text-align: center; 12 | color: black; 13 | font-family: acme; 14 | text-shadow: 2px 2px white; 15 | } 16 | 17 | footer { 18 | font-family: acme; 19 | text-align: center; 20 | color: black; 21 | font-size: large; 22 | text-shadow: 1px 0px white; 23 | } 24 | 25 | h1 { 26 | color: black; 27 | text-align: center; 28 | margin-bottom: 0px; 29 | } 30 | 31 | a { 32 | color: black; 33 | text-decoration: none; 34 | } 35 | 36 | .fa-heart { 37 | color: red; 38 | } 39 | .fa-linkedin{ 40 | color: #3dabff; 41 | } -------------------------------------------------------------------------------- /DrawingApp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drawing App 8 | 9 | 10 | 11 |
12 | 13 | 10 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /DrawingApp/script.js: -------------------------------------------------------------------------------- 1 | const canvas = document.getElementById('canvas'); 2 | const increaseBtn = document.getElementById('increase'); 3 | const decreaseBtn = document.getElementById('decrease'); 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 | 24 | canvas.addEventListener('mouseup', (e) => { 25 | isPressed = false 26 | 27 | x = undefined 28 | y = undefined 29 | }) 30 | 31 | canvas.addEventListener('mousemove', (e) => { 32 | if(isPressed) { 33 | const x2 = e.offsetX 34 | const y2 = e.offsetY 35 | 36 | drawCircle(x2, y2) 37 | drawLine(x, y, x2, y2) 38 | 39 | x = x2 40 | y = y2 41 | } 42 | }) 43 | 44 | function drawCircle(x, y) { 45 | ctx.beginPath(); 46 | ctx.arc(x, y, size, 0, Math.PI * 2) 47 | ctx.fillStyle = color 48 | ctx.fill() 49 | } 50 | 51 | function drawLine(x1, y1, x2, y2) { 52 | ctx.beginPath() 53 | ctx.moveTo(x1, y1) 54 | ctx.lineTo(x2, y2) 55 | ctx.strokeStyle = color 56 | ctx.lineWidth = size * 2 57 | ctx.stroke() 58 | } 59 | 60 | function updateSizeOnScreen() { 61 | sizeEL.innerText = size 62 | } 63 | 64 | increaseBtn.addEventListener('click', () => { 65 | size += 5 66 | 67 | if(size > 50) { 68 | size = 50 69 | } 70 | 71 | updateSizeOnScreen() 72 | }) 73 | 74 | decreaseBtn.addEventListener('click', () => { 75 | size -= 5 76 | 77 | if(size < 5) { 78 | size = 5 79 | } 80 | 81 | updateSizeOnScreen() 82 | }) 83 | 84 | colorEl.addEventListener('change', (e) => color = e.target.value) 85 | 86 | clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height)) 87 | -------------------------------------------------------------------------------- /DrawingApp/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #f5f5f5; 9 | font-family: 'Roboto', sans-serif; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | margin: 0; 16 | } 17 | 18 | canvas { 19 | border: 2px solid steelblue; 20 | } 21 | 22 | .toolbox { 23 | background-color: steelblue; 24 | border: 1px solid slateblue; 25 | display: flex; 26 | width: 804px; 27 | padding: 1rem; 28 | } 29 | 30 | .toolbox > * { 31 | background-color: #fff; 32 | border: none; 33 | display: inline-flex; 34 | align-items: center; 35 | justify-content: center; 36 | font-size: 2rem; 37 | height: 50px; 38 | width: 50px; 39 | margin: 0.25rem; 40 | padding: 0.25rem; 41 | cursor: pointer; 42 | } 43 | 44 | .toolbox > *:last-child { 45 | margin-left: auto; 46 | } 47 | -------------------------------------------------------------------------------- /Music Web App/img/Ankhon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chetnagrover00/JavaScript-Mini-Projects/a77f8a284246cdd50ec35662a2fc9b91c525bf1a/Music Web App/img/Ankhon.jpg -------------------------------------------------------------------------------- /Music Web App/img/Nayan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chetnagrover00/JavaScript-Mini-Projects/a77f8a284246cdd50ec35662a2fc9b91c525bf1a/Music Web App/img/Nayan.jpg -------------------------------------------------------------------------------- /Music Web App/img/Sawan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chetnagrover00/JavaScript-Mini-Projects/a77f8a284246cdd50ec35662a2fc9b91c525bf1a/Music Web App/img/Sawan.jpg -------------------------------------------------------------------------------- /Music Web App/img/Titliyan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chetnagrover00/JavaScript-Mini-Projects/a77f8a284246cdd50ec35662a2fc9b91c525bf1a/Music Web App/img/Titliyan.jpg -------------------------------------------------------------------------------- /Music Web App/img/Vardaan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chetnagrover00/JavaScript-Mini-Projects/a77f8a284246cdd50ec35662a2fc9b91c525bf1a/Music Web App/img/Vardaan.jpg -------------------------------------------------------------------------------- /Music Web App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Music Player 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | Album Art 16 |
17 |

Nayan

18 |

Dhwani Bhanushali

19 | 20 | 21 |
22 |
23 |
24 | 0:00 25 | 2:06 26 |
27 |
28 | 29 |
30 | 31 | 32 | 33 |
34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Music Web App/music/Ankhon.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chetnagrover00/JavaScript-Mini-Projects/a77f8a284246cdd50ec35662a2fc9b91c525bf1a/Music Web App/music/Ankhon.mp3 -------------------------------------------------------------------------------- /Music Web App/music/Nayan.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chetnagrover00/JavaScript-Mini-Projects/a77f8a284246cdd50ec35662a2fc9b91c525bf1a/Music Web App/music/Nayan.mp3 -------------------------------------------------------------------------------- /Music Web App/music/Sawan.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chetnagrover00/JavaScript-Mini-Projects/a77f8a284246cdd50ec35662a2fc9b91c525bf1a/Music Web App/music/Sawan.mp3 -------------------------------------------------------------------------------- /Music Web App/music/Titliyan.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chetnagrover00/JavaScript-Mini-Projects/a77f8a284246cdd50ec35662a2fc9b91c525bf1a/Music Web App/music/Titliyan.mp3 -------------------------------------------------------------------------------- /Music Web App/music/Vardaan.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chetnagrover00/JavaScript-Mini-Projects/a77f8a284246cdd50ec35662a2fc9b91c525bf1a/Music Web App/music/Vardaan.mp3 -------------------------------------------------------------------------------- /Music Web App/script.js: -------------------------------------------------------------------------------- 1 | const image = document.querySelector('img'); 2 | const title = document.getElementById('title'); 3 | const artist = document.getElementById('artist'); 4 | const music = document.querySelector('audio'); 5 | const progressContainer = document.getElementById('progress-container'); 6 | const progress = document.getElementById('progress'); 7 | const currentTimeEl = document.getElementById('current-time'); 8 | const durationEl = document.getElementById('duration'); 9 | const prevBtn = document.getElementById('prev'); 10 | const playBtn = document.getElementById('play'); 11 | const nextBtn = document.getElementById('next'); 12 | 13 | // Array of songs(YOU CAN ADD MORE) 14 | const songs = [ 15 | { 16 | name: 'Nayan', 17 | displayName: 'Nayan', 18 | artist: 'Dhwani Bhanushali', 19 | }, 20 | { 21 | name: 'Ankhon', 22 | displayName: 'Teri Aankhon Me', 23 | artist: 'Darshan Rawal', 24 | }, 25 | { 26 | name: 'Vardaan', 27 | displayName: 'Vardaan', 28 | artist: 'Carry Minati', 29 | }, 30 | { 31 | name: 'Sawan', 32 | displayName: 'Sawan Me Lag Gyi Aag', 33 | artist: 'Mika Singh', 34 | }, 35 | { 36 | name: 'Titliyan', 37 | displayName: 'Titliyan', 38 | artist: 'Afsana Khan', 39 | }, 40 | ]; 41 | 42 | // Check if playing 43 | let isPlaying = false; 44 | 45 | // Play 46 | function playSong() { 47 | isPlaying = true; 48 | playBtn.classList.replace('fa-play', 'fa-pause'); 49 | playBtn.setAttribute('title', 'Pause'); 50 | music.play(); 51 | } 52 | 53 | // Pause 54 | function pauseSong() { 55 | isPlaying = false; 56 | playBtn.classList.replace('fa-pause', 'fa-play'); 57 | playBtn.setAttribute('title', 'Play'); 58 | music.pause(); 59 | } 60 | 61 | // Play or Pause Event Listener 62 | playBtn.addEventListener('click', () => (isPlaying ? pauseSong() : playSong())); 63 | 64 | // Update DOM 65 | function loadSong(song) { 66 | title.textContent = song.displayName; 67 | artist.textContent = song.artist; 68 | music.src = `music/${song.name}.mp3`; 69 | image.src = `img/${song.name}.jpg`;//Keep the name same 70 | } 71 | 72 | // Current Song 73 | let songIndex = 0; 74 | 75 | // Previous Song 76 | function prevSong() { 77 | songIndex--; 78 | if (songIndex < 0) { 79 | songIndex = songs.length - 1; 80 | } 81 | loadSong(songs[songIndex]); 82 | playSong(); 83 | } 84 | 85 | // Next Song 86 | function nextSong() { 87 | songIndex++; 88 | if (songIndex > songs.length - 1) { 89 | songIndex = 0; 90 | } 91 | loadSong(songs[songIndex]); 92 | playSong(); 93 | } 94 | 95 | // On Load - select first song 96 | loadSong(songs[songIndex]); 97 | 98 | // Update progress bar and time 99 | function updateProgressBar(e) { 100 | if (isPlaying) { 101 | const { duration, currentTime } = e.srcElement; 102 | // Update the progress bar width 103 | const progressPercent = (currentTime / duration) * 100; 104 | progress.style.width = `${progressPercent}%`; 105 | 106 | // Calculatye the display for the duration 107 | const durationMinutes = Math.floor(duration / 60); 108 | let durationSeconds = Math.floor(duration % 60); 109 | if (durationSeconds < 10) { 110 | durationSeconds = `0${durationSeconds}`; 111 | } 112 | 113 | // Delay switching duration Element to avoid NaN 114 | if (durationSeconds) { 115 | durationEl.textContent = `${durationMinutes}:${durationSeconds}`; 116 | } 117 | 118 | // Calculate the display for the current 119 | const currentMinutes = Math.floor(currentTime / 60); 120 | let currentSeconds = Math.floor(currentTime % 60); 121 | if (currentSeconds < 10) { 122 | currentSeconds = `0${currentSeconds}`; 123 | } 124 | currentTimeEl.textContent = `${currentMinutes}:${currentSeconds}`; 125 | } 126 | } 127 | 128 | // Set Progress Bar 129 | function setProgressBar(e) { 130 | const width = this.clientWidth; 131 | const clickX = e.offsetX; 132 | const { duration } = music; 133 | music.currentTime = (clickX / width) * duration; 134 | } 135 | 136 | // Event Listners 137 | prevBtn.addEventListener('click', prevSong); 138 | nextBtn.addEventListener('click', nextSong); 139 | music.addEventListener('timeupdate', updateProgressBar); 140 | progressContainer.addEventListener('click', setProgressBar); 141 | music.addEventListener('ended', nextSong); 142 | -------------------------------------------------------------------------------- /Music Web App/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap'); 2 | 3 | 4 | html { 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | margin: 0; 10 | min-height: 100vh; 11 | background: #c9ced3; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | font-family: Spartan, sans-serif; 16 | font-size: 12px; 17 | } 18 | 19 | .player-container { 20 | height: 500px; 21 | width: 400px; 22 | background: #e7e7e7; 23 | border-radius: 20px; 24 | box-shadow: 0 15px 30px 5px rgba(0, 0, 0, 0.3); 25 | } 26 | 27 | .img-container { 28 | height: 300px; 29 | width: 300px; 30 | position: relative; 31 | top: -50px; 32 | left: 50px; 33 | } 34 | 35 | .img-container img { 36 | height: 100%; 37 | width: 100%; 38 | object-fit: cover; 39 | border-radius: 20px; 40 | box-shadow: 0 5px 30px 5px rgba(0, 0, 0, 0.5); 41 | } 42 | 43 | h2 { 44 | font-size: 25px; 45 | text-align: center; 46 | margin: 0; 47 | } 48 | 49 | h3 { 50 | font-size: 20px; 51 | text-align: center; 52 | font-weight: 400; 53 | margin: 5px 0 0; 54 | } 55 | 56 | /* Progress */ 57 | .progress-container { 58 | background: #fff; 59 | border-radius: 5px; 60 | cursor: pointer; 61 | margin: 40px 20px; 62 | height: 4px; 63 | width: 90%; 64 | } 65 | 66 | .progress { 67 | background: #242323; 68 | border-radius: 5px; 69 | height: 100%; 70 | width: 0%; 71 | transition: width 0.1s linear; 72 | } 73 | 74 | .duration-wrapper { 75 | position: relative; 76 | top: -25px; 77 | display: flex; 78 | justify-content: space-between; 79 | } 80 | 81 | /* Controls */ 82 | .player-controls { 83 | position: relative; 84 | top: -15px; 85 | left: 120px; 86 | width: 200px; 87 | } 88 | 89 | .fas { 90 | font-size: 30px; 91 | color: rgb(129, 129, 129); 92 | margin-right: 30px; 93 | cursor: pointer; 94 | user-select: none; 95 | } 96 | 97 | .fas:hover { 98 | filter: brightness(80%); 99 | } 100 | 101 | .main-button { 102 | font-size: 40px; 103 | position: relative; 104 | top: 3px; 105 | } 106 | 107 | /* Media Query: iPhone (Vertical) */ 108 | @media screen and (max-width: 376px) { 109 | .player-container { 110 | width: 95vw; 111 | } 112 | 113 | .img-container { 114 | left: 29px; 115 | } 116 | 117 | h2 { 118 | font-size: 20px; 119 | } 120 | 121 | h3 { 122 | font-size: 15px; 123 | } 124 | 125 | .player-controls { 126 | top: -10px; 127 | left: 100px; 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /NumberGuess/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Number Guessing Game 7 | 8 | 9 | 10 |

Number Guessing Game

11 |

Try and guess a random number between 1 and 100.

12 |

You have 10 attempts to guess the right number

13 |
14 |
15 |
16 | 17 |
18 | 19 |
20 | 21 |
22 | 23 |

Previous Guesses :

24 |

Guesses Remaining: 10

25 |

26 |

27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /NumberGuess/script.js: -------------------------------------------------------------------------------- 1 | var newgame = document.getElementById('newGame'); 2 | var newhead1 = document.getElementById('newhead'); 3 | var inputBox = document.getElementById('input1'); 4 | var prevGuess = document.querySelector('.guesses'); 5 | var guessRem= document.getElementById('remainingGuess'); 6 | var numGuesses = 1; 7 | 8 | function startGame(){ 9 | var random1 = Math.round(Math.random()*100); 10 | random = random1; 11 | 12 | function compare(x,y){ 13 | if(x===y){ 14 | newhead1.classList.add('heading1'); 15 | newhead1.innerHTML="You Guessed Correctly!!"; 16 | inputBox.setAttribute('disabled', ''); 17 | newgame.classList.add('heading1'); 18 | newgame.innerHTML="Start New Game!"; 19 | } 20 | else if (x < y){ 21 | newhead1.classList.add('heading1'); 22 | newhead1.innerHTML="Too low! Guess again!"; 23 | } 24 | else if (x > y){ 25 | newhead1.classList.add('heading1'); 26 | newhead1.innerHTML="Too high! Guess again!"; 27 | } 28 | } 29 | 30 | function limitnum(){ 31 | newhead1.classList.add('heading1'); 32 | newhead1.innerHTML="Oh! You couldn't guess the right number!!! The real number was " + `${random}`; 33 | inputBox.setAttribute('disabled', ''); 34 | newgame.classList.add('heading1'); 35 | newgame.innerHTML="Start New Game!"; 36 | } 37 | 38 | function displayGuesses(){ 39 | numGuesses++; 40 | guessRem.innerHTML = `${11 - numGuesses} `; 41 | if (numGuesses === 11){ 42 | limitnum(); 43 | } 44 | } 45 | 46 | function myfunc(event){ 47 | event.preventDefault(); 48 | var input12 = inputBox.value; 49 | input2=Number(input12); 50 | if(input2===0){ 51 | 52 | } 53 | if((input2<1 || input2>100) && input2 !== 0){ 54 | alert('please enter a valid number!'); 55 | } 56 | else if(input2 !== 0){ 57 | compare(input2, random); 58 | inputBox.value=""; 59 | prevGuess.innerHTML+=`${input2} `; 60 | displayGuesses(); 61 | } 62 | } 63 | document.getElementById('button').addEventListener('click',myfunc); 64 | } 65 | startGame(); 66 | 67 | document.getElementById('newGame').addEventListener('click',function(){ 68 | startGame(); 69 | newgame.innerHTML=""; 70 | newgame.classList.remove('heading1'); 71 | newhead1.innerHTML=""; 72 | newhead1.classList.remove('heading1'); 73 | numGuesses = 1; 74 | guessRem.innerHTML = `${11 - numGuesses} `; 75 | prevGuess.innerHTML = ""; 76 | inputBox.removeAttribute('disabled'); 77 | }) -------------------------------------------------------------------------------- /NumberGuess/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | text-align: center; 3 | font-family: sans-serif; 4 | 5 | } 6 | h1{ 7 | color: white; 8 | background-color: #039dfc ; 9 | padding: 30px 0; 10 | } 11 | p{ 12 | font-size: 20px; 13 | } 14 | .container{ 15 | background-color: #5ea2eb; 16 | padding-bottom: 80px; 17 | padding-top: 10px; 18 | } 19 | .label1{ 20 | font-size: 50px; 21 | color: #fff; 22 | font-weight: bold; 23 | } 24 | #input1{ 25 | margin-top: 25px; 26 | margin-bottom: 35px; 27 | font-size: 40px; 28 | text-align: center; 29 | padding: 15px; 30 | box-sizing: border-box; 31 | border: 7px solid #039dfc; 32 | border-radius: 4px; 33 | width: 50vw; 34 | 35 | } 36 | #button{ 37 | font-size: 30px; 38 | padding: 10px 40px; 39 | background-color: #062647; 40 | color: #fff; 41 | border: none; 42 | cursor: pointer; 43 | 44 | } 45 | .guess{ 46 | color: white; 47 | } 48 | .heading1{ 49 | background-color:#039dfc ; 50 | color:#fff; 51 | font-size: 35px; 52 | letter-spacing:1.3px; 53 | font-weight: bold; 54 | padding: 10px 0; 55 | cursor: pointer; 56 | } 57 | -------------------------------------------------------------------------------- /QuizApp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Quiz App 8 | 9 | 10 | 11 |
12 |

WEB DEV QUIZ

13 |
14 |

Question text

15 | 37 |
38 | 39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /QuizApp/script.js: -------------------------------------------------------------------------------- 1 | const quizData = [ 2 | { 3 | question: " Which type of JavaScript language is?", 4 | a: "Object-Oriented", 5 | b: "Object-Based", 6 | c: "Assembly-language", 7 | d: "High-level", 8 | correct: "b", 9 | }, 10 | { 11 | question: "What does CSS stand for?", 12 | a: "Cascading Style Sheets", 13 | b: "Central Style Sheets", 14 | c: "Cascading Simple Sheets", 15 | d: "Cars SUVs Sailboats", 16 | correct: "a", 17 | }, 18 | { 19 | question: "In HTML elements,CSS can be added in different", 20 | a: "2 ways", 21 | b: "1 way", 22 | c: "3 ways", 23 | d: "4 ways", 24 | correct: "c", 25 | }, 26 | { 27 | question: "Does JavaScript allow exception handling?", 28 | a: "No", 29 | b: "Yes, but it provides only try block", 30 | c: "Yes, but it provides only Try catch block, but does not allow throw exception", 31 | d: "Yes, it provides try, catch as well as throw key word for exception handling", 32 | correct: "d", 33 | }, 34 | 35 | { 36 | question: "What's my(chetna's) favourite?", 37 | a: "HTML", 38 | b: "Bootstrap", 39 | c: "CSS", 40 | d: "JS", 41 | correct: "c", 42 | } 43 | ]; 44 | 45 | const quiz = document.getElementById('quiz') 46 | const answerEls = document.querySelectorAll('.answer') 47 | const questionEl = document.getElementById('question') 48 | const a_text = document.getElementById('a_text') 49 | const b_text = document.getElementById('b_text') 50 | const c_text = document.getElementById('c_text') 51 | const d_text = document.getElementById('d_text') 52 | const e_text = document.getElementById('e_text') 53 | const submitBtn = document.getElementById('submit') 54 | 55 | let currentQuiz = 0 56 | let score = 0 57 | 58 | loadQuiz() 59 | 60 | function loadQuiz() { 61 | deselectAnswers() 62 | 63 | const currentQuizData = quizData[currentQuiz] 64 | 65 | questionEl.innerText = currentQuizData.question 66 | a_text.innerText = currentQuizData.a 67 | b_text.innerText = currentQuizData.b 68 | c_text.innerText = currentQuizData.c 69 | d_text.innerText = currentQuizData.d 70 | 71 | 72 | } 73 | 74 | function deselectAnswers() { 75 | answerEls.forEach(answerEl => answerEl.checked = false) 76 | } 77 | 78 | function getSelected() { 79 | let answer 80 | 81 | answerEls.forEach(answerEl => { 82 | if(answerEl.checked) { 83 | answer = answerEl.id 84 | } 85 | }) 86 | 87 | return answer 88 | } 89 | 90 | submitBtn.addEventListener('click', () => { 91 | const answer = getSelected() 92 | 93 | if(answer) { 94 | if(answer === quizData[currentQuiz].correct) { 95 | score++ 96 | } 97 | 98 | currentQuiz++ 99 | 100 | if(currentQuiz < quizData.length) { 101 | loadQuiz() 102 | } else { 103 | quiz.innerHTML = ` 104 |

You answered ${score}/${quizData.length} questions correctly

105 | 106 | 107 | ` 108 | } 109 | } 110 | }) -------------------------------------------------------------------------------- /QuizApp/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #b8c6db; 9 | background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%); 10 | font-family: 'Poppins', sans-serif; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | margin: 0; 17 | } 18 | 19 | .quiz-container { 20 | clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); 21 | background-color: #fff; 22 | /*border-radius: 10px;*/ 23 | box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1); 24 | width: 600px; 25 | overflow: hidden; 26 | } 27 | 28 | .quiz-header { 29 | padding: 4rem; 30 | } 31 | 32 | h2 { 33 | padding: 1rem; 34 | text-align: center; 35 | margin: 0; 36 | } 37 | h3 { 38 | padding-top: 2rem; 39 | text-align: center; 40 | margin: 0; 41 | } 42 | .ThreedText{ 43 | color: #4169E1; 44 | font-size: 2em; 45 | font-weight: bold; 46 | text-shadow: 47 | 0 1px 0 black, 48 | 0 2px 0 #c9c9c9, 49 | 0 3px 0 #bbb, 50 | 0 4px 0 #b9b9b9, 51 | 0 5px 0 #aaa, 52 | 0 6px 1px rgba(0,0,0,.1), 53 | 0 0 5px rgba(0,0,0,.1), 54 | 0 10px 10px rgba(0,0,0,.2), 55 | 0 20px 20px rgba(0,0,0,.15); 56 | } 57 | ul { 58 | list-style-type: none; 59 | padding: 0; 60 | } 61 | ul li { 62 | font-size: 1.2rem; 63 | margin: 1rem 0; 64 | } 65 | ul li label { 66 | cursor: pointer; 67 | } 68 | 69 | button { 70 | background-color: #4169E1; 71 | color: #fff; 72 | border: none; 73 | display: block; 74 | width: 100%; 75 | cursor: pointer; 76 | font-size: 1.1rem; 77 | font-family: inherit; 78 | padding: 1.3rem; 79 | } 80 | 81 | button:hover { 82 | background-color: #0000FF; 83 | } 84 | 85 | button:focus { 86 | outline: none; 87 | background-color: #0000FF; 88 | } 89 | -------------------------------------------------------------------------------- /Random Animals/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |

Random Cat

13 |
14 |
15 |

Random Dog

16 |
17 |
18 |

Random Fox

19 |
20 |
21 | 22 |
23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Random Animals/script.js: -------------------------------------------------------------------------------- 1 | const cat_btn = document.getElementById('cat_btn'); 2 | const dog_btn = document.getElementById('dog_btn'); 3 | const fox_btn = document.getElementById('fox_btn'); 4 | const cat_result = document.getElementById('cat_result'); 5 | const dog_result = document.getElementById('dog_result'); 6 | const fox_result = document.getElementById('fox_result'); 7 | 8 | cat_btn.addEventListener('click', getRandomCat); 9 | dog_btn.addEventListener('click', getRandomDog); 10 | fox_btn.addEventListener('click', getRandomFox); 11 | 12 | function getRandomCat() { 13 | fetch('https://aws.random.cat/meow') 14 | .then(res => res.json()) 15 | .then(data => { 16 | cat_result.innerHTML = `cat` 17 | }); 18 | } 19 | 20 | function getRandomDog() { 21 | fetch('https://random.dog/woof.json') 22 | .then(res => res.json()) 23 | .then(data => { 24 | // console.log(data); 25 | if(data.url.includes('.mp4')) { 26 | getRandomDog(); 27 | } 28 | else { 29 | dog_result.innerHTML = `dog`; 30 | } 31 | }); 32 | } 33 | 34 | function getRandomFox() { 35 | fetch('https://randomfox.ca/floof/') 36 | .then(res => res.json()) 37 | .then(data => { 38 | fox_result.innerHTML = `fox` 39 | }); 40 | } -------------------------------------------------------------------------------- /Random Animals/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); 2 | 3 | body { 4 | font-family: 'Open Sans', sans-serif; 5 | background-color: #b8a9c9; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | flex-direction: column; 10 | height: 100vh; 11 | margin: 0; 12 | } 13 | 14 | .results, .buttons { 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | } 19 | 20 | .result { 21 | background-color: #fff; 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | margin: 10px; 26 | height: 400px; 27 | width: 300px; 28 | font-size: 1.2em; 29 | font-weight: bold; 30 | } 31 | 32 | .result img { 33 | object-fit: cover; 34 | height: 100%; 35 | width: 100%; 36 | } 37 | 38 | button { 39 | background-color: #622569; 40 | border: 0; 41 | border-radius: 4px; 42 | color: #fff; 43 | font-size: 18px; 44 | padding: 10px; 45 | margin: 10px; 46 | width: 300px; 47 | } 48 | 49 | button:active { 50 | transform: scale(0.98); 51 | } 52 | 53 | button:focus { 54 | outline: none 55 | } -------------------------------------------------------------------------------- /Random Jokes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Jokes 8 | 9 | 10 |
11 |

Get Jokes Here

12 |
13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /Random 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 | function generateJoke() { 9 | const config = { 10 | headers: { 11 | Accept: 'application/json', 12 | }, 13 | } 14 | 15 | fetch('https://icanhazdadjoke.com', config) 16 | .then((res) => res.json()) 17 | .then((data) => { 18 | jokeEl.innerHTML = data.joke 19 | // console.log(data);//----to check what is in the object 20 | }) 21 | } -------------------------------------------------------------------------------- /Random Jokes/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #686de0; 9 | font-family: 'Roboto', sans-serif; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | margin: 0; 17 | padding: 20px; 18 | } 19 | 20 | .container { 21 | background-color: #fff; 22 | border-radius: 10px; 23 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); 24 | padding: 50px 20px; 25 | text-align: center; 26 | max-width: 100%; 27 | width: 800px; 28 | clip-path: ellipse(50% 50% at 50% 50%); 29 | 30 | } 31 | 32 | h3 { 33 | margin: 0; 34 | opacity: 0.5; 35 | letter-spacing: 2px; 36 | } 37 | 38 | .joke { 39 | font-size: 30px; 40 | letter-spacing: 1px; 41 | line-height: 40px; 42 | margin: 50px auto; 43 | max-width: 600px; 44 | } 45 | 46 | .btn { 47 | background-color: #9f68e0; 48 | color: #fff; 49 | border: 0; 50 | border-radius: 10px; 51 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); 52 | padding: 14px 40px; 53 | font-size: 16px; 54 | cursor: pointer; 55 | } 56 | 57 | .btn:active { 58 | transform: scale(0.98); 59 | } 60 | 61 | .btn:focus { 62 | outline: 0; 63 | } 64 | -------------------------------------------------------------------------------- /Random Meal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |

14 | Are you finding something new to eat? 15 |

16 |
Get a random meal recipe by clicking below
17 | 18 | 19 |
20 |
21 |
22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Random Meal/script.js: -------------------------------------------------------------------------------- 1 | const get_meal_btn = document.getElementById('get_meal'); 2 | const meal_container = document.getElementById('meal'); 3 | 4 | get_meal_btn.addEventListener('click', () => { 5 | // Fetch API 6 | fetch('https://www.themealdb.com/api/json/v1/1/random.php') 7 | .then(res => res.json()) 8 | .then(res => { 9 | // console.log(res); 10 | createMeal(res.meals[0]); 11 | }); 12 | }); 13 | 14 | const createMeal = (meal) => { 15 | const ingredients = []; 16 | // Get all ingredients from the object. Up to 20 17 | for(let i=1; i<=20; i++) { 18 | if(meal[`strIngredient${i}`]) { 19 | ingredients.push(`${meal[`strIngredient${i}`]} - ${meal[`strMeasure${i}`]}`) 20 | } else { 21 | // Stop if no more ingredients 22 | break; 23 | } 24 | } 25 | 26 | 27 | // Category Area Tags 28 | const newInnerHTML = ` 29 |
30 |
31 | Meal Image 32 | ${meal.strCategory ? `

Category: ${meal.strCategory}

` : ''} 33 | ${meal.strArea ? `

Area: ${meal.strArea}

` : ''} 34 | ${meal.strTags ? `

Tags: ${meal.strTags.split(',').join(', ')}

` : ''} 35 |
Ingredients:
36 | 39 |
40 |
41 |

${meal.strMeal}

42 |

${meal.strInstructions}

43 |
44 |
45 | ${meal.strYoutube ? ` 46 |
47 |
Video Recipe
48 |
49 | 52 |
53 |
` : ''}`; 54 | 55 | meal_container.innerHTML = newInnerHTML; 56 | } 57 | -------------------------------------------------------------------------------- /Random Meal/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | body { 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: center; 11 | padding: 30px 0; 12 | min-height: 100vh; 13 | } 14 | img { 15 | max-width: 100%; 16 | } 17 | p { 18 | margin-bottom: 5px; 19 | } 20 | h3 { 21 | margin: 0; 22 | } 23 | h5 { 24 | margin: 10px 0; 25 | } 26 | li { 27 | margin-bottom: 0; 28 | } 29 | .meal { 30 | margin: 20px 0; 31 | } 32 | .text-center { 33 | text-align: center; 34 | margin-bottom: 80px; 35 | } 36 | .videoWrapper { 37 | position: relative; 38 | padding-bottom: 56.25%; 39 | padding-top: 25px; 40 | height: 0; 41 | } 42 | .videoWrapper iframe { 43 | position: absolute; 44 | top: 0; 45 | left: 0; 46 | width: 100%; 47 | height: 100%; 48 | } 49 | #get_meal{ 50 | font-size: 1.5em; 51 | } -------------------------------------------------------------------------------- /Slideshow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Slideshow 7 | 8 | 9 | 10 | 11 |
12 |
13 | 17 | 21 | 25 | 29 |
30 |
31 | 32 | -------------------------------------------------------------------------------- /Slideshow/script.js: -------------------------------------------------------------------------------- 1 | const imgs = document.getElementById("imgs"); 2 | 3 | const img = document.querySelectorAll("#imgs img"); 4 | 5 | let idx = 0; 6 | 7 | function run() { 8 | idx++; 9 | 10 | if (idx > img.length - 1) { 11 | idx = 0; 12 | } 13 | 14 | imgs.style.transform = `translateX(${-idx * 700}px)`;//used template literal 15 | } 16 | 17 | setInterval(run, 1500); -------------------------------------------------------------------------------- /Slideshow/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | font-family: "Poppins", sans-serif; 12 | margin: 0; 13 | min-height: 100vh; 14 | } 15 | 16 | .carousel { 17 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); 18 | overflow: hidden; 19 | height: 700px; 20 | width: 700px; 21 | } 22 | 23 | .image-container { 24 | display: flex; 25 | transition: transform 0.5s ease-in-out; 26 | transform: translateX(0); 27 | } 28 | 29 | img { 30 | object-fit: cover; 31 | height: 700px; 32 | width: 700px; 33 | } -------------------------------------------------------------------------------- /StarRating/rate.css: -------------------------------------------------------------------------------- 1 | .stars-outer { 2 | position: relative; 3 | display: inline-block; 4 | } 5 | 6 | .stars-inner { 7 | position: absolute; 8 | top: 0; 9 | left: 0; 10 | white-space: nowrap; 11 | overflow: hidden; 12 | width: 0; 13 | } 14 | 15 | .stars-outer::before { 16 | content: "\f005 \f005 \f005 \f005 \f005"; 17 | font-family: "Font Awesome 5 Free"; 18 | font-weight: 900; 19 | color: #ccc; 20 | } 21 | 22 | .stars-inner::before { 23 | content: "\f005 \f005 \f005 \f005 \f005"; 24 | font-family: "Font Awesome 5 Free"; 25 | font-weight: 900; 26 | color: #f8ce0b; 27 | } 28 | -------------------------------------------------------------------------------- /StarRating/rate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | RATING MOVIES 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 21 |
22 |
23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 42 | 43 | 44 | 45 | 51 | 52 | 53 | 54 | 60 | 61 | 62 | 63 | 69 | 70 | 71 | 72 | 78 | 79 | 80 |
MOVIESRating
Dil Bechara 37 |
38 |
39 |
40 | 41 |
Angrezi Medium 46 |
47 |
48 |
49 | 50 |
Bala 55 |
56 |
57 |
58 | 59 |
Money Heist 64 |
65 |
66 |
67 | 68 |
Harry Potter 73 |
74 |
75 |
76 | 77 |
81 |
82 | 83 | 84 | -------------------------------------------------------------------------------- /StarRating/rate.js: -------------------------------------------------------------------------------- 1 | //Initial Ratings 2 | const ratings = { 3 | dil: 4.7, 4 | angrezi: 3.4, 5 | bala: 2.3, 6 | money: 3.6, 7 | harry: 4.1 8 | } 9 | 10 | // Total Stars 11 | const starsTotal = 5; 12 | 13 | // Run getRatings when DOM loads 14 | document.addEventListener('DOMContentLoaded', getRatings); 15 | 16 | // Form Elements 17 | const movieSelect = document.getElementById('movie-select'); 18 | const ratingControl = document.getElementById('rating-control'); 19 | 20 | // Init product 21 | let product; 22 | 23 | // Product select change 24 | movieSelect.addEventListener('change', (e) => { 25 | product = e.target.value; 26 | // Enable rating control 27 | ratingControl.disabled = false; 28 | ratingControl.value = ratings[product]; 29 | }); 30 | 31 | // Rating control change 32 | ratingControl.addEventListener('blur', (e) => { 33 | const rating = e.target.value; 34 | 35 | // Make sure 5 or under 36 | if (rating > 5) { 37 | alert('Please rate 1 - 5'); 38 | return; 39 | } 40 | 41 | // Change rating 42 | ratings[product] = rating; 43 | 44 | getRatings(); 45 | }); 46 | 47 | // Get ratings 48 | function getRatings() { 49 | for (let rating in ratings) { 50 | // Get percentage 51 | const starPercentage = (ratings[rating] / starsTotal) * 100; 52 | 53 | // Round to nearest 10 54 | const starPercentageRounded = `${Math.round(starPercentage / 10) * 10}%`; 55 | 56 | // Set width of stars-inner to percentage 57 | document.querySelector(`.${rating} .stars-inner`).style.width = starPercentageRounded; 58 | 59 | // Add number rating 60 | document.querySelector(`.${rating} .number-rating`).innerHTML = ratings[rating]; 61 | } 62 | } -------------------------------------------------------------------------------- /Toast notification/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Toast Notifaction 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /Toast notification/script.js: -------------------------------------------------------------------------------- 1 | 2 | const btn = document.getElementById("btn"); 3 | const container = document.getElementById("container"); 4 | 5 | btn.addEventListener("click", () => { 6 | createNotification(); 7 | }); 8 | 9 | function createNotification() { 10 | const notif = document.createElement("div"); 11 | notif.classList.add("toast"); 12 | 13 | notif.innerText = "Hi, I am a Notification :)"; 14 | 15 | container.appendChild(notif); 16 | 17 | setTimeout(() => { 18 | notif.remove(); 19 | }, 2000); 20 | } -------------------------------------------------------------------------------- /Toast notification/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | body { 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | font-family: "Poppins", sans-serif; 11 | margin: 0; 12 | min-height: 100vh; 13 | } 14 | button { 15 | font-size: 1.5em; 16 | background-color: steelblue; 17 | color: white; 18 | font-family: inherit; 19 | padding: 1.5rem; 20 | border-radius: 50px; 21 | border: none; 22 | } 23 | #container { 24 | position: fixed; 25 | bottom: 10px; 26 | right: 10px; 27 | } 28 | .toast { 29 | background-color: steelblue; 30 | border-radius: 5px; 31 | color: #fff; 32 | padding: 2rem; 33 | margin: 1rem; 34 | } -------------------------------------------------------------------------------- /Toggle dark Mode/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dark Mode Toggle 7 | 8 | 9 | 10 | 11 |
12 | 14 |
15 |

Dark/Light Mode in Js

16 |

17 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione ex 18 | saepe facilis nesciunt unde totam veritatis culpa cumque, autem rem 19 | voluptates quia nemo aperiam quod excepturi hic voluptatum. Hic eum 20 | perspiciatis dignissimos nam vero ex excepturi veniam? Sapiente, 21 | repellendus optio.Hic eum perspiciatis dignissimos nam vero ex excepturi veniam? Sapiente, 22 | repellendus optio 23 |

24 | 25 | 26 | -------------------------------------------------------------------------------- /Toggle dark Mode/script.js: -------------------------------------------------------------------------------- 1 | const toggle = document.getElementById("toggle"); 2 | 3 | toggle.addEventListener("change", (e) => { 4 | document.body.classList.toggle("dark", e.target.checked); 5 | }); -------------------------------------------------------------------------------- /Toggle dark Mode/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | flex-direction: column; 12 | font-family: "Poppins", sans-serif; 13 | margin: 0; 14 | min-height: 100vh; 15 | text-align: center; 16 | padding: 9rem; 17 | transition: background 0.3s linear, color 0.3s linear; 18 | } 19 | 20 | body.dark { 21 | background-color: #1f1f1f; 22 | color: white; 23 | } 24 | 25 | .toggle-container { 26 | position: fixed; 27 | top: 10px; 28 | right: 10px; 29 | } 30 | 31 | label { 32 | background-color: black; 33 | clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); 34 | display: inline-block; 35 | width: 50px; 36 | height: 50px; 37 | cursor: pointer; 38 | user-select: none; 39 | transition: background 0.3s linear; 40 | } 41 | 42 | body.dark label { 43 | background-color: #fff; 44 | } 45 | 46 | input { 47 | visibility: hidden; 48 | } 49 | 50 | -------------------------------------------------------------------------------- /Typing Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Typing Effect 12 | 13 | 14 | 15 |
16 |

17 |
18 |
19 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Typing Effect/script.js: -------------------------------------------------------------------------------- 1 | var line = document.getElementById("line") 2 | var txts = ["Hi, I'm Chetna Grover", "a Front-End Web-Developer", "a Creative Designer" , "a Digital Marketer"]; 3 | var speed = 100; 4 | 5 | async function typewriter(txt) { 6 | for (let i = 0; i < txt.length; i++) { 7 | line.innerHTML += txt.charAt(i); 8 | await delay(speed) 9 | } 10 | } 11 | 12 | async function reverseTypewriter(txt) { 13 | for (let i = txt.length; i > 0; i--) { 14 | line.innerHTML = line.innerHTML.slice(0, -1) 15 | await delay(speed) 16 | } 17 | } 18 | 19 | async function writeLoop() { 20 | 21 | for (let i = 0; i < txts.length; i++) { 22 | await typewriter(txts[i]) 23 | await delay(1000) 24 | await reverseTypewriter(txts[i]) 25 | await delay(100) 26 | } 27 | 28 | writeLoop() 29 | } 30 | 31 | function delay(ms) { 32 | return new Promise((resolve) => { 33 | setTimeout(() => { 34 | resolve() 35 | }, ms) 36 | }) 37 | } 38 | 39 | writeLoop() -------------------------------------------------------------------------------- /Typing Effect/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: black; 3 | } 4 | 5 | a { 6 | color: #ff36da; 7 | text-decoration: none; 8 | } 9 | 10 | .fa-heart { 11 | color: red; 12 | } 13 | 14 | .type-container { 15 | position: relative; 16 | font-size: 1.8rem; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | } 21 | 22 | #line { 23 | margin-top: 8%; 24 | position: relative; 25 | font-size: 50px; 26 | font-weight: bold; 27 | font-family: Acme; 28 | color: #00ffea; 29 | text-shadow: 3px 3px black; 30 | text-align: center; 31 | } 32 | 33 | .cursor { 34 | height: 2rem; 35 | width: 2px; 36 | margin-left: 2px; 37 | animation: blinkTextCursor 800ms infinite; 38 | } 39 | 40 | @keyframes blinkTextCursor { 41 | from { 42 | opacity: 1; 43 | } 44 | to { 45 | opacity: 0; 46 | } 47 | } 48 | 49 | footer { 50 | font-family: acme; 51 | color: white; 52 | text-shadow: 1px 1px black; 53 | margin-top: 80px; 54 | text-align: center; 55 | font-size: large; 56 | } -------------------------------------------------------------------------------- /double-click-heart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Double Click Heart 9 | 10 | 11 |

Double click on the image to it

12 | You liked it 0 times 13 | 14 |
15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /double-click-heart/script.js: -------------------------------------------------------------------------------- 1 | const loveMe = document.querySelector('.loveMe') 2 | const times = document.querySelector('#times') 3 | 4 | 5 | let clickTime = 0 6 | let timesClicked = 0 7 | 8 | 9 | loveMe.addEventListener('click', (e) => { 10 | if(clickTime === 0) { 11 | clickTime = new Date().getTime() 12 | } else { 13 | 14 | if((new Date().getTime() - clickTime) < 800) { 15 | createHeart(e) 16 | clickTime = 0 17 | 18 | } else { 19 | 20 | clickTime = new Date().getTime() 21 | 22 | } 23 | } 24 | }) 25 | 26 | const createHeart = (e) => { 27 | const heart = document.createElement('i') 28 | heart.classList.add('fas') 29 | heart.classList.add('fa-heart') 30 | 31 | const x = e.clientX 32 | const y = e.clientY 33 | 34 | const leftOffset = e.target.offsetLeft 35 | const topOffset = e.target.offsetTop 36 | 37 | const xInside = x - leftOffset 38 | const yInside = y - topOffset 39 | 40 | heart.style.top = `${yInside}px` 41 | heart.style.left = `${xInside}px` 42 | 43 | loveMe.appendChild(heart) 44 | 45 | times.innerHTML = ++timesClicked 46 | 47 | setTimeout(() => heart.remove(), 1000) 48 | } -------------------------------------------------------------------------------- /double-click-heart/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Oswald'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | body { 7 | font-family: 'Oswald', sans-serif; 8 | text-align: center; 9 | overflow: hidden; 10 | margin: 0; 11 | } 12 | h3 { 13 | margin-top: 2rem; 14 | margin-bottom: 0; 15 | text-align: center; 16 | } 17 | small { 18 | display: block; 19 | text-align: center; 20 | } 21 | .fa-heart { 22 | color: red; 23 | } 24 | .loveMe { 25 | height: 440px; 26 | width: 400px; 27 | background: url('https://picsum.photos/400/440') 28 | no-repeat center center/cover; 29 | margin: 6rem auto; 30 | cursor: pointer; 31 | max-width: 100%; 32 | position: relative; 33 | box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); 34 | } 35 | .loveMe .fa-heart { 36 | position: absolute; 37 | animation: grow 0.6s linear; 38 | transform: translate(-50%, -50%) scale(0); 39 | } 40 | @keyframes grow { 41 | to { 42 | transform: translate(-50%, -50%) scale(10); 43 | opacity: 0; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /drag&drop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drag AND Drop 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /drag&drop/script.js: -------------------------------------------------------------------------------- 1 | const fill = document.querySelector('.fill') 2 | const empties = document.querySelectorAll('.empty') 3 | 4 | fill.addEventListener('dragstart', dragStart) 5 | fill.addEventListener('dragend', dragEnd) 6 | 7 | for(const empty of empties) { 8 | empty.addEventListener('dragover', dragOver) 9 | empty.addEventListener('dragenter', dragEnter) 10 | empty.addEventListener('dragleave', dragLeave) 11 | empty.addEventListener('drop', dragDrop) 12 | } 13 | 14 | function dragStart() { 15 | this.className += ' hold' 16 | setTimeout(() => this.className = 'invisible', 0) 17 | } 18 | 19 | function dragEnd() { 20 | this.className = 'fill' 21 | } 22 | 23 | function dragOver(e) { 24 | e.preventDefault() 25 | } 26 | 27 | function dragEnter(e) { 28 | e.preventDefault() 29 | this.className += ' hovered' 30 | } 31 | 32 | function dragLeave() { 33 | this.className = 'empty' 34 | } 35 | 36 | function dragDrop() { 37 | this.className = 'empty' 38 | this.append(fill) 39 | } -------------------------------------------------------------------------------- /drag&drop/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background-image: linear-gradient(to left, steelblue , purple); 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | height: 100vh; 11 | overflow: hidden; 12 | margin: 0; 13 | } 14 | 15 | .empty { 16 | height: 150px; 17 | width: 150px; 18 | margin: 10px; 19 | border: solid 3px black; 20 | background: white; 21 | } 22 | 23 | .fill { 24 | background-image: url('https://source.unsplash.com/random/150x150'); 25 | height: 145px; 26 | width: 145px; 27 | cursor: pointer; 28 | } 29 | 30 | .hold { 31 | border: solid 5px #ccc; 32 | } 33 | 34 | .hovered { 35 | background-color: #333; 36 | border-color: white; 37 | border-style: dashed; 38 | } 39 | 40 | @media (max-width: 800px) { 41 | body { 42 | flex-direction: column; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /hoverboard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hoverboard 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /hoverboard/script.js: -------------------------------------------------------------------------------- 1 | const container = document.getElementById('container') 2 | const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71', '#9deb73','#e66cd7', '#ffe414'] 3 | const SQUARES = 500 4 | 5 | for(let i = 0; i < SQUARES; i++) { 6 | const square = document.createElement('div') 7 | square.classList.add('square') 8 | 9 | square.addEventListener('mouseover', () => setColor(square)) 10 | 11 | square.addEventListener('mouseout', () => removeColor(square)) 12 | 13 | container.appendChild(square) 14 | } 15 | 16 | function setColor(element) { 17 | const color = getRandomColor() 18 | element.style.background = color 19 | element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}` 20 | } 21 | 22 | function removeColor(element) { 23 | element.style.background = '#1d1d1d' 24 | element.style.boxShadow = '0 0 2px #000' 25 | } 26 | 27 | function getRandomColor() { 28 | return colors[Math.floor(Math.random() * colors.length)] 29 | } -------------------------------------------------------------------------------- /hoverboard/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | body { 5 | background-color: #111; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | height: 100vh; 10 | overflow: hidden; 11 | margin: 0; 12 | } 13 | .container { 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | flex-wrap: wrap; 18 | max-width: 800px; 19 | } 20 | .square { 21 | background-color: #1d1d1d; 22 | box-shadow: 0 0 2px #000; 23 | height: 16px; 24 | width: 16px; 25 | margin: 2px; 26 | transition: 2s ease; 27 | } 28 | .square:hover { 29 | transition-duration: 0s; 30 | } 31 | -------------------------------------------------------------------------------- /password-generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Password Generator 9 | 10 | 11 |
12 |

Password Generator

13 |
14 | 15 | 18 |
19 |
20 |
21 | 22 | 23 |
24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 |
32 |
33 | 34 | 35 |
36 |
37 | 38 | 39 |
40 |
41 | 42 | 45 |
46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /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 randomFunc = { 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) { return } 22 | 23 | textarea.value = password 24 | document.body.appendChild(textarea) 25 | textarea.select() 26 | document.execCommand('copy') 27 | textarea.remove() 28 | alert('Password copied to clipboard!') 29 | }) 30 | 31 | generateEl.addEventListener('click', () => { 32 | const length = +lengthEl.value 33 | const hasLower = lowercaseEl.checked 34 | const hasUpper = uppercaseEl.checked 35 | const hasNumber = numbersEl.checked 36 | const hasSymbol = symbolsEl.checked 37 | 38 | resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length) 39 | }) 40 | 41 | function generatePassword(lower, upper, number, symbol, length) { 42 | let generatedPassword = '' 43 | const typesCount = lower + upper + number + symbol 44 | const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(item => Object.values(item)[0]) 45 | 46 | if(typesCount === 0) { 47 | return '' 48 | } 49 | 50 | for(let i = 0; i < length; i += typesCount) { 51 | typesArr.forEach(type => { 52 | const funcName = Object.keys(type)[0] 53 | generatedPassword += randomFunc[funcName]() 54 | }) 55 | } 56 | 57 | const finalPassword = generatedPassword.slice(0, length) 58 | 59 | return finalPassword 60 | } 61 | 62 | function getRandomLower() { 63 | return String.fromCharCode(Math.floor(Math.random() * 26) + 97) 64 | } 65 | 66 | function getRandomUpper() { 67 | return String.fromCharCode(Math.floor(Math.random() * 26) + 65) 68 | } 69 | 70 | function getRandomNumber() { 71 | return String.fromCharCode(Math.floor(Math.random() * 10) + 48) 72 | } 73 | 74 | function getRandomSymbol() { 75 | const symbols = '!@#$%^&*(){}[]=<>/,.' 76 | return symbols[Math.floor(Math.random() * symbols.length)] 77 | } -------------------------------------------------------------------------------- /password-generator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #e06377; 9 | color: #fff; 10 | font-family: 'Muli', sans-serif; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content: center; 15 | height: 100vh; 16 | overflow: hidden; 17 | padding: 10px; 18 | margin: 0; 19 | } 20 | 21 | h2 { 22 | margin: 10px 0 20px; 23 | text-align: center; 24 | } 25 | 26 | .container { 27 | background-color: #c83349; 28 | box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.8); 29 | padding: 20px; 30 | width: 350px; 31 | max-width: 100%; 32 | } 33 | 34 | .result-container { 35 | background-color: rgba(0, 0, 0, 0.5); 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: #e06377; 64 | color: #fff; 65 | font-size: 16px; 66 | padding: 8px 12px; 67 | cursor: pointer; 68 | } 69 | 70 | .btn-large { 71 | display: block; 72 | width: 100%; 73 | } 74 | 75 | .setting { 76 | display: flex; 77 | justify-content: space-between; 78 | align-items: center; 79 | margin: 15px 0; 80 | } 81 | -------------------------------------------------------------------------------- /popup/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Popup 7 | 8 | 9 | 10 | 11 | 12 | 13 | 20 | 21 | -------------------------------------------------------------------------------- /popup/script.js: -------------------------------------------------------------------------------- 1 | const open = document.getElementById("open"); 2 | const close = document.getElementById("close"); 3 | const container = document.getElementById("container"); 4 | 5 | open.addEventListener("click", () => { 6 | container.classList.add("active"); 7 | }); 8 | 9 | close.addEventListener("click", () => { 10 | container.classList.remove("active"); 11 | }); -------------------------------------------------------------------------------- /popup/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | font-family: "Poppins", sans-serif; 12 | margin: 0; 13 | min-height: 100vh; 14 | } 15 | 16 | button { 17 | background-color: steelblue; 18 | color: white; 19 | padding: 1rem; 20 | border-radius: 4px; 21 | border: none; 22 | font-family: inherit; 23 | } 24 | 25 | .popup-container { 26 | position: fixed; 27 | top: 0; 28 | left: 0; 29 | bottom: 0; 30 | right: 0; 31 | background-color: rgba(0, 0, 0, 0.5); 32 | 33 | display: none; 34 | align-items: center; 35 | justify-content: center; 36 | } 37 | 38 | .popup-container.active { 39 | display: flex; 40 | } 41 | 42 | .popup { 43 | background-color: #fff; 44 | border-radius: 5px; 45 | box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); 46 | padding: 2rem; 47 | position: relative; 48 | width: 500px; 49 | } 50 | 51 | .popup button { 52 | background-color: #fff; 53 | color: steelblue; 54 | font-size: 2rem; 55 | position: absolute; 56 | top: 10px; 57 | right: 10px; 58 | } -------------------------------------------------------------------------------- /scroll-animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Scroll Animation 8 | 9 | 10 |

Scroll to see the animation

11 |

Lorem ipsum dolor sit amet.

12 |

Lorem ipsum dolor sit amet.

13 |

Lorem ipsum dolor sit amet.

14 |

Lorem ipsum dolor sit amet.

15 |

Lorem ipsum dolor sit amet.

16 |

Lorem ipsum dolor sit amet.

17 |

Lorem ipsum dolor sit amet.

18 |

Lorem ipsum dolor sit amet.

19 |

Lorem ipsum dolor sit amet.

20 |

Lorem ipsum dolor sit amet.

21 |

Lorem ipsum dolor sit amet.

22 |

Lorem ipsum dolor sit amet.

23 |

Lorem ipsum dolor sit amet.

24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /scroll-animation/script.js: -------------------------------------------------------------------------------- 1 | const boxes = document.querySelectorAll('.box') 2 | 3 | window.addEventListener('scroll', checkBoxes) 4 | 5 | checkBoxes() 6 | 7 | function checkBoxes() { 8 | const triggerBottom = window.innerHeight / 5 * 4 9 | 10 | boxes.forEach(box => { 11 | const boxTop = box.getBoundingClientRect().top 12 | 13 | if(boxTop < triggerBottom) { 14 | box.classList.add('show') 15 | } else { 16 | box.classList.remove('show') 17 | } 18 | }) 19 | } -------------------------------------------------------------------------------- /scroll-animation/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | body { 7 | background-color: #efedd6; 8 | font-family: 'Roboto', sans-serif; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | margin: 0; 14 | overflow-x: hidden; 15 | } 16 | h1 { 17 | margin: 10px; 18 | font-size: 70px; 19 | } 20 | .box { 21 | background-color: steelblue; 22 | color: #fff; 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | width: 800px; 27 | height: 200px; 28 | margin: 20px; 29 | border-radius: 10px; 30 | box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); 31 | transform: translateX(400%); 32 | transition: transform 0.4s ease; 33 | } 34 | .box:nth-of-type(even) { 35 | transform: scale(0); 36 | } 37 | .box.show { 38 | transform: scale(1); 39 | } 40 | .box h2 { 41 | font-size: 45px; 42 | } 43 | --------------------------------------------------------------------------------