├── JS PROJECTS └── PROJECT-1 Calculator App │ ├── Readme.md │ ├── index.html │ ├── ref-img.jpg │ ├── script.js │ └── style.css ├── PROJECT-2 Gradient backgound generator ├── Readme.md ├── index.html ├── ref-img.jpg ├── script.js └── styles.css ├── Project-10 Quizz App ├── Readme.md ├── dashboard.css ├── dashboard.html ├── gradient.jpg ├── index.html ├── script.js └── style.css ├── Project-3 Digital Clock ├── Readme.md ├── digitalClock.css ├── digitalClock.html ├── digitalClock.js └── ref-img.jpg ├── Project-4 Contact-form ├── Readme.md ├── contact.jpg ├── index.html ├── paper-plane-solid.svg ├── ref-img.jpg ├── script.js └── styles.css ├── Project-6 Stopwatch ├── Readme.md ├── index.html ├── ref-img.jpg ├── script.js └── styles.css ├── Project-7 Palindrome Checker ├── Readme.md ├── index.html ├── main.js ├── ref-img.jpg └── style.css ├── Project-8 Typing Speed Tester ├── Readme.md ├── index.html ├── ref-img.jpg ├── script.js └── style.css ├── Project-9 Drum Kit ├── Readme.md ├── background.jpg ├── index.html ├── script.js ├── sounds │ ├── boom.wav │ ├── clap.wav │ ├── hihat.wav │ ├── kick.wav │ ├── openhat.wav │ ├── ride.wav │ ├── snare.wav │ ├── tink.wav │ └── tom.wav └── style.css ├── README.md └── project-5 Tip-Calculator ├── Readme.md ├── index.html ├── main.js ├── ref-img.jpg └── styles.css /JS PROJECTS/PROJECT-1 Calculator App/Readme.md: -------------------------------------------------------------------------------- 1 | ## Created a basic calculator app from scratch taking a design as a reference 2 | 3 | ## 👀Project Link : https://js-projects-teal.vercel.app/ 4 | 5 | ## 🚀 Reference Image 6 | 7 | ![image](https://user-images.githubusercontent.com/84569241/182672439-eaab1f32-cb01-4380-a472-5e3a494f0a3e.png) 8 | 9 | ## ⚡ What I have created 10 | 11 | ![image](https://user-images.githubusercontent.com/84569241/182672511-29d547dd-b315-44c7-ae40-df703fde69f8.png) 12 | 13 | 14 | -------------------------------------------------------------------------------- /JS PROJECTS/PROJECT-1 Calculator App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Calculator App 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 |

17 |

18 |

19 | 20 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |

42 |

43 | 44 | 45 | -------------------------------------------------------------------------------- /JS PROJECTS/PROJECT-1 Calculator App/ref-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/JS PROJECTS/PROJECT-1 Calculator App/ref-img.jpg -------------------------------------------------------------------------------- /JS PROJECTS/PROJECT-1 Calculator App/script.js: -------------------------------------------------------------------------------- 1 | // Variables 2 | let currentInput = document.querySelector(".currentInput"); 3 | let answerScreen = document.querySelector(".answerScreen"); 4 | let buttons = document.querySelectorAll("button"); 5 | let erasebtn = document.querySelector("#erase"); 6 | let clearbtn = document.querySelector("#clear"); 7 | let evaluate = document.querySelector("#evaluate"); 8 | 9 | //Display 10 | let realTimeScreenValue = []; 11 | 12 | // To Clear 13 | 14 | clearbtn.addEventListener("click", () => { 15 | realTimeScreenValue = [""]; 16 | answerScreen.innerHTML = 0; 17 | currentInput.className = "currentInput"; 18 | answerScreen.className = "answerScreen"; 19 | answerScreen.style.color = " rgba(150, 150, 150, 0.87)"; 20 | }); 21 | 22 | // Get value of any button clicked and display to the screen 23 | 24 | buttons.forEach((btn) => { 25 | btn.addEventListener("click", () => { 26 | // when clicked button is not erased button 27 | if (!btn.id.match("erase")) { 28 | // To display value on btn press 29 | realTimeScreenValue.push(btn.value); 30 | currentInput.innerHTML = realTimeScreenValue.join(""); 31 | 32 | // To evaluate answer in real time 33 | if (btn.classList.contains("num_btn")) { 34 | answerScreen.innerHTML = eval(realTimeScreenValue.join("")); 35 | } 36 | } 37 | 38 | // When erase button is clicked 39 | if (btn.id.match("erase")) { 40 | realTimeScreenValue.pop(); 41 | currentInput.innerHTML = realTimeScreenValue.join(""); 42 | answerScreen.innerHTML = eval(realTimeScreenValue.join("")); 43 | } 44 | 45 | // When clicked button is evaluate button 46 | if (btn.id.match("evaluate")) { 47 | currentInput.className = "answerScreen"; 48 | answerScreen.className = "currentInput"; 49 | answerScreen.style.color = "white"; 50 | } 51 | 52 | // To prevent undefined error in screen 53 | if (typeof eval(realTimeScreenValue.join("")) == "undefined") { 54 | answerScreen.innerHTML = 0; 55 | } 56 | }); 57 | }); 58 | -------------------------------------------------------------------------------- /JS PROJECTS/PROJECT-1 Calculator App/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 3 | } 4 | 5 | body { 6 | background: rgb(238, 174, 202); 7 | background: radial-gradient( 8 | circle, 9 | rgba(238, 174, 202, 1) 0%, 10 | rgba(148, 187, 233, 1) 100% 11 | ); 12 | min-height: 90vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | .container { 19 | max-width: 300px; 20 | height: auto; 21 | display: flex; 22 | flex-direction: column; 23 | justify-content: center; 24 | align-items: center; 25 | padding: 25px 35px; 26 | border-radius: 10px; 27 | user-select: none; 28 | } 29 | button { 30 | background-image: linear-gradient(180deg, #adb5bd, transparent); 31 | opacity: 0.7; 32 | border: 1px solid #adb5bd; 33 | border-radius: 5px; 34 | color: #343a40; 35 | padding: 15px 32px; 36 | text-align: center; 37 | font-weight: bold; 38 | font-size: 22px; 39 | box-shadow: 0 6px 6px rgba(0, 0, 0, 0.5); 40 | } 41 | 42 | #Display-area { 43 | width: 100%; 44 | margin: 3vh 0; 45 | display: grid; 46 | grid-template-columns: 100%; 47 | grid-template-rows: repeat(2, minmax(40px, auto)); 48 | word-wrap: break-word; 49 | padding-bottom: 20px; 50 | border-bottom: 1px rgba(128, 128, 128, 0.116) solid; 51 | } 52 | 53 | #Display-area .currentInput { 54 | text-align: right; 55 | height: 5vh; 56 | color: white; 57 | font-size: xx-large; 58 | line-height: 1; 59 | word-wrap: break-word; 60 | } 61 | 62 | #Display-area .answerScreen { 63 | text-align: right; 64 | color: rgba(150, 150, 150, 0.87); 65 | height: 7px; 66 | line-height: 1; 67 | font-size: 30px; 68 | margin-bottom: 20px; 69 | } 70 | #Display-area { 71 | grid-column: 1 / -1; 72 | background-color: rgba(0, 0, 0, 0.6); 73 | display: flex; 74 | align-items: flex-end; 75 | justify-content: space-around; 76 | flex-direction: column; 77 | padding: 20px; 78 | border-radius: 5px; 79 | word-wrap: break-word; 80 | word-break: break-all; 81 | } 82 | .keypad-btns { 83 | display: grid; 84 | grid: repeat(5, 70px) / repeat(4, 70px); 85 | grid-row-gap: 20px; 86 | grid-column-gap: 20px; 87 | } 88 | 89 | .keypad-btns .fun_btn { 90 | color: #343a40; 91 | } 92 | 93 | .num_btn:hover, 94 | .fun_btn:hover { 95 | background-color: rgba(0, 0, 0, 0.75); 96 | font-weight: bold; 97 | font-size: 28px; 98 | color: white; 99 | } 100 | 101 | @media only screen and (max-width: 740px) { 102 | .container { 103 | min-height: 70vh; 104 | grid-template-columns: repeat(4, 70px); 105 | grid-template-rows: minmax(50px, auto) repeat(5, 70px); 106 | padding-top: 90px; 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /PROJECT-2 Gradient backgound generator/Readme.md: -------------------------------------------------------------------------------- 1 | # Gradient-Background-Generator 2 | 3 |

