From de6b7c9c5770cdc309ddb3fa4b66aae461e8e5db Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Wed, 4 Jun 2025 13:26:30 +0200 Subject: [PATCH 01/17] docs: add companion guide modified: README.md Changes to be committed: modified: README.md --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/README.md b/README.md index a522c56..cb77c6f 100644 --- a/README.md +++ b/README.md @@ -117,6 +117,21 @@ Explore each project individually and view live demos to see them in action: Check out our [**collection of articles**](https://www.onbusinessplan.com/) for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process. +## The Ultimate Companion Guide + +Enhance your learning journey with **"100 Projects in 100 Days – HTML, CSS & JavaScript: The Ultimate Companion Guide."** This comprehensive guide is designed to help you maximize your experience with this project collection. + +Inside the PDF, you'll find: + +- **Daily Tracker & Planner**: Keep tabs on your progress, set milestone goals, and plan your coding sessions. +- **Core Concepts Per Project**: Grasp the essential HTML, CSS, and JavaScript patterns used in each project, complete with reference links for deeper dives. +- **Go-Further Ideas & Enhancements**: Discover suggestions for taking each project beyond the basics, including real-world feature additions, design improvements, and advanced rewrites. +- **Bug Log & Challenge Notes**: Document any issues you encounter, new discoveries, and debugging notes to learn from and revisit later. + +This guide isn't just about completing projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild. + +[**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf) + ## Setup Instructions To get started with these projects, follow these simple steps: From f21865232f696190ad9008495370f009944d2faf Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Wed, 11 Jun 2025 14:19:39 +0200 Subject: [PATCH 02/17] docs: container queries title --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cb77c6f..967b360 100644 --- a/README.md +++ b/README.md @@ -111,7 +111,7 @@ Explore each project individually and view live demos to see them in action: | 099 | [Parallax Website](099-parallax%20website) | [Live Demo](https://codepen.io/solygambas/full/poeBdPr) | | 100 | [Hulu Webpage Clone](100-hulu%20webpage%20clone) | [Live Demo](https://codepen.io/solygambas/full/rNmmqBy) | | 101 | [Cascade Layers](101-cascade%20layers) | [Live Demo](https://codepen.io/solygambas/full/poYaZmv) | -| 102 | [Container queries](102-container%20queries) | [Live Demo](https://codepen.io/solygambas/full/abMqPNy) | +| 102 | [Container Queries](102-container%20queries) | [Live Demo](https://codepen.io/solygambas/full/abMqPNy) | ## Get Inspired From 9eb410ee6f2662028868b384bcbcaa21132d6822 Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Thu, 12 Jun 2025 11:45:49 +0200 Subject: [PATCH 03/17] docs: update companion guide presentation --- README.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 967b360..49659cd 100644 --- a/README.md +++ b/README.md @@ -117,18 +117,19 @@ Explore each project individually and view live demos to see them in action: Check out our [**collection of articles**](https://www.onbusinessplan.com/) for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process. -## The Ultimate Companion Guide +## Companion Guide -Enhance your learning journey with **"100 Projects in 100 Days – HTML, CSS & JavaScript: The Ultimate Companion Guide."** This comprehensive guide is designed to help you maximize your experience with this project collection. +Enhance your learning journey with **_100 Projects in 100 Days – HTML, CSS & JavaScript: The Ultimate Companion Guide._** This comprehensive guide is designed to help you maximize your experience with this project collection. Inside the PDF, you'll find: -- **Daily Tracker & Planner**: Keep tabs on your progress, set milestone goals, and plan your coding sessions. -- **Core Concepts Per Project**: Grasp the essential HTML, CSS, and JavaScript patterns used in each project, complete with reference links for deeper dives. -- **Go-Further Ideas & Enhancements**: Discover suggestions for taking each project beyond the basics, including real-world feature additions, design improvements, and advanced rewrites. -- **Bug Log & Challenge Notes**: Document any issues you encounter, new discoveries, and debugging notes to learn from and revisit later. +- **Day 0: Before Starting Up**: Quick-start setup instructions, and boilerplate walkthrough. +- **Days 1–102: Challenges & Enhancements** + - **Challenges**: Targeted tasks to modify core markup, styles, or scripts and deepen your understanding. + - **Enhancements**: Advanced feature ideas, design refinements, and real-world polish suggestions. + - **MDN Web Docs Links**: Direct pointers to documentation for every tweak, so you can dive deeper on demand. -This guide isn't just about completing projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild. +This guide isn't just about tweaking projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild. [**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf) From 984638aedbce682a277772542044ee4fe5b4a9a7 Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Thu, 12 Jun 2025 11:48:49 +0200 Subject: [PATCH 04/17] docs: fix indentation --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 49659cd..8e780c1 100644 --- a/README.md +++ b/README.md @@ -123,7 +123,8 @@ Enhance your learning journey with **_100 Projects in 100 Days – HTML, CSS & J Inside the PDF, you'll find: -- **Day 0: Before Starting Up**: Quick-start setup instructions, and boilerplate walkthrough. +- **Day 0: Before Starting Up**
+ Quick-start setup instructions and a boilerplate walkthrough. - **Days 1–102: Challenges & Enhancements** - **Challenges**: Targeted tasks to modify core markup, styles, or scripts and deepen your understanding. - **Enhancements**: Advanced feature ideas, design refinements, and real-world polish suggestions. From 6158625779816f5c1cc50bad0ff6e39e139c5be5 Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Sat, 14 Jun 2025 13:52:23 +0200 Subject: [PATCH 05/17] docs: add youtube setup tutorial --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8e780c1..06bc346 100644 --- a/README.md +++ b/README.md @@ -136,7 +136,7 @@ This guide isn't just about tweaking projects; it's about building momentum, mas ## Setup Instructions -To get started with these projects, follow these simple steps: +To get started with these projects, [**watch the setup tutorial on YouTube**](https://youtu.be/lEY0YchJLEU) or follow these simple steps: 1. **Fork the Repository**: Click on the "Fork" button at the top-right corner of this page to create a copy of the repository in your GitHub account. From 49a4807701d27c133377a6114bc069551ea9bb75 Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Mon, 16 Jun 2025 10:46:08 +0200 Subject: [PATCH 06/17] docs: add solution branch --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 06bc346..39c8068 100644 --- a/README.md +++ b/README.md @@ -129,6 +129,7 @@ Inside the PDF, you'll find: - **Challenges**: Targeted tasks to modify core markup, styles, or scripts and deepen your understanding. - **Enhancements**: Advanced feature ideas, design refinements, and real-world polish suggestions. - **MDN Web Docs Links**: Direct pointers to documentation for every tweak, so you can dive deeper on demand. + - **Solutions**: Available in the [`challenge-solutions` branch](https://github.com/solygambas/html-css-javascript-projects/tree/challenge-solutions) of the repository. This guide isn't just about tweaking projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild. From 9eafd1b0931937bbfd42bef4fc76bf2e90dcfa36 Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Mon, 16 Jun 2025 10:49:02 +0200 Subject: [PATCH 07/17] docs: remove code block --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 39c8068..dcf6e2b 100644 --- a/README.md +++ b/README.md @@ -129,7 +129,7 @@ Inside the PDF, you'll find: - **Challenges**: Targeted tasks to modify core markup, styles, or scripts and deepen your understanding. - **Enhancements**: Advanced feature ideas, design refinements, and real-world polish suggestions. - **MDN Web Docs Links**: Direct pointers to documentation for every tweak, so you can dive deeper on demand. - - **Solutions**: Available in the [`challenge-solutions` branch](https://github.com/solygambas/html-css-javascript-projects/tree/challenge-solutions) of the repository. + - **Solutions**: Available in the [challenge-solutions branch](https://github.com/solygambas/html-css-javascript-projects/tree/challenge-solutions) of the repository. This guide isn't just about tweaking projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild. From 05fc6e96ec1f65343bdbe7f5a86514ddf5e18744 Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Mon, 7 Jul 2025 14:37:34 +0200 Subject: [PATCH 08/17] docs: reorg sections --- README.md | 38 ++++++++++++++++++++------------------ 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index dcf6e2b..94c4c16 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,24 @@ Welcome to the repository for 100+ mini web projects using HTML, CSS, and JavaSc [View the full collection on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id) +## Companion Guide + +Enhance your learning journey with **_100 Projects in 100 Days – HTML, CSS & JavaScript: The Ultimate Companion Guide._** This comprehensive guide is designed to help you maximize your experience with this project collection. + +Inside the PDF, you'll find: + +- **Day 0: Before Starting Up**
+ Quick-start setup instructions and a boilerplate walkthrough. +- **Days 1–102: Challenges & Enhancements** + - **Challenges**: Targeted tasks to modify core markup, styles, or scripts and deepen your understanding. + - **Enhancements**: Advanced feature ideas, design refinements, and real-world polish suggestions. + - **MDN Web Docs Links**: Direct pointers to documentation for every tweak, so you can dive deeper on demand. + - **Solutions**: Available in the [challenge-solutions branch](https://github.com/solygambas/html-css-javascript-projects/tree/challenge-solutions) of the repository. + +This guide isn't just about tweaking projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild. + +[**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf) + ## Project Showcase Explore each project individually and view live demos to see them in action: @@ -113,28 +131,12 @@ Explore each project individually and view live demos to see them in action: | 101 | [Cascade Layers](101-cascade%20layers) | [Live Demo](https://codepen.io/solygambas/full/poYaZmv) | | 102 | [Container Queries](102-container%20queries) | [Live Demo](https://codepen.io/solygambas/full/abMqPNy) | +> **Ready to master all 102 projects?** Don't just build them—transform them into portfolio showpieces with our [**Ultimate Companion Guide**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf)! + ## Get Inspired Check out our [**collection of articles**](https://www.onbusinessplan.com/) for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process. -## Companion Guide - -Enhance your learning journey with **_100 Projects in 100 Days – HTML, CSS & JavaScript: The Ultimate Companion Guide._** This comprehensive guide is designed to help you maximize your experience with this project collection. - -Inside the PDF, you'll find: - -- **Day 0: Before Starting Up**
- Quick-start setup instructions and a boilerplate walkthrough. -- **Days 1–102: Challenges & Enhancements** - - **Challenges**: Targeted tasks to modify core markup, styles, or scripts and deepen your understanding. - - **Enhancements**: Advanced feature ideas, design refinements, and real-world polish suggestions. - - **MDN Web Docs Links**: Direct pointers to documentation for every tweak, so you can dive deeper on demand. - - **Solutions**: Available in the [challenge-solutions branch](https://github.com/solygambas/html-css-javascript-projects/tree/challenge-solutions) of the repository. - -This guide isn't just about tweaking projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild. - -[**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf) - ## Setup Instructions To get started with these projects, [**watch the setup tutorial on YouTube**](https://youtu.be/lEY0YchJLEU) or follow these simple steps: From f35a0d0d9552575080ce346a13b6eeca659a0bc5 Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Mon, 7 Jul 2025 14:41:54 +0200 Subject: [PATCH 09/17] docs: move collection link --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 94c4c16..53756b9 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,6 @@ Welcome to the repository for 100+ mini web projects using HTML, CSS, and JavaScript. This collection serves as a comprehensive resource for developers of all levels to practice their skills, explore new techniques, and get inspired by a wide range of web projects. Consider this as the ideal companion if you want to embark on the 100 Days of Code journey and challenge yourself. -[View the full collection on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id) - ## Companion Guide Enhance your learning journey with **_100 Projects in 100 Days – HTML, CSS & JavaScript: The Ultimate Companion Guide._** This comprehensive guide is designed to help you maximize your experience with this project collection. @@ -24,6 +22,8 @@ This guide isn't just about tweaking projects; it's about building momentum, mas ## Project Showcase +[View the full collection on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id) + Explore each project individually and view live demos to see them in action: | # | Project | Live Demo | From 4c3d76fe280d202e58b9db7b546a4079221f73dc Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Wed, 9 Jul 2025 13:36:15 +0200 Subject: [PATCH 10/17] docs: update youtube setup link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 53756b9..a0c99fc 100644 --- a/README.md +++ b/README.md @@ -139,7 +139,7 @@ Check out our [**collection of articles**](https://www.onbusinessplan.com/) for ## Setup Instructions -To get started with these projects, [**watch the setup tutorial on YouTube**](https://youtu.be/lEY0YchJLEU) or follow these simple steps: +To get started with these projects, [**watch the setup tutorial on YouTube**](https://www.youtube.com/watch?v=GlKnIym2xnk) or follow these simple steps: 1. **Fork the Repository**: Click on the "Fork" button at the top-right corner of this page to create a copy of the repository in your GitHub account. From 9d3278cb5ee5a988d9d60350dfc834173202034f Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Wed, 23 Jul 2025 15:53:30 +0200 Subject: [PATCH 11/17] fix: loader --- 069-infinite scroll posts/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/069-infinite scroll posts/script.js b/069-infinite scroll posts/script.js index a27732f..c01c0c2 100644 --- a/069-infinite scroll posts/script.js +++ b/069-infinite scroll posts/script.js @@ -1,5 +1,5 @@ const postsContainer = document.getElementById("posts-container"); -const loading = document.getElementById("loader"); +const loader = document.getElementById("loader"); const filter = document.getElementById("filter"); let limit = 5; From 6624274d23d2941c5b4430b2d4ad79f76185de03 Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Thu, 24 Jul 2025 14:45:07 +0200 Subject: [PATCH 12/17] fix: card right --- 072-memory cards/style.css | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/072-memory cards/style.css b/072-memory cards/style.css index d6be60c..5467662 100644 --- a/072-memory cards/style.css +++ b/072-memory cards/style.css @@ -14,7 +14,11 @@ body { background-color: var(--background-color); - background-image: linear-gradient(315deg, var(--background-color) 0%, var(--secondary-background-color) 100%); + background-image: linear-gradient( + 315deg, + var(--background-color) 0%, + var(--secondary-background-color) 100% + ); font-family: "Poppins", sans-serif; display: flex; flex-direction: column; @@ -62,7 +66,8 @@ h1 button { color: var(--light-color); } -.btn:focus, .navigation .nav-button:focus { +.btn:focus, +.navigation .nav-button:focus { outline: none; } @@ -105,6 +110,10 @@ h1 button { transform: translateX(-50%) rotateY(10deg); } +.card.right { + transform: translateX(50%) rotateY(-10deg); +} + .inner-card { box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); border-radius: 0.625rem; @@ -119,7 +128,8 @@ h1 button { transform: rotateX(180deg); } -.inner-card-front, .inner-card-back { +.inner-card-front, +.inner-card-back { backface-visibility: hidden; background-color: var(--light-color); border-radius: 0.625rem; @@ -142,9 +152,10 @@ h1 button { transform: rotateX(180deg); } -.inner-card-front::after, .inner-card-back::after { - content: '\f021 Flip'; - font-family: 'Font Awesome 5 Free', 'Poppins', sans-serif; +.inner-card-front::after, +.inner-card-back::after { + content: "\f021 Flip"; + font-family: "Font Awesome 5 Free", "Poppins", sans-serif; position: absolute; top: 0.625rem; right: 0.625rem; @@ -166,7 +177,7 @@ h1 button { } .navigation .nav-button:hover { - transform: scale(1.2) + transform: scale(1.2); } .navigation p { From 06abb3f54ba230c8ba681c4c6a2dc57b2e2b5b82 Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Fri, 25 Jul 2025 09:31:27 +0200 Subject: [PATCH 13/17] chore: replace api --- 073-lyrics search app/index.html | 1 - 073-lyrics search app/script.js | 72 +++++++++++--------------------- 2 files changed, 25 insertions(+), 48 deletions(-) diff --git a/073-lyrics search app/index.html b/073-lyrics search app/index.html index 7c0fbdd..eb995e1 100644 --- a/073-lyrics search app/index.html +++ b/073-lyrics search app/index.html @@ -21,7 +21,6 @@

Lyrics Search

Results will be displayed here

-
diff --git a/073-lyrics search app/script.js b/073-lyrics search app/script.js index 02cbd29..8ff9206 100644 --- a/073-lyrics search app/script.js +++ b/073-lyrics search app/script.js @@ -1,67 +1,43 @@ const form = document.getElementById("form"); const search = document.getElementById("search"); const result = document.getElementById("result"); -const more = document.getElementById("more"); -const apiURL = "https://api.lyrics.ovh"; +let lastSearchResults = []; +const apiURL = "https://lrclib.net/api"; async function searchSongs(term) { - const res = await fetch(`${apiURL}/suggest/${term}`); + const res = await fetch(`${apiURL}/search?q=${encodeURIComponent(term)}`); const data = await res.json(); - showData(data); + lastSearchResults = data || []; + showData(lastSearchResults); } -async function getLyrics(artist, songTitle) { - const res = await fetch(`${apiURL}/v1/${artist}/${songTitle}`); - const data = await res.json(); - console.log(artist, songTitle); - if (data.error) { - showAlert(data.error); - } else { - const lyrics = data.lyrics.replace(/(\r\n|\r|\n)/g, "
"); - - result.innerHTML = ` -

${artist} - ${songTitle}

- ${lyrics} - `; +function showLyricsByIndex(index) { + const song = lastSearchResults[index]; + if (!song) { + showAlert("Lyrics not found."); + return; } - more.innerHTML = ""; -} - -async function getMoreSongs(url) { - const res = await fetch(`https://cors-anywhere.herokuapp.com/${url}`); // proxy is required to avoid CORS issue - const data = await res.json(); - showData(data); + const lyrics = song.plainLyrics || "No lyrics available."; + result.innerHTML = ` +

${song.artistName} - ${song.trackName}

+ ${lyrics.replace(/(\r\n|\r|\n)/g, "
")} + `; } function showData(data) { result.innerHTML = ` `; - // Pagination - if (data.prev || data.next) { - more.innerHTML = ` - ${ - data.prev - ? `` - : "" - } - ${ - data.next - ? `` - : "" - } - `; - } else more.innerHTML = ""; } function showAlert(message) { @@ -81,10 +57,12 @@ form.addEventListener("submit", (e) => { }); result.addEventListener("click", (e) => { const clickedElement = e.target; - if (clickedElement.tagName === "BUTTON") { - const artist = clickedElement.getAttribute("data-artist"); - const songTitle = clickedElement.getAttribute("data-songtitle"); - getLyrics(artist, songTitle); + if ( + clickedElement.tagName === "BUTTON" && + clickedElement.hasAttribute("data-index") + ) { + const index = clickedElement.getAttribute("data-index"); + showLyricsByIndex(index); } }); From c9f71fb8be32f73dc8f46d85f22ce5f4c0465ec8 Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Sat, 26 Jul 2025 10:02:31 +0200 Subject: [PATCH 14/17] fix: richest people list --- 077-sortable list/script.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/077-sortable list/script.js b/077-sortable list/script.js index ff72df4..243913c 100644 --- a/077-sortable list/script.js +++ b/077-sortable list/script.js @@ -2,16 +2,16 @@ const draggableList = document.getElementById("draggable-list"); const check = document.getElementById("check"); const richestPeople = [ + "Elon Musk", + "Larry Ellison", + "Mark Zuckerberg", "Jeff Bezos", - "Bill Gates", + "Larry Page", + "Sergey Brin", "Bernard Arnault", + "Jensen Huang", "Warren Buffett", - "Larry Ellison", - "Amancio Ortega", - "Mark Zuckerberg", - "Jim Walton", - "Alice Walton", - "S. Robson Walton", + "Steve Ballmer", ]; const listItems = []; From d627e1db4eb9818e53a69ca03e71d3545b05b72a Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Sat, 26 Jul 2025 13:23:16 +0200 Subject: [PATCH 15/17] chore: handle ff --- 078-speak number guessing game/script.js | 90 +++++++++++++----------- 1 file changed, 48 insertions(+), 42 deletions(-) diff --git a/078-speak number guessing game/script.js b/078-speak number guessing game/script.js index 8c0f07c..db2f562 100644 --- a/078-speak number guessing game/script.js +++ b/078-speak number guessing game/script.js @@ -1,57 +1,63 @@ -const messageElement = document.getElementById("msg"); - -const randomNumber = getRandomNumber(); - -window.SpeechRecognition = +const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; -let recognition = new window.SpeechRecognition(); -recognition.lang = "en-US"; -recognition.start(); +if (!SpeechRecognition) { + document.body.innerHTML = ` +

Sorry, your browser does not support Speech Recognition.

+

Please use Chrome or Edge for the best experience.

+ `; +} else { + const messageElement = document.getElementById("msg"); -function getRandomNumber() { - return Math.floor(Math.random() * 100) + 1; -} + const randomNumber = getRandomNumber(); + let recognition = new SpeechRecognition(); + recognition.lang = "en-US"; + recognition.start(); -function onSpeak(event) { - const message = event.results[0][0].transcript; - writeMessage(message); - checkNumber(message); -} + function getRandomNumber() { + return Math.floor(Math.random() * 100) + 1; + } + + function onSpeak(event) { + const message = event.results[0][0].transcript; + writeMessage(message); + checkNumber(message); + } -function writeMessage(message) { - messageElement.innerHTML = ` + function writeMessage(message) { + messageElement.innerHTML = `
You said:
${message} `; -} - -function checkNumber(message) { - const number = +message; - if (Number.isNaN(number)) { - messageElement.innerHTML += "
That is not a valid number
"; - return; - } - if (number > 100 || number < 1) { - messageElement.innerHTML += "
Number must be between 1 and 100
"; - return; } - if (number === randomNumber) { - document.body.innerHTML = ` + + function checkNumber(message) { + const number = +message; + if (Number.isNaN(number)) { + messageElement.innerHTML += "
That is not a valid number
"; + return; + } + if (number > 100 || number < 1) { + messageElement.innerHTML += "
Number must be between 1 and 100
"; + return; + } + if (number === randomNumber) { + document.body.innerHTML = `

Congrats! You have guessed the number!

It was ${number}

`; - } else if (number > randomNumber) { - messageElement.innerHTML += "
GO LOWER
"; - } else { - messageElement.innerHTML += "
GO HIGHER
"; + } else if (number > randomNumber) { + messageElement.innerHTML += "
GO LOWER
"; + } else { + messageElement.innerHTML += "
GO HIGHER
"; + } } -} -// Event Listeners -recognition.addEventListener("result", onSpeak); -recognition.addEventListener("end", () => recognition.start()); + // Event Listeners + recognition.addEventListener("result", onSpeak); + recognition.addEventListener("end", () => recognition.start()); -document.body.addEventListener("click", (e) => { - if (e.target.id == "play-again") history.go(0); -}); + document.body.addEventListener("click", (e) => { + if (e.target.id == "play-again") history.go(0); + }); +} From 86810a8b52ebaf88aaf6e015750a26602c7dc76c Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Sun, 27 Jul 2025 11:48:29 +0200 Subject: [PATCH 16/17] fix: bg position --- 082-parallax landing page/style.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/082-parallax landing page/style.css b/082-parallax landing page/style.css index 7817c55..9055ab3 100644 --- a/082-parallax landing page/style.css +++ b/082-parallax landing page/style.css @@ -69,8 +69,8 @@ ul { .section-top { min-height: 200px; padding-top: 20px; - background: url("https://i.ibb.co/NTFtY8q/bg1.png") no-repeat center - bottom/cover; + background: url("https://i.ibb.co/NTFtY8q/bg1.png") no-repeat center bottom / + 100vw auto; } .section-top .content { @@ -92,7 +92,8 @@ ul { .section-stream { min-height: 400px; - background: url("https://i.ibb.co/sQFBGNC/bg2.png") no-repeat center top/cover; + background: url("https://i.ibb.co/sQFBGNC/bg2.png") no-repeat center top / + 100vw auto; } .section-stream h2 { From 6619712f1fb732d74cd1a3e61fda5eda822dde39 Mon Sep 17 00:00:00 2001 From: solygambas <51904909+solygambas@users.noreply.github.com> Date: Sun, 27 Jul 2025 12:00:40 +0200 Subject: [PATCH 17/17] fix: bg under 768 --- 082-parallax landing page/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/082-parallax landing page/style.css b/082-parallax landing page/style.css index 9055ab3..2b4b12c 100644 --- a/082-parallax landing page/style.css +++ b/082-parallax landing page/style.css @@ -91,6 +91,7 @@ ul { } .section-stream { + margin-top: -1px; min-height: 400px; background: url("https://i.ibb.co/sQFBGNC/bg2.png") no-repeat center top / 100vw auto; @@ -103,7 +104,7 @@ ul { .section-stream .play { width: 50%; display: block; - margin: 30px auto; + margin: 0 auto 30px; opacity: 0.5; }