├── 0. Template ├── index.html ├── script.js └── styles.css ├── 1. GoogleDriveApp ├── .vscode │ └── settings.json ├── index.html ├── script.js ├── styles.css └── test.html ├── 10. QuizApp ├── .vscode │ └── settings.json ├── app.js ├── index.html ├── script.js └── styles.css ├── 3. PasswordGenerator ├── index.html ├── script.js └── styles.css ├── 4. LyricsApp ├── .vscode │ └── settings.json ├── images │ └── mysic.jpg ├── index.html ├── script.js └── styles.css ├── 5. InternetConnectionDetector ├── .vscode │ └── settings.json ├── images │ ├── offline.png │ └── online.png ├── index.html ├── script.js ├── styles.css └── test.html ├── 6. Product Slider ├── images │ ├── 1.png │ ├── 10.png │ ├── 11.png │ ├── 12.png │ ├── 2.png │ ├── 250.jpg │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ ├── 9.png │ ├── arrow-left.png │ └── arrow-right.png ├── index.html ├── script.js └── styles.css ├── 7. Product Filter ├── .vscode │ └── settings.json ├── images │ ├── 1.png │ ├── 10.png │ ├── 11.png │ ├── 12.png │ ├── 13.png │ ├── 2.png │ ├── 250.jpg │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 8.png │ └── 9.png ├── index.html ├── script.js └── styles.css ├── 8. NotesApp ├── .vscode │ └── settings.json ├── index.html ├── script.js └── styles.css ├── 9. ModalWithProgressBarAndCounter ├── .vscode │ └── settings.json ├── index.html ├── script.js └── styles.css └── README.md /0. Template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |

