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; 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 { 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); } }); 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 = []; 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); + }); +} diff --git a/082-parallax landing page/style.css b/082-parallax landing page/style.css index 7817c55..2b4b12c 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 { @@ -91,8 +91,10 @@ ul { } .section-stream { + margin-top: -1px; 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 { @@ -102,7 +104,7 @@ ul { .section-stream .play { width: 50%; display: block; - margin: 30px auto; + margin: 0 auto 30px; opacity: 0.5; } diff --git a/README.md b/README.md index 6c4a163..a0c99fc 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,28 @@ 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. + +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 +[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 | @@ -111,19 +129,17 @@ 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) | + +> **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. -## Share Your Insights - -We want to hear from you! Help us tailor our content to better meet your needs by participating in our brief survey. Your feedback is invaluable in guiding us to create the most relevant and useful resources for developers and freelancers. [**Take the survey here**](https://forms.gle/sSWJ4uAcTdFJu6W76). - ## 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://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.