├── 02 - Word Counter ├── script.js ├── index.html └── style.css └── 01 - Calculator ├── style.css ├── index.html └── script.js /02 - Word Counter/script.js: -------------------------------------------------------------------------------- 1 | const input = document.querySelector("textarea"); 2 | const wordCount = document.querySelector("[data-word-count]"); 3 | const characterCount = document.querySelector("[data-character-count]"); 4 | const sentenceCount = document.querySelector("[data-sentence-count]"); 5 | const paragraphCount = document.querySelector("[data-paragraph-count]"); 6 | 7 | function updateCounts() { 8 | if (!input.value) { 9 | resetCounts(); 10 | return; 11 | } 12 | 13 | const wordsArray = input.value.split(" ").filter((word) => word !== ""); 14 | wordCount.innerText = wordsArray.length; 15 | 16 | // Count Characters 17 | characterCount.innerText = input.value.length; 18 | 19 | // Count Sentences 20 | const sentenceArray = input.value.split(/[.!]/); 21 | 22 | sentenceCount.innerText = sentenceArray.length - 1; 23 | 24 | // Count Paragraph 25 | const paragraphArray = input.value.split("\n").filter((p) => p.trim() !== ""); 26 | 27 | paragraphCount.innerText = paragraphArray.length; 28 | } 29 | 30 | function resetCounts() { 31 | wordCount.textContent = 32 | characterCount.textContent = 33 | sentenceCount.textContent = 34 | paragraphCount.textContent = 35 | "0"; 36 | } 37 | 38 | input.addEventListener("input", updateCounts); 39 | -------------------------------------------------------------------------------- /02 - Word Counter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Word Counter

15 |
16 | 17 |
18 |
19 |

Words

20 | 0 21 |
22 |
23 |

Characters

24 | 0 25 |
26 |
27 |

Sentences

28 | 0 29 |
30 |
31 |

Paragraphs

32 | 0 33 |
34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /02 - Word Counter/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: Poppins; 9 | background-color: #090909; 10 | color: #a09fa4; 11 | height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: center; 15 | gap: 5rem; 16 | } 17 | 18 | .container { 19 | width: 100%; 20 | max-width: 46rem; 21 | background-color: white; 22 | border-radius: 0.5rem; 23 | margin: 0 auto; 24 | display: flex; 25 | flex-direction: column; 26 | gap: 1rem; 27 | } 28 | 29 | textarea { 30 | resize: none; 31 | width: 100%; 32 | height: 250px; 33 | padding: 1rem; 34 | color: #242e3e; 35 | font: inherit; 36 | font-size: 1rem; 37 | border-radius: inherit; 38 | outline: none; 39 | border: 0; 40 | } 41 | 42 | .output-container { 43 | display: flex; 44 | align-items: center; 45 | justify-content: center; 46 | gap: 3.5rem; 47 | padding: 1rem; 48 | border-top: 1px solid gray; 49 | } 50 | 51 | .output { 52 | display: flex; 53 | flex-direction: column; 54 | text-align: center; 55 | } 56 | 57 | .output p { 58 | font-size: 0.8rem; 59 | text-transform: uppercase; 60 | letter-spacing: 1px; 61 | } 62 | 63 | .output span { 64 | font-size: 1.6rem; 65 | font-weight: 700; 66 | color: #242e3e; 67 | } 68 | 69 | h1 { 70 | font-size: 2.6rem; 71 | color: white; 72 | text-align: center; 73 | } 74 | -------------------------------------------------------------------------------- /01 - Calculator/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Roboto", sans-serif; 11 | background-color: #a0d7ff; 12 | height: 100vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | .calculator { 19 | display: grid; 20 | grid-template-rows: 21 | minmax(80px, auto) 22 | repeat(5, 60px); 23 | grid-template-columns: repeat(4, 60px); 24 | justify-content: center; 25 | background-color: hsl(220, 6%, 10%); 26 | padding: 1.4rem; 27 | border-radius: 12px; 28 | gap: 0.7rem; 29 | } 30 | .calculator button { 31 | border: none; 32 | font-family: inherit; 33 | font-size: 1.3rem; 34 | font-weight: 500; 35 | color: hsl(204, 100%, 58%); 36 | background-color: hsl(230, 6%, 20%); 37 | border-radius: 10px; 38 | cursor: pointer; 39 | } 40 | .calculator button:hover { 41 | background-color: hsl(230, 6%, 30%); 42 | } 43 | .span-2 { 44 | grid-column: span 2; 45 | } 46 | .calculator > .output { 47 | font-size: 2rem; 48 | background-color: inherit; 49 | color: white; 50 | grid-column: 1 / -1; 51 | display: flex; 52 | flex-direction: column; 53 | justify-content: space-around; 54 | align-items: flex-end; 55 | word-break: break-all; 56 | border-radius: inherit; 57 | } 58 | 59 | .output .prev-display { 60 | font-size: 1.3rem; 61 | font-weight: 400; 62 | color: hsl(0, 0%, 65%); 63 | } 64 | -------------------------------------------------------------------------------- /01 - Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Calculator 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /01 - Calculator/script.js: -------------------------------------------------------------------------------- 1 | const currDisplay = document.querySelector(".curr-display"); 2 | const prevDisplay = document.querySelector(".prev-display"); 3 | const numbers = document.querySelectorAll(".number"); 4 | const operands = document.querySelectorAll(".operation"); 5 | const clearBtn = document.querySelector(".clear"); 6 | const delBtn = document.querySelector(".delete"); 7 | const equalBtn = document.querySelector(".equal"); 8 | let operation; 9 | 10 | function appendNumber(number) { 11 | if (number === "." && currDisplay.innerText.includes(".")) return; 12 | currDisplay.innerText += number; 13 | } 14 | 15 | function chooseOperation(operand) { 16 | if (currDisplay.innerText === "") return; 17 | compute(operand); 18 | operation = operand; 19 | currDisplay.innerText += operand; 20 | prevDisplay.innerText = currDisplay.innerText; 21 | currDisplay.innerText = ""; 22 | } 23 | 24 | function clearDisplay() { 25 | currDisplay.innerText = ""; 26 | prevDisplay.innerText = ""; 27 | } 28 | 29 | function compute(operand) { 30 | let result; 31 | const previousValue = parseFloat(prevDisplay.innerText); 32 | const currentValue = parseFloat(currDisplay.innerText); 33 | 34 | if (isNaN(previousValue) || isNaN(currentValue)) return; 35 | 36 | switch (operation) { 37 | case "+": 38 | result = previousValue + currentValue; 39 | break; 40 | case "-": 41 | result = previousValue - currentValue; 42 | break; 43 | case "*": 44 | result = previousValue * currentValue; 45 | break; 46 | case "/": 47 | result = previousValue / currentValue; 48 | break; 49 | default: 50 | return; 51 | } 52 | currDisplay.innerText = result; 53 | } 54 | 55 | numbers.forEach((number) => { 56 | number.addEventListener("click", () => { 57 | appendNumber(number.innerText); 58 | }); 59 | }); 60 | 61 | operands.forEach((operand) => { 62 | operand.addEventListener("click", () => { 63 | chooseOperation(operand.innerText); 64 | }); 65 | }); 66 | 67 | clearBtn.addEventListener("click", () => { 68 | clearDisplay(); 69 | }); 70 | 71 | equalBtn.addEventListener("click", () => { 72 | compute(); 73 | prevDisplay.innerText = ""; 74 | }); 75 | 76 | delBtn.addEventListener("click", () => { 77 | currDisplay.innerText = currDisplay.innerText.slice(0, -1); 78 | }); 79 | --------------------------------------------------------------------------------