4 | 5 | ## Deployed Project link: https://project-2-ashen.vercel.app/ 6 | 7 |

8 | 9 | ## Reference Image 10 | ![image](https://user-images.githubusercontent.com/84569241/183081732-99fb454e-b8a0-47c1-a6eb-03f1ec4b3d2e.png) 11 | 12 |

13 | 14 | ## What I have created⚡ 15 | ![image](https://user-images.githubusercontent.com/84569241/183081468-a491cf0b-a025-41de-a207-c69e894cce77.png) 16 | -------------------------------------------------------------------------------- /PROJECT-2 Gradient backgound generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Gradient Background Generator 8 | 9 | 10 | 14 | 15 | 16 | 17 |

BACKGROUND GENERATOR

18 |

Select your favorite colors to apply gradient:

19 | 20 | 21 |

Or

22 |

23 | 24 |

Current CSS Background

25 |

26 | 27 |

28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /PROJECT-2 Gradient backgound generator/ref-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/PROJECT-2 Gradient backgound generator/ref-img.jpg -------------------------------------------------------------------------------- /PROJECT-2 Gradient backgound generator/script.js: -------------------------------------------------------------------------------- 1 | const css = document.querySelector("h3"); 2 | const color1 = document.querySelector(".color1"); 3 | const color2 = document.querySelector(".color2"); 4 | const random = document.querySelector(".random-button"); 5 | const body = document.getElementById("gradient"); 6 | 7 | function setGraident() { 8 | body.style.background = `linear-gradient(to right, ${color1.value}, ${color2.value})`; 9 | 10 | css.textContent = `${body.style.background};`; 11 | } 12 | 13 | // Function to get a random color 14 | function randomColor() { 15 | let color = "#"; 16 | for (let i = 0; i < 6; i++) { 17 | color += Math.floor(Math.random() * 10); 18 | } 19 | 20 | return color; 21 | } 22 | 23 | function setRandomColor() { 24 | color1.value = randomColor(); 25 | color2.value = randomColor(); 26 | setGraident(); 27 | } 28 | 29 | // calling function 30 | color1.addEventListener("input", setGraident); 31 | 32 | color2.addEventListener("input", setGraident); 33 | 34 | random.addEventListener("click", setRandomColor); 35 | 36 | //copying the code 37 | 38 | document.getElementById("copyButton").onclick = function () { 39 | navigator.clipboard 40 | .writeText(document.getElementById("copyText").innerText) 41 | .then(function () { 42 | alert("Code has been copied to clipboard"); 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /PROJECT-2 Gradient backgound generator/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | font-family: "Bangers", cursive; 4 | color: #fff; 5 | text-transform: none; 6 | top: 15%; 7 | background: linear-gradient(to right, #22007c, #a3cef1); 8 | padding-top: 20px; 9 | padding-left: 10px; 10 | letter-spacing: 0.5em; 11 | } 12 | h1 { 13 | background: -webkit-linear-gradient(#fff, #95d5b2); 14 | -webkit-background-clip: text; 15 | background-clip: text; 16 | -webkit-text-fill-color: transparent; 17 | font-size: 4em; 18 | letter-spacing: 0.3em; 19 | } 20 | 21 | h3 { 22 | color: rgba(0, 0, 0, 0.75); 23 | text-align: center; 24 | text-transform: none; 25 | letter-spacing: 0.01em; 26 | font-weight: bold; 27 | font-size: 1.8em; 28 | text-transform: lowercase; 29 | } 30 | 31 | .text { 32 | font-weight: 800; 33 | font-size: 35px; 34 | text-align: center; 35 | color: transparent; 36 | -webkit-background-clip: text; 37 | background-clip: text; 38 | background-size: 400%; 39 | animation: move 5s ease infinite; 40 | background-image: linear-gradient( 41 | 68.7deg, 42 | rgba(29, 173, 235, 1) 13.2%, 43 | rgba(137, 149, 250, 1) 29.8%, 44 | rgba(229, 109, 212, 1) 48.9%, 45 | rgba(255, 68, 128, 1) 68.2%, 46 | rgba(255, 94, 0, 1) 86.4% 47 | ); 48 | } 49 | 50 | @keyframes move { 51 | 0%, 52 | 100% { 53 | background-position: 200% 0%; 54 | } 55 | 56 | 50% { 57 | background-position: 0% 200%; 58 | } 59 | } 60 | .random-button, 61 | .copy-button { 62 | background-color: #b7e4c7; 63 | border: white; 64 | border-radius: 5px; 65 | color: rgba(0, 0, 0, 0.75); 66 | padding: 15px 12px; 67 | font-size: 15px; 68 | font-family: italic "Fira Sans", serif; 69 | } 70 | 71 | .random-button:hover, 72 | .copy-button:hover { 73 | background-color: rgba(0, 0, 0, 0.5); 74 | color: #fff; 75 | font-size: 18px; 76 | } 77 | 78 | .random { 79 | margin-top: 10px; 80 | } 81 | -------------------------------------------------------------------------------- /Project-10 Quizz App/Readme.md: -------------------------------------------------------------------------------- 1 | # Quiz App 2 | 3 | ## Deployed Project Link: https://quizmasters-dhrumishah.netlify.app/ 4 | 5 | ## Screenshot: 6 | 7 | ![image](https://user-images.githubusercontent.com/84569241/186726474-45d65277-1d42-4fbd-ab9b-074a7acc01fb.png) 8 | 9 | -------------------------------------------------------------------------------- /Project-10 Quizz App/dashboard.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "poppins", sans-serif; 3 | } 4 | :root { 5 | --hue-wrong: 0; 6 | --hue-correct: 145; 7 | } 8 | body { 9 | margin: 0; 10 | padding: 0; 11 | box-sizing: border-box; 12 | } 13 | body.correct { 14 | --hue: var(--hue-correct); 15 | } 16 | 17 | body.wrong { 18 | --hue: var(--hue-wrong); 19 | } 20 | 21 | .flex { 22 | display: flex; 23 | flex-direction: row; 24 | } 25 | .container-1 { 26 | width: 70%; 27 | height: 100vh; 28 | background-color: #14213d; 29 | text-align: right; 30 | color: #fff; 31 | } 32 | .container-2 { 33 | width: 30%; 34 | height: 100vh; 35 | background-image: url(gradient.jpg); 36 | opacity: 0.8; 37 | background-repeat: no-repeat; 38 | background-size: 900px; 39 | } 40 | .container { 41 | text-align: center; 42 | justify-content: center; 43 | padding-top: 250px; 44 | font-size: 2em; 45 | } 46 | .btn-grid { 47 | display: grid; 48 | grid-template-columns: repeat(2, auto); 49 | gap: 10px; 50 | margin: 20px 0; 51 | } 52 | .btn { 53 | font-size: 0.8em; 54 | margin-left: 80px; 55 | margin-right: 80px; 56 | border-radius: 5px; 57 | border: none; 58 | padding: 20px 30px; 59 | outline: none; 60 | background: #8338ec; 61 | color: #fff; 62 | box-shadow: 5px 5px 10px #560bad; 63 | } 64 | .controls { 65 | text-align: center; 66 | justify-content: center; 67 | margin-top: 330px; 68 | display: grid; 69 | grid-template-columns: repeat(2, auto); 70 | grid-gap: 8px; 71 | } 72 | .btn-2 { 73 | padding: 20px 60px; 74 | font-size: 1em; 75 | border-radius: 10px; 76 | border: none; 77 | background: #8338ec; 78 | color: #fff; 79 | box-shadow: 5px 5px 10px #560bad; 80 | } 81 | .btn:hover, 82 | .btn-2:hover { 83 | background: rgba(131, 56, 236, 0.7); 84 | } 85 | .btn.correct { 86 | background-color: #06d6a0; 87 | color: black; 88 | } 89 | 90 | .btn.wrong { 91 | background-color: #ef233c; 92 | } 93 | .hide { 94 | display: none; 95 | } 96 | -------------------------------------------------------------------------------- /Project-10 Quizz App/dashboard.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Dashboard 9 | 10 | 11 |