Hello World!!!

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /0. Template/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/0. Template/script.js -------------------------------------------------------------------------------- /0. Template/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); 2 | 3 | 4 | :root { 5 | --white: #fff; 6 | --black: #1c2b2d; 7 | --blue: #31326f; 8 | --light-blue: #005490; 9 | --color-primary: #9d0191; 10 | --color-sec: #db6400; 11 | --color-grey: #eee; 12 | --color-dark-grey: #222831; 13 | } 14 | 15 | * { 16 | margin: 0; 17 | padding: 0; 18 | box-sizing: border-box; 19 | } 20 | 21 | html { 22 | font-size: 10rem; 23 | } 24 | 25 | body { 26 | font-family: 'Open Sans', sans-serif; 27 | } 28 | 29 | p { 30 | font-size: 1.6rem; 31 | line-height: 1.5; 32 | } 33 | 34 | img { 35 | width: 100%; 36 | } 37 | 38 | .container { 39 | max-width: 900px; 40 | margin: 0 auto; 41 | padding: 0 20px; 42 | } 43 | 44 | -------------------------------------------------------------------------------- /1. GoogleDriveApp/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5504 3 | } -------------------------------------------------------------------------------- /1. GoogleDriveApp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 16 |

17 |

18 |

19 |

20 |

Instructions

21 | 22 |

Follow the instructions below to get your Google Drive file link

23 |

24 |

Open Google Drive
Right click on a file.
Select "Get link" and click "Copy link"
Paste the link here and click “Generate Direct Link” button

30 |

31 |

32 | 33 |

34 |

35 |

Google Direct Download Link Generator

36 | 37 | 38 | 39 | 45 | 46 | 47 |

48 |

49 | 50 |

Google Drive link

51 |

Paste your Google Drive File link below

52 | 69 | 70 |

71 | 72 |

73 | 74 |

Audio Embed Link

75 |

If your link was an Audio file, use the code snippet to embed it on a web page.

76 | 84 |

85 | 86 |

87 | 88 |

Video/Doc Embed Link

89 |

If your link was an Video or Document, use the code snippet to embed it on a web page.

90 | 99 |

100 |

101 |

102 |

103 |

104 |

105 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /1. GoogleDriveApp/script.js: -------------------------------------------------------------------------------- 1 | const gLink= document.getElementById("glink"); 2 | const btn = document.getElementById("btn"); 3 | const downloadLink = document.getElementById("download-link"); 4 | const embedAudio = document.getElementById("embed-audio"); 5 | const embedVideo = document.getElementById("embed-video"); 6 | const clear = document.querySelector(".clear"); 7 | 8 | 9 | 10 | btn.addEventListener("click", generateLink); 11 | 12 | function generateLink(e) { 13 | e.preventDefault(); 14 | // console.log(gLink.value); 15 | const gLinkValue = document.getElementById("glink").value; 16 | const confirmLink = glink.value.includes("https://drive.google.com/file/d/"); 17 | 18 | if (confirmLink == true) { 19 | const getDownloadLink = gLink.value 20 | .replace("https://drive.google.com/file/d/", "https://drive.google.com/uc?export=download&id=") 21 | .replace("/view?usp=sharing", ""); 22 | // alert(getDownloadLink); 23 | downloadLink.value = getDownloadLink; 24 | 25 | function copyText(target) { 26 | if (target.value == "") { 27 | alert("Please generate a Download Link") 28 | }else { 29 | target.select(); 30 | document.execCommand("copy"); 31 | alert("Link has been copied to clipboard"); 32 | } 33 | } 34 | const copy = document.querySelector(".copy"); 35 | copy.addEventListener("click", () => { 36 | return copyText(downloadLink); 37 | }) 38 | 39 | // EMBED AUDIO 40 | const audio1 = '

'; 42 | 43 | console.log(downloadLink.value); 44 | embedAudio.value = `${audio1}${downloadLink.value}${audio2}`; 45 | // COPY AUDIO EMBED CODE 46 | const copyAudio = document.querySelector(".copy-audio"); 47 | copyAudio.addEventListener("click", () => { 48 | return copyText(embedAudio); 49 | }) 50 | 51 | 52 | // Embed Video 53 | const getVideoLink = gLink.value 54 | .replace("/view?usp=sharing", ""); 55 | 56 | const video1 = ''; 58 | 59 | embedVideo.value = `${video1}${getVideoLink}${video2}`; 60 | 61 | const copyVideo = document.querySelector(".copy-video"); 62 | copyVideo.addEventListener("click", () => { 63 | return copyText(embedVideo); 64 | }) 65 | 66 | } else { 67 | alert("Please Enter a Google Drive File Link") 68 | } 69 | } 70 | 71 | clear.addEventListener("click", clearForm); 72 | 73 | function clearForm(e) { 74 | e.preventDefault(); 75 | gLink.value = ""; 76 | downloadLink.value = ""; 77 | embedAudio.value = ""; 78 | embedVideo.value = ""; 79 | } 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /1. GoogleDriveApp/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); 2 | 3 | :root { 4 | --white: #fff; 5 | --black: #1c2b2d; 6 | --blue: #31326f; 7 | --color-primary: #9d0191; 8 | --color-sec: #db6400; 9 | --color-grey: #eee; 10 | --color-dark-grey: #222831; 11 | } 12 | 13 | * { 14 | margin: 0; 15 | padding: 0; 16 | box-sizing: border-box; 17 | } 18 | 19 | html { 20 | font-size: 10px; 21 | } 22 | 23 | body { 24 | font-family: 'Open Sans', sans-serif; 25 | } 26 | 27 | p { 28 | font-size: 1.6rem; 29 | line-height: 1.5; 30 | } 31 | 32 | img { 33 | width: 100%; 34 | } 35 | 36 | .container { 37 | max-width: 900px; 38 | margin: 0 auto; 39 | padding: 0 20px; 40 | } 41 | 42 | .main-container { 43 | display: flex; 44 | justify-content: center; 45 | /* padding-top: 5rem; */ 46 | } 47 | 48 | .instructions { 49 | font-size: 1.6rem; 50 | width: 30%; 51 | height: 100vh; 52 | padding-bottom: 5px; 53 | border-right: 2px solid #eee; 54 | background-color: var(--black); 55 | padding-top: 5rem; 56 | color: #eee; 57 | } 58 | 59 | .instructions h2 { 60 | font-size: 3.5rem; 61 | color: var(--color-sec); 62 | margin-bottom: 1rem; 63 | } 64 | 65 | .instructions ol { 66 | padding-left: 15px; 67 | padding-top: 10px; 68 | color: #eee; 69 | } 70 | 71 | .instructions ol a { 72 | color: var(--color-sec); 73 | text-decoration: none; 74 | } 75 | 76 | .line { 77 | position: relative; 78 | margin: 5px 0; 79 | } 80 | 81 | .line::after { 82 | content: ""; 83 | position: absolute; 84 | left: 0; 85 | bottom: 0; 86 | width: 25%; 87 | height: 2px; 88 | background-color: #eee; 89 | } 90 | 91 | 92 | 93 | .download-link { 94 | width: 70%; 95 | border-right: 5px; 96 | padding-top: 5rem; 97 | } 98 | 99 | .download-link section { 100 | border: 2px solid var(--color-primary); 101 | border-radius: 0 0 5px 5px; 102 | } 103 | 104 | 105 | /* form section */ 106 | main h1 { 107 | display: block; 108 | font-size: 3.5rem; 109 | font-weight: 700; 110 | line-height: 5rem; 111 | color: var(--color-primary); 112 | text-align: center; 113 | padding-bottom: 1rem; 114 | } 115 | 116 | main input[type=radio] { 117 | display: none; 118 | } 119 | 120 | main nav { 121 | /* width: 100%; */ 122 | display: flex; 123 | justify-content: space-around; 124 | align-items: center; 125 | border: 1px solid #eee; 126 | padding: 5px; 127 | position: relative; 128 | background-color: var(--color-grey); 129 | z-index: 1; 130 | } 131 | 132 | main nav label { 133 | font-size: 1.6rem; 134 | font-weight: 500; 135 | padding: 1rem; 136 | position: relative; 137 | color: var(--color-dark-grey); 138 | cursor: pointer; 139 | } 140 | 141 | main nav label i { 142 | padding-right: .5rem; 143 | color: var(--color-sec); 144 | } 145 | 146 | nav .slide { 147 | position: absolute; 148 | top: 0; 149 | left: 3%; 150 | width: 26%; 151 | padding: 0 1rem; 152 | height: 100%; 153 | background-color: var(--color-primary); 154 | border-radius: 3px; 155 | z-index: -1; 156 | transition: all .3s; 157 | } 158 | 159 | #register:checked ~ nav .slide { 160 | left: 31%; 161 | } 162 | 163 | #reset:checked ~ nav .slide { 164 | left: 66%; 165 | } 166 | 167 | #login:checked ~ nav label.login, 168 | #register:checked ~ nav label.register, 169 | #reset:checked ~ nav label.reset 170 | { 171 | color: white; 172 | } 173 | 174 | .content { 175 | display: none; 176 | } 177 | 178 | #login:checked ~ section .content-link { 179 | display: block; 180 | } 181 | 182 | #register:checked ~ section .content-audio { 183 | display: block; 184 | } 185 | 186 | #reset:checked ~ section .content-video { 187 | display: block; 188 | transform: translateX(0); 189 | } 190 | 191 | /* FORM STYLES */ 192 | section .content { 193 | margin: 3rem auto; 194 | text-align: center; 195 | } 196 | 197 | .content > i { 198 | font-size: 3rem; 199 | color: var(--color-sec); 200 | border: 2px solid; 201 | padding: .8rem; 202 | border-radius: 5rem; 203 | } 204 | 205 | .content h2 { 206 | font-size: 2rem; 207 | line-height: 2; 208 | padding: 0 1rem; 209 | position: relative; 210 | } 211 | 212 | .content h2:before { 213 | content: ""; 214 | position: absolute; 215 | left: 28%; 216 | top: 50%; 217 | width: 2%; 218 | height: 1px; 219 | background-color: var(--color-dark-grey); 220 | transform: translateY(-50%); 221 | } 222 | 223 | .content h2:after { 224 | content: ""; 225 | position: absolute; 226 | right: 28%; 227 | top: 50%; 228 | width: 2%; 229 | height: 1px; 230 | background-color: var(--color-dark-grey); 231 | transform: translateY(-50%); 232 | } 233 | 234 | .content p { 235 | padding-bottom: 1rem; 236 | } 237 | 238 | .content form { 239 | width: 70%; 240 | margin: 0 auto; 241 | display: flex; 242 | flex-direction: column; 243 | } 244 | 245 | .content form label { 246 | position: relative; 247 | margin: 0 auto; 248 | width: 100%; 249 | } 250 | 251 | .content form label input { 252 | display: block; 253 | width: 100%; 254 | padding: 1.3rem 3rem; 255 | border: 1px solid transparent; 256 | border-radius: 10px 0 10px 0; 257 | border-bottom: 2px solid rgba(0,0,0,.4); 258 | margin-bottom: 2rem; 259 | background-color: rgba(0,0,0,.1); 260 | outline: none; 261 | color: var(--color-dark-grey); 262 | transition: all .3s; 263 | } 264 | 265 | .content form label input:focus:invalid { 266 | font-size: 1.6rem; 267 | border-bottom: 2px solid var(--color-sec); 268 | } 269 | 270 | .content form label input:valid { 271 | font-size: 1.6rem; 272 | border-bottom: 2px solid green; 273 | background-color: #E8F0FE; 274 | } 275 | .content form i { 276 | position: absolute; 277 | left: 1rem; 278 | top: 1.5rem; 279 | font-size: 1.3rem; 280 | color: var(--color-sec); 281 | } 282 | 283 | ::placeholder { 284 | color: var(--color-dark-grey); 285 | font-size: 1.5rem; 286 | } 287 | 288 | .embed-code { 289 | font-size: 1.6rem; 290 | position: relative; 291 | } 292 | .content form textarea { 293 | width: 100%; 294 | height: 10rem; 295 | outline: none; 296 | font-size: 1.6rem; 297 | font-family: inherit; 298 | } 299 | 300 | .embed-code span { 301 | position: absolute; 302 | right: 1px; 303 | bottom: 5px; 304 | font-size: 1.6rem; 305 | font-weight: bold; 306 | color: #fff; 307 | background-color: var(--color-primary); 308 | padding: 5px 8px; 309 | border: 1px solid #eee; 310 | cursor: pointer; 311 | transition: all .3s; 312 | } 313 | 314 | .embed-code span:hover { 315 | font-size: 1.8rem; 316 | } 317 | 318 | .content .btn { 319 | padding: 1.2rem; 320 | font-size: 1.6rem; 321 | font-weight: 700; 322 | background-color: var(--color-sec); 323 | outline: none; 324 | border: none; 325 | border-radius: 3px; 326 | color: white; 327 | cursor: pointer; 328 | /* box-shadow: 0 1rem 2rem rgba(0,0,0,.3); */ 329 | transition: all .3s; 330 | } 331 | 332 | .content .btn:hover { 333 | transform: translateY(-3px); 334 | background-color: var(--color-primary); 335 | } 336 | 337 | button.clear { 338 | font-size: 1.6rem; 339 | color: #fff; 340 | background-color: red; 341 | padding: .8rem; 342 | margin-top: 1rem; 343 | font-weight: 700; 344 | outline: none; 345 | border: none; 346 | border-radius: 3px; 347 | cursor: pointer; 348 | transition: all .3s; 349 | } 350 | 351 | button.clear:hover { 352 | background-color: orangered; 353 | } 354 | 355 | /* MEDIA QUERIES */ 356 | @media screen and (max-width: 750px) { 357 | .main-container { 358 | display: flex; 359 | flex-direction: column-reverse; 360 | } 361 | .instructions { 362 | width: 100%; 363 | } 364 | 365 | .download-link { 366 | width: 100%; 367 | padding-bottom: 20px; 368 | } 369 | .download-link h1 { 370 | font-size: 3rem; 371 | line-height: 1; 372 | } 373 | } 374 | -------------------------------------------------------------------------------- /1. GoogleDriveApp/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Google Drive Test Page 7 | 8 | 9 | 33 | 34 | 35 |

36 |

37 |

Google Drive Hosted Files

38 |

39 |

Music title: Sunny

40 | 41 |

42 | Download 43 |

44 |

Document: Getting Started

45 | 46 | 47 |

48 |

Video Title: Web Demo

49 | 50 | 51 |

52 |

53 | 54 | -------------------------------------------------------------------------------- /10. QuizApp/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5504 3 | } -------------------------------------------------------------------------------- /10. QuizApp/app.js: -------------------------------------------------------------------------------- 1 | // CREATE A QUIZ CLASS 2 | class Quiz { 3 | constructor(questions) { 4 | this.score = 0; 5 | this.questions = questions; 6 | this.questionIndex = 0; 7 | } 8 | 9 | getQuestionIndex() { 10 | return this.questions[this.questionIndex]; 11 | } 12 | 13 | guess(answer) { 14 | if (this.getQuestionIndex().isCorrectAnswer(answer)) { 15 | this.score++; 16 | } 17 | this.questionIndex++; 18 | } 19 | 20 | isEnded() { 21 | return this.questionIndex === this.questions.length; 22 | } 23 | } 24 | 25 | // Create a question Class 26 | class Question { 27 | constructor(text, choices, answer) { 28 | this.text = text; 29 | this.choices = choices; 30 | this.answer = answer; 31 | } 32 | 33 | isCorrectAnswer(choice) { 34 | return this.answer === choice; 35 | } 36 | } 37 | 38 | // NOW DISPLAY THE QUESTIONS 39 | function displayQuestion() { 40 | if (quiz.isEnded()) { 41 | showScores(); 42 | } else { 43 | // show question 44 | let questionElement = document.getElementById("question"); 45 | questionElement.innerHTML = quiz.getQuestionIndex().text; 46 | 47 | // show options 48 | let choices = quiz.getQuestionIndex().choices; 49 | for (let i = 0; i < choices.length; i++) { 50 | let choiceElement = document.getElementById("choice" + i); 51 | choiceElement.innerHTML = choices[i]; 52 | guess("btn" + i, choices[i]); 53 | } 54 | 55 | showProgress(); 56 | } 57 | }; 58 | 59 | // GUESS ANSWER 60 | function guess(id, guess) { 61 | let button = document.getElementById(id); 62 | button.onclick = function() { 63 | quiz.guess(guess); 64 | displayQuestion(); 65 | } 66 | }; 67 | 68 | // SHOW QUIZ PROGRESS 69 | function showProgress() { 70 | let currentQuestionNumber = quiz.questionIndex + 1; 71 | let ProgressElement = document.getElementById("progress"); 72 | ProgressElement.innerHTML = 73 | `Question ${currentQuestionNumber} of ${quiz.questions.length}`; 74 | }; 75 | 76 | // SHOW SCORES 77 | function showScores() { 78 | let quizEndHTML = 79 | ` 80 |

Quiz Completed

81 |

Your scored: ${quiz.score} of ${quiz.questions.length}

82 |

83 | Take Quiz Again 84 |

85 | `; 86 | let quizElement = document.getElementById("quiz"); 87 | quizElement.innerHTML = quizEndHTML; 88 | }; 89 | 90 | // create questions here 91 | let questions = [ 92 | new Question( 93 | "Hyper Text Markup Language Stands For?", ["JQuery", "XHTML", "CSS", "HTML"], "HTML" 94 | ), 95 | new Question( 96 | "Cascading Style sheet stands for?", ["HTML", "JQuery", "CSS", "XML"], "CSS" 97 | ), 98 | new Question( 99 | "Which is a JavaScript Framework?", ["React", "Laravel", "Django", "Sass"], "React" 100 | ), 101 | new Question( 102 | "Which is a backend language?", ["PHP", "HTML", "React", "All"], "PHP" 103 | ), 104 | new Question( 105 | "Which is best for Artificial intelligence?", ["React", "Laravel", "Python", "Sass"], "Python" 106 | ) 107 | ]; 108 | 109 | // INITIALIZE quiz 110 | let quiz = new Quiz(questions); 111 | 112 | // display questions 113 | displayQuestion(); 114 | 115 | 116 | // Add A CountDown for the Quiz 117 | let time = 10; 118 | let quizTimeInMinutes = time * 60 * 60; 119 | let quizTime = quizTimeInMinutes / 60; 120 | 121 | let counting = document.getElementById("count-down"); 122 | 123 | function startCountdown() { 124 | let quizTimer = setInterval(function() { 125 | if (quizTime <= 0) { 126 | clearInterval(quizTimer); 127 | showScores(); 128 | } else { 129 | quizTime--; 130 | let sec = Math.floor(quizTime % 60); 131 | let min = Math.floor(quizTime / 60) % 60; 132 | counting.innerHTML = `TIME: ${min} : ${sec}`; 133 | } 134 | }, 1000); 135 | } 136 | 137 | startCountdown(); -------------------------------------------------------------------------------- /10. QuizApp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 |

JavaScript Quiz App

17 |

18 |

Question x of y

19 |

20 |

21 |

22 | 23 |

24 | 25 | 26 | 27 | 28 |

29 | 30 |

31 | 35 |

36 |

37 |

38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /10. QuizApp/script.js: -------------------------------------------------------------------------------- 1 | function Quiz(questions) { 2 | this.score = 0; 3 | this.questions = questions; 4 | this.questionIndex = 0; 5 | } 6 | 7 | Quiz.prototype.getQuestionIndex = function() { 8 | return this.questions[this.questionIndex]; 9 | } 10 | 11 | Quiz.prototype.guess = function(answer) { 12 | if(this.getQuestionIndex().isCorrectAnswer(answer)) { 13 | this.score++; 14 | } 15 | 16 | this.questionIndex++; 17 | } 18 | 19 | Quiz.prototype.isEnded = function() { 20 | return this.questionIndex === this.questions.length; 21 | } 22 | 23 | 24 | function Question(text, choices, answer) { 25 | this.text = text; 26 | this.choices = choices; 27 | this.answer = answer; 28 | } 29 | 30 | Question.prototype.isCorrectAnswer = function(choice) { 31 | return this.answer === choice; 32 | } 33 | 34 | 35 | // Displaying the question 36 | function displayQuestion() { 37 | if(quiz.isEnded()) { 38 | showScores(); 39 | } 40 | else { 41 | // show question 42 | let questionElement = document.getElementById("question"); 43 | questionElement.innerHTML = quiz.getQuestionIndex().text; 44 | 45 | // show options 46 | let choices = quiz.getQuestionIndex().choices; 47 | for(let i = 0; i < choices.length; i++) { 48 | let choiceElement = document.getElementById("choice" + i); 49 | choiceElement.innerHTML = choices[i]; 50 | guess("btn" + i, choices[i]); 51 | } 52 | 53 | showProgress(); 54 | } 55 | }; 56 | 57 | function guess(id, guess) { 58 | let button = document.getElementById(id); 59 | button.onclick = function() { 60 | quiz.guess(guess); 61 | displayQuestion(); 62 | } 63 | }; 64 | 65 | 66 | function showProgress() { 67 | let currentQuestionNumber = quiz.questionIndex + 1; 68 | let ProgressElement = document.getElementById("progress"); 69 | ProgressElement.innerHTML = 70 | `Question ${currentQuestionNumber} of ${quiz.questions.length}`; 71 | }; 72 | 73 | function showScores() { 74 | let quizEndHTML = 75 | ` 76 |

Quiz Completed

77 |

Your scored: ${quiz.score} of ${quiz.questions.length}

78 |

79 | Take Quiz Again 80 |

81 | `; 82 | let quizElement = document.getElementById("quiz"); 83 | quizElement.innerHTML = quizEndHTML; 84 | }; 85 | 86 | // create questions here 87 | let questions = [ 88 | new Question( 89 | "Hyper Text Markup Language Stands For?", 90 | ["JQuery", "XHTML","CSS", "HTML"], "HTML" 91 | ), 92 | new Question( 93 | "Cascading Style sheet stands for?", 94 | ["HTML", "JQuery", "CSS", "XML"], "CSS" 95 | ), 96 | new Question( 97 | "Which is a JavaScript Framework?", 98 | ["React", "Laravel","Django", "Sass"], "React" 99 | ), 100 | new Question( 101 | "Which is a backend language?", 102 | ["PHP", "HTML", "React", "All"], "PHP" 103 | ), 104 | new Question( 105 | "Which is best for Artificial intelligence?", 106 | ["React", "Laravel","Python", "Sass"], "Python" 107 | ) 108 | ]; 109 | 110 | // Loop through the array and get the answers 111 | // questions.forEach((answer) => { 112 | // console.log(answer.choice); 113 | // let quizAnswers = document.getElementById("quiz-answers"); 114 | // // quizAnswers.innerHTML = questions.text; 115 | // }) 116 | 117 | 118 | // create quiz 119 | let quiz = new Quiz(questions); 120 | 121 | // display quiz 122 | displayQuestion(); 123 | 124 | // Add A CountDown for the Quiz 125 | let time = 10; 126 | let quizTimeInMinutes = time * 60 * 60; 127 | let quizTime = quizTimeInMinutes / 60; 128 | 129 | let counting = document.getElementById("count-down"); 130 | 131 | function startCountdown(){ 132 | let quizTimer = setInterval(function(){ 133 | if(quizTime <= 0) { 134 | clearInterval(quizTimer); 135 | showScores(); 136 | } else { 137 | quizTime--; 138 | let sec = Math.floor(quizTime % 60); 139 | let min = Math.floor(quizTime / 60) % 60; 140 | counting.innerHTML = `TIME: ${min} : ${sec}`; 141 | } 142 | },1000); 143 | } 144 | 145 | startCountdown(); 146 | 147 | -------------------------------------------------------------------------------- /10. QuizApp/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); 2 | 3 | 4 | :root { 5 | --white: #fff; 6 | --black: #1c2b2d; 7 | --blue: #31326f; 8 | --light-blue: #005490; 9 | --color-primary: #9d0191; 10 | --color-sec: #db6400; 11 | --color-grey: #eee; 12 | --color-dark-grey: #222831; 13 | } 14 | 15 | * { 16 | margin: 0; 17 | padding: 0; 18 | box-sizing: border-box; 19 | } 20 | 21 | html { 22 | font-size: 10px; 23 | } 24 | 25 | body { 26 | font-family: 'Open Sans', sans-serif; 27 | background-color: var(--light-blue); 28 | } 29 | 30 | p { 31 | font-size: 1.6rem; 32 | line-height: 1.5; 33 | } 34 | 35 | img { 36 | width: 100%; 37 | } 38 | 39 | .container { 40 | max-width: 900px; 41 | margin: 0 auto; 42 | padding: 0 20px; 43 | display: flex; 44 | justify-content: center; 45 | align-items: center; 46 | height: 100vh; 47 | } 48 | 49 | .quiz-box { 50 | width: 600px; 51 | /* height: 500px; */ 52 | margin: 0 auto; 53 | background-color: #eee; 54 | padding: 10px 50px 50px 50px; 55 | border: 3px solid var(--color-primary); 56 | border-radius: 5px; 57 | 58 | } 59 | 60 | .quiz-box h1 { 61 | background-color: var(--color-primary); 62 | font-size: 4rem; 63 | text-align: center; 64 | color: #fff; 65 | padding: 10px 0; 66 | width: 100%; 67 | margin-bottom: 2rem; 68 | border-radius: 3px; 69 | } 70 | 71 | .quiz-header { 72 | display: flex; 73 | justify-content: space-between; 74 | align-items: center; 75 | } 76 | 77 | .quiz-header #progress { 78 | color: #2b2b2b; 79 | font-size: 1.6rem; 80 | font-weight: 700; 81 | } 82 | 83 | .quiz-header #count-down { 84 | font-size: 1.6rem; 85 | font-weight: 700; 86 | background-color: orangered; 87 | padding: 5px; 88 | margin: 1px; 89 | color: #fff; 90 | border-radius: 5px; 91 | } 92 | 93 | .quiz-box #question { 94 | font-size: 1.8rem; 95 | font-weight: 600; 96 | color: orangered; 97 | border: 1px solid #777; 98 | border-width: 1px 0; 99 | padding: 5px 0; 100 | } 101 | 102 | .buttons { 103 | margin: 1.5rem 0 4rem 0; 104 | } 105 | 106 | .btn { 107 | text-align: left; 108 | background-color: #ddd; 109 | width: 100%; 110 | font-size: 1.8rem; 111 | color: var(--black); 112 | border: 1px solid var(--color-primary); 113 | border-radius: 5px; 114 | margin: 7px 0; 115 | padding: 1rem; 116 | outline: none; 117 | } 118 | 119 | .btn:hover { 120 | cursor: pointer; 121 | background-color: var(--color-primary); 122 | color: #fff; 123 | } 124 | 125 | .btn:active { 126 | background-color: var(--color-sec); 127 | } 128 | 129 | #score { 130 | color: var(--black); 131 | text-align: center; 132 | font-size: 2rem; 133 | margin-bottom: 4rem; 134 | } 135 | 136 | .quiz-repeat { 137 | text-align: center; 138 | margin: 0 auto; 139 | } 140 | 141 | .quiz-repeat a { 142 | font-size: 1.6rem; 143 | font-weight: 600; 144 | color: #fff; 145 | text-decoration: none; 146 | background-color: orangered; 147 | padding: 1rem; 148 | border-radius: 5px; 149 | transition: all .3s; 150 | } 151 | 152 | .quiz-repeat a:hover { 153 | background-color: var(--color-primary); 154 | } 155 | 156 | -------------------------------------------------------------------------------- /3. PasswordGenerator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Password Generator 7 | 8 | 9 | 10 |

11 |

Password Generator

12 |

13 | 14 | 15 |

16 |

17 |

18 | Password Length 19 | 20 |

21 |

22 | Include Uppercase 23 | 24 |

25 |

26 | Include Lowercase 27 | 28 |

29 |

30 | Include number 31 | 32 |

33 |

34 | Include Symbols 35 | 36 |

37 | 38 |

39 | 40 |

41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /3. PasswordGenerator/script.js: -------------------------------------------------------------------------------- 1 | const empty = ""; 2 | const uCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 3 | const lCase = "abcdefghijklmnopqrstuvwxyz"; 4 | const number = "0123456789"; 5 | const symbol = "!@#$%^&*=-_"; 6 | 7 | const pLength = document.getElementById("p-length"); 8 | const upperCase = document.getElementById("p-uppercase"); 9 | const lowerCase = document.getElementById("p-lowercase"); 10 | const pNumber = document.getElementById("p-number"); 11 | const pSymbol = document.getElementById("p-symbol"); 12 | const submit = document.getElementById("submit"); 13 | const password = document.getElementById("password"); 14 | 15 | submit.addEventListener("click", () => { 16 | let initialPassword = empty; 17 | (upperCase.checked) ? initialPassword += uCase : ""; 18 | (lowerCase.checked) ? initialPassword += lCase : ""; 19 | (pNumber.checked) ? initialPassword += number : ""; 20 | (pSymbol.checked) ? initialPassword += symbol : ""; 21 | 22 | password.value = generatePassword(pLength.value, initialPassword) 23 | }); 24 | 25 | function generatePassword(l, initialPassword) { 26 | let pass = ""; 27 | for (let i = 0; i < l; i++) { 28 | pass += initialPassword.charAt(Math.floor(Math.random() * initialPassword.length)); 29 | } 30 | return pass; 31 | } 32 | 33 | // Copy password to clipboard 34 | 35 | const copy = document.getElementById("copy"); 36 | 37 | copy.addEventListener("click", () => { 38 | if (password.value == "") { 39 | alert("Please generate a password") 40 | }else { 41 | password.select(); 42 | document.execCommand("copy"); 43 | alert("Password has been copied to clipboard"); 44 | } 45 | }); 46 | -------------------------------------------------------------------------------- /3. PasswordGenerator/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Poppins", sans-serif; 11 | background: linear-gradient(to right bottom, 12 | #ea2c62, #52057b) no-repeat; 13 | height: 100vh; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | } 18 | 19 | .container { 20 | background-color: #52057b; 21 | padding: 20px; 22 | border-radius: 5px; 23 | width: 370px; 24 | } 25 | 26 | h1 { 27 | font-size: 30px; 28 | color: #fff; 29 | text-align: center; 30 | margin-bottom: 10px; 31 | } 32 | 33 | .form-control { 34 | display: flex; 35 | justify-content: space-between; 36 | align-items: center; 37 | padding: 10px 0; 38 | color: #fff; 39 | border-bottom: 1px solid #eee; 40 | } 41 | 42 | .form-control label { 43 | cursor: pointer; 44 | } 45 | 46 | .p-header { 47 | position: relative; 48 | } 49 | 50 | .p-header input { 51 | width: 100%; 52 | height: 100%; 53 | background-color: #ea2c62; 54 | padding: 14px; 55 | border-radius: 3px; 56 | color: #fff; 57 | outline: none; 58 | border: none; 59 | font-size: 16px; 60 | } 61 | 62 | .p-header button, 63 | .form-control input[type=number] { 64 | padding: 3px 5px; 65 | background-color: #eee; 66 | outline: none; 67 | border: none; 68 | border-radius: 3px 0 0 0; 69 | } 70 | 71 | .p-header button { 72 | position: absolute; 73 | bottom: 0; 74 | right: 0; 75 | cursor: pointer; 76 | } 77 | 78 | #submit { 79 | width: 100%; 80 | padding: 15px; 81 | margin-top: 10px; 82 | background-color: #3282b8; 83 | font-size: 18px; 84 | font-weight: 600; 85 | text-transform: uppercase; 86 | outline: none; 87 | border: none; 88 | border-radius: 3px; 89 | color: #fff; 90 | cursor: pointer; 91 | transition: all .3s; 92 | } 93 | 94 | #submit:hover { 95 | background-color: #ea2c62; 96 | } 97 | 98 | #submit:active { 99 | background-color: #3282b8; 100 | } -------------------------------------------------------------------------------- /4. LyricsApp/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /4. LyricsApp/images/mysic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/4. LyricsApp/images/mysic.jpg -------------------------------------------------------------------------------- /4. LyricsApp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |

12 |

13 |

Lyrics Search App

14 | 18 |

19 |

20 | 21 |

22 |

23 |

Enter Song or Artiste in the field above

24 |

25 |

26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /4. LyricsApp/script.js: -------------------------------------------------------------------------------- 1 | const form = document.getElementById("form"); 2 | const search = document.getElementById("search"); 3 | const result = document.getElementById("result"); 4 | 5 | const apiURL = "https://api.lyrics.ovh"; 6 | 7 | // Get Search Value 8 | form.addEventListener("submit", e => { 9 | e.preventDefault(); 10 | searchValue = search.value.trim(); 11 | 12 | if (!searchValue) { 13 | alert("Nothing to search"); 14 | } else { 15 | beginSearch(searchValue); 16 | } 17 | }) 18 | 19 | // Search function 20 | async function beginSearch(searchValue) { 21 | const searchResult = await fetch(`${apiURL}/suggest/${searchValue}`); 22 | const data = await searchResult.json(); 23 | 24 | displayData(data); 25 | } 26 | 27 | // Display Search Result 28 | function displayData(data) { 29 | result.innerHTML = ` 30 |

33 |
34 | ${song.artist.name} -${song.title} 35 |
36 | Get Lyrics 37 |

41 | `; 42 | } 43 | 44 | //event listener in get lyrics button 45 | result.addEventListener('click', e=>{ 46 | const clickedElement = e.target; 47 | 48 | //checking clicked elemet is button or not 49 | if (clickedElement.tagName === 'SPAN'){ 50 | const artist = clickedElement.getAttribute('data-artist'); 51 | const songTitle = clickedElement.getAttribute('data-songtitle'); 52 | 53 | getLyrics(artist, songTitle) 54 | } 55 | }) 56 | 57 | // Get lyrics for song 58 | async function getLyrics(artist, songTitle) { 59 | const response = await fetch(`${apiURL}/v1/${artist}/${songTitle}`); 60 | const data = await response.json(); 61 | 62 | const lyrics = data.lyrics.replace(/(\r\n|\r|\n)/g, '
'); 63 | 64 | result.innerHTML = `

${artist} - ${songTitle}

65 |

${lyrics}

`; 66 | 67 | } -------------------------------------------------------------------------------- /4. LyricsApp/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); 2 | 3 | 4 | :root { 5 | --white: #fff; 6 | --black: #1c2b2d; 7 | --blue: #31326f; 8 | --color-primary: #9d0191; 9 | --color-sec: #db6400; 10 | --color-grey: #eee; 11 | --color-dark-grey: #222831; 12 | } 13 | 14 | * { 15 | margin: 0; 16 | padding: 0; 17 | box-sizing: border-box; 18 | } 19 | 20 | html { 21 | font-size: 10px; 22 | margin: 0 auto; 23 | } 24 | 25 | body { 26 | font-family: 'Open Sans', sans-serif; 27 | background: url(./images/mysic.jpg) no-repeat center; 28 | background-size: cover; 29 | background-attachment: fixed; 30 | height: 100vh; 31 | position: relative; 32 | } 33 | 34 | body::after { 35 | content: ""; 36 | position: fixed; 37 | top: 0; 38 | left: 50%; 39 | height: 100%; 40 | width: 900px; 41 | background: rgba(0,0,0,.6); 42 | background-attachment: fixed; 43 | z-index: -1; 44 | transform: translateX(-50%); 45 | 46 | } 47 | 48 | /* UTILITY */ 49 | .p-small { 50 | padding-bottom: 5px; 51 | } 52 | .p-medium { 53 | padding-bottom: 10px; 54 | } 55 | .p-y { 56 | padding: 10px 0; 57 | } 58 | .m-y { 59 | margin: 10px 0; 60 | } 61 | 62 | p { 63 | font-size: 1.6rem; 64 | line-height: 1.5; 65 | } 66 | 67 | img { 68 | width: 100%; 69 | } 70 | 71 | .container { 72 | max-width: 800px; 73 | margin: 0 auto; 74 | padding: 0 20px; 75 | } 76 | 77 | header .container{ 78 | padding: 4rem 0; 79 | text-align: center; 80 | background-color: var(--color-sec); 81 | border-radius: 0 0 5rem 5rem; 82 | margin-bottom: 2rem; 83 | } 84 | 85 | header h1 { 86 | font-size: 3rem; 87 | color: #fff; 88 | padding-bottom: 1rem; 89 | } 90 | 91 | form input, 92 | form button { 93 | outline: none; 94 | border: none; 95 | padding: 1rem; 96 | font-size: 1.6rem; 97 | font-family: inherit; 98 | } 99 | form input { 100 | width: 50%; 101 | border-radius: 1rem 0 1rem 0; 102 | margin-right: 3px; 103 | border-bottom: 3px solid var(--color-primary); 104 | } 105 | 106 | form button { 107 | background-color: var(--color-primary); 108 | color: #fff; 109 | border: 1px solid transparent; 110 | border-radius: 3px; 111 | font-weight: 700; 112 | cursor: pointer; 113 | transition: all .3s; 114 | } 115 | 116 | form button:hover { 117 | border: 1px solid #fff; 118 | } 119 | 120 | section .container { 121 | display: block; 122 | margin: 0 auto; 123 | text-align: center; 124 | color: #fff; 125 | padding: 3rem 0; 126 | } 127 | 128 | .songs { 129 | width: 70%; 130 | list-style: none; 131 | margin:0 auto; 132 | padding: 2rem 0; 133 | } 134 | 135 | .songs li { 136 | font-size: 1.4rem; 137 | text-align: center; 138 | display: flex; 139 | justify-content: center; 140 | align-items: center; 141 | padding: 5px 0; 142 | border-bottom: 1px solid #eee; 143 | } 144 | 145 | .songs li span{ 146 | font-size: 1.4rem; 147 | background-color: var(--color-primary); 148 | padding: 5px; 149 | margin: 5px; 150 | outline: none; 151 | border-radius: 5px; 152 | cursor: pointer; 153 | } 154 | 155 | 156 | -------------------------------------------------------------------------------- /5. InternetConnectionDetector/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5502 3 | } -------------------------------------------------------------------------------- /5. InternetConnectionDetector/images/offline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/5. InternetConnectionDetector/images/offline.png -------------------------------------------------------------------------------- /5. InternetConnectionDetector/images/online.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/5. InternetConnectionDetector/images/online.png -------------------------------------------------------------------------------- /5. InternetConnectionDetector/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |

12 |

13 | 14 |

Internet Connection Status

15 |

Pending

16 |

17 |

18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /5. InternetConnectionDetector/script.js: -------------------------------------------------------------------------------- 1 | const image = document.getElementById("image"); 2 | const statusDisplay = document.getElementById("status"); 3 | const bgColor = document.getElementById("main"); 4 | 5 | function setColor() { 6 | bgColor.classList.add("online"); 7 | } 8 | 9 | async function connectionStatus() { 10 | try { 11 | const fetchResult = await fetch('https://upload.wikimedia.org/wikipedia/en/thumb/7/7d/Lenna_%28test_image%29.png/440px-Lenna_%28test_image%29.png?time=' + (new Date()).getTime()); 12 | image.src = "./images/online.png"; 13 | setColor(); 14 | return fetchResult.status >= 200 && fetchResult.status < 300; 15 | } catch (error) { 16 | console.error(error); 17 | statusDisplay.textContent = "OOPS!!! Your Internet Connection is Down."; 18 | image.src = "./images/offline.png"; 19 | bgColor.classList.remove("online"); 20 | } 21 | } 22 | 23 | 24 | // Monitor the connection 25 | setInterval(async () => { 26 | const result = await connectionStatus(); 27 | if ( result ) { 28 | statusDisplay.textContent = "You're ONLINE!!! Connection looks good."; 29 | setColor(); 30 | } 31 | }, 5000); 32 | 33 | // Check Connection When Page Loads 34 | window.addEventListener("load", async (event) => { 35 | if ( connectionStatus() ) { 36 | statusDisplay.textContent = "Online" 37 | } else { 38 | statusDisplay.textContent = "OFFline" 39 | } 40 | }); 41 | -------------------------------------------------------------------------------- /5. InternetConnectionDetector/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); 2 | 3 | 4 | :root { 5 | --white: #fff; 6 | --black: #1c2b2d; 7 | --blue: #31326f; 8 | --light-blue: #005490; 9 | --color-primary: #9d0191; 10 | --color-sec: #db6400; 11 | --color-grey: #eee; 12 | --color-dark-grey: #222831; 13 | } 14 | 15 | * { 16 | margin: 0; 17 | padding: 0; 18 | box-sizing: border-box; 19 | } 20 | 21 | body { 22 | font-family: 'Open Sans', sans-serif; 23 | } 24 | 25 | /* UTILITY */ 26 | .p-small { 27 | padding-bottom: 5px; 28 | } 29 | .p-medium { 30 | padding-bottom: 10px; 31 | } 32 | .p-y { 33 | padding: 10px 0; 34 | } 35 | .m-y { 36 | margin: 10px 0; 37 | } 38 | 39 | p { 40 | font-size: 1.6rem; 41 | line-height: 1.5; 42 | } 43 | 44 | img { 45 | width: 100%; 46 | } 47 | 48 | .container { 49 | max-width: 1000px; 50 | margin: 0 auto; 51 | padding: 0 20px; 52 | } 53 | 54 | section { 55 | background-color: var(--black); 56 | height: 100vh; 57 | display: flex; 58 | justify-content: center; 59 | align-items: center; 60 | text-align: center; 61 | } 62 | 63 | .online { 64 | background-color: var(--light-blue); 65 | } 66 | 67 | section img { 68 | width: 25%; 69 | border-radius: 10rem; 70 | 71 | } 72 | 73 | section h1 { 74 | color: #fff; 75 | font-size: 3.5rem; 76 | font-weight: 600; 77 | } 78 | 79 | section p { 80 | color: #fff; 81 | font-size: 2rem; 82 | } 83 | 84 | -------------------------------------------------------------------------------- /5. InternetConnectionDetector/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |

12 |

13 | 14 |

Internet Connection Status

15 |

Pending

16 |

17 |

18 | 19 | 20 | 36 | 37 | -------------------------------------------------------------------------------- /6. Product Slider/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/6. Product Slider/images/1.png -------------------------------------------------------------------------------- /6. Product Slider/images/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/6. Product Slider/images/10.png -------------------------------------------------------------------------------- /6. Product Slider/images/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/6. Product Slider/images/11.png -------------------------------------------------------------------------------- /6. Product Slider/images/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/6. Product Slider/images/12.png -------------------------------------------------------------------------------- /6. Product Slider/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/6. Product Slider/images/2.png -------------------------------------------------------------------------------- /6. Product Slider/images/250.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/6. Product Slider/images/250.jpg -------------------------------------------------------------------------------- /6. Product Slider/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/6. Product Slider/images/3.png -------------------------------------------------------------------------------- /6. Product Slider/images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/6. Product Slider/images/4.png -------------------------------------------------------------------------------- /6. Product Slider/images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/6. Product Slider/images/5.png -------------------------------------------------------------------------------- /6. Product Slider/images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/6. Product Slider/images/6.png -------------------------------------------------------------------------------- /6. Product Slider/images/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/6. Product Slider/images/7.png -------------------------------------------------------------------------------- /6. Product Slider/images/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/6. Product Slider/images/8.png -------------------------------------------------------------------------------- /6. Product Slider/images/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/6. Product Slider/images/9.png -------------------------------------------------------------------------------- /6. Product Slider/images/arrow-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/6. Product Slider/images/arrow-left.png -------------------------------------------------------------------------------- /6. Product Slider/images/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/6. Product Slider/images/arrow-right.png -------------------------------------------------------------------------------- /6. Product Slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |

Product Slider

12 |

13 |

14 |

15 |

16 | 17 |

18 |

19 |

20 |

Demo Product

21 |

$39.99 $29.99

22 | Add to Cart 23 |

24 |

25 |

26 |

27 |

28 |

Demo Product

29 |

$39.99 $29.99

30 | Add to Cart 31 |

32 |

33 |

34 |

35 |

36 |

Demo Product

37 |

$39.99 $29.99

38 | Add to Cart 39 |

40 |

41 |

42 |

43 |

44 |

Demo Product

45 |

$39.99 $29.99

46 | Add to Cart 47 |

48 |

49 |

50 |

51 |

52 |

Demo Product

53 |

$39.99 $29.99

54 | Add to Cart 55 |

56 |

57 |

58 |

59 |

60 |

Demo Product

61 |

$39.99 $29.99

62 | Add to Cart 63 |

64 |

65 |

66 |

67 |

68 |

Demo Product

69 |

$39.99 $29.99

70 | Add to Cart 71 |

72 |

73 |

74 |

75 |

76 |

Demo Product

77 |

$39.99 $29.99

78 | Add to Cart 79 |

80 |

81 |

82 |

83 |

84 |

Demo Product

85 |

$39.99 $29.99

86 | Add to Cart 87 |

88 |

89 |

90 |

91 |

92 |

Demo Product

93 |

$39.99 $29.99

94 | Add to Cart 95 |

96 |

97 |

98 |

99 |

100 |

Demo Product

101 |

$39.99 $29.99

102 | Add to Cart 103 |

104 |

105 |

106 |

107 |

108 |

109 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /6. Product Slider/script.js: -------------------------------------------------------------------------------- 1 | let thumbnails = document.getElementsByClassName('thumbnail'); 2 | let slider = document.getElementById('slider'); 3 | 4 | let buttonRight = document.getElementById('slide-right'); 5 | let buttonLeft = document.getElementById('slide-left'); 6 | 7 | buttonLeft.addEventListener('click', function(){ 8 | slider.scrollLeft -= 125; 9 | }) 10 | 11 | buttonRight.addEventListener('click', function(){ 12 | slider.scrollLeft += 125; 13 | }) 14 | 15 | const maxScrollLeft = slider.scrollWidth - slider.clientWidth; 16 | // alert(maxScrollLeft); 17 | // alert("Left Scroll:" + slider.scrollLeft); 18 | 19 | //AUTO PLAY THE SLIDER 20 | function autoPlay() { 21 | if (slider.scrollLeft > (maxScrollLeft - 1)) { 22 | slider.scrollLeft -= maxScrollLeft; 23 | } else { 24 | slider.scrollLeft += 1; 25 | } 26 | } 27 | let play = setInterval(autoPlay, 50); 28 | 29 | // PAUSE THE SLIDE ON HOVER 30 | for (var i=0; i < thumbnails.length; i++){ 31 | 32 | thumbnails[i].addEventListener('mouseover', function() { 33 | clearInterval(play); 34 | }); 35 | 36 | thumbnails[i].addEventListener('mouseout', function() { 37 | return play = setInterval(autoPlay, 50); 38 | }); 39 | } 40 | -------------------------------------------------------------------------------- /6. Product Slider/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); 2 | 3 | 4 | :root { 5 | --white: #fff; 6 | --black: #1c2b2d; 7 | --blue: #31326f; 8 | --color-primary: #9d0191; 9 | --color-sec: #db6400; 10 | --color-grey: #eee; 11 | --color-dark-grey: #222831; 12 | } 13 | 14 | * { 15 | margin: 0; 16 | padding: 0; 17 | box-sizing: border-box; 18 | } 19 | 20 | body { 21 | font-family: 'Open Sans', sans-serif; 22 | padding-top: 3rem; 23 | } 24 | 25 | /* UTILITY */ 26 | .p-small { 27 | padding-bottom: 5px; 28 | } 29 | .p-medium { 30 | padding-bottom: 10px; 31 | } 32 | .p-y { 33 | padding: 10px 0; 34 | } 35 | .m-y { 36 | margin: 10px 0; 37 | } 38 | 39 | p { 40 | font-size: 1.6rem; 41 | line-height: 1.5; 42 | } 43 | 44 | img { 45 | /* width: 100%; */ 46 | } 47 | 48 | .container { 49 | max-width: 1200px; 50 | margin: 0 auto; 51 | /* padding: 0 20px; */ 52 | } 53 | 54 | h1 { 55 | font-size: 3rem; 56 | line-height: 2; 57 | text-align: center; 58 | color: var(--color-primary); 59 | } 60 | 61 | main { 62 | 63 | background-color: #f4f4f4; 64 | padding: 4rem 0; 65 | 66 | } 67 | 68 | .slide-container { 69 | max-width: 1000px; 70 | display: flex; 71 | justify-content: center; 72 | align-items: center; 73 | margin: 0 auto; 74 | } 75 | 76 | .arrow { 77 | width: 2rem; 78 | margin: 0 1rem; 79 | } 80 | 81 | section { 82 | width: 100%; 83 | /* height: 300px; */ 84 | margin: 0 auto; 85 | display: flex; 86 | justify-content: flex-start; 87 | align-items: center; 88 | flex-wrap: nowrap; 89 | overflow-x: auto; 90 | -webkit-overflow-scrolling: touch; 91 | /* border: 1px solid black; */ 92 | } 93 | 94 | section::-webkit-scrollbar { 95 | height: 5px; 96 | width: 2px; 97 | border: 1px solid #d5d5d5; 98 | background: #d5d5d5; 99 | } 100 | 101 | section::-webkit-scrollbar-track { 102 | --webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 103 | } 104 | 105 | section::-webkit-scrollbar-thumb { 106 | background-color: var(--color-primary); 107 | outline: 1px solid #eee; 108 | /* border-radius: 100px; */ 109 | } 110 | 111 | section .thumbnail { 112 | flex: 0 0 auto; 113 | object-fit: cover; 114 | cursor: pointer; 115 | margin: 5px; 116 | border: 1px solid var(--black); 117 | overflow: hidden; 118 | transform: scale(.95); 119 | transition: all .3s; 120 | } 121 | 122 | section .thumbnail:hover { 123 | transform: scale(1); 124 | } 125 | 126 | .product-details { 127 | text-align: center; 128 | padding-bottom: 1rem; 129 | background-color: #fff; 130 | } 131 | 132 | .product-details h2 { 133 | font-size: 1.2rem; 134 | font-weight: 500; 135 | } 136 | 137 | .product-details p { 138 | font-size: 1rem; 139 | padding-bottom: 1rem; 140 | color: green; 141 | font-weight: 700; 142 | } 143 | 144 | .product-details p span { 145 | text-decoration: line-through; 146 | color: red; 147 | font-weight: normal; 148 | } 149 | 150 | .product-details a { 151 | font-size: 1rem; 152 | text-decoration: none; 153 | background-color: var(--color-sec); 154 | color: #fff; 155 | padding: .5rem 1rem; 156 | border-radius: 3px; 157 | } 158 | 159 | .product-details a:hover { 160 | background-color: var(--color-primary); 161 | } 162 | 163 | -------------------------------------------------------------------------------- /7. Product Filter/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5502 3 | } -------------------------------------------------------------------------------- /7. Product Filter/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/7. Product Filter/images/1.png -------------------------------------------------------------------------------- /7. Product Filter/images/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/7. Product Filter/images/10.png -------------------------------------------------------------------------------- /7. Product Filter/images/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/7. Product Filter/images/11.png -------------------------------------------------------------------------------- /7. Product Filter/images/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/7. Product Filter/images/12.png -------------------------------------------------------------------------------- /7. Product Filter/images/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/7. Product Filter/images/13.png -------------------------------------------------------------------------------- /7. Product Filter/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/7. Product Filter/images/2.png -------------------------------------------------------------------------------- /7. Product Filter/images/250.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/7. Product Filter/images/250.jpg -------------------------------------------------------------------------------- /7. Product Filter/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/7. Product Filter/images/3.png -------------------------------------------------------------------------------- /7. Product Filter/images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/7. Product Filter/images/4.png -------------------------------------------------------------------------------- /7. Product Filter/images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/7. Product Filter/images/5.png -------------------------------------------------------------------------------- /7. Product Filter/images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/7. Product Filter/images/6.png -------------------------------------------------------------------------------- /7. Product Filter/images/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/7. Product Filter/images/7.png -------------------------------------------------------------------------------- /7. Product Filter/images/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/7. Product Filter/images/8.png -------------------------------------------------------------------------------- /7. Product Filter/images/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zinotrust/10JavaScriptProjects/69aa0e05b6daae3757346fda1f4a26703c9a4541/7. Product Filter/images/9.png -------------------------------------------------------------------------------- /7. Product Filter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |

12 |

13 |

Product Filter

14 | 15 | 21 | 28 |

29 |

30 | 31 |

32 |

33 |

34 | 35 |

36 |

37 |

38 |

Watch Product

39 |

$39.99 $29.99

40 | Add to Cart 41 |

42 |

43 |

44 |

45 |

46 |

Watch Product

47 |

$39.99 $29.99

48 | Add to Cart 49 |

50 |

51 |

52 |

53 |

54 |

Watch Product

55 |

$39.99 $29.99

56 | Add to Cart 57 |

58 |

59 |

60 |

61 |

62 |

Shirt Product

63 |

$39.99 $29.99

64 | Add to Cart 65 |

66 |

67 |

68 |

69 |

70 |

Shirt Product

71 |

$39.99 $29.99

72 | Add to Cart 73 |

74 |

75 |

76 |

77 |

78 |

Shirt Product

79 |

$39.99 $29.99

80 | Add to Cart 81 |

82 |

83 |

84 |

85 |

86 |

Gown Product

87 |

$39.99 $29.99

88 | Add to Cart 89 |

90 |

91 |

92 |

93 |

94 |

Shirt Product

95 |

$39.99 $29.99

96 | Add to Cart 97 |

98 |

99 |

100 |

101 |

102 |

Shirt Product

103 |

$39.99 $29.99

104 | Add to Cart 105 |

106 |

107 |

108 |

109 |

110 |

Jewelry Product

111 |

$39.99 $29.99

112 | Add to Cart 113 |

114 |

115 |

116 |

117 |

118 |

Jewelry Product

119 |

$39.99 $29.99

120 | Add to Cart 121 |

122 |

123 |

124 |

125 |

126 |

Jewelry Product

127 |

$39.99 $29.99

128 | Add to Cart 129 |

130 |

131 |

132 |

133 |

134 | 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /7. Product Filter/script.js: -------------------------------------------------------------------------------- 1 | const btns = document.querySelectorAll('.btn'); 2 | const storeProducts = document.querySelectorAll('.store-product'); 3 | // const search = document.getElementById(search); 4 | 5 | for (i = 0; i < btns.length; i++) { 6 | 7 | btns[i].addEventListener('click', (e) => { 8 | e.preventDefault() 9 | 10 | const filter = e.target.dataset.filter; 11 | console.log(filter); 12 | 13 | storeProducts.forEach((product)=> { 14 | if (filter === 'all'){ 15 | product.style.display = 'block' 16 | } else { 17 | if (product.classList.contains(filter)){ 18 | product.style.display = 'block' 19 | } else { 20 | product.style.display = 'none' 21 | } 22 | } 23 | }); 24 | }); 25 | }; 26 | 27 | // SEARCH FILTER 28 | const search = document.getElementById("search"); 29 | const productName = document.querySelectorAll(".product-details h2"); 30 | 31 | // A BETTER WAY TO FILTER THROUGH THE PRODUCTS 32 | search.addEventListener("keyup", filterProducts); 33 | 34 | 35 | function filterProducts(e) { 36 | const text = e.target.value.toLowerCase(); 37 | // console.log(productName[0]); 38 | productName.forEach(function(product) { 39 | const item = product.firstChild.textContent; 40 | if (item.toLowerCase().indexOf(text) != -1) { 41 | product.parentElement.parentElement.style.display = "block" 42 | } else { 43 | product.parentElement.parentElement.style.display = "none" 44 | } 45 | }) 46 | } 47 | 48 | 49 | 50 | // This code has been replaced by the function(filterProducts) above which does a better job 51 | 52 | // search.addEventListener("keyup", (e) => { 53 | // e.preventDefault(); 54 | // const searchValue = search.value.toLowerCase().trim(); 55 | // // alert(search.value); 56 | 57 | 58 | // for (i = 0; i < storeProducts.length; i++) { 59 | // if (storeProducts[i].classList.contains(searchValue)) { 60 | // storeProducts[i].style.display = 'block'; 61 | // } else if (searchValue == "") { 62 | // storeProducts[i].style.display = 'block'; 63 | // } else { 64 | // storeProducts[i].style.display = 'none'; 65 | // } 66 | 67 | // // if (searchValue == "") { 68 | // // storeProducts[i].style.display = 'block'; 69 | // // } 70 | 71 | // } 72 | 73 | // }) 74 | 75 | 76 | -------------------------------------------------------------------------------- /7. Product Filter/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); 2 | 3 | 4 | :root { 5 | --white: #fff; 6 | --black: #1c2b2d; 7 | --blue: #31326f; 8 | --color-primary: #9d0191; 9 | --color-sec: #db6400; 10 | --color-grey: #eee; 11 | --color-dark-grey: #222831; 12 | } 13 | 14 | * { 15 | margin: 0; 16 | padding: 0; 17 | box-sizing: border-box; 18 | } 19 | 20 | body { 21 | font-family: 'Open Sans', sans-serif; 22 | } 23 | 24 | /* UTILITY */ 25 | .p-small { 26 | padding-bottom: 5px; 27 | } 28 | .p-medium { 29 | padding-bottom: 10px; 30 | } 31 | .p-y { 32 | padding: 10px 0; 33 | } 34 | .m-y { 35 | margin: 10px 0; 36 | } 37 | 38 | p { 39 | font-size: 1.6rem; 40 | line-height: 1.5; 41 | } 42 | 43 | img { 44 | /* width: 100%; */ 45 | } 46 | 47 | .container { 48 | max-width: 1200px; 49 | margin: 0 auto; 50 | padding: 0 20px; 51 | } 52 | 53 | header { 54 | background-color: #eee; 55 | padding: 1rem; 56 | } 57 | header h1 { 58 | font-size: 2.5rem; 59 | line-height: 2; 60 | color: var(--color-primary); 61 | } 62 | 63 | form input { 64 | width: 20rem; 65 | padding: .7rem; 66 | border: none; 67 | border-radius: 5px; 68 | outline: none; 69 | font-size: 1rem; 70 | border-bottom: 2px solid var(--color-sec); 71 | margin-bottom: 1rem; 72 | } 73 | 74 | .btn { 75 | font-size: 1rem; 76 | text-decoration: none; 77 | color: #fff; 78 | margin-right: 1rem; 79 | background-color: var(--color-sec); 80 | padding: 5px; 81 | border-radius: 3px; 82 | } 83 | 84 | .active { 85 | background-color: var(--color-primary); 86 | } 87 | 88 | #store-products { 89 | display: grid; 90 | grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); 91 | column-gap: 2rem; 92 | row-gap: 2rem; 93 | padding: 2rem 0; 94 | } 95 | 96 | .store-product { 97 | border: 1px solid #eee; 98 | border-radius: 3px; 99 | max-width: 250px; 100 | } 101 | 102 | .product-details { 103 | text-align: center; 104 | padding-bottom: 1rem; 105 | background-color: #eee; 106 | } 107 | 108 | .product-details h2 { 109 | font-size: 1.2rem; 110 | font-weight: 500; 111 | } 112 | 113 | .product-details p { 114 | font-size: 1rem; 115 | padding-bottom: 1rem; 116 | color: green; 117 | font-weight: 700; 118 | } 119 | 120 | .product-details p span { 121 | text-decoration: line-through; 122 | color: red; 123 | font-weight: normal; 124 | } 125 | 126 | .product-details a { 127 | font-size: 1rem; 128 | text-decoration: none; 129 | background-color: var(--color-sec); 130 | color: #fff; 131 | padding: .5rem 1rem; 132 | border-radius: 3px; 133 | } 134 | 135 | .product-details a:hover { 136 | background-color: var(--color-primary); 137 | } 138 | 139 | -------------------------------------------------------------------------------- /8. NotesApp/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5503 3 | } -------------------------------------------------------------------------------- /8. NotesApp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |

12 |

13 |

My Notes App

14 | 20 |

21 |

22 | 23 |

24 |

25 |

Your Notes

26 |

27 |

28 | 29 |

30 |

Note ${index + 1}

31 |

$element.title

32 |

$element.text

33 | 34 | 35 |

36 | 37 |

38 |

39 |

40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /8. NotesApp/script.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Add note to local storage 4 | let addBtn = document.getElementById("add-btn"); 5 | addBtn.addEventListener("click", function(e) { 6 | 7 | let addTitle = document.getElementById("note-title"); 8 | let addTxt = document.getElementById("note-text"); 9 | 10 | if (addTitle.value == "" || addTxt.value == "") { 11 | return alert("Please add Note Title and Details") 12 | } 13 | 14 | let notes = localStorage.getItem("notes"); 15 | if (notes == null) { 16 | notesObj = []; 17 | } else { 18 | notesObj = JSON.parse(notes); 19 | } 20 | let myObj = { 21 | title: addTitle.value, 22 | text: addTxt.value 23 | } 24 | notesObj.push(myObj); 25 | localStorage.setItem("notes", JSON.stringify(notesObj)); 26 | addTxt.value = ""; 27 | addTitle.value = ""; 28 | // console.log(notesObj); 29 | showNotes(); 30 | }); 31 | 32 | // Function to show elements from localStorage 33 | function showNotes() { 34 | let notes = localStorage.getItem("notes"); 35 | if (notes == null) { 36 | notesObj = []; 37 | } else { 38 | notesObj = JSON.parse(notes); 39 | } 40 | let html = ""; 41 | notesObj.forEach(function(element, index) { 42 | html += ` 43 |

44 |

Note ${index + 1}

45 |

${element.title}

46 |

${element.text}

47 | 48 | 49 |

50 | `; 51 | }); 52 | let notesElm = document.getElementById("notes"); 53 | if (notesObj.length != 0) { 54 | notesElm.innerHTML = html; 55 | } else { 56 | notesElm.innerHTML = `No Notes Yet! Add a note using the form above.`; 57 | } 58 | } 59 | 60 | // Function to delete a note 61 | function deleteNote(index) { 62 | // console.log("I am deleting", index); 63 | let confirmDel = confirm("Delete this note?"); 64 | if (confirmDel == true) { 65 | let notes = localStorage.getItem("notes"); 66 | if (notes == null) { 67 | notesObj = []; 68 | } else { 69 | notesObj = JSON.parse(notes); 70 | } 71 | 72 | notesObj.splice(index, 1); 73 | localStorage.setItem("notes", JSON.stringify(notesObj)); 74 | showNotes(); 75 | } 76 | 77 | } 78 | 79 | // Function to Edit the Note 80 | function editNote(index) { 81 | let notes = localStorage.getItem("notes"); 82 | let addTitle = document.getElementById("note-title"); 83 | let addTxt = document.getElementById("note-text"); 84 | 85 | if (addTitle.value !== "" || addTxt.value !== "") { 86 | return alert("Please clear the form before editing a note") 87 | } 88 | 89 | if (notes == null) { 90 | notesObj = []; 91 | } else { 92 | notesObj = JSON.parse(notes); 93 | } 94 | console.log(notesObj); 95 | 96 | notesObj.findIndex((element, index) => { 97 | addTitle.value = element.title; 98 | addTxt.value = element.text; 99 | }) 100 | notesObj.splice(index, 1); 101 | localStorage.setItem("notes", JSON.stringify(notesObj)); 102 | showNotes(); 103 | } 104 | 105 | 106 | showNotes(); -------------------------------------------------------------------------------- /8. NotesApp/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); 2 | 3 | 4 | :root { 5 | --white: #fff; 6 | --black: #1c2b2d; 7 | --blue: #31326f; 8 | --color-primary: #9d0191; 9 | --color-sec: #db6400; 10 | --color-grey: #eee; 11 | --color-dark-grey: #222831; 12 | } 13 | 14 | * { 15 | margin: 0; 16 | padding: 0; 17 | box-sizing: border-box; 18 | } 19 | 20 | body { 21 | font-family: 'Open Sans', sans-serif; 22 | background-color: #eee; 23 | } 24 | 25 | /* UTILITY */ 26 | .p-small { 27 | padding-bottom: 5px; 28 | } 29 | .p-medium { 30 | padding-bottom: 10px; 31 | } 32 | .p-y { 33 | padding: 10px 0; 34 | } 35 | .m-y { 36 | margin: 10px 0; 37 | } 38 | 39 | p { 40 | font-size: 1.6rem; 41 | line-height: 1.5; 42 | } 43 | 44 | img { 45 | width: 100%; 46 | } 47 | 48 | .container { 49 | max-width: 800px; 50 | margin: 0 auto; 51 | padding: 0 20px; 52 | } 53 | 54 | header h1 { 55 | font-size: 2.5rem; 56 | color: var(--color-primary); 57 | line-height: 2; 58 | } 59 | 60 | header form { 61 | display: flex; 62 | flex-direction: column; 63 | width: 30rem; 64 | } 65 | 66 | form > * { 67 | margin-bottom: 5px; 68 | outline: none; 69 | font-size: 1.2rem; 70 | padding: 7px; 71 | border: 1px solid #777; 72 | border-radius: 3px; 73 | } 74 | 75 | form textarea { 76 | padding: 7px 0 40px 5px; 77 | font-size: 1.2rem; 78 | font-family: inherit; 79 | } 80 | 81 | ::placeholder { 82 | font-size: 1rem; 83 | } 84 | 85 | form button { 86 | background-color: var(--color-sec); 87 | color: #fff; 88 | font-size: 1.2rem; 89 | font-weight: bold; 90 | border: none; 91 | cursor: pointer; 92 | transition: all .3s; 93 | } 94 | 95 | form button:hover { 96 | background-color: var(--color-primary); 97 | } 98 | 99 | .note { 100 | padding: 1rem; 101 | /* border: 1px solid #777; */ 102 | background-color: #fff; 103 | border-radius: 3px; 104 | margin: 1rem 0; 105 | 106 | } 107 | 108 | .note-counter, 109 | .note-text { 110 | font-size: 1.2rem; 111 | } 112 | 113 | .note-title { 114 | font-size: 1.5rem; 115 | color: var(--black); 116 | } 117 | 118 | .note-btn { 119 | padding: 7px; 120 | margin-top: 5px; 121 | font-size: 1rem; 122 | background-color: orangered; 123 | color: #fff; 124 | border: none; 125 | border-radius: 3px; 126 | outline: none; 127 | cursor: pointer; 128 | } 129 | 130 | .edit-btn { 131 | background-color: var(--color-primary); 132 | } -------------------------------------------------------------------------------- /9. ModalWithProgressBarAndCounter/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5503 3 | } -------------------------------------------------------------------------------- /9. ModalWithProgressBarAndCounter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |

12 |

Lets Minify!

13 |

Paste your URL below and Click the button

14 |

15 |

16 |

17 | 21 | 22 |

23 |

24 | 27 | 28 | 29 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /9. ModalWithProgressBarAndCounter/script.js: -------------------------------------------------------------------------------- 1 | const modal = document.getElementById("modal"); 2 | const input = document.getElementById("link"); 3 | const btn = document.getElementById("btn"); 4 | const close = document.getElementsByClassName("close")[0]; 5 | 6 | btn.addEventListener("click", openPopup); 7 | // close.addEventListener("click", closePopup); 8 | 9 | // When the user clicks on the button, open the modal 10 | function openPopup(e) { 11 | e.preventDefault(); 12 | console.log(input.value); 13 | modal.style.display = "block"; 14 | startCountdown(); 15 | } 16 | 17 | // When the user clicks on (x), close the modal 18 | function closePopup() { 19 | modal.style.display = "none"; 20 | } 21 | 22 | // When the user clicks anywhere outside of the modal, close it 23 | // window.onclick = function(event) { 24 | // if (event.target == modal) { 25 | // modal.style.display = "none"; 26 | // } 27 | // } 28 | 29 | // COUNTER FUNCTION 30 | let reverseCounter = 10; 31 | let progressBar = document.getElementById("pbar"); 32 | let counting = document.getElementById("counting"); 33 | 34 | function startCountdown(){ 35 | let downloadTimer = setInterval(function(){ 36 | progressBar.value = 10 - (--reverseCounter); 37 | if(reverseCounter <= -1) { 38 | clearInterval(downloadTimer); 39 | closePopup(); 40 | window.open(input.value, "_blank"); 41 | } 42 | counting.innerHTML= reverseCounter; 43 | 44 | },1000); 45 | let reverseCounter = 11; 46 | } -------------------------------------------------------------------------------- /9. ModalWithProgressBarAndCounter/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); 2 | 3 | 4 | :root { 5 | --white: #fff; 6 | --black: #1c2b2d; 7 | --blue: #005490; 8 | --color-primary: #9d0191; 9 | --color-sec: #db6400; 10 | --color-grey: #eee; 11 | --color-dark-grey: #222831; 12 | } 13 | 14 | * { 15 | margin: 0; 16 | padding: 0; 17 | box-sizing: border-box; 18 | } 19 | 20 | body { 21 | font-family: 'Open Sans', sans-serif; 22 | display: flex; 23 | flex-direction: column; 24 | justify-content: center; 25 | align-items: center; 26 | background-color: var(--blue); 27 | height: 100vh; 28 | } 29 | 30 | /* UTILITY */ 31 | .p-small { 32 | padding-bottom: 5px; 33 | } 34 | .p-medium { 35 | padding-bottom: 10px; 36 | } 37 | .p-y { 38 | padding: 10px 0; 39 | } 40 | .m-y { 41 | margin: 10px 0; 42 | } 43 | 44 | p { 45 | font-size: 1.6rem; 46 | line-height: 1.5; 47 | } 48 | 49 | img { 50 | width: 100%; 51 | } 52 | 53 | .container { 54 | max-width: 1200px; 55 | margin: 0 auto; 56 | padding: 0 20px; 57 | } 58 | 59 | header { 60 | text-align: center; 61 | color: #fff; 62 | padding-bottom: 3rem; 63 | } 64 | 65 | header h1 { 66 | font-size: 3.5rem; 67 | font-weight: 300; 68 | line-height: 1; 69 | } 70 | 71 | header h1 span { 72 | font-weight: 700; 73 | } 74 | 75 | header p { 76 | font-size: 1.4rem; 77 | } 78 | 79 | section .container { 80 | display: flex; 81 | justify-content: center; 82 | align-items: center; 83 | flex-direction: column; 84 | 85 | } 86 | 87 | form { 88 | padding-bottom: 1rem; 89 | } 90 | 91 | form input, 92 | form button { 93 | outline: none; 94 | border: none; 95 | border-radius: 3px; 96 | padding: .8rem; 97 | font-size: 1.2rem; 98 | font-family: inherit; 99 | 100 | } 101 | form input { 102 | width: 30rem; 103 | padding: .8rem; 104 | margin-right: 3px; 105 | border-bottom: 3px solid var(--color-primary); 106 | } 107 | 108 | form button { 109 | background-color:transparent; 110 | border: 1px solid #fff; 111 | color: #fff; 112 | cursor: pointer; 113 | transition: all .3s; 114 | } 115 | 116 | form button:hover { 117 | background-color: var(--color-sec); 118 | } 119 | 120 | footer p { 121 | font-size: 1.4rem; 122 | color: #fff; 123 | padding-top: 10rem; 124 | } 125 | 126 | footer a { 127 | color: var(--color-sec); 128 | text-decoration: none; 129 | } 130 | 131 | .modal { 132 | display: none; 133 | position: fixed; 134 | z-index: 1; 135 | left: 0; 136 | top: 0; 137 | width: 100%; 138 | height: 100%; 139 | overflow: auto; 140 | background-color: rgba(0,0,0,0.5); 141 | } 142 | 143 | .modal-content { 144 | background-color: #eee; 145 | margin: 15% auto; 146 | padding: 20px; 147 | border: 1px solid #777; 148 | border-radius: 3px; 149 | width: 30rem; 150 | position: relative; 151 | text-align: center; 152 | } 153 | 154 | .close { 155 | position: absolute; 156 | top: .5rem; 157 | right: 1rem; 158 | color: var(--color-primary); 159 | font-size: 2rem; 160 | 161 | } 162 | 163 | .close:hover, 164 | .close:focus { 165 | color: red; 166 | cursor: pointer; 167 | } 168 | 169 | .progress { 170 | width: 50%; 171 | height: 4px; 172 | background-color: #db6400; 173 | } 174 | 175 | .progress::-webkit-progress-value { 176 | background-color: #db6400; 177 | transition: width 1s ease; 178 | } 179 | 180 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 10JavaScriptProjects 2 | 3 | **Check out our 100 Days of JavaScript course aimed at helping beginners/intermediate level JavaScript developers sharpen their JavaScript skills** 4 | 5 | [100Days of JavaScript Course Link](https://www.udemy.com/course/100-days-of-javascript/?referralCode=9FB1A91BA3B143B2A261) 6 | 7 | ## YouTube Video Link for 10JavaScript Projects: https://www.youtube.com/watch?v=w0tEXBeQ2jQ&list=PLQfqQHJBFM1_aAfX64bIShV8k7QCqmHE5 8 | 9 | ## Master JavaScript By Building 10 Projects 10 | ## 1. Google Direct Download Link Generator ----------- Done 11 | ## 2. Weather App ------------------------------------- Done 12 | ## 3. Password Generator ------------------------------ Done 13 | ## 4. Music Lyrics App -------------------------------- Done 14 | ## 5. CountDown With Progress Bar --------------------- Done 15 | ## 6. Product Slider ---------------------------------- Done 16 | ## 7. Quiz App ---------------------------------------- Done 17 | ## 8. Notes App --------------------------------------- Done 18 | ## 9. Product Search/Filter App ---------------------- Done 19 | ## 10. InternetConnectionStatus ----------------------- Done 20 | --------------------------------------------------------------------------------

Instructions

Google Direct Download Link Generator

Google Drive link

Direct Download link

Audio Embed Link

Audio Embed link

Video/Doc Embed Link

Video/Document Embed link

Google Drive Hosted Files

Quiz Completed

Your scored: ${quiz.score} of ${quiz.questions.length}

JavaScript Quiz App

Quiz Completed

Your scored: ${quiz.score} of ${quiz.questions.length}

Password Generator

${artist} - ${songTitle}

Internet Connection Status

Internet Connection Status

Product Slider

Demo Product

Demo Product

Demo Product

Demo Product

Demo Product

Demo Product

Demo Product

Demo Product

Demo Product

Demo Product

Demo Product

Watch Product

Watch Product

Watch Product

Shirt Product

Shirt Product

Shirt Product

Gown Product

Shirt Product

Shirt Product

Jewelry Product

Jewelry Product

Jewelry Product

Your Notes

$element.title

${element.title}