├── Analog Clock ├── clock.png ├── images │ ├── Analog clock.gif │ └── Clock collage.jpg ├── index.html ├── script.js └── style.css ├── Breakout 2021 ├── ScreenShots │ ├── Breakout 2021 - Rules.png │ ├── Breakout 2021 - Score, Pause and Play.png │ └── Breakout 2021.gif ├── index.html ├── script.js └── style.css ├── Christmas Countdown ├── css │ └── style.css ├── images │ ├── Christmas Countdown - Responsive.png │ ├── Christmas Countdown.png │ └── Christmas background.jpg ├── index.html └── script.js ├── Custom Music Player ├── css │ └── style.css ├── images │ ├── Dil Ke Dastakk.jpg │ ├── Layout.png │ ├── Play_Responsive.png │ ├── Qismat Ki Hawa.jpg │ ├── Titliaan.jpg │ └── play__Responsive.png ├── index.html ├── music │ ├── Dil Ke Dastakk.mp3 │ ├── Qismat Ki Hawa.mp3 │ └── Titliaan.mp3 └── script.js ├── Custom Video Player ├── css │ ├── custom.css │ └── style.css ├── images │ ├── Layout.png │ ├── Responsive Nature.png │ ├── Video Player.png │ └── VideoPlayer.png ├── index.html ├── script.js └── videos │ └── Fishing.mp4 ├── Deepak Linkedin Banner.png ├── Form Validator ├── Simple Form Validator - Email Error.png ├── Simple Form Validator - No Error.png ├── Simple Form Validator - Password Error.png ├── Simple Form Validator -Error Field Required.png ├── Simple Form Validator Layout.png ├── index.html ├── script.js └── style.css ├── JavaScript Mini Projects.jpg ├── LICENSE ├── Lyrics Finder ├── images │ ├── Lyrics Finder - Home.png │ ├── Lyrics Finder - Lyrics.png │ ├── Lyrics Finder.jpg │ └── bg.jpg ├── index.html ├── script.js └── style.css ├── Movie Booking ├── Booking.png ├── Layout.png ├── Responsive.png ├── index.html ├── script.js └── style.css ├── New Hangman game (2020) ├── css │ └── style.css ├── images │ ├── New Hangman Game - Layout.png │ ├── New Hangman Game - keyCode.png │ ├── New Hangman Game - responsive.png │ └── background.png ├── index.html └── script.js ├── PIG Dice Game ├── dice-1.png ├── dice-2.png ├── dice-3.png ├── dice-4.png ├── dice-5.png ├── dice-6.png ├── images │ ├── Dice Game.png │ └── Dice Game__Rules.png ├── index.html ├── javascript.js └── style.css ├── README.md ├── Simple Map ├── Map.png ├── index.html ├── script.js └── style.css ├── Simple Tex To Speech Converter ├── Screen-Shot.png ├── index.html ├── script.js └── style.css └── Toggle Theme ├── Images ├── Drak Mode.png ├── Light Mode.png ├── Mode Collage.jpg └── Toggle Theme.gif ├── index.html ├── main.js └── style.css /Analog Clock/clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Analog Clock/clock.png -------------------------------------------------------------------------------- /Analog Clock/images/Analog clock.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Analog Clock/images/Analog clock.gif -------------------------------------------------------------------------------- /Analog Clock/images/Clock collage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Analog Clock/images/Clock collage.jpg -------------------------------------------------------------------------------- /Analog Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 |
27 | 28 | -------------------------------------------------------------------------------- /Analog Clock/script.js: -------------------------------------------------------------------------------- 1 | const hr = document.querySelector('#hr'); 2 | const min = document.querySelector('#min'); 3 | const sec = document.querySelector('#sec'); 4 | const btn = document.querySelector('#btn') 5 | setInterval(() =>{ 6 | let day = new Date(); 7 | let hh = day.getHours() * 30; 8 | let mh = day.getMinutes() * 6; 9 | let sh = day.getSeconds() * 6; 10 | 11 | // Document style change 12 | hr.style.transform = `rotateZ(${(hh) + (mh / 12)}deg)`; 13 | min.style.transform = `rotateZ(${(mh) + (sh / 60)}deg)`; 14 | sec.style.transform = `rotateZ(${sh}deg)`; 15 | }); 16 | 17 | function getRandomInt(min, max) { 18 | return Math.floor(Math.random() * (max - min + 1)) + min; 19 | } 20 | 21 | btn.addEventListener('click',function(e){ 22 | var classes = ['', 'light', 'halloween', 'christmas', 'winter', 'summer'], 23 | randomClass = classes[getRandomInt(0, classes.length - 1)]; 24 | document.body.className = randomClass; 25 | }); -------------------------------------------------------------------------------- /Analog Clock/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Pacifico&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | --bg-color: #091921; 10 | --shadow1: rgba(255, 255, 255, 0.05); 11 | --shadow2: rgba(0, 0, 0, 0.5); 12 | --clock-bg-color: #eeeeee; 13 | --hr-hand-color: #00adb5; 14 | --min-hand-color: #eeeeee; 15 | --sec-hand-color: #00adb5; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | flex-direction: column; 20 | min-height: 100vh; 21 | background-color: var(--bg-color); 22 | } 23 | 24 | body.light { 25 | --bg-color: #e1f4f3; 26 | --shadow1: rgba(255, 255, 255, 0.05); 27 | --shadow2: rgba(0, 0, 0, 0.2); 28 | --clock-bg-color: #706c61; 29 | --hr-hand-color: #393e46; 30 | --min-hand-color: #706c61; 31 | --sec-hand-color: #393e46; 32 | } 33 | 34 | body.halloween { 35 | --bg-color: #321f28; 36 | --shadow1: rgba(255, 255, 255, 0.05); 37 | --shadow2: rgba(0, 0, 0, 0.2); 38 | --clock-bg-color: #e79e4f; 39 | --hr-hand-color: #734046; 40 | --min-hand-color: #e79e4f; 41 | --sec-hand-color: #734046; 42 | } 43 | 44 | body.christmas { 45 | --bg-color: #a20a0a; 46 | --shadow1: rgba(255, 255, 255, 0.05); 47 | --shadow2: rgba(0, 0, 0, 0.2); 48 | --clock-bg-color: #ffa36c; 49 | --hr-hand-color: #f6eec9; 50 | --min-hand-color: #ffa36c; 51 | --sec-hand-color: #f6eec9; 52 | } 53 | 54 | body.winter { 55 | --bg-color: #293b5f; 56 | --shadow1: rgba(255, 255, 255, 0.05); 57 | --shadow2: rgba(0, 0, 0, 0.2); 58 | --clock-bg-color: #1687a7; 59 | --hr-hand-color: #d3e0ea; 60 | --min-hand-color: #1687a7; 61 | --sec-hand-color: #d3e0ea; 62 | } 63 | 64 | body.summer { 65 | --bg-color: #e23c09; 66 | --shadow1: rgba(255, 255, 255, 0.05); 67 | --shadow2: rgba(0, 0, 0, 0.2); 68 | --clock-bg-color: #b6eb7a; 69 | --hr-hand-color: #f7f7ee; 70 | --min-hand-color: #b6eb7a; 71 | --sec-hand-color: #f7f7ee; 72 | } 73 | 74 | .clock { 75 | width: 350px; 76 | height: 350px; 77 | display: flex; 78 | justify-content: center; 79 | align-items: center; 80 | background-image: url(./clock.png); 81 | background-size: cover; 82 | border: 3px solid var(--bg-color); 83 | border-radius: 50%; 84 | box-shadow: 0 -15px 15px var(--shadow1), inset 0 -15px 15px var(--shadow1), 85 | 0 15px 15px var(--shadow2), inset 0 15px 15px var(--shadow2); 86 | } 87 | 88 | .clock:before { 89 | content: ""; 90 | position: absolute; 91 | width: 15px; 92 | height: 15px; 93 | background: var(--clock-bg-color); 94 | border-radius: 50%; 95 | z-index: 10; 96 | } 97 | 98 | .hour, 99 | .minute, 100 | .second { 101 | position: absolute; 102 | } 103 | 104 | .hour, 105 | .hr { 106 | width: 160px; 107 | height: 160px; 108 | } 109 | 110 | .minute, 111 | .min { 112 | width: 190px; 113 | height: 190px; 114 | } 115 | 116 | .second, 117 | .sec { 118 | width: 230px; 119 | height: 230px; 120 | } 121 | 122 | .hr, 123 | .min, 124 | .sec { 125 | display: flex; 126 | justify-content: center; 127 | position: center; 128 | border-radius: 50%; 129 | } 130 | 131 | .hr:before { 132 | content: ""; 133 | position: absolute; 134 | width: 8px; 135 | height: 80px; 136 | background: var(--hr-hand-color); 137 | z-index: 5; 138 | border-radius: 6px 6px 0 0; 139 | } 140 | 141 | .min:before { 142 | content: ""; 143 | position: absolute; 144 | width: 4px; 145 | height: 90px; 146 | background: var(--min-hand-color); 147 | z-index: 6; 148 | border-radius: 6px 6px 0 0; 149 | } 150 | 151 | .sec:before { 152 | content: ""; 153 | position: absolute; 154 | width: 2px; 155 | height: 150px; 156 | background: var(--sec-hand-color); 157 | z-index: 8; 158 | border-radius: 6px 6px 0 0; 159 | } 160 | 161 | .btn-container { 162 | margin-top: 100px; 163 | height: 40px; 164 | width: 140px; 165 | } 166 | 167 | .btn { 168 | width: 100%; 169 | height: 100%; 170 | font-size: 18px; 171 | font-family: "Pacifico", cursive; 172 | letter-spacing: 1.3px; 173 | border-radius: 15px; 174 | outline: none; 175 | border: none; 176 | box-shadow: 1px 1px 4px #000; 177 | color: var(--bg-color); 178 | background-color: var(--min-hand-color); 179 | transition: transform 0.3s; 180 | } 181 | 182 | .btn:hover { 183 | cursor: pointer; 184 | transform: scale(1.1); 185 | box-shadow: 2px 2px 6px #000; 186 | } 187 | 188 | .btn:active { 189 | cursor: pointer; 190 | transform: scale(1); 191 | box-shadow: 1px 1px 8px #000; 192 | } 193 | -------------------------------------------------------------------------------- /Breakout 2021/ScreenShots/Breakout 2021 - Rules.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Breakout 2021/ScreenShots/Breakout 2021 - Rules.png -------------------------------------------------------------------------------- /Breakout 2021/ScreenShots/Breakout 2021 - Score, Pause and Play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Breakout 2021/ScreenShots/Breakout 2021 - Score, Pause and Play.png -------------------------------------------------------------------------------- /Breakout 2021/ScreenShots/Breakout 2021.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Breakout 2021/ScreenShots/Breakout 2021.gif -------------------------------------------------------------------------------- /Breakout 2021/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Breakout 2021 9 | 10 | 11 |

Breakout 2021 ⚒️

12 | 13 | 14 |
15 |

How To Play:

16 |

17 | 1. Hold Right and Left key to move the paddle to bounce the ball in any direction and Break the Blocks. 18 |

19 |

20 | 2. If you miss the ball, your score and the blocks, all will reset. 21 |

22 |

23 | 3. Hold Space bar to pause the game but remember directions will be random after releasing Space bar. 24 |

25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Breakout 2021/script.js: -------------------------------------------------------------------------------- 1 | const rulesBtn = document.getElementById('rules-btn'); 2 | const closeBtn = document.getElementById('close-btn'); 3 | const startBtn = document.getElementById('start-btn'); 4 | const rules = document.getElementById('rules'); 5 | const canvas = document.getElementById('canvas'); 6 | const ctx = canvas.getContext('2d'); 7 | 8 | const ball = { 9 | x: canvas.width / 2, 10 | y: canvas.height / 2, 11 | size: 10, 12 | speed: 4, 13 | dx: 4, 14 | dy: -4 15 | } 16 | 17 | const paddle = { 18 | x: canvas.width / 2 - 30, 19 | y: canvas.height - 20, 20 | w: 80, 21 | h: 15, 22 | speed: 8, 23 | dx: 0 24 | } 25 | 26 | const brick = { 27 | w: 70, 28 | h: 20, 29 | padding: 10, 30 | offsetX: 45, 31 | offsetY: 60, 32 | visible: true 33 | } 34 | 35 | function drawBall() { 36 | ctx.beginPath(); 37 | ctx.arc(ball.x, ball.y, ball.size, 0, Math.PI * 2); 38 | ctx.fillStyle = '#f0f0f0'; 39 | ctx.strokeStyle = 'rgb(233, 66, 53)'; 40 | ctx.stroke(); 41 | ctx.fill(); 42 | ctx.closePath(); 43 | } 44 | 45 | function drawPaddle() { 46 | ctx.beginPath(); 47 | ctx.rect(paddle.x, paddle.y, paddle.w, paddle.h); 48 | ctx.fillStyle = '#f0f0f0'; 49 | ctx.strokeStyle = 'rgb(233, 66, 53)'; 50 | ctx.stroke(); 51 | ctx.fill(); 52 | ctx.closePath(); 53 | } 54 | 55 | // Bricks Array 56 | const rows = 6; 57 | const columns = 9; 58 | 59 | const bricks = []; 60 | for(let i=0; i { 79 | column.forEach(brick => { 80 | ctx.beginPath(); 81 | ctx.rect(brick.x, brick.y, brick.w, brick.h); 82 | ctx.fillStyle = brick.visible ? '#f0f0f0' : 'transparent'; 83 | ctx.strokeStyle = brick.visible ? 'rgb(52, 168, 83)' : 'transparent'; 84 | ctx.lineWidth = 3; 85 | ctx.stroke(); 86 | ctx.fill(); 87 | ctx.closePath(); 88 | }) 89 | }) 90 | } 91 | 92 | function movePaddle(){ 93 | paddle.x += paddle.dx; 94 | // Wall Detection 95 | if(paddle.x + paddle.w > canvas.width){ 96 | paddle.x = canvas.width - paddle.w; 97 | } 98 | if(paddle.x < 0){ 99 | paddle.x = 0; 100 | } 101 | } 102 | 103 | function moveBall(){ 104 | ball.x += ball.dx; 105 | ball.y += ball.dy; 106 | // Wall Detection 107 | if(ball.x + ball.size > canvas.width || 108 | ball.x - ball.size < 0){ 109 | // Reverse Ball in x axis 110 | ball.dx *= -1; 111 | } 112 | if(ball.y + ball.size > canvas.height || 113 | ball.y - ball.size < 0){ 114 | // Reverse Ball in y axis 115 | ball.dy *= -1; 116 | } 117 | 118 | // Paddle Ball Collision 119 | if(ball.x - ball.size > paddle.x && 120 | ball.x + ball.size < paddle.x + paddle.w && 121 | ball.y + ball.size > paddle.y){ 122 | ball.dy = -ball.speed; 123 | } 124 | 125 | // Brick Ball Collision 126 | bricks.forEach(column => { 127 | column.forEach(brick => { 128 | if(brick.visible){ 129 | if(ball.x - ball.size > brick.x && 130 | ball.x + ball.size < brick.x +brick.w && 131 | ball.y + ball.size > brick.y && 132 | ball.y - ball.size < brick.y + brick.h){ 133 | ball.dy *= -1; 134 | brick.visible = false; 135 | updateScore(); 136 | } 137 | } 138 | }) 139 | }) 140 | 141 | // Losing Case 142 | if(ball.y + ball.size > canvas.height){ 143 | score = 0; 144 | showAllBricks(); 145 | ball.x = canvas.width / 2; 146 | ball.y = canvas.height / 2; 147 | } 148 | } 149 | 150 | function updateScore(){ 151 | score++; 152 | if(score % (rows * columns) === 0){ 153 | showAllBricks(); 154 | } 155 | } 156 | 157 | function showAllBricks(){ 158 | bricks.forEach(column => { 159 | column.forEach(brick => { 160 | brick.visible = true; 161 | }) 162 | }) 163 | } 164 | 165 | function draw(){ 166 | // Clearing Canvas 167 | ctx.clearRect(0, 0, canvas.width, canvas.height); 168 | 169 | drawBall(); 170 | drawPaddle(); 171 | drawScore(); 172 | drawBricks(); 173 | } 174 | 175 | function update(){ 176 | movePaddle(); 177 | moveBall(); 178 | draw(); 179 | requestAnimationFrame(update); 180 | } 181 | 182 | function startGame(){ 183 | update(); 184 | } 185 | 186 | 187 | 188 | function keyDown(e){ 189 | if(e.key === 'Right' || 190 | e.key === 'ArrowRight') { 191 | paddle.dx = paddle.speed; 192 | }else if(e.key === 'Left' || 193 | e.key === 'ArrowLeft'){ 194 | paddle.dx = -paddle.speed; 195 | }else if(e.key === 'Spacebar' || 196 | e.key === ' '){ 197 | ball.dx = 0; 198 | ball.dy = 0; 199 | } 200 | 201 | } 202 | 203 | function keyUp(e){ 204 | if(e.key === 'Right' || 205 | e.key === 'ArrowRight' || 206 | e.key === 'Left' || 207 | e.key === 'ArrowLeft'){ 208 | paddle.dx = 0; 209 | }else if(e.key === 'Spacebar' || 210 | e.key === ' '){ 211 | ball.dx = ball.speed; 212 | ball.dy = ball.speed; 213 | } 214 | } 215 | // Keyboard Event 216 | document.addEventListener('keydown', keyDown); 217 | document.addEventListener('keyup', keyUp); 218 | 219 | // Buttons Functionality 220 | rulesBtn.addEventListener('click', () => { 221 | rules.classList.add('show'); 222 | }); 223 | 224 | closeBtn.addEventListener('click', () => { 225 | rules.classList.remove('show'); 226 | }); 227 | 228 | startBtn.addEventListener('click', () => { 229 | startBtn.classList.add('hide'); 230 | startGame(); 231 | }); -------------------------------------------------------------------------------- /Breakout 2021/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); 3 | *{ 4 | box-sizing: border-box; 5 | } 6 | 7 | /* Variables */ 8 | :root{ 9 | --bg: rgb(0, 149, 221); 10 | --primary: #f0f0f0; 11 | --secondary: #000; 12 | --main1: rgb(233, 66, 53); 13 | --main2: rgb(250, 187, 5); 14 | --main3: rgb(52, 168, 83); 15 | } 16 | 17 | body{ 18 | background-color: var(--bg); 19 | color: var(--primary); 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | justify-content: center; 24 | font-family: 'Roboto', sans-serif; 25 | min-height: 100vh; 26 | margin: 0; 27 | padding: 0; 28 | } 29 | 30 | h1{ 31 | font-size: 40px; 32 | font-family: 'Lobster', cursive; 33 | letter-spacing: 1px; 34 | -webkit-text-stroke: 1px var(--main3); 35 | } 36 | 37 | h1 span{ 38 | -webkit-text-stroke: 1px var(--main1); 39 | } 40 | 41 | h2{ 42 | font-size: 30px; 43 | color: var(--primary); 44 | -webkit-text-stroke: 1px var(--main1); 45 | } 46 | 47 | h2 span{ 48 | -webkit-text-stroke: 1px var(--main3); 49 | } 50 | 51 | p span{ 52 | color: var(--primary); 53 | -webkit-text-stroke: 1px var(--main2); 54 | } 55 | 56 | .btn { 57 | background-color: var(--secondary); 58 | color: var(--primary); 59 | height: 45px; 60 | width: 120px; 61 | letter-spacing: 1px; 62 | position: absolute; 63 | outline: none; 64 | border: none; 65 | border-radius: 5px; 66 | -webkit-border-radius: 5px; 67 | -moz-border-radius: 5px; 68 | -ms-border-radius: 5px; 69 | -o-border-radius: 5px; 70 | } 71 | 72 | .btn:hover{ 73 | transform: scale(1.08); 74 | -webkit-transform: scale(1.08); 75 | -moz-transform: scale(1.08); 76 | -ms-transform: scale(1.08); 77 | -o-transform: scale(1.08); 78 | transition: transform .1s ease-in-out; 79 | -webkit-transition: transform .1s ease-in-out; 80 | -moz-transition: transform .1s ease-in-out; 81 | -ms-transition: transform .1s ease-in-out; 82 | -o-transition: transform .1s ease-in-out; 83 | } 84 | 85 | .btn:active{ 86 | transform: scale(.98); 87 | -webkit-transform: scale(.98); 88 | -moz-transform: scale(.98); 89 | -ms-transform: scale(.98); 90 | -o-transform: scale(.98); 91 | } 92 | 93 | .rules-btn{ 94 | top: 50px; 95 | left: 30px; 96 | border: 2px solid var(--main2); 97 | } 98 | 99 | .start-btn{ 100 | top: 350px; 101 | border: 2px solid var(--main3); 102 | } 103 | 104 | .start-btn.hide{ 105 | visibility: hidden; 106 | } 107 | 108 | .rules{ 109 | position: absolute; 110 | top: 0; 111 | left: 0; 112 | background: var(--primary); 113 | opacity: .95; 114 | color: var(--secondary); 115 | font-weight: 600; 116 | min-height: 100vh; 117 | width: 350px; 118 | padding: 30px; 119 | line-height: 1.5; 120 | transform: translateX(-350px); 121 | -webkit-transform: translateX(-350px); 122 | -moz-transform: translateX(-350px); 123 | -ms-transform: translateX(-350px); 124 | -o-transform: translateX(-350px); 125 | transition: transform .5s ease-in-out; 126 | -webkit-transition: transform .5s ease-in-out; 127 | -moz-transition: transform .5s ease-in-out; 128 | -ms-transition: transform .5s ease-in-out; 129 | -o-transition: transform .5s ease-in-out; 130 | border: 2px solid var(--main1); 131 | border-top-right-radius: 5px; 132 | border-bottom-right-radius: 5px; 133 | } 134 | 135 | /* for Javascript */ 136 | .rules.show{ 137 | transform: translateX(0); 138 | -webkit-transform: translateX(0); 139 | -moz-transform: translateX(0); 140 | -ms-transform: translateX(0); 141 | -o-transform: translateX(0); 142 | } 143 | 144 | .close-btn{ 145 | top: 400px; 146 | left: 30px; 147 | border: 2px solid var(--main3); 148 | } 149 | 150 | canvas{ 151 | background-color: var(--secondary); 152 | display: block; 153 | border-radius: 5px; 154 | -webkit-border-radius: 5px; 155 | -moz-border-radius: 5px; 156 | -ms-border-radius: 5px; 157 | -o-border-radius: 5px; 158 | border: 2px solid var(--main1); 159 | } -------------------------------------------------------------------------------- /Christmas Countdown/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap'); 2 | * { 3 | box-sizing: border-box; 4 | font-family: 'Dancing Script', cursive; 5 | } 6 | 7 | body * { 8 | z-index: 1; 9 | } 10 | 11 | body { 12 | background: url('../images/Christmas\ background.jpg') no-repeat center center/cover; 13 | color: #fff; 14 | min-height: 100vh; 15 | display: flex; 16 | flex-direction: column; 17 | align-items: center; 18 | margin: 0; 19 | overflow: hidden; 20 | } 21 | 22 | body::after { 23 | content: ''; 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | width: 100%; 28 | height: 100%; 29 | background-color: rgba(0, 0, 0, 0.1); 30 | } 31 | 32 | .year { 33 | color: #fca3cc; 34 | font-size: 120px; 35 | position: absolute; 36 | top: 520px; 37 | text-shadow: -2px -2px 0 #ea2c62, 2px -2px 0 #ea2c62, -2px 2px 0 #ea2c62, 2px 2px 0 #ea2c62; 38 | z-index: -1; 39 | } 40 | 41 | h1 { 42 | font-size: 65px; 43 | color: #a20a0a; 44 | text-shadow: -1px -1px 0 #ffa36c, 1px -1px 0 #ffa36c, -1px 1px 0 #ffa36c, 1px 1px 0 #ffa36c; 45 | margin-top: 150px; 46 | } 47 | 48 | .countdown { 49 | display: flex; 50 | font-size: 42px; 51 | } 52 | 53 | .time { 54 | display: flex; 55 | flex-direction: column; 56 | align-items: center; 57 | justify-content: center; 58 | margin: 15px; 59 | color: #000; 60 | text-shadow: -1px -1px 0 #ffa36c, 1px -1px 0 #ffa36c, -1px 1px 0 #ffa36c, 1px 1px 0 #ffa36c; 61 | } 62 | 63 | .time h2 { 64 | margin: 0; 65 | color: #f2e394; 66 | } 67 | 68 | @media (max-width: 500px) { 69 | h1 { 70 | font-size: 50px; 71 | margin-top: 200px; 72 | } 73 | .time { 74 | margin: 10px; 75 | } 76 | .time h2 { 77 | margin: 0px; 78 | } 79 | .time small { 80 | font-size: 30px; 81 | } 82 | } -------------------------------------------------------------------------------- /Christmas Countdown/images/Christmas Countdown - Responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Christmas Countdown/images/Christmas Countdown - Responsive.png -------------------------------------------------------------------------------- /Christmas Countdown/images/Christmas Countdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Christmas Countdown/images/Christmas Countdown.png -------------------------------------------------------------------------------- /Christmas Countdown/images/Christmas background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Christmas Countdown/images/Christmas background.jpg -------------------------------------------------------------------------------- /Christmas Countdown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Christmas Countdown 10 | 11 | 12 | 13 |
2020
14 | 15 |

Christmas Countdown

16 | 17 |
18 |
19 |

00

20 | days 21 |
22 |
23 |

00

24 | hours 25 |
26 |
27 |

00

28 | minutes 29 |
30 |
31 |

00

32 | seconds 33 |
34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Christmas Countdown/script.js: -------------------------------------------------------------------------------- 1 | const countdown = document.getElementById('countdown'); 2 | const days = document.getElementById('days'); 3 | const hours = document.getElementById('hours'); 4 | const minutes = document.getElementById('minutes'); 5 | const seconds = document.getElementById('seconds'); 6 | 7 | const currentYear = new Date().getFullYear(); 8 | 9 | const christmasDay = new Date(`December 25 ${currentYear} 00:00:00`); 10 | 11 | // Functions 12 | function countdownUpdate() { 13 | const currentTime = new Date(); 14 | const difference = christmasDay - currentTime; 15 | const dy = Math.floor(difference / 1000 / 60 / 60 / 24); 16 | const hr = Math.floor(difference / 1000 / 60 / 60) % 24; 17 | const min = Math.floor(difference / 1000 / 60) % 60; 18 | const sec = Math.floor(difference / 1000) % 60; 19 | 20 | days.innerHTML = dy; 21 | hours.innerHTML = hr < 10 ? '0' + hr : hr; 22 | minutes.innerHTML = min < 10 ? '0' + min : min; 23 | seconds.innerHTML = sec < 10 ? '0' + sec : sec; 24 | 25 | } 26 | 27 | countdownUpdate(); 28 | 29 | setInterval(countdownUpdate, 1000); -------------------------------------------------------------------------------- /Custom Music Player/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); 2 | * { 3 | box-sizing: border-box; 4 | font-family: 'Lato', sans-serif; 5 | font-size: 16 px; 6 | } 7 | 8 | body { 9 | margin: 0; 10 | background: #fbd3e9; 11 | background: linear-gradient(to right, #bb377d, #fbd3e9, 1.3); 12 | background: -webkit-linear-gradient(to right, #bb377d, #fbd3e9, 1.3); 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | min-height: 100vh; 18 | } 19 | 20 | .heading { 21 | font-size: 30px; 22 | word-spacing: 2px; 23 | margin-bottom: 60px; 24 | } 25 | 26 | .container { 27 | background-color: #fff; 28 | border-radius: 15px; 29 | box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.5); 30 | display: flex; 31 | padding: 20px 30px; 32 | position: relative; 33 | margin: 100px 0; 34 | z-index: 100; 35 | -webkit-border-radius: 15px; 36 | -moz-border-radius: 15px; 37 | -ms-border-radius: 15px; 38 | -o-border-radius: 15px; 39 | } 40 | 41 | .img-container { 42 | position: relative; 43 | width: 150px; 44 | } 45 | 46 | .img-container::after { 47 | content: ''; 48 | background-color: #fff; 49 | border-radius: 50%; 50 | position: absolute; 51 | bottom: 150%; 52 | left: 50%; 53 | width: 20px; 54 | height: 20px; 55 | transform: translate(-50%, 50%); 56 | -webkit-border-radius: 50%; 57 | -moz-border-radius: 50%; 58 | -ms-border-radius: 50%; 59 | -o-border-radius: 50%; 60 | -webkit-transform: translate(-50%, 50%); 61 | -moz-transform: translate(-50%, 50%); 62 | -ms-transform: translate(-50%, 50%); 63 | -o-transform: translate(-50%, 50%); 64 | } 65 | 66 | .img-container img { 67 | position: absolute; 68 | bottom: 10px; 69 | left: 0px; 70 | height: 150px; 71 | width: inherit; 72 | border-radius: 50%; 73 | object-fit: cover; 74 | animation: rotate 5s linear infinite; 75 | animation-play-state: paused; 76 | -webkit-border-radius: 50%; 77 | -moz-border-radius: 50%; 78 | -ms-border-radius: 50%; 79 | -o-border-radius: 50%; 80 | -webkit-animation: rotate 5s linear infinite; 81 | -webkit-animation-play-state: paused; 82 | } 83 | 84 | 85 | /* When js is applies play class is added to html for animation */ 86 | 87 | .container.play .img-container img { 88 | animation-play-state: running; 89 | -webkit-animation-play-state: running; 90 | } 91 | 92 | @keyframes rotate { 93 | 0% { 94 | transform: rotate(0deg); 95 | -webkit-transform: rotate(0deg); 96 | -moz-transform: rotate(0deg); 97 | -ms-transform: rotate(0deg); 98 | -o-transform: rotate(0deg); 99 | } 100 | 100% { 101 | transform: rotate(360deg); 102 | -webkit-transform: rotate(360deg); 103 | -moz-transform: rotate(360deg); 104 | -ms-transform: rotate(360deg); 105 | -o-transform: rotate(360deg); 106 | } 107 | } 108 | 109 | .navigation { 110 | display: flex; 111 | align-items: center; 112 | justify-content: center; 113 | z-index: 10; 114 | } 115 | 116 | .action-btn { 117 | background-color: #fff; 118 | border: 0; 119 | color: #c7c4c7; 120 | padding: 15px; 121 | margin: 0 15px; 122 | cursor: pointer; 123 | } 124 | 125 | .action-btn:focus { 126 | outline: 0; 127 | } 128 | 129 | .musicInfo { 130 | opacity: 0; 131 | z-index: 0; 132 | color: #626262; 133 | background-color: rgba(255, 255, 255, 0.5); 134 | border-radius: 15px 15px 0 0; 135 | position: absolute; 136 | top: 0; 137 | left: 20px; 138 | width: calc(100% - 40px); 139 | height: 50px; 140 | padding: 0px 10px 10px 185px; 141 | transform: translateY(0%); 142 | transition: transform 0.2s ease-in, opacity 0.2s ease-in; 143 | -webkit-border-radius: 15px 15px 0 0; 144 | -moz-border-radius: 15px 15px 0 0; 145 | -ms-border-radius: 15px 15px 0 0; 146 | -o-border-radius: 15px 15px 0 0; 147 | -webkit-transform: translateY(0%); 148 | -moz-transform: translateY(0%); 149 | -ms-transform: translateY(0%); 150 | -o-transform: translateY(0%); 151 | -webkit-transition: transform 0.2s ease-in, opacity 0.2s ease-in; 152 | -moz-transition: transform 0.2s ease-in, opacity 0.2s ease-in; 153 | -ms-transition: transform 0.2s ease-in, opacity 0.2s ease-in; 154 | -o-transition: transform 0.2s ease-in, opacity 0.2s ease-in; 155 | } 156 | 157 | .container.play .musicInfo { 158 | opacity: 1; 159 | transform: translateY(-100%); 160 | -webkit-transform: translateY(-100%); 161 | -moz-transform: translateY(-100%); 162 | -ms-transform: translateY(-100%); 163 | -o-transform: translateY(-100%); 164 | } 165 | 166 | .musicTitle { 167 | word-spacing: 3px; 168 | } 169 | 170 | .progressBar { 171 | background-color: #fbd3e9d0; 172 | width: 100%; 173 | height: 4.5px; 174 | cursor: pointer; 175 | margin-bottom: 10px; 176 | border-radius: 15px; 177 | -webkit-border-radius: 15px; 178 | -moz-border-radius: 15px; 179 | -ms-border-radius: 15px; 180 | -o-border-radius: 15px; 181 | } 182 | 183 | .progress { 184 | background-color: #fe8daa; 185 | border-radius: 15px; 186 | width: 0%; 187 | height: 100%; 188 | -webkit-border-radius: 15px; 189 | -moz-border-radius: 15px; 190 | -ms-border-radius: 15px; 191 | -o-border-radius: 15px; 192 | } -------------------------------------------------------------------------------- /Custom Music Player/images/Dil Ke Dastakk.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Custom Music Player/images/Dil Ke Dastakk.jpg -------------------------------------------------------------------------------- /Custom Music Player/images/Layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Custom Music Player/images/Layout.png -------------------------------------------------------------------------------- /Custom Music Player/images/Play_Responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Custom Music Player/images/Play_Responsive.png -------------------------------------------------------------------------------- /Custom Music Player/images/Qismat Ki Hawa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Custom Music Player/images/Qismat Ki Hawa.jpg -------------------------------------------------------------------------------- /Custom Music Player/images/Titliaan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Custom Music Player/images/Titliaan.jpg -------------------------------------------------------------------------------- /Custom Music Player/images/play__Responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Custom Music Player/images/play__Responsive.png -------------------------------------------------------------------------------- /Custom Music Player/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Custom Music Player 11 | 12 | 13 | 14 |

My Music Player🎵

15 |
16 |
17 |

18 |
19 |
20 |
21 |
22 | 23 |
24 | music-cover 25 |
26 | 27 |
28 | 31 | 34 | 37 |
38 |
39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /Custom Music Player/music/Dil Ke Dastakk.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Custom Music Player/music/Dil Ke Dastakk.mp3 -------------------------------------------------------------------------------- /Custom Music Player/music/Qismat Ki Hawa.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Custom Music Player/music/Qismat Ki Hawa.mp3 -------------------------------------------------------------------------------- /Custom Music Player/music/Titliaan.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Custom Music Player/music/Titliaan.mp3 -------------------------------------------------------------------------------- /Custom Music Player/script.js: -------------------------------------------------------------------------------- 1 | const container = document.getElementById('container'); 2 | const play = document.getElementById('play'); 3 | const prev = document.getElementById('prev'); 4 | const next = document.getElementById('next'); 5 | const audio = document.getElementById('audio'); 6 | const progress = document.getElementById('progress'); 7 | const progressBar = document.getElementById('progressBar'); 8 | const title = document.getElementById('musicTitle'); 9 | const cover = document.getElementById('cover'); 10 | 11 | const songTracks = ['Dil Ke Dastakk', 'Qismat Ki Hawa', 'Titliaan']; 12 | 13 | let songIndex = 2; 14 | 15 | //Funtions 16 | function loadSong(song) { 17 | title.innerText = song; 18 | // audio.src = `images/${song}.mp3`; Not Working Why ? 19 | // Refrence: https://stackoverflow.com/questions/10792163/change-audio-src-with-javascript 20 | audio.setAttribute('src', 'music/' + song + '.mp3'); 21 | cover.src = `images/${song}.jpg`; 22 | } 23 | 24 | // Initial load 25 | loadSong(songTracks[songIndex]); 26 | 27 | function playSong() { 28 | container.classList.add('play'); 29 | play.querySelector('i.fas').classList.remove('fa-play'); 30 | play.querySelector('i.fas').classList.add('fa-pause'); 31 | audio.play(); 32 | } 33 | 34 | function pauseSong() { 35 | container.classList.remove('play'); 36 | play.querySelector('i.fas').classList.remove('fa-pause'); 37 | play.querySelector('i.fas').classList.add('fa-play'); 38 | audio.pause(); 39 | } 40 | 41 | function nextSong() { 42 | songIndex++; 43 | if (songIndex > songTracks.length - 1) { 44 | songIndex = 0; 45 | } 46 | loadSong(songTracks[songIndex]); 47 | playSong(); 48 | } 49 | 50 | function prevSong() { 51 | songIndex--; 52 | if (songIndex < 0) { 53 | songIndex = songTracks.length - 1; 54 | } 55 | loadSong(songTracks[songIndex]); 56 | playSong(); 57 | } 58 | 59 | function updateProgress(e) { 60 | const { duration, currentTime } = e.srcElement; 61 | const percent = (currentTime / duration) * 100; 62 | progress.style.width = `${percent}%`; 63 | } 64 | 65 | function setProgress(e) { 66 | // Important * 67 | const duration = audio.duration; 68 | const width = this.clientWidth; 69 | const widthX = e.offsetX; 70 | // Remember This 71 | audio.currentTime = (widthX / width) * duration; 72 | } 73 | 74 | play.addEventListener('click', () => { 75 | const isPlaying = container.classList.contains('play'); 76 | if (isPlaying) { 77 | pauseSong(); 78 | } else { 79 | playSong(); 80 | } 81 | }); 82 | 83 | next.addEventListener('click', nextSong); 84 | prev.addEventListener('click', prevSong); 85 | 86 | audio.addEventListener('timeupdate', updateProgress); 87 | progressBar.addEventListener('click', setProgress); 88 | audio.addEventListener('ended', nextSong); -------------------------------------------------------------------------------- /Custom Video Player/css/custom.css: -------------------------------------------------------------------------------- 1 | input[type='range'] { 2 | -webkit-appearance: none; 3 | margin: 18px 0; 4 | width: 100%; 5 | } 6 | 7 | input[type='range']:focus { 8 | outline: none; 9 | } 10 | 11 | 12 | /* Slider thumb styling */ 13 | 14 | input[type='range']::-webkit-slider-thumb { 15 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 16 | border: 1px solid #000000; 17 | height: 30px; 18 | width: 12px; 19 | border-radius: 5px; 20 | background: #ffffff; 21 | cursor: pointer; 22 | -webkit-appearance: none; 23 | margin-top: -12px; 24 | -webkit-border-radius: 5px; 25 | -moz-border-radius: 5px; 26 | -ms-border-radius: 5px; 27 | -o-border-radius: 5px; 28 | } 29 | 30 | input[type='range']::-moz-range-thumb { 31 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 32 | border: 1px solid #000000; 33 | height: 30px; 34 | width: 12px; 35 | border-radius: 5px; 36 | background: #ffffff; 37 | cursor: pointer; 38 | } 39 | 40 | input[type='range']::-ms-thumb { 41 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 42 | border: 1px solid #000000; 43 | height: 30px; 44 | width: 12px; 45 | border-radius: 5px; 46 | background: #ffffff; 47 | cursor: pointer; 48 | } 49 | 50 | 51 | /* Track styling */ 52 | 53 | input[type='range']:focus::-webkit-slider-runnable-track { 54 | background: #367ebd; 55 | } 56 | 57 | input[type='range']::-moz-range-track { 58 | width: 100%; 59 | height: 8px; 60 | cursor: pointer; 61 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 62 | background: #3071a9; 63 | border-radius: 2px; 64 | border: 0.2px solid #010101; 65 | -webkit-border-radius: 2px; 66 | -moz-border-radius: 2px; 67 | -ms-border-radius: 2px; 68 | -o-border-radius: 2px; 69 | } 70 | 71 | input[type='range']::-webkit-slider-runnable-track { 72 | width: 100%; 73 | height: 8.4px; 74 | cursor: pointer; 75 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 76 | background: #3071a9; 77 | border-radius: 2px; 78 | border: 0.2px solid #010101; 79 | -webkit-border-radius: 2px; 80 | -moz-border-radius: 2px; 81 | -ms-border-radius: 2px; 82 | -o-border-radius: 2px; 83 | } 84 | 85 | input[type='range']::-ms-track { 86 | width: 100%; 87 | height: 8px; 88 | cursor: pointer; 89 | background: transparent; 90 | border-color: transparent; 91 | border-width: 16px 0; 92 | color: transparent; 93 | } 94 | 95 | input[type='range']::-ms-fill-lower { 96 | background: #2a6495; 97 | border: 0.2px solid #010101; 98 | border-radius: 2px; 99 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 100 | -webkit-border-radius: 2px; 101 | -moz-border-radius: 2px; 102 | -ms-border-radius: 2px; 103 | -o-border-radius: 2px; 104 | } 105 | 106 | input[type='range']::-ms-fill-upper { 107 | background: #3071a9; 108 | border: 0.2px solid #010101; 109 | border-radius: 2px; 110 | box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 111 | -webkit-border-radius: 2px; 112 | -moz-border-radius: 2px; 113 | -ms-border-radius: 2px; 114 | -o-border-radius: 2px; 115 | } 116 | 117 | input[type='range']:focus::-ms-fill-lower { 118 | background: #3071a9; 119 | } 120 | 121 | input[type='range']:focus::-ms-fill-upper { 122 | background: #367ebd; 123 | } 124 | 125 | input[type='range']:focus::-ms-fill-upper { 126 | background: #367ebd; 127 | } -------------------------------------------------------------------------------- /Custom Video Player/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Questrial&display=swap'); 2 | * { 3 | box-sizing: border-box; 4 | font-family: 'Questrial', sans-serif; 5 | } 6 | 7 | body { 8 | background-color: #eeeeee; 9 | margin: 0; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | min-height: 100vh; 15 | } 16 | 17 | h1 { 18 | color: #000; 19 | font-size: 38px; 20 | margin-bottom: 30px; 21 | } 22 | 23 | .video { 24 | cursor: pointer; 25 | width: 60%; 26 | background-color: #fff !important; 27 | border-top-left-radius: 15px; 28 | border-top-right-radius: 15px; 29 | } 30 | 31 | .player { 32 | background: rgba(51, 51, 51, 0.85); 33 | color: #eeee; 34 | width: 60%; 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | padding: 3px; 39 | border-bottom-left-radius: 15px; 40 | border-bottom-right-radius: 15px; 41 | } 42 | 43 | .player .button { 44 | border: 0; 45 | background: transparent; 46 | cursor: pointer; 47 | } 48 | 49 | .buttonContainer { 50 | display: flex; 51 | margin-right: 12px; 52 | margin-left: 10px; 53 | } 54 | 55 | .player .fa-play { 56 | color: #a4c639; 57 | } 58 | 59 | .player .fa-stop { 60 | color: #ff0000; 61 | } 62 | 63 | .player .fa-pause { 64 | color: #fff; 65 | } 66 | 67 | .player .timestamp { 68 | color: #fff; 69 | font-weight: bold; 70 | margin-left: 10px; 71 | margin-right: 10px; 72 | } 73 | 74 | .button:focus { 75 | outline: 0; 76 | } -------------------------------------------------------------------------------- /Custom Video Player/images/Layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Custom Video Player/images/Layout.png -------------------------------------------------------------------------------- /Custom Video Player/images/Responsive Nature.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Custom Video Player/images/Responsive Nature.png -------------------------------------------------------------------------------- /Custom Video Player/images/Video Player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Custom Video Player/images/Video Player.png -------------------------------------------------------------------------------- /Custom Video Player/images/VideoPlayer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Custom Video Player/images/VideoPlayer.png -------------------------------------------------------------------------------- /Custom Video Player/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Video Player - Custom 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

My Custom Video Player 🎞️

17 | 18 |
19 |
20 | 23 | 24 | 27 |
28 | 29 | 00:00 30 |
31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Custom Video Player/script.js: -------------------------------------------------------------------------------- 1 | const video = document.getElementById('video'); 2 | const play = document.getElementById('play'); 3 | const stop = document.getElementById('stop'); 4 | const progress = document.getElementById('progress'); 5 | const timestamp = document.getElementById('timestamp'); 6 | 7 | // functions 8 | function toggleVideoStatus() { 9 | if (video.paused) { 10 | video.play(); 11 | } else { 12 | video.pause(); 13 | } 14 | } 15 | 16 | function updatePlay() { 17 | if (video.paused) { 18 | play.innerHTML = ''; 19 | } else { 20 | play.innerHTML = ''; 21 | } 22 | } 23 | 24 | function updateProgress() { 25 | progress.value = (video.currentTime / video.duration) * 100; 26 | 27 | let min = Math.floor(video.currentTime / 60); 28 | if (min < 10) { 29 | min = '0' + String(min); 30 | } 31 | 32 | let sec = Math.floor(video.currentTime % 60); 33 | if (sec < 10) { 34 | sec = '0' + String(sec); 35 | } 36 | 37 | timestamp.innerHTML = `${min}:${sec}`; 38 | } 39 | 40 | function setVideoProgress() { 41 | video.currentTime = (+progress.value * video.duration) / 100; 42 | } 43 | 44 | function stopVideo() { 45 | video.currentTime = 0; 46 | video.pause(); 47 | } 48 | 49 | // Event listeners 50 | video.addEventListener('click', toggleVideoStatus); 51 | video.addEventListener('pause', updatePlay); 52 | video.addEventListener('play', updatePlay); 53 | // timeupdate for moving slider on times 54 | video.addEventListener('timeupdate', updateProgress); 55 | 56 | play.addEventListener('click', toggleVideoStatus); 57 | 58 | stop.addEventListener('click', stopVideo); 59 | 60 | progress.addEventListener('change', setVideoProgress); -------------------------------------------------------------------------------- /Custom Video Player/videos/Fishing.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Custom Video Player/videos/Fishing.mp4 -------------------------------------------------------------------------------- /Deepak Linkedin Banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Deepak Linkedin Banner.png -------------------------------------------------------------------------------- /Form Validator/Simple Form Validator - Email Error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Form Validator/Simple Form Validator - Email Error.png -------------------------------------------------------------------------------- /Form Validator/Simple Form Validator - No Error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Form Validator/Simple Form Validator - No Error.png -------------------------------------------------------------------------------- /Form Validator/Simple Form Validator - Password Error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Form Validator/Simple Form Validator - Password Error.png -------------------------------------------------------------------------------- /Form Validator/Simple Form Validator -Error Field Required.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Form Validator/Simple Form Validator -Error Field Required.png -------------------------------------------------------------------------------- /Form Validator/Simple Form Validator Layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Form Validator/Simple Form Validator Layout.png -------------------------------------------------------------------------------- /Form Validator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Simple Form Validator 10 | 11 | 12 | 13 | 14 |
15 |
16 |

Register with stdforfun

17 |
18 | 19 | 20 | Error message 21 |
22 |
23 | 24 | 25 | Error message 26 |
27 |
28 | 29 | 30 | Error message 31 |
32 |
33 | 34 | 35 | Error message 36 |
37 | 38 |
39 |
40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Form Validator/script.js: -------------------------------------------------------------------------------- 1 | const form = document.getElementById('form'); 2 | const username = document.getElementById('username'); 3 | const email = document.getElementById('email'); 4 | const password = document.getElementById('password'); 5 | const password2 = document.getElementById('password2'); 6 | 7 | //Functions 8 | function showError(input, message) { 9 | // Adding class to show red border 10 | input.parentElement.className = 'formlabel invalid'; 11 | // Adding querySelector to add our error message 12 | input.parentElement.querySelector('span').innerText = message; 13 | } 14 | 15 | function showSuccess(input) { 16 | // Adding class to show green border 17 | input.parentElement.className = 'formlabel valid'; 18 | } 19 | 20 | // To conver error first alphabet capital 21 | function errorMessageName(input) { 22 | return input.id.charAt(0).toUpperCase() + input.id.slice(1); 23 | } 24 | 25 | function checkRequiredField(inputArr) { 26 | // Loop though every array values 27 | inputArr.forEach(function(input) { 28 | if (input.value.trim() === '') { 29 | showError(input, `${errorMessageName(input)} is required`); 30 | } else { 31 | showSuccess(input); 32 | } 33 | }); 34 | } 35 | 36 | function checkEmail(input) { 37 | const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 38 | if (re.test(input.value.trim())) { 39 | showSuccess(input); 40 | } else { 41 | showError(input, 'Please enter a valid email'); 42 | } 43 | } 44 | 45 | function checkLength(input, min, max) { 46 | if (input.value.length < min) { 47 | showError(input, `${errorMessageName(input)} must be at least ${min} characters`); 48 | } else if (input.value.length > max) { 49 | showError(input, `${errorMessageName(input)} must be less than ${max} characters`); 50 | } else { 51 | showSuccess(input); 52 | } 53 | } 54 | 55 | function checkPasswordMatches(input1, input2) { 56 | if (input1.value !== input2.value) { 57 | showError(input2, 'Password do not matches'); 58 | } 59 | } 60 | 61 | // Event listener 62 | form.addEventListener('submit', function(e) { 63 | e.preventDefault(); 64 | checkRequiredField([username, email, password, password2]); 65 | checkEmail(email); 66 | checkLength(username, 3, 15); 67 | checkLength(password, 8, 20); 68 | checkPasswordMatches(password, password2); 69 | }); 70 | -------------------------------------------------------------------------------- /Form Validator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Alegreya&display=swap'); 2 | 3 | /* Variables */ 4 | 5 | :root { 6 | --valid-color: #2ecc71; 7 | --invalid-color: #e74c3c; 8 | } 9 | 10 | 11 | /* To manage width */ 12 | 13 | * { 14 | box-sizing: border-box; 15 | font-family: 'Alegreya', serif; 16 | } 17 | 18 | body { 19 | margin: 0; 20 | padding: 0; 21 | background-color: #32de84; 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | min-height: 100vh; 26 | line-height: 1.5; 27 | } 28 | 29 | .container { 30 | background-color: #fff; 31 | border-radius: 15px; 32 | -webkit-border-radius: 15px; 33 | -moz-border-radius: 15px; 34 | -ms-border-radius: 15px; 35 | -o-border-radius: 15px; 36 | box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4); 37 | width: 470px; 38 | } 39 | 40 | h2 { 41 | font-size: 35px; 42 | text-align: center; 43 | margin: 0 0 25px; 44 | } 45 | 46 | .form { 47 | padding: 30px 40px; 48 | } 49 | 50 | .formlabel { 51 | margin-bottom: 10px; 52 | padding-bottom: 20px; 53 | /* Position relative wrt absolute */ 54 | position: relative; 55 | } 56 | 57 | .formlabel label { 58 | display: block; 59 | color: rgb(51, 51, 51); 60 | font-size: 16px; 61 | margin-bottom: 5px; 62 | font-weight: 600!important; 63 | } 64 | 65 | .formlabel input { 66 | border: 2px solid #f0f0f0e5; 67 | border-radius: 4px; 68 | display: block; 69 | width: 100%; 70 | padding: 10px; 71 | font-size: 16px; 72 | margin-bottom: 5px; 73 | } 74 | 75 | 76 | /* Border on focus */ 77 | 78 | .formlabel input:focus { 79 | outline: 0; 80 | border-color: rgba(119, 119, 119, 0.8); 81 | } 82 | 83 | 84 | /* Classes for js work */ 85 | 86 | .formlabel.valid input { 87 | border-color: var(--valid-color); 88 | } 89 | 90 | .formlabel.invalid input { 91 | border-color: var(--invalid-color); 92 | } 93 | 94 | .formlabel span { 95 | color: var(--invalid-color); 96 | position: absolute; 97 | bottom: 0; 98 | left: 0; 99 | /* To completely make it go */ 100 | visibility: hidden; 101 | } 102 | 103 | .formlabel.invalid span { 104 | visibility: visible; 105 | } 106 | 107 | 108 | /* Formatting button */ 109 | 110 | .form button { 111 | cursor: pointer; 112 | /* Standard color for button */ 113 | background-color: #3498db; 114 | border: 2px solid #3498db; 115 | border-radius: 5px; 116 | -webkit-border-radius: 5px; 117 | -moz-border-radius: 5px; 118 | -ms-border-radius: 5px; 119 | -o-border-radius: 5px; 120 | text-align: center; 121 | margin: 0px auto; 122 | color: #fff; 123 | display: block; 124 | font-size: 18px; 125 | padding: 10px; 126 | margin-top: 20px; 127 | width: 100%; 128 | } -------------------------------------------------------------------------------- /JavaScript Mini Projects.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/JavaScript Mini Projects.jpg -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU General Public License is a free, copyleft license for 11 | software and other kinds of works. 12 | 13 | The licenses for most software and other practical works are designed 14 | to take away your freedom to share and change the works. By contrast, 15 | the GNU General Public License is intended to guarantee your freedom to 16 | share and change all versions of a program--to make sure it remains free 17 | software for all its users. We, the Free Software Foundation, use the 18 | GNU General Public License for most of our software; it applies also to 19 | any other work released this way by its authors. You can apply it to 20 | your programs, too. 21 | 22 | When we speak of free software, we are referring to freedom, not 23 | price. Our General Public Licenses are designed to make sure that you 24 | have the freedom to distribute copies of free software (and charge for 25 | them if you wish), that you receive source code or can get it if you 26 | want it, that you can change the software or use pieces of it in new 27 | free programs, and that you know you can do these things. 28 | 29 | To protect your rights, we need to prevent others from denying you 30 | these rights or asking you to surrender the rights. Therefore, you have 31 | certain responsibilities if you distribute copies of the software, or if 32 | you modify it: responsibilities to respect the freedom of others. 33 | 34 | For example, if you distribute copies of such a program, whether 35 | gratis or for a fee, you must pass on to the recipients the same 36 | freedoms that you received. You must make sure that they, too, receive 37 | or can get the source code. And you must show them these terms so they 38 | know their rights. 39 | 40 | Developers that use the GNU GPL protect your rights with two steps: 41 | (1) assert copyright on the software, and (2) offer you this License 42 | giving you legal permission to copy, distribute and/or modify it. 43 | 44 | For the developers' and authors' protection, the GPL clearly explains 45 | that there is no warranty for this free software. For both users' and 46 | authors' sake, the GPL requires that modified versions be marked as 47 | changed, so that their problems will not be attributed erroneously to 48 | authors of previous versions. 49 | 50 | Some devices are designed to deny users access to install or run 51 | modified versions of the software inside them, although the manufacturer 52 | can do so. This is fundamentally incompatible with the aim of 53 | protecting users' freedom to change the software. The systematic 54 | pattern of such abuse occurs in the area of products for individuals to 55 | use, which is precisely where it is most unacceptable. Therefore, we 56 | have designed this version of the GPL to prohibit the practice for those 57 | products. If such problems arise substantially in other domains, we 58 | stand ready to extend this provision to those domains in future versions 59 | of the GPL, as needed to protect the freedom of users. 60 | 61 | Finally, every program is threatened constantly by software patents. 62 | States should not allow patents to restrict development and use of 63 | software on general-purpose computers, but in those that do, we wish to 64 | avoid the special danger that patents applied to a free program could 65 | make it effectively proprietary. To prevent this, the GPL assures that 66 | patents cannot be used to render the program non-free. 67 | 68 | The precise terms and conditions for copying, distribution and 69 | modification follow. 70 | 71 | TERMS AND CONDITIONS 72 | 73 | 0. Definitions. 74 | 75 | "This License" refers to version 3 of the GNU General Public License. 76 | 77 | "Copyright" also means copyright-like laws that apply to other kinds of 78 | works, such as semiconductor masks. 79 | 80 | "The Program" refers to any copyrightable work licensed under this 81 | License. Each licensee is addressed as "you". "Licensees" and 82 | "recipients" may be individuals or organizations. 83 | 84 | To "modify" a work means to copy from or adapt all or part of the work 85 | in a fashion requiring copyright permission, other than the making of an 86 | exact copy. The resulting work is called a "modified version" of the 87 | earlier work or a work "based on" the earlier work. 88 | 89 | A "covered work" means either the unmodified Program or a work based 90 | on the Program. 91 | 92 | To "propagate" a work means to do anything with it that, without 93 | permission, would make you directly or secondarily liable for 94 | infringement under applicable copyright law, except executing it on a 95 | computer or modifying a private copy. Propagation includes copying, 96 | distribution (with or without modification), making available to the 97 | public, and in some countries other activities as well. 98 | 99 | To "convey" a work means any kind of propagation that enables other 100 | parties to make or receive copies. Mere interaction with a user through 101 | a computer network, with no transfer of a copy, is not conveying. 102 | 103 | An interactive user interface displays "Appropriate Legal Notices" 104 | to the extent that it includes a convenient and prominently visible 105 | feature that (1) displays an appropriate copyright notice, and (2) 106 | tells the user that there is no warranty for the work (except to the 107 | extent that warranties are provided), that licensees may convey the 108 | work under this License, and how to view a copy of this License. If 109 | the interface presents a list of user commands or options, such as a 110 | menu, a prominent item in the list meets this criterion. 111 | 112 | 1. Source Code. 113 | 114 | The "source code" for a work means the preferred form of the work 115 | for making modifications to it. "Object code" means any non-source 116 | form of a work. 117 | 118 | A "Standard Interface" means an interface that either is an official 119 | standard defined by a recognized standards body, or, in the case of 120 | interfaces specified for a particular programming language, one that 121 | is widely used among developers working in that language. 122 | 123 | The "System Libraries" of an executable work include anything, other 124 | than the work as a whole, that (a) is included in the normal form of 125 | packaging a Major Component, but which is not part of that Major 126 | Component, and (b) serves only to enable use of the work with that 127 | Major Component, or to implement a Standard Interface for which an 128 | implementation is available to the public in source code form. A 129 | "Major Component", in this context, means a major essential component 130 | (kernel, window system, and so on) of the specific operating system 131 | (if any) on which the executable work runs, or a compiler used to 132 | produce the work, or an object code interpreter used to run it. 133 | 134 | The "Corresponding Source" for a work in object code form means all 135 | the source code needed to generate, install, and (for an executable 136 | work) run the object code and to modify the work, including scripts to 137 | control those activities. However, it does not include the work's 138 | System Libraries, or general-purpose tools or generally available free 139 | programs which are used unmodified in performing those activities but 140 | which are not part of the work. For example, Corresponding Source 141 | includes interface definition files associated with source files for 142 | the work, and the source code for shared libraries and dynamically 143 | linked subprograms that the work is specifically designed to require, 144 | such as by intimate data communication or control flow between those 145 | subprograms and other parts of the work. 146 | 147 | The Corresponding Source need not include anything that users 148 | can regenerate automatically from other parts of the Corresponding 149 | Source. 150 | 151 | The Corresponding Source for a work in source code form is that 152 | same work. 153 | 154 | 2. Basic Permissions. 155 | 156 | All rights granted under this License are granted for the term of 157 | copyright on the Program, and are irrevocable provided the stated 158 | conditions are met. This License explicitly affirms your unlimited 159 | permission to run the unmodified Program. The output from running a 160 | covered work is covered by this License only if the output, given its 161 | content, constitutes a covered work. This License acknowledges your 162 | rights of fair use or other equivalent, as provided by copyright law. 163 | 164 | You may make, run and propagate covered works that you do not 165 | convey, without conditions so long as your license otherwise remains 166 | in force. You may convey covered works to others for the sole purpose 167 | of having them make modifications exclusively for you, or provide you 168 | with facilities for running those works, provided that you comply with 169 | the terms of this License in conveying all material for which you do 170 | not control copyright. Those thus making or running the covered works 171 | for you must do so exclusively on your behalf, under your direction 172 | and control, on terms that prohibit them from making any copies of 173 | your copyrighted material outside their relationship with you. 174 | 175 | Conveying under any other circumstances is permitted solely under 176 | the conditions stated below. Sublicensing is not allowed; section 10 177 | makes it unnecessary. 178 | 179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 180 | 181 | No covered work shall be deemed part of an effective technological 182 | measure under any applicable law fulfilling obligations under article 183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 184 | similar laws prohibiting or restricting circumvention of such 185 | measures. 186 | 187 | When you convey a covered work, you waive any legal power to forbid 188 | circumvention of technological measures to the extent such circumvention 189 | is effected by exercising rights under this License with respect to 190 | the covered work, and you disclaim any intention to limit operation or 191 | modification of the work as a means of enforcing, against the work's 192 | users, your or third parties' legal rights to forbid circumvention of 193 | technological measures. 194 | 195 | 4. Conveying Verbatim Copies. 196 | 197 | You may convey verbatim copies of the Program's source code as you 198 | receive it, in any medium, provided that you conspicuously and 199 | appropriately publish on each copy an appropriate copyright notice; 200 | keep intact all notices stating that this License and any 201 | non-permissive terms added in accord with section 7 apply to the code; 202 | keep intact all notices of the absence of any warranty; and give all 203 | recipients a copy of this License along with the Program. 204 | 205 | You may charge any price or no price for each copy that you convey, 206 | and you may offer support or warranty protection for a fee. 207 | 208 | 5. Conveying Modified Source Versions. 209 | 210 | You may convey a work based on the Program, or the modifications to 211 | produce it from the Program, in the form of source code under the 212 | terms of section 4, provided that you also meet all of these conditions: 213 | 214 | a) The work must carry prominent notices stating that you modified 215 | it, and giving a relevant date. 216 | 217 | b) The work must carry prominent notices stating that it is 218 | released under this License and any conditions added under section 219 | 7. This requirement modifies the requirement in section 4 to 220 | "keep intact all notices". 221 | 222 | c) You must license the entire work, as a whole, under this 223 | License to anyone who comes into possession of a copy. This 224 | License will therefore apply, along with any applicable section 7 225 | additional terms, to the whole of the work, and all its parts, 226 | regardless of how they are packaged. This License gives no 227 | permission to license the work in any other way, but it does not 228 | invalidate such permission if you have separately received it. 229 | 230 | d) If the work has interactive user interfaces, each must display 231 | Appropriate Legal Notices; however, if the Program has interactive 232 | interfaces that do not display Appropriate Legal Notices, your 233 | work need not make them do so. 234 | 235 | A compilation of a covered work with other separate and independent 236 | works, which are not by their nature extensions of the covered work, 237 | and which are not combined with it such as to form a larger program, 238 | in or on a volume of a storage or distribution medium, is called an 239 | "aggregate" if the compilation and its resulting copyright are not 240 | used to limit the access or legal rights of the compilation's users 241 | beyond what the individual works permit. Inclusion of a covered work 242 | in an aggregate does not cause this License to apply to the other 243 | parts of the aggregate. 244 | 245 | 6. Conveying Non-Source Forms. 246 | 247 | You may convey a covered work in object code form under the terms 248 | of sections 4 and 5, provided that you also convey the 249 | machine-readable Corresponding Source under the terms of this License, 250 | in one of these ways: 251 | 252 | a) Convey the object code in, or embodied in, a physical product 253 | (including a physical distribution medium), accompanied by the 254 | Corresponding Source fixed on a durable physical medium 255 | customarily used for software interchange. 256 | 257 | b) Convey the object code in, or embodied in, a physical product 258 | (including a physical distribution medium), accompanied by a 259 | written offer, valid for at least three years and valid for as 260 | long as you offer spare parts or customer support for that product 261 | model, to give anyone who possesses the object code either (1) a 262 | copy of the Corresponding Source for all the software in the 263 | product that is covered by this License, on a durable physical 264 | medium customarily used for software interchange, for a price no 265 | more than your reasonable cost of physically performing this 266 | conveying of source, or (2) access to copy the 267 | Corresponding Source from a network server at no charge. 268 | 269 | c) Convey individual copies of the object code with a copy of the 270 | written offer to provide the Corresponding Source. This 271 | alternative is allowed only occasionally and noncommercially, and 272 | only if you received the object code with such an offer, in accord 273 | with subsection 6b. 274 | 275 | d) Convey the object code by offering access from a designated 276 | place (gratis or for a charge), and offer equivalent access to the 277 | Corresponding Source in the same way through the same place at no 278 | further charge. You need not require recipients to copy the 279 | Corresponding Source along with the object code. If the place to 280 | copy the object code is a network server, the Corresponding Source 281 | may be on a different server (operated by you or a third party) 282 | that supports equivalent copying facilities, provided you maintain 283 | clear directions next to the object code saying where to find the 284 | Corresponding Source. Regardless of what server hosts the 285 | Corresponding Source, you remain obligated to ensure that it is 286 | available for as long as needed to satisfy these requirements. 287 | 288 | e) Convey the object code using peer-to-peer transmission, provided 289 | you inform other peers where the object code and Corresponding 290 | Source of the work are being offered to the general public at no 291 | charge under subsection 6d. 292 | 293 | A separable portion of the object code, whose source code is excluded 294 | from the Corresponding Source as a System Library, need not be 295 | included in conveying the object code work. 296 | 297 | A "User Product" is either (1) a "consumer product", which means any 298 | tangible personal property which is normally used for personal, family, 299 | or household purposes, or (2) anything designed or sold for incorporation 300 | into a dwelling. In determining whether a product is a consumer product, 301 | doubtful cases shall be resolved in favor of coverage. For a particular 302 | product received by a particular user, "normally used" refers to a 303 | typical or common use of that class of product, regardless of the status 304 | of the particular user or of the way in which the particular user 305 | actually uses, or expects or is expected to use, the product. A product 306 | is a consumer product regardless of whether the product has substantial 307 | commercial, industrial or non-consumer uses, unless such uses represent 308 | the only significant mode of use of the product. 309 | 310 | "Installation Information" for a User Product means any methods, 311 | procedures, authorization keys, or other information required to install 312 | and execute modified versions of a covered work in that User Product from 313 | a modified version of its Corresponding Source. The information must 314 | suffice to ensure that the continued functioning of the modified object 315 | code is in no case prevented or interfered with solely because 316 | modification has been made. 317 | 318 | If you convey an object code work under this section in, or with, or 319 | specifically for use in, a User Product, and the conveying occurs as 320 | part of a transaction in which the right of possession and use of the 321 | User Product is transferred to the recipient in perpetuity or for a 322 | fixed term (regardless of how the transaction is characterized), the 323 | Corresponding Source conveyed under this section must be accompanied 324 | by the Installation Information. But this requirement does not apply 325 | if neither you nor any third party retains the ability to install 326 | modified object code on the User Product (for example, the work has 327 | been installed in ROM). 328 | 329 | The requirement to provide Installation Information does not include a 330 | requirement to continue to provide support service, warranty, or updates 331 | for a work that has been modified or installed by the recipient, or for 332 | the User Product in which it has been modified or installed. Access to a 333 | network may be denied when the modification itself materially and 334 | adversely affects the operation of the network or violates the rules and 335 | protocols for communication across the network. 336 | 337 | Corresponding Source conveyed, and Installation Information provided, 338 | in accord with this section must be in a format that is publicly 339 | documented (and with an implementation available to the public in 340 | source code form), and must require no special password or key for 341 | unpacking, reading or copying. 342 | 343 | 7. Additional Terms. 344 | 345 | "Additional permissions" are terms that supplement the terms of this 346 | License by making exceptions from one or more of its conditions. 347 | Additional permissions that are applicable to the entire Program shall 348 | be treated as though they were included in this License, to the extent 349 | that they are valid under applicable law. If additional permissions 350 | apply only to part of the Program, that part may be used separately 351 | under those permissions, but the entire Program remains governed by 352 | this License without regard to the additional permissions. 353 | 354 | When you convey a copy of a covered work, you may at your option 355 | remove any additional permissions from that copy, or from any part of 356 | it. (Additional permissions may be written to require their own 357 | removal in certain cases when you modify the work.) You may place 358 | additional permissions on material, added by you to a covered work, 359 | for which you have or can give appropriate copyright permission. 360 | 361 | Notwithstanding any other provision of this License, for material you 362 | add to a covered work, you may (if authorized by the copyright holders of 363 | that material) supplement the terms of this License with terms: 364 | 365 | a) Disclaiming warranty or limiting liability differently from the 366 | terms of sections 15 and 16 of this License; or 367 | 368 | b) Requiring preservation of specified reasonable legal notices or 369 | author attributions in that material or in the Appropriate Legal 370 | Notices displayed by works containing it; or 371 | 372 | c) Prohibiting misrepresentation of the origin of that material, or 373 | requiring that modified versions of such material be marked in 374 | reasonable ways as different from the original version; or 375 | 376 | d) Limiting the use for publicity purposes of names of licensors or 377 | authors of the material; or 378 | 379 | e) Declining to grant rights under trademark law for use of some 380 | trade names, trademarks, or service marks; or 381 | 382 | f) Requiring indemnification of licensors and authors of that 383 | material by anyone who conveys the material (or modified versions of 384 | it) with contractual assumptions of liability to the recipient, for 385 | any liability that these contractual assumptions directly impose on 386 | those licensors and authors. 387 | 388 | All other non-permissive additional terms are considered "further 389 | restrictions" within the meaning of section 10. If the Program as you 390 | received it, or any part of it, contains a notice stating that it is 391 | governed by this License along with a term that is a further 392 | restriction, you may remove that term. If a license document contains 393 | a further restriction but permits relicensing or conveying under this 394 | License, you may add to a covered work material governed by the terms 395 | of that license document, provided that the further restriction does 396 | not survive such relicensing or conveying. 397 | 398 | If you add terms to a covered work in accord with this section, you 399 | must place, in the relevant source files, a statement of the 400 | additional terms that apply to those files, or a notice indicating 401 | where to find the applicable terms. 402 | 403 | Additional terms, permissive or non-permissive, may be stated in the 404 | form of a separately written license, or stated as exceptions; 405 | the above requirements apply either way. 406 | 407 | 8. Termination. 408 | 409 | You may not propagate or modify a covered work except as expressly 410 | provided under this License. Any attempt otherwise to propagate or 411 | modify it is void, and will automatically terminate your rights under 412 | this License (including any patent licenses granted under the third 413 | paragraph of section 11). 414 | 415 | However, if you cease all violation of this License, then your 416 | license from a particular copyright holder is reinstated (a) 417 | provisionally, unless and until the copyright holder explicitly and 418 | finally terminates your license, and (b) permanently, if the copyright 419 | holder fails to notify you of the violation by some reasonable means 420 | prior to 60 days after the cessation. 421 | 422 | Moreover, your license from a particular copyright holder is 423 | reinstated permanently if the copyright holder notifies you of the 424 | violation by some reasonable means, this is the first time you have 425 | received notice of violation of this License (for any work) from that 426 | copyright holder, and you cure the violation prior to 30 days after 427 | your receipt of the notice. 428 | 429 | Termination of your rights under this section does not terminate the 430 | licenses of parties who have received copies or rights from you under 431 | this License. If your rights have been terminated and not permanently 432 | reinstated, you do not qualify to receive new licenses for the same 433 | material under section 10. 434 | 435 | 9. Acceptance Not Required for Having Copies. 436 | 437 | You are not required to accept this License in order to receive or 438 | run a copy of the Program. Ancillary propagation of a covered work 439 | occurring solely as a consequence of using peer-to-peer transmission 440 | to receive a copy likewise does not require acceptance. However, 441 | nothing other than this License grants you permission to propagate or 442 | modify any covered work. These actions infringe copyright if you do 443 | not accept this License. Therefore, by modifying or propagating a 444 | covered work, you indicate your acceptance of this License to do so. 445 | 446 | 10. Automatic Licensing of Downstream Recipients. 447 | 448 | Each time you convey a covered work, the recipient automatically 449 | receives a license from the original licensors, to run, modify and 450 | propagate that work, subject to this License. You are not responsible 451 | for enforcing compliance by third parties with this License. 452 | 453 | An "entity transaction" is a transaction transferring control of an 454 | organization, or substantially all assets of one, or subdividing an 455 | organization, or merging organizations. If propagation of a covered 456 | work results from an entity transaction, each party to that 457 | transaction who receives a copy of the work also receives whatever 458 | licenses to the work the party's predecessor in interest had or could 459 | give under the previous paragraph, plus a right to possession of the 460 | Corresponding Source of the work from the predecessor in interest, if 461 | the predecessor has it or can get it with reasonable efforts. 462 | 463 | You may not impose any further restrictions on the exercise of the 464 | rights granted or affirmed under this License. For example, you may 465 | not impose a license fee, royalty, or other charge for exercise of 466 | rights granted under this License, and you may not initiate litigation 467 | (including a cross-claim or counterclaim in a lawsuit) alleging that 468 | any patent claim is infringed by making, using, selling, offering for 469 | sale, or importing the Program or any portion of it. 470 | 471 | 11. Patents. 472 | 473 | A "contributor" is a copyright holder who authorizes use under this 474 | License of the Program or a work on which the Program is based. The 475 | work thus licensed is called the contributor's "contributor version". 476 | 477 | A contributor's "essential patent claims" are all patent claims 478 | owned or controlled by the contributor, whether already acquired or 479 | hereafter acquired, that would be infringed by some manner, permitted 480 | by this License, of making, using, or selling its contributor version, 481 | but do not include claims that would be infringed only as a 482 | consequence of further modification of the contributor version. For 483 | purposes of this definition, "control" includes the right to grant 484 | patent sublicenses in a manner consistent with the requirements of 485 | this License. 486 | 487 | Each contributor grants you a non-exclusive, worldwide, royalty-free 488 | patent license under the contributor's essential patent claims, to 489 | make, use, sell, offer for sale, import and otherwise run, modify and 490 | propagate the contents of its contributor version. 491 | 492 | In the following three paragraphs, a "patent license" is any express 493 | agreement or commitment, however denominated, not to enforce a patent 494 | (such as an express permission to practice a patent or covenant not to 495 | sue for patent infringement). To "grant" such a patent license to a 496 | party means to make such an agreement or commitment not to enforce a 497 | patent against the party. 498 | 499 | If you convey a covered work, knowingly relying on a patent license, 500 | and the Corresponding Source of the work is not available for anyone 501 | to copy, free of charge and under the terms of this License, through a 502 | publicly available network server or other readily accessible means, 503 | then you must either (1) cause the Corresponding Source to be so 504 | available, or (2) arrange to deprive yourself of the benefit of the 505 | patent license for this particular work, or (3) arrange, in a manner 506 | consistent with the requirements of this License, to extend the patent 507 | license to downstream recipients. "Knowingly relying" means you have 508 | actual knowledge that, but for the patent license, your conveying the 509 | covered work in a country, or your recipient's use of the covered work 510 | in a country, would infringe one or more identifiable patents in that 511 | country that you have reason to believe are valid. 512 | 513 | If, pursuant to or in connection with a single transaction or 514 | arrangement, you convey, or propagate by procuring conveyance of, a 515 | covered work, and grant a patent license to some of the parties 516 | receiving the covered work authorizing them to use, propagate, modify 517 | or convey a specific copy of the covered work, then the patent license 518 | you grant is automatically extended to all recipients of the covered 519 | work and works based on it. 520 | 521 | A patent license is "discriminatory" if it does not include within 522 | the scope of its coverage, prohibits the exercise of, or is 523 | conditioned on the non-exercise of one or more of the rights that are 524 | specifically granted under this License. You may not convey a covered 525 | work if you are a party to an arrangement with a third party that is 526 | in the business of distributing software, under which you make payment 527 | to the third party based on the extent of your activity of conveying 528 | the work, and under which the third party grants, to any of the 529 | parties who would receive the covered work from you, a discriminatory 530 | patent license (a) in connection with copies of the covered work 531 | conveyed by you (or copies made from those copies), or (b) primarily 532 | for and in connection with specific products or compilations that 533 | contain the covered work, unless you entered into that arrangement, 534 | or that patent license was granted, prior to 28 March 2007. 535 | 536 | Nothing in this License shall be construed as excluding or limiting 537 | any implied license or other defenses to infringement that may 538 | otherwise be available to you under applicable patent law. 539 | 540 | 12. No Surrender of Others' Freedom. 541 | 542 | If conditions are imposed on you (whether by court order, agreement or 543 | otherwise) that contradict the conditions of this License, they do not 544 | excuse you from the conditions of this License. If you cannot convey a 545 | covered work so as to satisfy simultaneously your obligations under this 546 | License and any other pertinent obligations, then as a consequence you may 547 | not convey it at all. For example, if you agree to terms that obligate you 548 | to collect a royalty for further conveying from those to whom you convey 549 | the Program, the only way you could satisfy both those terms and this 550 | License would be to refrain entirely from conveying the Program. 551 | 552 | 13. Use with the GNU Affero General Public License. 553 | 554 | Notwithstanding any other provision of this License, you have 555 | permission to link or combine any covered work with a work licensed 556 | under version 3 of the GNU Affero General Public License into a single 557 | combined work, and to convey the resulting work. The terms of this 558 | License will continue to apply to the part which is the covered work, 559 | but the special requirements of the GNU Affero General Public License, 560 | section 13, concerning interaction through a network will apply to the 561 | combination as such. 562 | 563 | 14. Revised Versions of this License. 564 | 565 | The Free Software Foundation may publish revised and/or new versions of 566 | the GNU General Public License from time to time. Such new versions will 567 | be similar in spirit to the present version, but may differ in detail to 568 | address new problems or concerns. 569 | 570 | Each version is given a distinguishing version number. If the 571 | Program specifies that a certain numbered version of the GNU General 572 | Public License "or any later version" applies to it, you have the 573 | option of following the terms and conditions either of that numbered 574 | version or of any later version published by the Free Software 575 | Foundation. If the Program does not specify a version number of the 576 | GNU General Public License, you may choose any version ever published 577 | by the Free Software Foundation. 578 | 579 | If the Program specifies that a proxy can decide which future 580 | versions of the GNU General Public License can be used, that proxy's 581 | public statement of acceptance of a version permanently authorizes you 582 | to choose that version for the Program. 583 | 584 | Later license versions may give you additional or different 585 | permissions. However, no additional obligations are imposed on any 586 | author or copyright holder as a result of your choosing to follow a 587 | later version. 588 | 589 | 15. Disclaimer of Warranty. 590 | 591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 599 | 600 | 16. Limitation of Liability. 601 | 602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 610 | SUCH DAMAGES. 611 | 612 | 17. Interpretation of Sections 15 and 16. 613 | 614 | If the disclaimer of warranty and limitation of liability provided 615 | above cannot be given local legal effect according to their terms, 616 | reviewing courts shall apply local law that most closely approximates 617 | an absolute waiver of all civil liability in connection with the 618 | Program, unless a warranty or assumption of liability accompanies a 619 | copy of the Program in return for a fee. 620 | 621 | END OF TERMS AND CONDITIONS 622 | 623 | How to Apply These Terms to Your New Programs 624 | 625 | If you develop a new program, and you want it to be of the greatest 626 | possible use to the public, the best way to achieve this is to make it 627 | free software which everyone can redistribute and change under these terms. 628 | 629 | To do so, attach the following notices to the program. It is safest 630 | to attach them to the start of each source file to most effectively 631 | state the exclusion of warranty; and each file should have at least 632 | the "copyright" line and a pointer to where the full notice is found. 633 | 634 | 635 | Copyright (C) 636 | 637 | This program is free software: you can redistribute it and/or modify 638 | it under the terms of the GNU General Public License as published by 639 | the Free Software Foundation, either version 3 of the License, or 640 | (at your option) any later version. 641 | 642 | This program is distributed in the hope that it will be useful, 643 | but WITHOUT ANY WARRANTY; without even the implied warranty of 644 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 645 | GNU General Public License for more details. 646 | 647 | You should have received a copy of the GNU General Public License 648 | along with this program. If not, see . 649 | 650 | Also add information on how to contact you by electronic and paper mail. 651 | 652 | If the program does terminal interaction, make it output a short 653 | notice like this when it starts in an interactive mode: 654 | 655 | Copyright (C) 656 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 657 | This is free software, and you are welcome to redistribute it 658 | under certain conditions; type `show c' for details. 659 | 660 | The hypothetical commands `show w' and `show c' should show the appropriate 661 | parts of the General Public License. Of course, your program's commands 662 | might be different; for a GUI interface, you would use an "about box". 663 | 664 | You should also get your employer (if you work as a programmer) or school, 665 | if any, to sign a "copyright disclaimer" for the program, if necessary. 666 | For more information on this, and how to apply and follow the GNU GPL, see 667 | . 668 | 669 | The GNU General Public License does not permit incorporating your program 670 | into proprietary programs. If your program is a subroutine library, you 671 | may consider it more useful to permit linking proprietary applications with 672 | the library. If this is what you want to do, use the GNU Lesser General 673 | Public License instead of this License. But first, please read 674 | . 675 | -------------------------------------------------------------------------------- /Lyrics Finder/images/Lyrics Finder - Home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Lyrics Finder/images/Lyrics Finder - Home.png -------------------------------------------------------------------------------- /Lyrics Finder/images/Lyrics Finder - Lyrics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Lyrics Finder/images/Lyrics Finder - Lyrics.png -------------------------------------------------------------------------------- /Lyrics Finder/images/Lyrics Finder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Lyrics Finder/images/Lyrics Finder.jpg -------------------------------------------------------------------------------- /Lyrics Finder/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Lyrics Finder/images/bg.jpg -------------------------------------------------------------------------------- /Lyrics Finder/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Lyrics Finder 9 | 10 | 11 |
12 |

Lyrics Finder

13 |
14 | 15 | 16 |
17 |
18 |
19 |

Results are displayed here...

20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /Lyrics Finder/script.js: -------------------------------------------------------------------------------- 1 | const form = document.getElementById('form'); 2 | const search = document.getElementById('search'); 3 | const result = document.getElementById('result'); 4 | const more = document.getElementById('more'); 5 | 6 | const api = 'https://api.lyrics.ovh'; 7 | 8 | async function searchSong(searchFor){ 9 | const res = await fetch(`${api}/suggest/${searchFor}`); 10 | const data = await res.json(); 11 | showData(data); 12 | /* fetch(`${api}/suggest/${searchFor}`) 13 | .then(res => res.json()) 14 | .then(data => console.log(data)); */ 15 | } 16 | 17 | function showData(data){ 18 | result.innerHTML = ` 19 |
    20 | ${data.data.map(song => ` 21 |
  • 22 | ${song.title} - ${song.artist.name} 23 | 24 |
    • 25 | `) 26 | .join('') 27 | } 28 |
29 | `; 30 | 31 | if(data.prev || data.next){ 32 | more.innerHTML = ` 33 | ${data.prev ? `` : ``} 34 | ${data.next ? `` : ``} 35 | `; 36 | }else{ 37 | more.innerHTML = ``; 38 | } 39 | /* let songs = ''; 40 | data.data.forEach(song => { 41 | songs += ` 42 |
  • 43 | ${song.title} - ${song.artist.name} 44 | 45 |
    • 46 | `; 47 | }); 48 | result.innerHTML = ` 49 |
      50 | ${songs} 51 |
    52 | `; */ 53 | } 54 | 55 | async function getMoreSongs(url){ 56 | const res = await fetch(`https://cors-anywhere.herokuapp.com/${url}`); 57 | const data = await res.json(); 58 | showData(data); 59 | // Use a proxy (Heroku cors anywhere) for CORS error at console - https://github.com/Rob--W/cors-anywhere 60 | } 61 | 62 | async function getLyrics(artist, songTitle){ 63 | const res = await fetch(`${api}/v1/${artist}/${songTitle}`); 64 | const data = await res.json(); 65 | const lyrics = data.lyrics.replace(/(\r|\n)/g, '
    '); 66 | result.innerHTML = ` 67 |

    ${artist} - ${songTitle}

    68 |
    ${lyrics}
    69 | `; 70 | more.innerHTML = ``; 71 | } 72 | 73 | form.addEventListener('submit', e => { 74 | e.preventDefault(); 75 | const searchFor = search.value.trim(); 76 | if(!searchFor){ 77 | alert('Type song name or artist name before search...'); 78 | }else{ 79 | searchSong(searchFor); 80 | } 81 | }); 82 | 83 | result.addEventListener('click', e => { 84 | const targeted = e.target; 85 | if(targeted.tagName === 'BUTTON'){ 86 | const songTitle = targeted.getAttribute('data-songTitle'); 87 | const artist = targeted.getAttribute('data-artist'); 88 | getLyrics(artist, songTitle); 89 | } 90 | }); -------------------------------------------------------------------------------- /Lyrics Finder/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); 2 | *{ 3 | box-sizing: border-box; 4 | } 5 | 6 | :root{ 7 | --main: #fff; 8 | --stroke1: rgb(233, 66, 53); 9 | --stroke2: rgb(250, 187, 5); 10 | --button1: #008CBA; 11 | --button2: rgb(52, 168, 83); 12 | } 13 | 14 | body{ 15 | color: var(--main); 16 | font-family: 'Roboto', sans-serif; 17 | margin: 0; 18 | min-height: 100vh; 19 | background-image: url(./images/bg.jpg); 20 | background-repeat: no-repeat; 21 | background-size: cover; 22 | background-position: center center; 23 | position: relative; 24 | } 25 | 26 | body::after{ 27 | content: ''; 28 | position: absolute; 29 | top: 0; 30 | left: 0; 31 | width: 100%; 32 | height: 100%; 33 | background-color: rgba(0, 0, 0, 0.4); 34 | z-index: 0; 35 | } 36 | 37 | body * { 38 | z-index: 1; 39 | } 40 | 41 | button{ 42 | cursor: pointer; 43 | outline: none; 44 | } 45 | 46 | button:hover{ 47 | transform: scale(1.05); 48 | -webkit-transform: scale(1.05); 49 | -moz-transform: scale(1.05); 50 | -ms-transform: scale(1.05); 51 | -o-transform: scale(1.05); 52 | transition: transform .3s; 53 | -webkit-transition: transform .3s; 54 | -moz-transition: transform .3s; 55 | -ms-transition: transform .3s; 56 | -o-transition: transform .3s; 57 | } 58 | 59 | button:active{ 60 | transform: scale(0.9); 61 | -webkit-transform: scale(0.9); 62 | -moz-transform: scale(0.9); 63 | -ms-transform: scale(0.9); 64 | -o-transform: scale(0.9); 65 | } 66 | 67 | button:focus, input:focus{ 68 | outline: none; 69 | } 70 | 71 | .header{ 72 | display: flex; 73 | flex-direction: column; 74 | align-items: center; 75 | justify-content: center; 76 | padding: 50px 0 20px 0; 77 | } 78 | 79 | .header h1 { 80 | font-size: 50px; 81 | font-weight: 600; 82 | margin: 0 0 30px; 83 | word-spacing: 2px; 84 | letter-spacing: 2px; 85 | -webkit-text-stroke: 1px var(--stroke1); 86 | } 87 | 88 | .header h1 span{ 89 | -webkit-text-stroke: 1px var(--stroke2); 90 | } 91 | 92 | form{ 93 | position: relative; 94 | width: 500px; 95 | max-width: 100%; 96 | } 97 | 98 | form input{ 99 | font-size: 18px; 100 | padding: 15px 30px; 101 | width: 100%; 102 | border: 0; 103 | border-radius: 50px; 104 | -webkit-border-radius: 50px; 105 | -moz-border-radius: 50px; 106 | -ms-border-radius: 50px; 107 | -o-border-radius: 50px; 108 | } 109 | 110 | form button{ 111 | position: absolute; 112 | color: var(--main); 113 | font-size: 16px; 114 | letter-spacing: 1px; 115 | top: 3px; 116 | right: 5px; 117 | padding: 13px 30px; 118 | background-color: var(--button1); 119 | border: 0; 120 | border-radius: 50px; 121 | -webkit-border-radius: 50px; 122 | -moz-border-radius: 50px; 123 | -ms-border-radius: 50px; 124 | -o-border-radius: 50px; 125 | } 126 | 127 | .container{ 128 | margin: 30px auto; 129 | width: 500px; 130 | max-width: 100%; 131 | } 132 | 133 | .container p{ 134 | font-size: 20px; 135 | text-align: center; 136 | } 137 | 138 | .container h2{ 139 | font-weight: 300; 140 | -webkit-text-stroke: .1px var(--stroke2); 141 | } 142 | 143 | .container span{ 144 | word-spacing: 2px; 145 | } 146 | 147 | .centered{ 148 | display: flex; 149 | justify-content: center; 150 | } 151 | 152 | .centered button{ 153 | transform: scale(1.1); 154 | -webkit-transform: scale(1.1); 155 | -moz-transform: scale(1.1); 156 | -ms-transform: scale(1.1); 157 | -o-transform: scale(1.1); 158 | margin: 25px; 159 | } 160 | 161 | .btn{ 162 | color: var(--main); 163 | background-color:var(--button2); 164 | border: 0; 165 | border-radius: 10px; 166 | -webkit-border-radius: 10px; 167 | -moz-border-radius: 10px; 168 | -ms-border-radius: 10px; 169 | -o-border-radius: 10px; 170 | padding: 6px 15px; 171 | border: 1px solid var(--main); 172 | } 173 | 174 | ul.songs{ 175 | padding: 0; 176 | list-style-type: none; 177 | } 178 | 179 | ul.songs li{ 180 | display: flex; 181 | align-items: center; 182 | justify-content: space-between; 183 | margin: 10px 0; 184 | } 185 | 186 | .lyrics{ 187 | color: #000; 188 | background-color: #fff; 189 | padding: 20px; 190 | font-size: 18px; 191 | font-weight: 600; 192 | word-spacing: 1px; 193 | border: 3px solid var(--stroke1); 194 | border-radius: 15px; 195 | -webkit-border-radius: 15px; 196 | -moz-border-radius: 15px; 197 | -ms-border-radius: 15px; 198 | -o-border-radius: 15px; 199 | line-height: 1; 200 | } -------------------------------------------------------------------------------- /Movie Booking/Booking.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Movie Booking/Booking.png -------------------------------------------------------------------------------- /Movie Booking/Layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Movie Booking/Layout.png -------------------------------------------------------------------------------- /Movie Booking/Responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Movie Booking/Responsive.png -------------------------------------------------------------------------------- /Movie Booking/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Movie Seat Booking 10 | 11 | 12 | 13 |
    14 | 15 | 20 |
    21 |
      22 |
    • 23 |
      24 | Available 25 |
      • 26 |
    • 27 |
      28 | Selected 29 |
      • 30 |
    • 31 |
      32 | Occupied 33 |
      • 34 |
    35 |
    36 |
    37 |
    38 |
    39 |
    40 |
    41 |
    42 |
    43 |
    44 |
    45 |
    46 |
    47 |
    48 |
    49 |
    50 |
    51 |
    52 |
    53 |
    54 |
    55 |
    56 |
    57 |
    58 |
    59 |
    60 |
    61 |
    62 |
    63 |
    64 |
    65 |
    66 |
    67 |
    68 |
    69 |
    70 |
    71 |
    72 |
    73 |
    74 |
    75 |
    76 |
    77 |
    78 |
    79 |
    80 |
    81 |
    82 |
    83 |
    84 |
    85 |
    86 |
    87 |
    88 |
    89 |
    90 |
    91 |
    92 |
    93 |
    94 |
    95 |
    96 |
    97 |
    98 |
    99 |
    100 |
    101 |
    102 |
    103 |
    104 |
    105 |
    106 |
    107 |
    108 |
    109 |
    110 |
    111 |
    112 |
    113 |
    114 |
    115 |
    116 |
    117 |
    118 |
    119 |
    120 |
    121 |
    122 |
    123 |
    124 |
    125 |
    126 |
    127 |
    128 |
    129 |
    130 |
    131 |
    132 |
    133 |
    134 |
    135 |
    136 |
    137 |
    138 |
    139 |
    140 |
    141 |
    142 |
    143 |
    144 |
    145 |
    146 |
    147 |
    148 |
    149 |
    150 |
    151 |
    152 |
    153 |
    154 |
    155 |
    156 |
    157 |
    158 |
    159 |
    160 |
    161 |
    162 |
    163 |
    164 |
    165 |
    166 |
    167 |
    168 |
    169 |
    170 |
    171 |
    172 |
    173 |
    174 |
    175 |
    176 |
    177 |
    178 |
    179 |
    180 |
    181 |
    182 |
    183 |
    184 |
    185 |
    186 |
    187 |
    188 |
    189 |
    190 |
    191 |
    192 |
    193 |
    194 |
    195 |
    196 |
    197 |
    198 |
    199 |
    200 |
    201 |
    202 |
    203 |
    204 |
    205 |
    206 |
    207 |
    208 |
    209 |

    You have selected 0 seats

    210 |
    211 | 212 | 213 | 214 | 215 | -------------------------------------------------------------------------------- /Movie Booking/script.js: -------------------------------------------------------------------------------- 1 | const container = document.querySelector('.container2'); 2 | const seats = document.querySelectorAll('.row .seat:not(.occupied)'); 3 | const movie = document.getElementById('movie'); 4 | const count = document.getElementById('count'); 5 | const total = document.getElementById('total'); 6 | 7 | // In starting of everything this function will populate the UI 8 | populateUI(); 9 | 10 | // +is used to convert to integer type directly 11 | let price = +movie.value; 12 | 13 | // Functions 14 | function updateCount() { 15 | // We want length of array 16 | const selectedSeats = document.querySelectorAll('.row .seat.selected'); 17 | // ** Make new array of selected seats index to save in local storage 18 | // Converting node list into regular array and map(returns an array of looped results) 19 | const seatsIndex = [...selectedSeats].map(seat => [...seats].indexOf(seat)); 20 | // Storing seats at local storage 21 | localStorage.setItem('selectedSeats', JSON.stringify(seatsIndex)); 22 | const seatCount = selectedSeats.length; 23 | // Changing the inner text 24 | count.innerText = seatCount; 25 | total.innerText = seatCount * price; 26 | } 27 | 28 | function movieData(movieIndex, moviePrice) { 29 | localStorage.setItem('selectedMovieIndex', movieIndex); 30 | localStorage.setItem('selectedMoviePrice', moviePrice); 31 | } 32 | 33 | // Populating UI with local storage data 34 | function populateUI() { 35 | // Coneverting back to araay 36 | const selectedSeats = JSON.parse(localStorage.getItem('selectedSeats')); 37 | if (selectedSeats != null && selectedSeats.length > 0) { 38 | seats.forEach((seat, index) => { 39 | if (selectedSeats.indexOf(index) > -1) { 40 | seat.classList.add('selected'); 41 | } 42 | }); 43 | } 44 | 45 | // Populating movie index from local storage 46 | const selectedMovieIndex = localStorage.getItem('selectedMovieIndex'); 47 | if (selectedMovieIndex !== null) { 48 | movie.selectedIndex = selectedMovieIndex; 49 | } 50 | } 51 | 52 | // Adding event listeners 53 | container.addEventListener('click', e => { 54 | if (e.target.classList.contains('seat') && !e.target.classList.contains('occupied')) { 55 | // Toggle add or remove 56 | e.target.classList.toggle('selected'); 57 | updateCount(); 58 | } 59 | }); 60 | 61 | // change EventListener for changing on select 62 | movie.addEventListener('change', e => { 63 | price = +e.target.value; 64 | // Storing movie index and value to localStorage "selectedIndex to get index" 65 | movieData(e.target.selectedIndex, e.target.value); 66 | updateCount(); 67 | }); 68 | 69 | // Count and total on page load 70 | updateCount(); -------------------------------------------------------------------------------- /Movie Booking/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap'); 2 | * { 3 | box-sizing: border-box; 4 | font-family: 'Lato', sans-serif; 5 | font-size: 18px; 6 | font-weight: bold; 7 | } 8 | 9 | *:focus { 10 | outline: none; 11 | } 12 | 13 | body { 14 | background-image: linear-gradient(#232526, #414345); 15 | color: #fff; 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: center; 19 | align-items: center; 20 | min-height: 100vh; 21 | margin: 0; 22 | } 23 | 24 | .container { 25 | margin: 10px 0px; 26 | } 27 | 28 | .container label { 29 | font-size: 28px; 30 | margin-right: 5px; 31 | } 32 | 33 | .container select { 34 | background-color: #fff; 35 | font-size: 18px; 36 | font-weight: bold; 37 | padding: 5px 10px 5px 10px; 38 | border-radius: 10px; 39 | -webkit-border-radius: 10px; 40 | -moz-border-radius: 10px; 41 | -ms-border-radius: 10px; 42 | -o-border-radius: 10px; 43 | /* For select box padding in different browsers */ 44 | appearance: none; 45 | -moz-appearance: none; 46 | -webkit-appearance: none; 47 | } 48 | 49 | .container2 { 50 | perspective: 1000px; 51 | margin-bottom: 30px; 52 | } 53 | 54 | .row { 55 | display: flex; 56 | } 57 | 58 | .seatArrangement { 59 | display: flex; 60 | align-items: center; 61 | justify-content: space-between; 62 | padding: 10px 20px; 63 | list-style-type: none; 64 | } 65 | 66 | .seatArrangement li { 67 | display: flex; 68 | align-items: center; 69 | justify-content: center; 70 | font-size: 20px; 71 | margin: 0px 10px; 72 | } 73 | 74 | .seatArrangement li small { 75 | margin-left: 5px; 76 | } 77 | 78 | .screen { 79 | background-color: #fff; 80 | transform: rotateX(-45deg); 81 | box-shadow: 0 3px 10px rgba(255, 255, 255, 0.6); 82 | width: 100%; 83 | height: 90px; 84 | margin: 20px 0; 85 | -webkit-transform: rotateX(-45deg); 86 | -moz-transform: rotateX(-45deg); 87 | -ms-transform: rotateX(-45deg); 88 | -o-transform: rotateX(-45deg); 89 | } 90 | 91 | .seat { 92 | background-color: #ffffff; 93 | width: 15px; 94 | height: 16px; 95 | margin: 4px; 96 | border-top-left-radius: 10px; 97 | border-top-right-radius: 10px; 98 | } 99 | 100 | .seat.selected { 101 | background-color: #3498db; 102 | box-shadow: 0 1px 1px; 103 | } 104 | 105 | .seat.occupied { 106 | background-color: #8778; 107 | box-shadow: 0 1px 1px; 108 | } 109 | 110 | .seat:not(.occupied):hover { 111 | cursor: pointer; 112 | transform: scale(1.5); 113 | -webkit-transform: scale(1.5); 114 | -moz-transform: scale(1.5); 115 | -ms-transform: scale(1.5); 116 | -o-transform: scale(1.5); 117 | transition-duration: 0.1s; 118 | } 119 | 120 | .sitting .seat:not(.occupied):hover { 121 | cursor: default; 122 | transform: scale(1); 123 | -webkit-transform: scale(1); 124 | -moz-transform: scale(1); 125 | -ms-transform: scale(1); 126 | -o-transform: scale(1); 127 | } 128 | 129 | .seat:nth-of-type(3) { 130 | margin-right: 20px; 131 | } 132 | 133 | .seat:nth-last-of-type(3) { 134 | margin-left: 20px; 135 | } 136 | 137 | .text { 138 | font-size: 18px; 139 | word-spacing: 1px; 140 | } 141 | 142 | p.text span { 143 | color: #3498db; 144 | font-style: italic; 145 | } 146 | 147 | button { 148 | cursor: pointer; 149 | /*Standardcolorforbutton*/ 150 | background-color: #3498db; 151 | border: 2px solid #3498db; 152 | border-radius: 20px; 153 | -webkit-border-radius: 20px; 154 | -moz-border-radius: 20px; 155 | -ms-border-radius: 20px; 156 | -o-border-radius: 20px; 157 | text-align: center; 158 | margin: 0px auto; 159 | color: #fff; 160 | display: block; 161 | font-size: 18px; 162 | padding: 15px; 163 | margin-bottom: 20px; 164 | width: 250px; 165 | } 166 | 167 | button:hover { 168 | transform: scale(1.1); 169 | -webkit-transform: scale(1.1); 170 | -moz-transform: scale(1.1); 171 | -ms-transform: scale(1.1); 172 | -o-transform: scale(1.1); 173 | transition-duration: 0.1s; 174 | } -------------------------------------------------------------------------------- /New Hangman game (2020)/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); 2 | * { 3 | box-sizing: border-box; 4 | font-family: 'Roboto', sans-serif; 5 | font-weight: bold; 6 | color: #fff; 7 | } 8 | 9 | body { 10 | background-image: url(../images/background.png); 11 | background-repeat: repeat; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | min-height: 100vh; 16 | overflow: hidden; 17 | margin: 0; 18 | } 19 | 20 | h1 { 21 | margin: 20px 5px; 22 | font-size: 35px; 23 | letter-spacing: 1.5px; 24 | } 25 | 26 | h1 span i { 27 | color: #00ffff; 28 | font-size: 25px; 29 | margin-left: 10px; 30 | letter-spacing: 5px; 31 | } 32 | 33 | .paragraph { 34 | font-size: 18px; 35 | word-spacing: 2px; 36 | letter-spacing: 1px; 37 | } 38 | 39 | .paragraph span { 40 | color: #00ffff; 41 | font-size: 25px; 42 | margin-left: 15px; 43 | } 44 | 45 | .container { 46 | padding: 20px 30px; 47 | position: relative; 48 | margin: auto; 49 | height: 380px; 50 | width: 450px; 51 | } 52 | 53 | .figure-container { 54 | fill: transparent; 55 | stroke: #fff; 56 | stroke-width: 5px; 57 | stroke-linecap: round; 58 | } 59 | 60 | .figure-part { 61 | display: none; 62 | } 63 | 64 | .wrong-letters { 65 | position: absolute; 66 | top: 10px; 67 | right: 10px; 68 | display: flex; 69 | flex-direction: column; 70 | text-align: right; 71 | } 72 | 73 | .wrong-letters p { 74 | color: #ff0000; 75 | font-size: 30px; 76 | letter-spacing: 1px; 77 | margin: 0 0 10px; 78 | } 79 | 80 | .wrong-letters span { 81 | font-size: 28px; 82 | letter-spacing: 5px; 83 | } 84 | 85 | .word { 86 | display: flex; 87 | position: absolute; 88 | bottom: 10px; 89 | left: 50%; 90 | transform: translateX(-50%); 91 | -webkit-transform: translateX(-50%); 92 | -moz-transform: translateX(-50%); 93 | -ms-transform: translateX(-50%); 94 | -o-transform: translateX(-50%); 95 | } 96 | 97 | .letter { 98 | font-size: 38px; 99 | display: inline-flex; 100 | align-items: center; 101 | justify-content: center; 102 | margin: 0 5px; 103 | height: 50px; 104 | width: 25px; 105 | border-bottom: 3px solid #00ffff; 106 | } 107 | 108 | .popup-container { 109 | background-color: rgba(0, 0, 0, 0.4); 110 | position: fixed; 111 | top: 0; 112 | bottom: 0; 113 | left: 0; 114 | right: 0; 115 | /* display: flex; */ 116 | display: none; 117 | align-items: center; 118 | justify-content: center; 119 | } 120 | 121 | .popup { 122 | background-color: #228b22; 123 | font-size: 25px; 124 | border-radius: 5px; 125 | box-shadow: 0 10px 8px 1px rgba(0, 0, 0, 0.4); 126 | width: 40%; 127 | padding: 30px; 128 | text-align: center; 129 | -webkit-border-radius: 5px; 130 | -moz-border-radius: 5px; 131 | -ms-border-radius: 5px; 132 | -o-border-radius: 5px; 133 | } 134 | 135 | .popup button { 136 | background-color: #fff; 137 | color: #000; 138 | font-size: 25px; 139 | cursor: pointer; 140 | outline: none; 141 | border-radius: 30px; 142 | padding: 15px 25px; 143 | -webkit-border-radius: 30px; 144 | -moz-border-radius: 30px; 145 | -ms-border-radius: 30px; 146 | -o-border-radius: 30px; 147 | } 148 | 149 | .popup button:hover { 150 | transform: scale(1.1); 151 | transition: 0.2s; 152 | -webkit-transform: scale(1.1); 153 | -moz-transform: scale(1.1); 154 | -ms-transform: scale(1.1); 155 | -o-transform: scale(1.1); 156 | -webkit-transition: 0.2s; 157 | -moz-transition: 0.2s; 158 | -ms-transition: 0.2s; 159 | -o-transition: 0.2s; 160 | } 161 | 162 | .popup button:active { 163 | transform: scale(0.95); 164 | -webkit-transform: scale(0.95); 165 | -moz-transform: scale(0.95); 166 | -ms-transform: scale(0.95); 167 | -o-transform: scale(0.95); 168 | } 169 | 170 | .popup button:focus { 171 | outline: 0; 172 | } 173 | 174 | .notification-container { 175 | background-color: rgba(0, 0, 0, 0.3); 176 | border-radius: 15px; 177 | padding: 15px 20px; 178 | position: absolute; 179 | bottom: -50px; 180 | transition: transform 0.2s ease-in-out; 181 | -webkit-transition: transform 0.2s ease-in-out; 182 | -moz-transition: transform 0.2s ease-in-out; 183 | -ms-transition: transform 0.2s ease-in-out; 184 | -o-transition: transform 0.2s ease-in-out; 185 | -webkit-border-radius: 15px; 186 | -moz-border-radius: 15px; 187 | -ms-border-radius: 15px; 188 | -o-border-radius: 15px; 189 | } 190 | 191 | .notification-container p { 192 | margin: 0; 193 | } 194 | 195 | .notification-container.show { 196 | transform: translateY(-70px); 197 | -webkit-transform: translateY(-70px); 198 | -moz-transform: translateY(-70px); 199 | -ms-transform: translateY(-70px); 200 | -o-transform: translateY(-70px); 201 | } -------------------------------------------------------------------------------- /New Hangman game (2020)/images/New Hangman Game - Layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/New Hangman game (2020)/images/New Hangman Game - Layout.png -------------------------------------------------------------------------------- /New Hangman game (2020)/images/New Hangman Game - keyCode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/New Hangman game (2020)/images/New Hangman Game - keyCode.png -------------------------------------------------------------------------------- /New Hangman game (2020)/images/New Hangman Game - responsive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/New Hangman game (2020)/images/New Hangman Game - responsive.png -------------------------------------------------------------------------------- /New Hangman game (2020)/images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/New Hangman game (2020)/images/background.png -------------------------------------------------------------------------------- /New Hangman game (2020)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | New Hangman Game 9 | 10 | 11 | 12 |

    13 | Hangman💯2020 14 |

    15 |

    Find the hidden word -Enter a letter :

    16 |
    17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
    35 |
    36 |
    37 | 38 |
    39 |
    40 | 41 | 47 | 48 |
    49 |

    You have already entered this letter. Please enter another letter

    50 |
    51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /New Hangman game (2020)/script.js: -------------------------------------------------------------------------------- 1 | const wrongLetters = document.getElementById('wrong-letters'); 2 | const word = document.getElementById('word'); 3 | const popup = document.getElementById('popup-container'); 4 | const playAgain = document.getElementById('play-button'); 5 | 6 | 7 | const notification = document.getElementById('notification-container'); 8 | const finalMessage = document.getElementById('final-message'); 9 | 10 | // Grabbing all parts of SVG 11 | const figureParts = document.querySelectorAll('.figure-part'); 12 | 13 | // List of words 14 | const words = ['intense', 'programming', 'zugzwang', 'wizard', 'consistency', 'dedication', 'joked', 'squush']; 15 | 16 | let selectedWord = words[Math.floor(Math.random() * words.length)]; 17 | 18 | const correct = []; 19 | const wrong = []; 20 | 21 | // Functions 22 | 23 | // Display word and final message 24 | function displayWord() { 25 | word.innerHTML = ` 26 | ${selectedWord 27 | .split('') 28 | .map( 29 | letter => ` 30 | 31 | ${correct.includes(letter) ? letter : ''} 32 | 33 | ` 34 | ) 35 | .join('')} 36 | `; 37 | 38 | const innerWord = word.innerText.replace(/\n/g, ''); 39 | 40 | if (innerWord === selectedWord) { 41 | finalMessage.innerText = 'Congratulations! You won!'; 42 | popup.style.display = 'flex'; 43 | } 44 | } 45 | 46 | // Notification 47 | function showNotification(){ 48 | notification.classList.add('show'); 49 | setTimeout(() =>{ 50 | notification.classList.remove('show'); 51 | }, 10000); 52 | } 53 | 54 | // Wrong letter update 55 | function updateWrong(){ 56 | wrongLetters.innerHTML = ` 57 | ${wrong.length > 0 ? '

    wrong!!

    ' : ''} 58 | ${wrong.map(letter => `${letter}`)} 59 | `; 60 | figureParts.forEach((part, index) => { 61 | const err = wrong.length; 62 | if(index < err){ 63 | part.style.display = 'block'; 64 | }else{ 65 | part.style.display = 'none'; 66 | } 67 | }); 68 | 69 | if(wrong.length === figureParts.length){ 70 | finalMessage.innerText = `Unfortunately you lost!`; 71 | popup.style.display = 'flex'; 72 | } 73 | } 74 | 75 | // Key press event listener 76 | window.addEventListener('keydown', e => { 77 | if(e.keyCode >= 65 && e.keyCode <= 90) { 78 | const letter = e.key; 79 | if(selectedWord.includes(letter)) { 80 | if(!correct.includes(letter)) { 81 | correct.push(letter); 82 | displayWord(); 83 | }else{ 84 | showNotification(); 85 | } 86 | }else{ 87 | if(!wrong.includes(letter)){ 88 | wrong.push(letter); 89 | updateWrong(); 90 | }else{ 91 | showNotification(); 92 | } 93 | } 94 | } 95 | }); 96 | 97 | // Play again button 98 | playAgain.addEventListener('click', () =>{ 99 | // Empty array with splice 100 | correct.splice(0); 101 | wrong.splice(0); 102 | 103 | // Reset 104 | selectedWord = words[Math.floor(Math.random() * words.length)]; 105 | displayWord(); 106 | updateWrong(); 107 | popup.style.display = 'none'; 108 | }); 109 | 110 | // Default display when game starts 111 | displayWord(); -------------------------------------------------------------------------------- /PIG Dice Game/dice-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/PIG Dice Game/dice-1.png -------------------------------------------------------------------------------- /PIG Dice Game/dice-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/PIG Dice Game/dice-2.png -------------------------------------------------------------------------------- /PIG Dice Game/dice-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/PIG Dice Game/dice-3.png -------------------------------------------------------------------------------- /PIG Dice Game/dice-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/PIG Dice Game/dice-4.png -------------------------------------------------------------------------------- /PIG Dice Game/dice-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/PIG Dice Game/dice-5.png -------------------------------------------------------------------------------- /PIG Dice Game/dice-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/PIG Dice Game/dice-6.png -------------------------------------------------------------------------------- /PIG Dice Game/images/Dice Game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/PIG Dice Game/images/Dice Game.png -------------------------------------------------------------------------------- /PIG Dice Game/images/Dice Game__Rules.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/PIG Dice Game/images/Dice Game__Rules.png -------------------------------------------------------------------------------- /PIG Dice Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Dice Game 12 | 13 | 14 |
    15 | 16 |
    17 |
    Player 1
    18 |
    40
    19 |
    20 |
    Score :)
    21 |
    10
    22 |
    23 |
    24 | 25 |
    26 |
    Player 2
    27 |
    70
    28 |
    29 |
    Score :)
    30 |
    30
    31 |
    32 | 33 |
    34 | 35 | 36 | 37 | Dice 38 | 39 |
    40 |
    41 |

    GAME RULES :

    42 | -> The game has 2 players, playing in rounds.
    43 | -> In each turn, a player rolls a dice as many times as he whishes. Each result get added to his ROUND score.
    44 | -> BUT, if the player rolls a 1, all his ROUND score gets lost. After that, it's the next player's turn.
    45 | -> The player can choose to 'Hold', which means that his ROUND score gets added to his GLOBAL score. After that, it's the next player's turn.
    46 | -> The first player to reach 100 points on GLOBAL score wins the game. 47 |
    48 | 49 | 50 | -------------------------------------------------------------------------------- /PIG Dice Game/javascript.js: -------------------------------------------------------------------------------- 1 | var mainScore, score, activePlayer, dice, gameRunner; 2 | var DOM_dice = document.querySelector('.dice'); 3 | var DOM_c0 = document.getElementById('current-0'); 4 | var DOM_c1 = document.getElementById('current-1'); 5 | var DOM_p0p = document.querySelector('.player-0-panel'); 6 | var DOM_p1p = document.querySelector('.player-1-panel'); 7 | 8 | //game start 9 | gameStart(); 10 | //game work 11 | document.querySelector('.btn-roll').addEventListener('click', function() { 12 | //check if game running or not 13 | if(gameRunner) { 14 | //random number 15 | dice = Math.floor(Math.random() * 6) + 1; 16 | 17 | //displaying result 18 | DOM_dice.style.display = 'block'; 19 | DOM_dice.src = 'dice-' + dice + '.png'; 20 | 21 | //update score if rolled no is not 1 22 | if(dice !== 1) { 23 | //add score 24 | score += dice; 25 | document.querySelector('#current-' + activePlayer).textContent = score; 26 | } 27 | else { 28 | //next player 29 | playerChange(); 30 | } 31 | } 32 | }); 33 | 34 | document.querySelector('.btn-hold').addEventListener('click', function() { 35 | //check if game is runnung or not 36 | if(gameRunner) { 37 | //adding current score to global score 38 | mainScore[activePlayer] += score; 39 | 40 | //updating user interface 41 | document.querySelector('#score-' + activePlayer).textContent = mainScore[activePlayer]; 42 | 43 | //checking if player won the game 44 | if (mainScore[activePlayer] >= 50) { 45 | document.querySelector('#name-' + activePlayer).textContent = 'winner !! :)'; 46 | DOM_dice.style.display = 'none'; 47 | document.querySelector('.player-' + activePlayer + '-panel').classList.add('winner'); 48 | document.querySelector('.player-' + activePlayer + '-panel').classList.remove('active'); 49 | //stop running the game 50 | gameRunner = false; 51 | } 52 | else { 53 | //next player 54 | playerChange(); 55 | } 56 | } 57 | }); 58 | 59 | document.querySelector('.btn-new').addEventListener('click', function() { 60 | //start the game again 61 | gameStart(); 62 | //set everything to previous positions 63 | document.getElementById('name-0').textContent = 'player 1'; 64 | document.getElementById('name-1').textContent = 'player 2'; 65 | DOM_p0p.classList.remove('winner'); 66 | DOM_p1p.classList.remove('winner'); 67 | DOM_p0p.classList.remove('active'); 68 | DOM_p1p.classList.remove('active'); 69 | //activate default class 70 | DOM_p0p.classList.add('active'); 71 | }); 72 | 73 | function playerChange() { 74 | activePlayer === 0 ? activePlayer = 1 : activePlayer = 0; 75 | score = 0; 76 | 77 | DOM_c0.textContent = '0'; 78 | DOM_c1.textContent = '0'; 79 | 80 | DOM_p0p.classList.toggle('active'); 81 | DOM_p1p.classList.toggle('active'); 82 | 83 | DOM_dice.style.display = 'none'; 84 | } 85 | 86 | function gameStart() { 87 | mainScore = [0,0]; 88 | score = 0; 89 | activePlayer = 0; 90 | gameRunner = true; 91 | 92 | document.getElementById('score-0').textContent = '0'; 93 | DOM_c0.textContent = '0'; 94 | document.getElementById('score-1').textContent = '0'; 95 | DOM_c1.textContent = '0'; 96 | 97 | DOM_dice.style.display = 'none'; 98 | } -------------------------------------------------------------------------------- /PIG Dice Game/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | .clearfix::after { 7 | content: ""; 8 | display: table; 9 | clear: both; 10 | } 11 | body { 12 | background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(255, 0, 0, 0.7)); 13 | background-size: cover; 14 | background-position: center; 15 | font-family: Lato; 16 | font-weight: 300; 17 | position: relative; 18 | height: 100vh; 19 | color: rgba(0, 0, 0, 0.7); 20 | } 21 | .wrapper { 22 | width: 900px; 23 | position: absolute; 24 | top: 50%; 25 | left: 50%; 26 | transform: translate(-50%, -50%); 27 | background-color: #fff; 28 | box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4); 29 | border-radius: 10px; 30 | overflow: hidden; 31 | } 32 | .player-0-panel, 33 | .player-1-panel { 34 | width: 50%; 35 | float: left; 36 | height: 600px; 37 | padding: 100px; 38 | } 39 | .player-name { 40 | font-size: 40px; 41 | text-align: center; 42 | text-transform: uppercase; 43 | letter-spacing: 3px; 44 | font-weight: 100; 45 | margin-top: 30px; 46 | margin-bottom: 10px; 47 | position: relative; 48 | } 49 | .player-score { 50 | text-align: center; 51 | font-size: 80px; 52 | font-weight: 100; 53 | color: rgba(0, 0, 255, 0.6); 54 | margin-bottom: 130px; 55 | margin-top:20px; 56 | } 57 | .active { 58 | background-color: #f0c1c1c5; 59 | } 60 | .active .player-name, .active .player-score { 61 | font-weight: 300; 62 | } 63 | .active .player-current-box, .active .player-current-label { 64 | font-weight: bold; 65 | } 66 | .active .player-name::after { 67 | content: "\2022"; 68 | font-size: 30px; 69 | position: absolute; 70 | color: rgba(0, 0, 255, 0.6); 71 | top: -7px; 72 | right: 10px; 73 | 74 | } 75 | .player-current-box { 76 | background-color: #EB4D4D; 77 | color: #fff; 78 | width: 55%; 79 | height: 35%; 80 | margin: -50px auto; 81 | padding: 12px; 82 | text-align: center; 83 | border-radius: 50%; 84 | } 85 | .player-current-label { 86 | text-transform: uppercase; 87 | margin-bottom: 10px; 88 | margin-top: 15px; 89 | font-size: 20px; 90 | color: rgba(0, 0, 0, 0.6); 91 | } 92 | .player-current-score { 93 | font-size: 35px; 94 | } 95 | button { 96 | position: absolute; 97 | width: 200px; 98 | left: 50%; 99 | transform: translateX(-57%); 100 | color: rgba(46, 44, 44, 0.7); 101 | background: none; 102 | border: none; 103 | font-family: Lato; 104 | font-size: 23px; 105 | text-transform: uppercase; 106 | cursor: pointer; 107 | font-weight: 300; 108 | transition: background-color 0.3s, color 0.3s; 109 | } 110 | button:hover { 111 | font-weight: 600; 112 | } 113 | button:hover i { 114 | margin-right: 20px; 115 | } 116 | button:focus { 117 | outline: none; 118 | } 119 | i { 120 | color: #EB4D4D; 121 | display: inline-block; 122 | margin-right: 15px; 123 | font-size: 35px; 124 | line-height: 1; 125 | vertical-align: text-top; 126 | margin-top: -5px; 127 | transition: margin 0.3s; /*for i on button:hower i element :)*/ 128 | } 129 | .btn-new { 130 | top: 45px; 131 | } 132 | .btn-roll { 133 | top: 403px; 134 | } 135 | .btn-hold { 136 | top: 467px; 137 | } 138 | .dice { 139 | position: absolute; 140 | left: 50%; 141 | top: 178px; 142 | transform: translateX(-50%); 143 | height: 100px; 144 | box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2); 145 | } 146 | .winner { 147 | background-color: #f5b8b8; 148 | } 149 | .winner .player-name { 150 | font-weight: bold; 151 | font-size: 40px; 152 | font-family: 'Chilanka', cursive; 153 | color: #EB4D4D; 154 | } 155 | .winner .player-current-box, .winner .player-current-label, .winner .player-score { 156 | font-weight: bold; 157 | } 158 | .rules h1 { 159 | font-family: lato; 160 | font-size: 30px; 161 | color: #EB4D4D; 162 | word-spacing: 3px; 163 | letter-spacing: 2px; 164 | } 165 | .rules { 166 | position: relative; 167 | margin-left: 30px; 168 | top: 700px; 169 | height: 350px;; 170 | font-family: lato; 171 | font-size: 20px; 172 | font-weight: bold; 173 | word-spacing: 3px; 174 | color: #fff; 175 | text-align: left; 176 | line-height: 1.5; 177 | } 178 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Screenshot-1](https://github.com/deathook007/JavaScript-Mini-Projects/blob/main/JavaScript%20Mini%20Projects.jpg) 2 | # JavaScript Mini Projects ☀️ 3 | 4 | ## 1. Breakout Game (2021) 5 | - Made in canvas API 6 | - A simple and colourfull UI 7 | - Attractive and addictive 19's game - Breakout 8 | - Play, Pause and win! 9 | 10 | ### ScreenShots Below 👇 11 | 12 | ![Screenshot-1](https://github.com/deathook007/JavaScript-Mini-Projects/blob/main/Breakout%202021/ScreenShots/Breakout%202021.gif) 13 | ![Screenshot-2](https://github.com/deathook007/JavaScript-Mini-Projects/blob/main/Breakout%202021/ScreenShots/Breakout%202021%20-%20Rules.png) 14 | ![Screenshot-3](https://github.com/deathook007/JavaScript-Mini-Projects/blob/main/Breakout%202021/ScreenShots/Breakout%202021%20-%20Score%2C%20Pause%20and%20Play.png) 15 | 16 | 17 | ## 2. New Hungama game (2020) 18 | - Dark theme design. 19 | - A simple, light and responsive UI 20 | - Fun to play puzzle game. 21 | 22 | ### ScreenShots Below 👇 23 | 24 | ![Screenshot-1](https://github.com/deathook007/JavaScript-Projects/blob/main/New%20Hangman%20game%20(2020)/images/New%20Hangman%20Game%20-%20Layout.png) 25 | ![Screenshot-2](https://github.com/deathook007/JavaScript-Projects/blob/main/New%20Hangman%20game%20(2020)/images/New%20Hangman%20Game%20-%20keyCode.png) 26 | 27 | 28 | ## 3. Pig Dice game 29 | - A 2 player Dice game. 30 | - A simple, light and responsive UI 31 | - See the rules and try your luck! 32 | 33 | ### ScreenShots Below 👇 34 | 35 | ![Screenshot-2](https://github.com/deathook007/JavaScript-Mini-Projects/blob/main/PIG%20Dice%20Game/images/Dice%20Game.png) 36 | ![Screenshot-1](https://github.com/deathook007/JavaScript-Mini-Projects/blob/main/PIG%20Dice%20Game/images/Dice%20Game__Rules.png) 37 | 38 | 39 | ## 4. Lyrics Finder 40 | - Find all lyrics of a song in a single place. 41 | - Simple attractive and responsive UI 42 | - API used : https://api.lyrics.ovh 43 | - Limit of songs per page : 15 without proxy and unlimited with cors-anywhere (https://github.com/Rob--W/cors-anywhere) 44 | - Made with ES8 45 | 46 | ### ScreenShots Below 👇 47 | 48 | ![Screenshot-1](https://github.com/deathook007/JavaScript-Mini-Projects/blob/main/Lyrics%20Finder/images/Lyrics%20Finder%20-%20Home.png) 49 | ![Screenshot-2](https://github.com/deathook007/JavaScript-Mini-Projects/blob/main/Lyrics%20Finder/images/Lyrics%20Finder.jpg) 50 | ![Screenshot-3](https://github.com/deathook007/JavaScript-Mini-Projects/blob/main/Lyrics%20Finder/images/Lyrics%20Finder%20-%20Lyrics.png) 51 | 52 | 53 | ## 5. Custom Music Player 54 | - Customisable video player. 55 | - A simple, light and responsive UI 56 | - Attractive animations on response. 57 | 58 | ### ScreenShots Below 👇 59 | 60 | ![Screenshot-1](https://github.com/deathook007/JavaScript-Projects/blob/main/Custom%20Music%20Player/images/Layout.png) 61 | ![Screenshot-3](https://github.com/deathook007/JavaScript-Projects/blob/main/Custom%20Music%20Player/images/play__Responsive.png) 62 | 63 | 64 | ## 6. Custom Video Player 65 | - Customisable video player. 66 | - A simple, light and responsive UI 67 | 68 | ### ScreenShots Below 👇 69 | 70 | ![Screenshot-1](https://github.com/deathook007/JavaScript-Projects/blob/main/Custom%20Video%20Player/images/Layout.png) 71 | ![Screenshot-3](https://github.com/deathook007/JavaScript-Projects/blob/main/Custom%20Video%20Player/images/Responsive%20Nature.png) 72 | 73 | 74 | ## 7. Analog Clock 75 | - Analog clock with accurate time ratio. 76 | - A simple, light and responsive UI 77 | - Muliple themes implimented : Light, Dark, Halloween, Christmas, Summer and Winter 78 | - New UI :) 79 | 80 | ### ScreenShots Below 👇 81 | 82 | ![Screenshot-1](https://github.com/deathook007/JavaScript-Mini-Projects/blob/main/Analog%20Clock/images/Analog%20clock.gif) 83 | ![Screenshot-3](https://github.com/deathook007/JavaScript-Mini-Projects/blob/main/Analog%20Clock/images/Clock%20collage.jpg) 84 | 85 | 86 | ## 8. Toggle Theme 87 | - Black and White theme. 88 | - Simple and attractive motion UI 89 | - Best code practice used 90 | 91 | ### ScreenShots Below 👇 92 | 93 | ![Screenshot-1](https://github.com/deathook007/JavaScript-Mini-Projects/blob/main/Toggle%20Theme/Images/Toggle%20Theme.gif) 94 | ![Screenshot-2](https://github.com/deathook007/JavaScript-Mini-Projects/blob/main/Toggle%20Theme/Images/Mode%20Collage.jpg) 95 | 96 | 97 | ## 9. Simple Text To Speech Converter 98 | - Simple Tex To Speech Converter using speechSynthesis. 99 | - Features like play, pause and stop are added. 100 | - Resume from where you paused. 101 | - Simple, light and responsive UI 102 | 103 | ### ScreenShots Below 👇 104 | 105 | ![Screenshot-1](https://github.com/deathook007/JavaScript-Mini-Projects/blob/main/Simple%20Tex%20To%20Speech%20Converter/Screen-Shot.png) 106 | 107 | 108 | ## 10. Christmas Countdown 109 | - A simple and very attractive UI 110 | - Christmas theme countdown. 111 | - Pic it up and use anywhere u want :) 112 | 113 | ### ScreenShots Below 👇 114 | 115 | ![Screenshot-1](https://github.com/deathook007/JavaScript-Projects/blob/main/Christmas%20Countdown/images/Christmas%20Countdown.png) 116 | 117 | 118 | ## 11. Form Validator 119 | - Validation covered : All fields with extra password length validation. 120 | - Simple, attractive and responsive UI 121 | 122 | ### ScreenShots Below 👇 123 | 124 | ![Screenshot-1](https://github.com/deathook007/JavaScript-Projects/blob/main/Form%20Validator/Simple%20Form%20Validator%20Layout.png) 125 | ![Screenshot-2](https://github.com/deathook007/JavaScript-Projects/blob/main/Form%20Validator/Simple%20Form%20Validator%20-%20Password%20Error.png) 126 | 127 | 128 | ## 12. Movie Booking 129 | - A simple, attractive and responsive UI 130 | - Populated UI using local storage. 131 | - Saving data on refresh screen. 132 | 133 | ### ScreenShots Below 👇 134 | 135 | ![Screenshot-2](https://github.com/deathook007/JavaScript-Projects/blob/main/Movie%20Booking/Booking.png) 136 | ![Screenshot-3](https://github.com/deathook007/JavaScript-Projects/blob/main/Movie%20Booking/Responsive.png) 137 | 138 | 139 | ## 13. Simple Map 140 | - Simple map integration using mapbox. 141 | - Direction and navigation API used. 142 | - Create account at https://www.mapbox.com/ for access token. 143 | - Documantation used : https://docs.mapbox.com/mapbox-gl-js/ 144 | 145 | ### ScreenShots Below 👇 146 | 147 | ![Screenshot-1](https://github.com/deathook007/JavaScript-Mini-Projects/blob/main/Simple%20Map/Map.png) 148 | -------------------------------------------------------------------------------- /Simple Map/Map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Simple Map/Map.png -------------------------------------------------------------------------------- /Simple Map/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Google map clone 13 | 14 | 15 | 16 |
    17 | 18 | -------------------------------------------------------------------------------- /Simple Map/script.js: -------------------------------------------------------------------------------- 1 | mapboxgl.accessToken = 'pk.eyJ1IjoiZGVhdGhvb2siLCJhIjoiY2twbnU0c3VkMDV6eTJvbndvaDIzcDJyOCJ9.eMNa5szszsgUCiomHii1qg'; 2 | 3 | // geolocation API 4 | navigator.geolocation.getCurrentPosition(successLocation, errorLocation, { 5 | enableHighAccuracy: true 6 | }); 7 | 8 | function successLocation(position) { 9 | setupMap([position.coords.longitude, position.coords.latitude]); 10 | } 11 | 12 | function errorLocation(){ 13 | setupMap([28.6139, 77.2090]); 14 | } 15 | 16 | function setupMap(center) { 17 | var map = new mapboxgl.Map({ 18 | container: 'map', 19 | style: 'mapbox://styles/mapbox/streets-v11', 20 | center: center, 21 | zoom: 14 22 | }); 23 | const nav = new mapboxgl.NavigationControl(); 24 | map.addControl(nav); 25 | 26 | var directions = new MapboxDirections({ 27 | accessToken: mapboxgl.accessToken 28 | }); 29 | 30 | map.addControl(directions, 'top-left'); 31 | 32 | } -------------------------------------------------------------------------------- /Simple Map/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | #map { 5 | height: 100vh; 6 | width: 100vw; 7 | } 8 | -------------------------------------------------------------------------------- /Simple Tex To Speech Converter/Screen-Shot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Simple Tex To Speech Converter/Screen-Shot.png -------------------------------------------------------------------------------- /Simple Tex To Speech Converter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Text To Speech 8 | 9 | 10 | 11 | 12 |

    Text To Speech Converter

    13 |
    14 |

    Enter Text Here :

    15 | 16 | 17 | 18 | 19 | 20 | 21 |
    22 | 23 | -------------------------------------------------------------------------------- /Simple Tex To Speech Converter/script.js: -------------------------------------------------------------------------------- 1 | const textarea = document.querySelector('#textarea'); 2 | const speed = document.querySelector('#speed'); 3 | const play = document.querySelector('#play'); 4 | const pause = document.querySelector('#pause'); 5 | const stops = document.querySelector('#stop'); 6 | 7 | let currentChar; 8 | 9 | play.addEventListener('click', () =>{ 10 | playText(textarea.value); 11 | }); 12 | 13 | pause.addEventListener('click', () =>{ 14 | pauseText(); 15 | }); 16 | 17 | stops.addEventListener('click', () =>{ 18 | stopText(); 19 | }); 20 | 21 | speed.addEventListener('input', () =>{ 22 | stopText(); 23 | playText(utterance.text.substring(currentChar)); 24 | }); 25 | 26 | function playText(text) { 27 | if(speechSynthesis.speaking && speechSynthesis.pause()){ 28 | return speechSynthesis.resume(); 29 | } 30 | 31 | if(speechSynthesis.speaking){ 32 | return; 33 | } 34 | 35 | const utterance = new SpeechSynthesisUtterance(text); 36 | utterance.addEventListener('end', () =>{ 37 | textarea.disabled = false; 38 | }); 39 | // Changing speed while speaking 40 | utterance.addEventListener('boundary', e =>{ 41 | currentChar = e.charIndex; 42 | }); 43 | 44 | // Changing speed and set default to 1 45 | utterance.rate = speed.value || 1; 46 | textarea.disabled = true; 47 | speechSynthesis.speak(utterance); 48 | } 49 | 50 | function pauseText(){ 51 | if(speechSynthesis.speaking){ 52 | speechSynthesis.pause(); 53 | } 54 | } 55 | 56 | function stopText(){ 57 | speechSynthesis.resume(); 58 | speechSynthesis.cancel(); 59 | } 60 | -------------------------------------------------------------------------------- /Simple Tex To Speech Converter/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | color: #000; 6 | font-family: sans-serif; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | min-width: 100vw; 14 | min-height: 100vh; 15 | background-image: linear-gradient(#222831, #393e46); 16 | } 17 | 18 | .heading { 19 | position: absolute; 20 | top: 10vh; 21 | color: #eee; 22 | font-size: 28px; 23 | word-spacing: 2px; 24 | text-transform: uppercase; 25 | -webkit-text-stroke: 0.8px #00adb5; 26 | } 27 | 28 | h2 { 29 | color: #eee; 30 | font-size: 18px; 31 | text-transform: uppercase; 32 | word-spacing: 2px; 33 | align-items: center; 34 | margin-bottom: 10px; 35 | } 36 | 37 | .textarea { 38 | width: 100%; 39 | height: 200px; 40 | border: 3.5px solid #00adb5; 41 | outline: none; 42 | border-radius: 10px; 43 | padding: 10px; 44 | font-size: 16px; 45 | margin-bottom: 30px; 46 | resize: none; 47 | } 48 | 49 | #change_speed { 50 | color: #eee; 51 | font-size: 20px; 52 | } 53 | 54 | #speed { 55 | margin-left: 15px; 56 | border: 2px solid #00adb5; 57 | border-radius: 10px; 58 | width: 100px; 59 | height: 25px; 60 | outline: none; 61 | font-size: 16px; 62 | padding: 10px; 63 | } 64 | 65 | #play { 66 | margin-left: 15px; 67 | border: 2px solid #00adb5; 68 | border-radius: 10px; 69 | outline: none; 70 | font-size: 16px; 71 | padding: 3px 10px; 72 | } 73 | 74 | #pause { 75 | margin-left: 15px; 76 | border: 2px solid #00adb5; 77 | border-radius: 10px; 78 | outline: none; 79 | font-size: 16px; 80 | padding: 3px 10px; 81 | } 82 | 83 | #stop { 84 | margin-left: 15px; 85 | border: 2px solid #00adb5; 86 | border-radius: 10px; 87 | outline: none; 88 | font-size: 16px; 89 | padding: 3px 10px; 90 | } 91 | -------------------------------------------------------------------------------- /Toggle Theme/Images/Drak Mode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Toggle Theme/Images/Drak Mode.png -------------------------------------------------------------------------------- /Toggle Theme/Images/Light Mode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Toggle Theme/Images/Light Mode.png -------------------------------------------------------------------------------- /Toggle Theme/Images/Mode Collage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Toggle Theme/Images/Mode Collage.jpg -------------------------------------------------------------------------------- /Toggle Theme/Images/Toggle Theme.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/deathook007/JavaScript-Mini-Projects/f76a1834e79bd2d0b09f051ebb513524bb1a9cb5/Toggle Theme/Images/Toggle Theme.gif -------------------------------------------------------------------------------- /Toggle Theme/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Toogle Theme 9 | 10 | 11 |

    Light Mode On

    12 | 20 |
    21 | 22 | 25 | 26 | 27 | 30 | 31 |
    32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Toggle Theme/main.js: -------------------------------------------------------------------------------- 1 | const container = document.querySelector('.container'); 2 | const bodyClass = document.querySelector('body') 3 | document.querySelector('.btn').addEventListener('click', () => { 4 | document.body.classList.toggle('dark'); 5 | const currentRotation = parseInt(getComputedStyle(container).getPropertyValue('--rotation')); 6 | container.style.setProperty('--rotation', currentRotation + 180); 7 | if(bodyClass.classList.contains('dark')){ 8 | document.querySelector('.heading').innerHTML = 'Dark Mood Active' 9 | } 10 | else { 11 | document.querySelector('.heading').innerHTML = 'Light Mood Active' 12 | } 13 | }); -------------------------------------------------------------------------------- /Toggle Theme/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=KoHo:wght@700&family=Roboto&display=swap"); 2 | * { 3 | box-sizing: border-box; 4 | font-family: "KoHo", sans-serif; 5 | } 6 | 7 | body { 8 | --accent-color: #fc5404; 9 | --bg-color: linear-gradient(#f5e6ca, #fff8d9); 10 | --text-color: #f54748; 11 | --btn-text-color: white; 12 | background-image: var(--bg-color); 13 | color: var(--text-color); 14 | margin: 0; 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | flex-direction: column; 19 | min-height: 100vh; 20 | min-width: 100vw; 21 | overflow: hidden; 22 | transition: all 1.5s; 23 | } 24 | 25 | body.dark { 26 | --accent-color: #ffd700; 27 | --bg-color: linear-gradient(#222831, #393e46); 28 | --text-color: #00adb5; 29 | --btn-text-color: #010101; 30 | transition: all 1.5s; 31 | } 32 | 33 | .heading { 34 | font-size: 40px; 35 | font-weight: 800; 36 | margin-bottom: 80px; 37 | -webkit-text-stroke: 1px var(--btn-text-color); 38 | text-stroke: 4px var(--btn-text-color); 39 | } 40 | 41 | .btn { 42 | font-size: 18px; 43 | background-color: var(--accent-color); 44 | color: var(--btn-text-color); 45 | padding: 10px; 46 | border-radius: 15px; 47 | border: none; 48 | display: flex; 49 | justify-content: center; 50 | align-items: center; 51 | box-shadow: 1px 5px 5px #4e4d4d; 52 | transform: scale(1); 53 | transition: transform 0.3s; 54 | } 55 | 56 | .btn:hover, 57 | .btn:focus { 58 | transform: scale(1.1); 59 | } 60 | 61 | .btn:active { 62 | transform: scale(1); 63 | } 64 | 65 | .mix { 66 | margin-right: 10px; 67 | fill: var(--btn-text-color); 68 | } 69 | 70 | .container { 71 | --rotation: 0; 72 | position: absolute; 73 | top: 0; 74 | height: 200vmin; 75 | pointer-events: none; 76 | display: flex; 77 | justify-content: center; 78 | align-items: center; 79 | transform: rotate(calc(var(--rotation) * 1deg)); 80 | -webkit-transform: rotate(calc(var(--rotation) * 1deg)); 81 | -moz-transform: rotate(calc(var(--rotation) * 1deg)); 82 | -ms-transform: rotate(calc(var(--rotation) * 1deg)); 83 | -o-transform: rotate(calc(var(--rotation) * 1deg)); 84 | transition: transform 1s; 85 | -webkit-transition: transform 1s; 86 | -moz-transition: transform 1s; 87 | -ms-transition: transform 1s; 88 | -o-transition: transform 1s; 89 | } 90 | 91 | .sun, 92 | .moon { 93 | position: absolute; 94 | transition: opacity, fill, 1s; 95 | fill: var(--accent-color); 96 | } 97 | .sun { 98 | top: 5%; 99 | opacity: 1; 100 | } 101 | .dark .sun { 102 | opacity: 0; 103 | } 104 | .moon { 105 | bottom: 5%; 106 | opacity: 0; 107 | transform: rotate(180deg); 108 | -webkit-transform: rotate(180deg); 109 | -moz-transform: rotate(180deg); 110 | -ms-transform: rotate(180deg); 111 | -o-transform: rotate(180deg); 112 | } 113 | .dark .moon { 114 | opacity: 1; 115 | } 116 | --------------------------------------------------------------------------------