diff --git a/064-menu slider modal/index.html b/064-menu slider modal/index.html
index 6701697..549633c 100644
--- a/064-menu slider modal/index.html
+++ b/064-menu slider modal/index.html
@@ -41,7 +41,7 @@
What is this landing page about?
diff --git a/065-hangman game/script.js b/065-hangman game/script.js
index 68dfb0f..80f5d1a 100644
--- a/065-hangman game/script.js
+++ b/065-hangman game/script.js
@@ -88,7 +88,7 @@ function showNotification() {
}, 2000);
}
-window.addEventListener("keypress", (e) => {
+window.addEventListener("keydown", (e) => {
if (playable) {
const letter = e.key.toLowerCase();
if (letter >= "a" && letter <= "z") {
diff --git a/067-expense tracker/script.js b/067-expense tracker/script.js
index 02f96d5..d1e9e3a 100644
--- a/067-expense tracker/script.js
+++ b/067-expense tracker/script.js
@@ -39,13 +39,19 @@ function generateID() {
function addTransaction(e) {
e.preventDefault();
- if (text.value.trim() === "" || amount.value.trim() === "") {
+ const amountValue = Number(amount.value);
+ if (
+ text.value.trim() === "" ||
+ isNaN(amountValue) ||
+ amount.value.trim() === ""
+ ) {
showNotification();
+ return;
} else {
const transaction = {
id: generateID(),
text: text.value,
- amount: +amount.value,
+ amount: amountValue,
};
transactions.push(transaction);
addTransactionDOM(transaction);
diff --git a/071-speech text reader/script.js b/071-speech text reader/script.js
index dcbd76b..6a87f12 100644
--- a/071-speech text reader/script.js
+++ b/071-speech text reader/script.js
@@ -4,6 +4,7 @@ const textarea = document.getElementById("text");
const readButton = document.getElementById("read");
const toggleButton = document.getElementById("toggle");
const closeButton = document.getElementById("close");
+const textBox = document.getElementById("text-box");
const data = [
{
@@ -105,10 +106,10 @@ function setVoice(e) {
// Event Listeners
toggleButton.addEventListener("click", () => {
- document.getElementById("text-box").classList.toggle("show");
+ textBox.classList.toggle("show");
});
closeButton.addEventListener("click", () => {
- document.getElementById("text-box").classList.remove("show");
+ textBox.classList.remove("show");
});
speechSynthesis.addEventListener("voiceschanged", getVoices);
voicesSelect.addEventListener("change", setVoice);
diff --git a/073-lyrics search app/style.css b/073-lyrics search app/style.css
index ab807bd..ac4425f 100644
--- a/073-lyrics search app/style.css
+++ b/073-lyrics search app/style.css
@@ -1,9 +1,9 @@
-@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap");
:root {
- --main-color: #3B9B76;
- --secondary-color: #5AB193;
- --text-color: rgba(255,255,255,0.87);
+ --main-color: #3b9b76;
+ --secondary-color: #5ab193;
+ --text-color: rgba(255, 255, 255, 0.87);
}
* {
@@ -16,8 +16,10 @@ body {
}
header {
- background: #040404 url('https://images.unsplash.com/photo-1495305379050-64540d6ee95d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
- color: rgba(255,255,255,0.95);
+ background: #040404
+ url("https://images.unsplash.com/photo-1495305379050-64540d6ee95d?auto=format&fit=crop&w=1350&q=80")
+ no-repeat center center/cover;
+ color: rgba(255, 255, 255, 0.95);
display: flex;
flex-direction: column;
align-items: center;
@@ -27,13 +29,13 @@ header {
}
header::after {
- content: '';
+ content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
- background-color: rgba(0,0,0,0.8);
+ background-color: rgba(0, 0, 0, 0.8);
}
header * {
@@ -60,7 +62,7 @@ form input {
form button {
background-color: var(--main-color);
- color: rgba(255,255,255,0.95);
+ color: rgba(255, 255, 255, 0.95);
position: absolute;
top: 0.125rem;
right: 0.125rem;
@@ -82,7 +84,8 @@ button:active {
transform: scale(0.95);
}
-input:focus, button:focus {
+input:focus,
+button:focus {
outline: none;
}
@@ -124,16 +127,6 @@ ul.songs li {
text-align: center;
}
-.centered {
- display: flex;
- justify-content: center;
-}
-
-.centered button {
- transform: scale(1.3);
- margin: 15px;
-}
-
.toast {
position: fixed;
bottom: 10px;
@@ -144,4 +137,4 @@ ul.songs li {
font-size: 1rem;
padding: 0.875rem 2rem;
margin: 0.5rem;
-}
\ No newline at end of file
+}
diff --git a/074-relaxer app/style.css b/074-relaxer app/style.css
index c1528e9..abc8243 100644
--- a/074-relaxer app/style.css
+++ b/074-relaxer app/style.css
@@ -15,7 +15,9 @@
}
body {
- background: var(--background-color) url('https://images.unsplash.com/photo-1601142754133-ae7aa279c3d5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
+ background: var(--background-color)
+ url("https://images.unsplash.com/photo-1601142754133-ae7aa279c3d5?auto=format&fit=crop&w=1920&q=80")
+ no-repeat center center/cover;
color: var(--light-color);
font-family: "Montserrat", sans-serif;
display: flex;
@@ -125,4 +127,4 @@ h1 {
to {
transform: scale(1);
}
-}
\ No newline at end of file
+}
diff --git a/076-new year countdown/script.js b/076-new year countdown/script.js
index 43b9146..ccff5a3 100644
--- a/076-new year countdown/script.js
+++ b/076-new year countdown/script.js
@@ -9,6 +9,10 @@ const loading = document.getElementById("loading");
const nextYear = new Date().getFullYear() + 1;
const newYearTime = new Date(`January 01 ${nextYear} 00:00:00`);
+function formatTime(unit) {
+ return unit < 10 ? "0" + unit : unit;
+}
+
function updateCountdown() {
const currentTime = new Date();
const difference = newYearTime - currentTime;
@@ -17,11 +21,9 @@ function updateCountdown() {
const currentMinutes = Math.floor(difference / 1000 / 60) % 60;
const currentSeconds = Math.floor(difference / 1000) % 60;
days.innerText = currentDays;
- hours.innerText = currentHours < 10 ? "0" + currentHours : currentHours;
- minutes.innerText =
- currentMinutes < 10 ? "0" + currentMinutes : currentMinutes;
- seconds.innerText =
- currentSeconds < 10 ? "0" + currentSeconds : currentSeconds;
+ hours.innerText = formatTime(currentHours);
+ minutes.innerText = formatTime(currentMinutes);
+ seconds.innerText = formatTime(currentSeconds);
}
setTimeout(() => {
diff --git a/076-new year countdown/style.css b/076-new year countdown/style.css
index 9549d83..7e94e23 100644
--- a/076-new year countdown/style.css
+++ b/076-new year countdown/style.css
@@ -1,12 +1,14 @@
-@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap");
* {
box-sizing: border-box;
}
body {
- background: #0b3747 url('https://images.unsplash.com/photo-1513279922550-250c2129b13a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
- color: rgba(255,255,255,0.87);
+ background: #0b3747
+ url("https://images.unsplash.com/photo-1513279922550-250c2129b13a?auto=format&fit=crop&w=1350&q=80")
+ no-repeat center center/cover;
+ color: rgba(255, 255, 255, 0.87);
font-family: "PT Sans Narrow", sans-serif;
display: flex;
flex-direction: column;
@@ -19,8 +21,8 @@ body {
}
body::after {
- content: '';
- background-color: rgba(0,0,0,0.5);
+ content: "";
+ background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
@@ -85,4 +87,4 @@ h1 {
.time p {
font-size: 1rem;
}
-}
\ No newline at end of file
+}
diff --git a/078-speak number guessing game/style.css b/078-speak number guessing game/style.css
index 70ae87a..b2f1469 100644
--- a/078-speak number guessing game/style.css
+++ b/078-speak number guessing game/style.css
@@ -6,7 +6,7 @@
body {
background: #27273d
- url("https://images.unsplash.com/photo-1552749412-091909ed9f82?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80")
+ url("https://images.unsplash.com/photo-1552749412-091909ed9f82?auto=format&fit=crop&w=1350&q=80")
no-repeat center center/cover;
color: rgba(255, 255, 255, 0.87);
font-family: "Recursive", sans-serif;
diff --git a/079-creative agency website/index.html b/079-creative agency website/index.html
index 44b8856..0459053 100644
--- a/079-creative agency website/index.html
+++ b/079-creative agency website/index.html
@@ -62,7 +62,7 @@
diff --git a/080-health dashboard/style.css b/080-health dashboard/style.css
index a38f358..91ae3e9 100644
--- a/080-health dashboard/style.css
+++ b/080-health dashboard/style.css
@@ -58,12 +58,13 @@ p {
}
.bg1 {
- background-image: url("https://images.unsplash.com/photo-1599447333424-272c8fa5466f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80");
+ background-image: url("https://images.unsplash.com/photo-1599447333424-272c8fa5466f?auto=format&fit=crop&w=1350&q=80");
text-shadow: 1px 1px 2px var(--main-color);
}
.bg2 {
- background: var(--text-color) url("https://images.unsplash.com/photo-1529686159790-3246c5082afb?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80");
+ background: var(--text-color)
+ url("https://images.unsplash.com/photo-1529686159790-3246c5082afb?auto=format&fit=crop&w=1350&q=80");
color: var(--dark-text-color);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
diff --git a/082-parallax landing page/style.css b/082-parallax landing page/style.css
index 2b4b12c..fa6e69a 100644
--- a/082-parallax landing page/style.css
+++ b/082-parallax landing page/style.css
@@ -53,10 +53,6 @@ ul {
transform: scale(0.98);
}
-.primary-text {
- color: var(--primary-color);
-}
-
.secondary-text {
color: var(--secondary--color);
}
diff --git a/083-full screen image slider/index.html b/083-full screen image slider/index.html
index 89a3d10..fc209d0 100644
--- a/083-full screen image slider/index.html
+++ b/083-full screen image slider/index.html
@@ -13,7 +13,7 @@
crossorigin="anonymous"
/>
- Full Screen Image Slider
+ Full-Screen Image Slider
diff --git a/087-sliding signin signup form/index.html b/087-sliding signin signup form/index.html
index 3ea0785..1a7ec51 100644
--- a/087-sliding signin signup form/index.html
+++ b/087-sliding signin signup form/index.html
@@ -13,7 +13,7 @@
crossorigin="anonymous"
/>
-
Sliding Sign In & Sign Up Form
+
Sliding Sign-In & Sign-Up Form
diff --git a/091-chat interface/style.css b/091-chat interface/style.css
index a1deba8..49a17ab 100644
--- a/091-chat interface/style.css
+++ b/091-chat interface/style.css
@@ -95,5 +95,4 @@ h2 {
left: 0;
right: 0;
padding: 10px 15px;
- width: 100%;
}
diff --git a/092-music streaming service/style.css b/092-music streaming service/style.css
index b9e2464..a9883ab 100644
--- a/092-music streaming service/style.css
+++ b/092-music streaming service/style.css
@@ -378,12 +378,6 @@ body {
text-align: center;
}
- @media (max-height: 500px) {
- .hero-section .lady-image {
- display: none;
- }
- }
-
.discover-section {
flex-direction: column;
justify-content: center;
@@ -414,3 +408,9 @@ body {
margin: 2rem 0;
}
}
+
+@media (max-height: 500px) {
+ .hero-section .lady-image {
+ display: none;
+ }
+}
diff --git a/097-terminal style landing page/style.css b/097-terminal style landing page/style.css
index 5dd1dc3..de68f8a 100644
--- a/097-terminal style landing page/style.css
+++ b/097-terminal style landing page/style.css
@@ -71,15 +71,16 @@ a {
display: none;
}
+p {
+ margin: 20px 0;
+}
+
+/* Customize WinBox */
.wb-body {
background-color: #111;
padding: 20px;
}
-p {
- margin: 20px 0;
-}
-
.cursor {
font-weight: 700;
animation: 1s blink step-end infinite;
diff --git a/098-magazine layout/index.html b/098-magazine layout/index.html
index ae9b81b..c9ee880 100644
--- a/098-magazine layout/index.html
+++ b/098-magazine layout/index.html
@@ -13,7 +13,7 @@
diff --git a/099-parallax website/style.css b/099-parallax website/style.css
index 34f5381..18417e2 100644
--- a/099-parallax website/style.css
+++ b/099-parallax website/style.css
@@ -8,6 +8,10 @@
font-family: "Poppins", sans-serif;
}
+body {
+ background-color: rgb(24, 24, 24);
+}
+
nav {
position: absolute;
width: 100%;
@@ -83,7 +87,6 @@ nav {
}
.content-images img {
- max-width: 100%;
padding: 2rem 0 0.25rem;
}
}
diff --git a/102-container queries/index.html b/102-container queries/index.html
index 8bedbe1..4081f36 100644
--- a/102-container queries/index.html
+++ b/102-container queries/index.html
@@ -28,7 +28,7 @@ Desert Oasis: Exploring Nature's Tranquility
Tranquil Desert Haven
@@ -42,7 +42,7 @@
Tranquil Desert Haven
Serenity Oasis Retreat
@@ -53,7 +53,7 @@
Serenity Oasis Retreat
Mirage Haven Cottage
@@ -64,7 +64,7 @@
Mirage Haven Cottage
Sand Dune Hideaway
diff --git a/README.md b/README.md
index a0c99fc..d135feb 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ Welcome to the repository for 100+ mini web projects using HTML, CSS, and JavaSc
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:
+Inside the companion guide, you'll find:
- **Day 0: Before Starting Up**
Quick-start setup instructions and a boilerplate walkthrough.
@@ -18,7 +18,28 @@ Inside the PDF, you'll find:
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)
+[**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100-projects-in-100-days.pdf)
+
+> **Ready for the full challenge?**
+> Continue your journey with [**Volume 1: Essentials (Days 1–50)**](https://amzn.to/4g01whb) — unlock 40 more hands-on projects to sharpen your skills and build your portfolio.
+>
+> Then, push your limits with [**Volume 2: Advanced (Days 51–100)**](https://amzn.to/4pSqAeq) to tackle complex challenges and become an advanced front-end developer.
+>
+> [**Join the notification list**](https://mailchi.mp/36e4c32d7df0/get-the-full-guide-first) for future updates and new resources!
+
+## Video Walkthroughs & Slides
+
+Follow along with the official [**100 Projects in 100 Days YouTube playlist**](https://www.youtube.com/watch?v=GlKnIym2xnk&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c). This series includes setup guides and milestone recaps with downloadable slides.
+
+| Milestone | Video Walkthrough | Slides |
+| :---------- | :--------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------- |
+| **Day 0** | [Setup](https://www.youtube.com/watch?v=GlKnIym2xnk&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c) | — |
+| **Day 0** | [Code](https://www.youtube.com/watch?v=HEqNsk7AQas&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c&index=2) | — |
+| **Day 10** | [Recap](https://www.youtube.com/watch?v=-tgcx210Jac&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c&index=3) | [PDF](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Day%2010%20-%20Recap.pdf) |
+| **Day 25** | [Recap](https://www.youtube.com/watch?v=Ma-hxnb5bv0&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c&index=4) | [PDF](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Day%2025%20-%20Recap.pdf) |
+| **Day 50** | [Recap](https://www.youtube.com/watch?v=WMsurim2ARE&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c&index=5) | [PDF](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Day%2050%20-%20Recap.pdf) |
+| **Day 75** | [Recap](https://www.youtube.com/watch?v=tx2uN1l1UU4&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c&index=6) | [PDF](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Day%2075%20-%20Recap.pdf) |
+| **Day 100** | [Recap](https://www.youtube.com/watch?v=RejEP-slnW8&list=PLE8zDN4pyMlyUGkWTZj5U0Y1TPuV19A7c&index=7) | [PDF](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Day%20100%20-%20Recap.pdf) |
## Project Showcase
@@ -48,7 +69,7 @@ Explore each project individually and view live demos to see them in action:
| 018 | [Background Slider](018-background%20slider) | [Live Demo](https://codepen.io/solygambas/full/OJRrVbJ) |
| 019 | [Theme Clock](019-theme%20clock) | [Live Demo](https://codepen.io/solygambas/full/MWjZrZy) |
| 020 | [Button Ripple Effect](020-button%20ripple%20effect) | [Live Demo](https://codepen.io/solygambas/full/oNzJdWw) |
-| 021 | [Drag N Drop](021-drag%20n%20drop) | [Live Demo](https://codepen.io/solygambas/full/RwGEyme) |
+| 021 | [Drag 'N Drop](021-drag%20n%20drop) | [Live Demo](https://codepen.io/solygambas/full/RwGEyme) |
| 022 | [Drawing App](022-drawing%20app) | [Live Demo](https://codepen.io/solygambas/full/wvzREMx) |
| 023 | [Kinetic Loader](023-kinetic%20loader) | [Live Demo](https://codepen.io/solygambas/full/JjRwVLW) |
| 024 | [Content Placeholder](024-content%20placeholder) | [Live Demo](https://codepen.io/solygambas/full/ExgGzaX) |
@@ -114,7 +135,7 @@ Explore each project individually and view live demos to see them in action:
| 084 | [Fluid Image Lightbox](084-fluid%20image%20lightbox) | [Live Demo](https://codepen.io/solygambas/full/MWJKpwg) |
| 085 | [Sneaker Shop](085-sneaker%20shop) | [Live Demo](https://codepen.io/solygambas/full/KKazqNZ) |
| 086 | [Coming Soon Page](086-coming%20soon%20page) | [Live Demo](https://codepen.io/solygambas/full/bGgwNaM) |
-| 087 | [Sliding Sign In & Sign Up Form](087-sliding%20signin%20signup%20form) | [Live Demo](https://codepen.io/solygambas/full/bGgwoGm) |
+| 087 | [Sliding Sign-In & Sign-Up Form](087-sliding%20signin%20signup%20form) | [Live Demo](https://codepen.io/solygambas/full/bGgwoGm) |
| 088 | [Promo Code](088-promo%20code) | [Live Demo](https://codepen.io/solygambas/full/wvggBXe) |
| 089 | [One Color UI](089-one%20color%20UI) | [Live Demo](https://codepen.io/solygambas/full/NWdpPqx) |
| 090 | [Tooltip](090-tooltip) | [Live Demo](https://codepen.io/solygambas/full/YzNgzMb) |
@@ -131,7 +152,7 @@ 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)!
+> **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-projects-in-100-days.pdf)!
## Get Inspired