12 |

13 | 22 |

23 |

24 |

25 | 26 | 27 |

28 |

29 |

30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Project-10 Quizz App/gradient.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-10 Quizz App/gradient.jpg -------------------------------------------------------------------------------- /Project-10 Quizz App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | QuizMasters.com 15 | 16 | 17 |

18 |

19 | 20 |

QuizMasters

21 | 22 |

23 |

24 |

25 | 28 |

29 |

30 |

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Project-10 Quizz App/script.js: -------------------------------------------------------------------------------- 1 | const startButton = document.getElementById("start-btn"); 2 | const nextButton = document.getElementById("next-btn"); 3 | const questionContainerElement = document.getElementById("question-container"); 4 | const questionElement = document.getElementById("question"); 5 | const answerButtonsElement = document.getElementById("answer-buttons"); 6 | let shuffledQuestions, currentQuestionIndex; 7 | 8 | startButton.addEventListener("click", startGame); 9 | nextButton.addEventListener("click", () => { 10 | currentQuestionIndex++; 11 | setNextQuestion(); 12 | }); 13 | 14 | function startGame() { 15 | shuffledQuestions = questions.sort(() => Math.random() - 0.5); 16 | currentQuestionIndex = 0; 17 | questionContainerElement.classList.remove("hide"); 18 | setNextQuestion(); 19 | } 20 | function setNextQuestion() { 21 | resetState(); 22 | showQuestion(shuffledQuestions[currentQuestionIndex]); 23 | } 24 | function showQuestion(question) { 25 | questionElement.innerText = question.question; 26 | question.answers.forEach((answer) => { 27 | const button = document.createElement("button"); 28 | button.innerText = answer.text; 29 | button.classList.add("btn"); 30 | if (answer.correct) { 31 | button.dataset.correct = answer.correct; 32 | } 33 | button.addEventListener("click", selectAnswer); 34 | answerButtonsElement.appendChild(button); 35 | }); 36 | } 37 | function resetState() { 38 | clearStatusClass(document.body); 39 | while (answerButtonsElement.firstChild) { 40 | answerButtonsElement.removeChild(answerButtonsElement.firstChild); 41 | } 42 | } 43 | 44 | function selectAnswer(e) { 45 | const selectedButton = e.target; 46 | const correct = selectedButton.dataset.correct; 47 | setStatusClass(document.body, correct); 48 | Array.from(answerButtonsElement.children).forEach((button) => { 49 | setStatusClass(button, button.dataset.correct); 50 | }); 51 | if (shuffledQuestions.length > currentQuestionIndex + 1) { 52 | nextButton.classList.remove("hide"); 53 | } else { 54 | startButton.innerText = "Restart"; 55 | startButton.classList.remove("hide"); 56 | } 57 | } 58 | 59 | function setStatusClass(element, correct) { 60 | clearStatusClass(element); 61 | if (correct) { 62 | element.classList.add("correct"); 63 | } else { 64 | element.classList.add("wrong"); 65 | } 66 | } 67 | 68 | function clearStatusClass(element) { 69 | element.classList.remove("correct"); 70 | element.classList.remove("wrong"); 71 | } 72 | const questions = [ 73 | { 74 | question: "What is 2 + 2?", 75 | answers: [ 76 | { text: "4", correct: true }, 77 | { text: "22", correct: false }, 78 | { text: "8", correct: false }, 79 | { text: "44", correct: false }, 80 | ], 81 | }, 82 | { 83 | question: "Is javaScript easy?", 84 | answers: [ 85 | { text: "Yes", correct: false }, 86 | { text: "No", correct: false }, 87 | { text: "Idk", correct: true }, 88 | { text: "Hate it", correct: false }, 89 | ], 90 | }, 91 | { 92 | question: "Is web development fun?", 93 | answers: [ 94 | { text: "Kinda", correct: false }, 95 | { text: "YES!!!", correct: true }, 96 | { text: "Um no", correct: false }, 97 | { text: "IDK", correct: false }, 98 | ], 99 | }, 100 | { 101 | question: "What is 4 * 2?", 102 | answers: [ 103 | { text: "6", correct: false }, 104 | { text: "8", correct: true }, 105 | { text: "42", correct: false }, 106 | { text: "None", correct: false }, 107 | ], 108 | }, 109 | { 110 | question: "Which company developed JavaScript?", 111 | answers: [ 112 | { text: "Microsoft", correct: false }, 113 | { text: "Netspace", correct: true }, 114 | { text: "Google", correct: false }, 115 | { text: "Huddle", correct: false }, 116 | ], 117 | }, 118 | ]; 119 | -------------------------------------------------------------------------------- /Project-10 Quizz App/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "poppins", sans-serif; 3 | } 4 | body { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | .flex { 10 | display: flex; 11 | flex-direction: row; 12 | } 13 | .container-1 { 14 | width: 70%; 15 | height: 100vh; 16 | background-color: #14213d; 17 | text-align: right; 18 | color: #fff; 19 | } 20 | .heading { 21 | line-height: 7.5em; 22 | font-size: 5em; 23 | background: -webkit-linear-gradient(#d8b3d9, #4687d9); 24 | -webkit-background-clip: text; 25 | background-clip: text; 26 | -webkit-text-fill-color: transparent; 27 | letter-spacing: 0.1em; 28 | } 29 | .container-2 { 30 | width: 30%; 31 | height: 100vh; 32 | background-image: url(gradient.jpg); 33 | opacity: 0.8; 34 | background-repeat: no-repeat; 35 | background-size: 900px; 36 | } 37 | .btn { 38 | text-align: center; 39 | justify-content: center; 40 | margin-top: 330px; 41 | } 42 | .start-quiz { 43 | padding: 20px 35px; 44 | font-size: 1em; 45 | border-radius: 10px; 46 | border: none; 47 | background: #8338ec; 48 | color: #fff; 49 | box-shadow: 5px 5px 10px #560bad; 50 | } 51 | a { 52 | color: #fff; 53 | text-decoration: none; 54 | } 55 | .start-quiz:hover { 56 | background: rgba(131, 56, 236, 0.7); 57 | } 58 | -------------------------------------------------------------------------------- /Project-3 Digital Clock/Readme.md: -------------------------------------------------------------------------------- 1 | # Digital Clock ⌚ 2 | 3 | ## Reference Image 4 | 5 | ![image](https://user-images.githubusercontent.com/84569241/183282192-6af67d13-de17-4a16-86ed-2e2c95cd3cc4.png) 6 | 7 | ## What I have Created 8 | 9 | ![image](https://user-images.githubusercontent.com/84569241/183282205-3b7938f0-7100-4b19-9991-1948cf47be32.png) 10 | -------------------------------------------------------------------------------- /Project-3 Digital Clock/digitalClock.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | font-family: "Chakra Petch", sans-serif; 4 | } 5 | html, 6 | body { 7 | display: grid; 8 | height: 100%; 9 | place-items: center; 10 | background-color: #000; 11 | } 12 | .clock, 13 | .date { 14 | height: 300px; 15 | width: 1150px; 16 | background: linear-gradient( 17 | 135deg, 18 | #f1c0e8, 19 | #c77dff, 20 | #b6ccfe, 21 | #b9fbc0, 22 | #fbf8cc 23 | ); 24 | -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 225, 0.75); 25 | -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 225, 0.75); 26 | box-shadow: 0px 0px 15px 5px rgba(255, 255, 225, 0.75); 27 | border-radius: 15px; 28 | animation: animate 1.5s linear infinite; 29 | } 30 | .display, 31 | .layout { 32 | padding: 20px; 33 | border-radius: 15px; 34 | width: 950px; 35 | } 36 | .clock .display, 37 | .date .layout { 38 | position: absolute; 39 | top: 18%; 40 | left: 8%; 41 | background-color: #1b1b1b; 42 | z-index: 999; 43 | height: 140px; 44 | text-align: center; 45 | } 46 | .clock .display #time, 47 | .date .layout #period { 48 | line-height: 140px; 49 | color: #fff; 50 | font-size: 6em; 51 | letter-spacing: 0.1em; 52 | background: linear-gradient( 53 | 135deg, 54 | #f1c0e8, 55 | #c77dff, 56 | #b6ccfe, 57 | #b9fbc0, 58 | #fbf8cc 59 | ); 60 | -webkit-background-clip: text; 61 | background-clip: text; 62 | -webkit-text-fill-color: transparent; 63 | animation: animate 1.5s linear infinite; 64 | } 65 | 66 | @keyframes animate { 67 | 100% { 68 | filter: hue-rotate(360deg); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /Project-3 Digital Clock/digitalClock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | Digital Clock 15 | 16 | 17 |

18 |

19 |

20 |

21 |

22 |
23 |
24 |

25 |

26 |

27 |

28 |

29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Project-3 Digital Clock/digitalClock.js: -------------------------------------------------------------------------------- 1 | function startTime() { 2 | var today = new Date(); 3 | var hr = today.getHours(); 4 | var min = today.getMinutes(); 5 | var sec = today.getSeconds(); 6 | var session = "AM"; 7 | if (hr > 12) { 8 | session = "PM"; 9 | } 10 | 11 | hr = checkTime(hr); 12 | min = checkTime(min); 13 | sec = checkTime(sec); 14 | document.getElementById("time").innerHTML = 15 | hr + ":" + min + ":" + sec + " " + session; 16 | 17 | var months = [ 18 | "Jan", 19 | "Feb", 20 | "Mar", 21 | "April", 22 | "May", 23 | "June", 24 | "July", 25 | "Aug", 26 | "Sep", 27 | "Oct", 28 | "Nov", 29 | "Dec", 30 | ]; 31 | var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; 32 | var curWeekDay = days[today.getDay()]; 33 | var curDay = today.getDate(); 34 | var curMonth = months[today.getMonth()]; 35 | var curYear = today.getFullYear(); 36 | var date = curWeekDay + "," + curDay + "" + curMonth + " " + curYear; 37 | document.getElementById("period").innerHTML = date; 38 | 39 | var time = setTimeout(function () { 40 | startTime(); 41 | }, 500); 42 | } 43 | function checkTime(i) { 44 | if (i < 10) { 45 | i = "0" + i; 46 | } 47 | return i; 48 | } 49 | startTime(); 50 | -------------------------------------------------------------------------------- /Project-3 Digital Clock/ref-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-3 Digital Clock/ref-img.jpg -------------------------------------------------------------------------------- /Project-4 Contact-form/Readme.md: -------------------------------------------------------------------------------- 1 | # Contact-Form 2 | 3 | ## Reference image 4 | 5 | ![image](https://user-images.githubusercontent.com/84569241/183704140-c452a505-a081-443e-ac99-fc43d87a1460.png) 6 | 7 | ## What I created! 8 | 9 | ![image](https://user-images.githubusercontent.com/84569241/183704248-b79882aa-ae6e-4dc4-82af-57772a0b40c2.png) 10 | -------------------------------------------------------------------------------- /Project-4 Contact-form/contact.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-4 Contact-form/contact.jpg -------------------------------------------------------------------------------- /Project-4 Contact-form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | Contact form 15 | 16 | 17 |

18 | 56 |

57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /Project-4 Contact-form/paper-plane-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Project-4 Contact-form/ref-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-4 Contact-form/ref-img.jpg -------------------------------------------------------------------------------- /Project-4 Contact-form/script.js: -------------------------------------------------------------------------------- 1 | const send = document.getElementById("send"); 2 | const form = document.getElementById("form"); 3 | 4 | form.addEventListener("submit", function (e) { 5 | e.preventDefault(); 6 | }); 7 | 8 | send.addEventListener("click", function () { 9 | let name = document.getElementById("name"); 10 | let email = document.getElementById("email"); 11 | let message = document.getElementById("message"); 12 | 13 | name = name.value; 14 | localStorage.setItem("name", name); 15 | 16 | email = email.value; 17 | localStorage.setItem("email", email); 18 | 19 | message = message.value; 20 | localStorage.setItem("message", message); 21 | }); 22 | -------------------------------------------------------------------------------- /Project-4 Contact-form/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "Quicksand", sans-serif; 3 | } 4 | 5 | body { 6 | background: url(contact.jpg); 7 | background-repeat: no-repeat; 8 | background-size: cover; 9 | margin: 0; 10 | font-weight: 600; 11 | } 12 | #overlay { 13 | width: 100%; 14 | height: 100%; 15 | position: fixed; 16 | background: rgba(52, 58, 64, 0.7); 17 | } 18 | form { 19 | max-width: 550px; 20 | width: 90%; 21 | margin: 17vh auto 0 auto; 22 | background: #60493fff; 23 | padding: 30px; 24 | border-radius: 12px; 25 | box-sizing: border-box; 26 | color: #c0c0c0; 27 | font-weight: 600; 28 | font-size: 1em; 29 | } 30 | h1 { 31 | text-align: center; 32 | margin: 0; 33 | } 34 | label { 35 | display: block; 36 | margin: 20px 0; 37 | } 38 | input, 39 | textarea { 40 | width: 100%; 41 | padding: 10px; 42 | box-sizing: border-box; 43 | border: 3px solid #c0c0c0; 44 | border-radius: 10px; 45 | } 46 | input[placeholder], 47 | textarea[placeholder] { 48 | font-weight: 900; 49 | font-size: 1em; 50 | } 51 | button { 52 | padding: 10px 24px; 53 | background-color: #c0c0c0; 54 | border-radius: 10px; 55 | border: none; 56 | font-size: 1em; 57 | font-weight: 600; 58 | margin: 10px; 59 | margin-left: 150px; 60 | justify-content: center; 61 | } 62 | button:hover { 63 | background-color: #b2967d; 64 | padding: 13px 32px; 65 | } 66 | -------------------------------------------------------------------------------- /Project-6 Stopwatch/Readme.md: -------------------------------------------------------------------------------- 1 | # StopWatch 2 | 3 | ## Reference Image 4 | 5 | ![image](https://user-images.githubusercontent.com/84569241/184889322-41ec2702-f865-42b7-8933-02c07ffea2e2.png) 6 | 7 | ## What I created! 8 | 9 | ![image](https://user-images.githubusercontent.com/84569241/184889479-1313ef2c-9d20-4218-8671-0284f8206f1c.png) 10 | -------------------------------------------------------------------------------- /Project-6 Stopwatch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | Stopwatch 14 | 15 | 16 | 17 |

18 |

19 |

20 | 00:00:00 24 |

25 |

26 |

27 | 28 | 29 | 30 |

31 |

32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Project-6 Stopwatch/ref-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-6 Stopwatch/ref-img.jpg -------------------------------------------------------------------------------- /Project-6 Stopwatch/script.js: -------------------------------------------------------------------------------- 1 | let seconds = 00; 2 | let tens = 00; 3 | let mins = 00; 4 | let getSeconds = document.querySelector(".seconds"); 5 | let getTens = document.querySelector(".tens"); 6 | let getMins = document.querySelector(".mins"); 7 | let btnStart = document.querySelector(".btn-start"); 8 | let btnStop = document.querySelector(".btn-stop"); 9 | let btnReset = document.querySelector(".btn-reset"); 10 | let interval; 11 | 12 | btnStart.addEventListener("click", () => { 13 | clearInterval(interval); 14 | interval = setInterval(startTimer, 10); 15 | }); 16 | btnStop.addEventListener("click", () => { 17 | clearInterval(interval); 18 | }); 19 | btnReset.addEventListener("click", () => { 20 | clearInterval(interval); 21 | tens = "00"; 22 | seconds = "00"; 23 | mins = "00"; 24 | getSeconds.innerHTML = seconds; 25 | getTens.innerHTML = tens; 26 | getMins.innerHTML = mins; 27 | }); 28 | 29 | function startTimer() { 30 | tens++; 31 | if (tens <= 9) { 32 | getTens.innerHTML = "0" + tens; 33 | } 34 | if (tens > 9) { 35 | getTens.innerHTML = tens; 36 | } 37 | if (tens > 99) { 38 | seconds++; 39 | getSeconds.innerHTML = "0" + seconds; 40 | tens = 0; 41 | getTens.innerHTML = "0" + 0; 42 | } 43 | if (seconds > 9) { 44 | getSeconds.innerHTML = seconds; 45 | } 46 | if (seconds > 59) { 47 | mins++; 48 | getMins.innerHTML = "0" + mins; 49 | seconds = 0; 50 | getSeconds.innerHTML = "0" + 0; 51 | } 52 | if (mins > 9) { 53 | getSeconds.innerHTML = mins; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /Project-6 Stopwatch/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #212b31; 3 | } 4 | .container { 5 | align-items: center; 6 | display: flex; 7 | flex-direction: column; 8 | justify-content: center; 9 | padding-top: 8em; 10 | } 11 | .circle { 12 | height: 300px; 13 | width: 300px; 14 | background-color: #36454f; 15 | border-radius: 50%; 16 | display: inline-block; 17 | text-align: center; 18 | line-height: 2.5em; 19 | text-align: center; 20 | font-size: 3.5em; 21 | line-height: 180px; 22 | font-family: "poppins", sans-serif; 23 | color: #fff; 24 | animation-name: shine; 25 | animation-duration: 3s; 26 | animation-iteration-count: infinite; 27 | } 28 | .btn { 29 | padding-top: 4em; 30 | padding-left: 1.5em; 31 | } 32 | button { 33 | height: 40px; 34 | width: 80px; 35 | border-radius: 20%; 36 | font-size: 15px; 37 | font-family: "poppins", sans-serif; 38 | background-color: #36454f; 39 | border: none; 40 | color: #fff; 41 | opacity: 0.8; 42 | margin-right: 10px; 43 | transition: all 0.2s ease; 44 | } 45 | button:focus { 46 | border-color: #f6b400; 47 | color: #f6b400; 48 | box-shadow: 0px 4px 27px -12px #f6b400; 49 | } 50 | @keyframes shine { 51 | 0%, 52 | 100% { 53 | box-shadow: 0px 0px 43px -10px rgba(72, 202, 228, 0.5); 54 | } 55 | 50% { 56 | box-shadow: 0px 0px 43px 8px rgba(72, 202, 228, 0.5); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /Project-7 Palindrome Checker/Readme.md: -------------------------------------------------------------------------------- 1 | # Palindrome Checker 2 | 3 | ## Reference Image 4 | 5 | ![image](https://user-images.githubusercontent.com/84569241/185193577-258b4d87-6968-4308-9f81-4cb4d4e8a044.png) 6 | 7 | ## What I created! 8 | 9 | ![image](https://user-images.githubusercontent.com/84569241/185193798-cd3b57b5-a348-438d-9c2a-384d75429579.png) 10 | 11 | 12 | -------------------------------------------------------------------------------- /Project-7 Palindrome Checker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | Palindrome checker 15 | 16 | 17 |

Is your word a palindrome?

18 |

19 | 20 | 21 |

22 |

23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Project-7 Palindrome Checker/main.js: -------------------------------------------------------------------------------- 1 | let btn = document.getElementById("btn"); 2 | let inputText = document.getElementById("input-text"); 3 | let result = document.getElementById("result"); 4 | let i; 5 | 6 | btn.addEventListener("click", function () { 7 | let txt = inputText.value; 8 | checkPalindrome(txt); 9 | }); 10 | function checkPalindrome(txt) { 11 | let txt_new = txt.replace(/[^a-zA-z0-9]/g, "").toLowerCase(); 12 | let len = txt_new.length; 13 | let halfLen = Math.floor(len / 2); 14 | 15 | for (i = 0; i < halfLen; i++) { 16 | if (txt_new[i] !== txt_new[len - 1 - i]) { 17 | result.textContent = "Nope! It is not Palindrome"; 18 | return; 19 | } 20 | result.textContent = "Yes! It is Palindrome"; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Project-7 Palindrome Checker/ref-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-7 Palindrome Checker/ref-img.jpg -------------------------------------------------------------------------------- /Project-7 Palindrome Checker/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:after, 3 | *:before { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "poppins", sans-serif; 8 | } 9 | body { 10 | background-color: #dda15e; 11 | } 12 | h1 { 13 | text-align: center; 14 | padding-top: 1.5em; 15 | color: #faedcd; 16 | font-size: 3em; 17 | font-weight: 700; 18 | } 19 | .container { 20 | width: 50%; 21 | min-width: 450px; 22 | background-color: #faedcd; 23 | padding: 50px 30px; 24 | position: absolute; 25 | transform: translate(-50%, -50%); 26 | left: 50%; 27 | top: 50%; 28 | border-radius: 10px; 29 | box-shadow: 0 20px 25px rgba(0, 0, 0, 0.18); 30 | outline: none; 31 | } 32 | input { 33 | width: 50%; 34 | border: none; 35 | border-radius: 5px; 36 | padding: 10px 5px; 37 | font-weight: 500; 38 | } 39 | button { 40 | width: 25%; 41 | float: right; 42 | padding: 10px 20px; 43 | background-color: #dda15e; 44 | border-radius: 8px; 45 | border: none; 46 | font-weight: 400; 47 | color: #fff; 48 | } 49 | p { 50 | margin-top: 30px; 51 | text-align: center; 52 | color: #dda15e; 53 | font-weight: 600; 54 | font-size: 25px; 55 | } 56 | -------------------------------------------------------------------------------- /Project-8 Typing Speed Tester/Readme.md: -------------------------------------------------------------------------------- 1 | # Typing Speed Tester 2 | 3 | ## Deployed project link : https://clinquant-beignet-10ea73.netlify.app/ 4 | 5 | 6 | ## Reference Image 7 | 8 | ![image](https://user-images.githubusercontent.com/84569241/185552824-fa39e41e-e074-4dcb-a44d-c4b3e2491b7e.png) 9 | 10 | 11 | ## What I created! 12 | 13 | ![image](https://user-images.githubusercontent.com/84569241/185552776-fec8a916-30ea-443a-9929-1ce1dc8ab24f.png) 14 | -------------------------------------------------------------------------------- /Project-8 Typing Speed Tester/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | Typing Tester 13 | 14 | 15 |

16 |

17 |

Time:0s

18 |

Mistakes:0

19 |

20 |

25 | 30 | 31 | 32 |

33 |

Result

34 |

35 |

Accuracy:

36 |

Speed:

37 |

38 |

39 |

40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Project-8 Typing Speed Tester/ref-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-8 Typing Speed Tester/ref-img.jpg -------------------------------------------------------------------------------- /Project-8 Typing Speed Tester/script.js: -------------------------------------------------------------------------------- 1 | const quoteApiUrl = "https://api.quotable.io/random?minLength=80&maxLength=100"; 2 | const quoteSelection = document.getElementById("quote"); 3 | const userInput = document.getElementById("quote-input"); 4 | 5 | let quote = ""; 6 | let time = 60; 7 | let timer = ""; 8 | let mistakes = 0; 9 | 10 | //Display random quotes 11 | const randomNewQuote = async () => { 12 | //Fetching components from the url 13 | const response = await fetch(quoteApiUrl); 14 | 15 | //storing responses 16 | let data = await response.json(); 17 | 18 | //Accessing quotes 19 | quote = data.content; 20 | 21 | //Array of characters in quote 22 | let arr = quote.split("").map((value) => { 23 | //wrap the characters in a span tag 24 | return "" + value + ""; 25 | }); 26 | //join array for displaying 27 | quoteSelection.innerHTML += arr.join(""); 28 | }; 29 | 30 | //Logic for comparing input words with quote 31 | userInput.addEventListener("input", () => { 32 | let quoteChars = document.querySelectorAll(".quote-chars"); 33 | 34 | //create an array from recieved span tags 35 | quoteChars = Array.from(quoteChars); 36 | 37 | //Array of user input characters 38 | let userInputChars = userInput.value.split(""); 39 | 40 | //loop through each characterin quote 41 | 42 | quoteChars.forEach((char, index) => { 43 | if (char.innerText == userInputChars[index]) { 44 | char.classList.add("success"); 45 | } 46 | //If user hasnt entered anything or backspaced 47 | else if (userInputChars[index] == null) { 48 | //remove class if any 49 | if (char.classList.contains("success")) { 50 | char.classList.remove("success"); 51 | } else { 52 | char.classList.remove("fail"); 53 | } 54 | } 55 | //If user enters a wrong character 56 | else { 57 | if (!char.classList.contains("fail")) { 58 | //increment and display mistakes 59 | mistakes += 1; 60 | char.classList.add("fail"); 61 | } 62 | document.getElementById("mistakes").innerText = mistakes; 63 | } 64 | //returns true if all the characters are entered correctly 65 | let check = quoteChars.every((element) => { 66 | return element.classList.contains("success"); 67 | }); 68 | //End test if all charaters are correctly 69 | if (check) { 70 | displayResult(); 71 | } 72 | }); 73 | }); 74 | //Update timer 75 | function updateTimer() { 76 | if (time == 0) { 77 | //End test if timer reaches 0 78 | displayResult(); 79 | } else { 80 | document.getElementById("timer").innerText = --time + "s;"; 81 | } 82 | } 83 | //sets timer 84 | 85 | const timeReduce = () => { 86 | time = 60; 87 | timer = setInterval(updateTimer, 1000); 88 | }; 89 | //End test 90 | const displayResult = () => { 91 | //display result div 92 | document.querySelector(".result").style.display = "block"; 93 | clearInterval(timer); 94 | document.getElementById("stop-test").style.display = "none"; 95 | userInput.disabled = true; 96 | let timeTaken = 1; 97 | if (time != 0) { 98 | timeTaken = (60 - time) / 100; 99 | } 100 | document.getElementById("wpm").innerText = 101 | (userInput.value.length / 5 / timeTaken).toFixed(2) + "wpm"; 102 | document.getElementById("accuracy").innerText = 103 | Math.round( 104 | ((userInput.value.length - mistakes) / userInput.value.length) * 100 105 | ) + "%"; 106 | }; 107 | 108 | //Start Test 109 | 110 | const startTest = () => { 111 | mistakes = 0; 112 | timer = ""; 113 | userInput.disabled = false; 114 | timeReduce(); 115 | document.getElementById("start-test").style.display = "none"; 116 | document.getElementById("stop-test").style.display = "block"; 117 | }; 118 | 119 | window.onload = () => { 120 | userInput.value = ""; 121 | document.getElementById("start-test").style.display = "block"; 122 | document.getElementById("stop-test").style.display = "none"; 123 | userInput.disabled = true; 124 | randomNewQuote(); 125 | }; 126 | -------------------------------------------------------------------------------- /Project-8 Typing Speed Tester/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "poppins", sans-serif; 6 | } 7 | body { 8 | background-color: #c77dff; 9 | } 10 | .container { 11 | width: 80vmin; 12 | padding: 50px 30px; 13 | background-color: #fff; 14 | position: absolute; 15 | transform: translate(-50%, -50%); 16 | top: 50%; 17 | left: 50%; 18 | border-radius: 10px; 19 | box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18); 20 | } 21 | .stats { 22 | text-align: right; 23 | font-size: 15px; 24 | margin-bottom: 30px; 25 | } 26 | .stats span { 27 | font-weight: 600; 28 | } 29 | #quote { 30 | text-align: justify; 31 | margin: 50px 0 30px 0; 32 | } 33 | textarea { 34 | resize: none; 35 | width: 100%; 36 | border-radius: 5px; 37 | padding: 10px 5px; 38 | font-size: 16px; 39 | } 40 | button { 41 | float: right; 42 | margin-top: 20px; 43 | background-color: #c77dff; 44 | border-radius: 5px; 45 | color: #fff; 46 | border: none; 47 | padding: 10px 30px; 48 | font-size: 18px; 49 | margin-right: 10px; 50 | } 51 | 52 | .result { 53 | margin-top: 40px; 54 | display: none; 55 | } 56 | .result h3 { 57 | text-align: center; 58 | margin-bottom: 20px; 59 | font-size: 22px; 60 | } 61 | .wrapper { 62 | display: flex; 63 | justify-content: space-around; 64 | } 65 | .wrapper span { 66 | font-weight: 600; 67 | } 68 | .success { 69 | color: #44b267; 70 | } 71 | .fail { 72 | color: #e81c4e; 73 | } 74 | -------------------------------------------------------------------------------- /Project-9 Drum Kit/Readme.md: -------------------------------------------------------------------------------- 1 | # Drum Kit 2 | 3 | ## Deployed project link : https://drum-kit-dhrumishah.netlify.app/ 4 | 5 | ## Project screenshot: 6 | 7 | ![image](https://user-images.githubusercontent.com/84569241/185756714-bd531aca-845f-4dd7-94ee-23897eb6626e.png) 8 | -------------------------------------------------------------------------------- /Project-9 Drum Kit/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-9 Drum Kit/background.jpg -------------------------------------------------------------------------------- /Project-9 Drum Kit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | Drum Kit 19 | 20 | 21 |

Music is therapy

22 |

23 |

24 | A 25 | Clap 26 |

27 |

28 | S 29 | Hihat 30 |

31 |

32 | D 33 | Kick 34 |

35 |

36 | F 37 | Openhat 38 |

39 |

40 | G 41 | Boom 42 |

43 |

44 | H 45 | Ride 46 |

47 |

48 | J 49 | Snare 50 |

51 |

52 | K 53 | Tom 54 |

55 |

56 | L 57 | Tink 58 |

59 |

60 | 61 |

62 |

63 |

64 |

65 |

66 |

67 |

68 |

69 |

70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /Project-9 Drum Kit/script.js: -------------------------------------------------------------------------------- 1 | let prevElement; 2 | let prevAudio; 3 | 4 | function playSound(e) { 5 | if (prevElement !== undefined) { 6 | prevElement.classList.remove("playing"); 7 | prevAudio.pause(); 8 | } 9 | const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); 10 | const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); 11 | prevElement = key; 12 | prevAudio = audio; 13 | if (!audio) return; 14 | audio.currentTime = 0; 15 | audio.play(); 16 | key.classList.add("playing"); 17 | } 18 | 19 | window.addEventListener("keydown", playSound); 20 | -------------------------------------------------------------------------------- /Project-9 Drum Kit/sounds/boom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-9 Drum Kit/sounds/boom.wav -------------------------------------------------------------------------------- /Project-9 Drum Kit/sounds/clap.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-9 Drum Kit/sounds/clap.wav -------------------------------------------------------------------------------- /Project-9 Drum Kit/sounds/hihat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-9 Drum Kit/sounds/hihat.wav -------------------------------------------------------------------------------- /Project-9 Drum Kit/sounds/kick.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-9 Drum Kit/sounds/kick.wav -------------------------------------------------------------------------------- /Project-9 Drum Kit/sounds/openhat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-9 Drum Kit/sounds/openhat.wav -------------------------------------------------------------------------------- /Project-9 Drum Kit/sounds/ride.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-9 Drum Kit/sounds/ride.wav -------------------------------------------------------------------------------- /Project-9 Drum Kit/sounds/snare.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-9 Drum Kit/sounds/snare.wav -------------------------------------------------------------------------------- /Project-9 Drum Kit/sounds/tink.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-9 Drum Kit/sounds/tink.wav -------------------------------------------------------------------------------- /Project-9 Drum Kit/sounds/tom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/Project-9 Drum Kit/sounds/tom.wav -------------------------------------------------------------------------------- /Project-9 Drum Kit/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | color: #fff; 3 | background: url(background.jpg) bottom center; 4 | background-size: cover; 5 | } 6 | body, 7 | html { 8 | margin: 0; 9 | padding: 0; 10 | font-family: "poppins", sans-serif; 11 | } 12 | h1 { 13 | text-align: center; 14 | font-family: "Shrikhand", cursive; 15 | letter-spacing: 0.2rem; 16 | font-size: 3em; 17 | color: #f4b200; 18 | } 19 | .keys { 20 | display: flex; 21 | flex-direction: row; 22 | min-height: 100vh; 23 | align-items: center; 24 | justify-content: center; 25 | } 26 | .key { 27 | border: 0.4rem solid black; 28 | border-radius: 10px; 29 | margin: 1rem; 30 | font-size: 1.5rem; 31 | transition: all 0.07s ease; 32 | padding: 1rem 0.5rem; 33 | width: 10rem; 34 | text-align: center; 35 | background: rgba(133, 88, 4, 0.7); 36 | } 37 | .playing { 38 | transform: scale(1.1); 39 | border-color: #ffc600; 40 | box-shadow: 0 0 1rem #ffc600; 41 | } 42 | 43 | kbd { 44 | display: block; 45 | font-size: 4rem; 46 | } 47 | .sound { 48 | font-size: 1.2rem; 49 | text-transform: uppercase; 50 | letter-spacing: 0.1rem; 51 | } 52 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JS-Projects 2 | 3 | ## Attempting to construct miniature JavaScript projects from scratch using any design as a reference. 4 | 5 | 1. [Calculator-App](https://github.com/dhrumishah/JS-Projects/tree/main/JS%20PROJECTS/PROJECT-1%20Calculator%20App) 6 | 2. [Gradient-Background-Generator](https://github.com/dhrumishah/JS-Projects/tree/main/PROJECT-2%20Gradient%20backgound%20generator) 7 | 3. [Digital Clock](https://github.com/dhrumishah/JS-Projects/tree/main/Project-3%20Digital%20Clock) 8 | 4. [Contact-form](https://github.com/dhrumishah/JS-Projects/tree/main/Project-4%20Contact-form) 9 | 5. [Tip-Calculator](https://github.com/dhrumishah/JS-Projects/tree/main/project-5%20Tip-Calculator) 10 | 6. [StopWatch](https://github.com/dhrumishah/JS-Projects/tree/main/Project-6%20Stopwatch) 11 | 7. [Palindrome Checker](https://github.com/dhrumishah/JS-Projects/tree/main/Project-7%20Palindrome%20Checker) 12 | 8. [Typing Speed Tester](https://github.com/dhrumishah/JS-Projects/tree/main/Project-8%20Typing%20Speed%20Tester) 13 | 9. [Drum Kit](https://github.com/dhrumishah/JS-Projects/tree/main/Project-9%20Drum%20Kit) 14 | 10. [Quiz App](https://github.com/dhrumishah/JS-Projects/tree/main/Project-10%20Quizz%20App) 15 | -------------------------------------------------------------------------------- /project-5 Tip-Calculator/Readme.md: -------------------------------------------------------------------------------- 1 | # Tip-Calculator 2 | 3 | ## Reference-image 4 | 5 | ![image](https://user-images.githubusercontent.com/84569241/184534208-4f5b44c5-07ce-4955-8d41-4896160b2038.png) 6 | 7 | 8 | ## What I created! 9 | 10 | ![image](https://user-images.githubusercontent.com/84569241/184534223-656b70b2-ccea-43eb-b312-83209aee1312.png) 11 | -------------------------------------------------------------------------------- /project-5 Tip-Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | Tip Calculator 15 | 16 | 17 |

Tip Calculator

18 |

19 | Bill Amount: Tip Percentage: 20 | Tip Amount: 21 | Total Bill: 22 | 23 | 24 |

25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /project-5 Tip-Calculator/main.js: -------------------------------------------------------------------------------- 1 | let btn = document.getElementById("btn"); 2 | 3 | btn.addEventListener("click", function () { 4 | let billAmount = document.getElementById("bill-amount").value; 5 | let tipPercentage = document.getElementById("tip-percentage").value; 6 | let tipAmount = (document.getElementById("tip-amount").value = 7 | billAmount / tipPercentage); 8 | document.getElementById("total-bill").value = 9 | parseFloat(billAmount) + parseFloat(tipAmount); 10 | }); 11 | -------------------------------------------------------------------------------- /project-5 Tip-Calculator/ref-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dhrumishah/JS-Projects/616728947ca6eb791d15af8211ce3e7037a6f1ca/project-5 Tip-Calculator/ref-img.jpg -------------------------------------------------------------------------------- /project-5 Tip-Calculator/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "poppins", sans-serif; 3 | } 4 | h1 { 5 | color: white; 6 | text-align: center; 7 | } 8 | html { 9 | height: 100%; 10 | background-color: #f3f3f3; 11 | background: linear-gradient(135deg, #6f6df4, #a8d5e2) fixed; 12 | } 13 | 14 | #container { 15 | height: 325px; 16 | width: 450px; 17 | background-color: #f3f3f3; 18 | display: grid; 19 | grid-template-columns: 100px 1fr; 20 | grid-template-rows: 75px 75px 75px 75px; 21 | grid-template-areas: 22 | ". bill-amount" 23 | ". tip-percentage" 24 | ". tip-amount" 25 | ". total-bill" 26 | "btn btn"; 27 | margin: 0 auto; 28 | border-radius: 10px; 29 | padding: 25px; 30 | } 31 | 32 | #bill-amount { 33 | grid-area: bill-amount; 34 | height: 25px; 35 | width: 350px; 36 | } 37 | 38 | #tip-percentage { 39 | grid-area: tip-percentage; 40 | height: 25px; 41 | width: 350px; 42 | } 43 | 44 | #tip-amount { 45 | grid-area: tip-amount; 46 | height: 25px; 47 | width: 350px; 48 | } 49 | 50 | #total-bill { 51 | grid-area: total-bill; 52 | height: 25px; 53 | width: 350px; 54 | } 55 | 56 | #btn { 57 | grid-area: btn; 58 | height: 35px; 59 | width: auto; 60 | background: #a8d5e2; 61 | border: none; 62 | border-radius: 10px; 63 | } 64 | #btn:hover { 65 | background: #888888; 66 | } 67 | --------------------------------------------------------------------------------

BACKGROUND GENERATOR

Select your favorite colors to apply gradient:

Or

Current CSS Background

QuizMasters

Contact Us

Is your word a palindrome?

Result

Music is therapy

Tip Calculator