diff --git a/10-scroll/final/app.js b/10-scroll/final/app.js
index 876fc7889..e4856c6bb 100644
--- a/10-scroll/final/app.js
+++ b/10-scroll/final/app.js
@@ -42,8 +42,6 @@ window.addEventListener("scroll", function () {
// setup back to top link
if (scrollHeight > 500) {
- console.log("helo");
-
topLink.classList.add("show-link");
} else {
topLink.classList.remove("show-link");
diff --git a/13-lorem-ipsum/final/app.js b/13-lorem-ipsum/final/app.js
index 522827498..d05facff6 100644
--- a/13-lorem-ipsum/final/app.js
+++ b/13-lorem-ipsum/final/app.js
@@ -23,7 +23,7 @@ form.addEventListener("submit", function (e) {
const value = parseInt(amount.value);
const random = Math.floor(Math.random() * text.length);
- if (isNaN(value) || value < 0 || value > 9) {
+ if (isNaN(value) || value <= 0 || value > 9) {
result.innerHTML = `
${text[random]}
`;
} else {
let tempText = text.slice(0, value);
diff --git a/14-grocery-bud/final/app.js b/14-grocery-bud/final/app.js
index 780530c2e..40270e7e1 100644
--- a/14-grocery-bud/final/app.js
+++ b/14-grocery-bud/final/app.js
@@ -25,7 +25,7 @@ window.addEventListener("DOMContentLoaded", setupItems);
// add item
function addItem(e) {
e.preventDefault();
- const value = grocery.value;
+ const value = grocery.value.trim();
const id = new Date().getTime().toString();
if (value !== "" && !editFlag) {
@@ -34,7 +34,7 @@ function addItem(e) {
attr.value = id;
element.setAttributeNode(attr);
element.classList.add("grocery-item");
- element.innerHTML = `${value}
+ element.innerHTML = `
`;
+ element.querySelector('.title').textContent = value;
// add event listeners to both buttons;
const deleteBtn = element.querySelector(".delete-btn");
deleteBtn.addEventListener("click", deleteItem);
@@ -63,7 +64,7 @@ function addItem(e) {
// set back to default
setBackToDefault();
} else if (value !== "" && editFlag) {
- editElement.innerHTML = value;
+ editElement.textContent = value;
displayAlert("value changed", "success");
// edit local storage
@@ -121,7 +122,7 @@ function editItem(e) {
// set edit item
editElement = e.currentTarget.parentElement.previousElementSibling;
// set form value
- grocery.value = editElement.innerHTML;
+ grocery.value = editElement.textContent;
editFlag = true;
editID = element.dataset.id;
//
@@ -195,7 +196,7 @@ function createListItem(id, value) {
attr.value = id;
element.setAttributeNode(attr);
element.classList.add("grocery-item");
- element.innerHTML = `${value}
+ element.innerHTML = `
`;
+ element.querySelector('.title').textContent = value;
// add event listeners to both buttons;
const deleteBtn = element.querySelector(".delete-btn");
deleteBtn.addEventListener("click", deleteItem);
diff --git a/README.md b/README.md
index 61f6c7d29..ca99995e4 100644
--- a/README.md
+++ b/README.md
@@ -1,46 +1,95 @@
# Vanilla JS Projects
-#### Enroll In The Course
-
-[My Javascript Course](https://www.udemy.com/course/javascript-tutorial-for-beginners-w/?referralCode=DD9FA6C0D976918D3E1C)
-
-#### Support
-
-Find the Content Useful? [You can always buy me a coffee](https://www.buymeacoffee.com/johnsmilga)
-
-## You can see all projects in action here
-
-[Projects](https://www.vanillajavascriptprojects.com/)
-
-1. Color Flipper
-2. Counter
-3. Reviews
-4. Navbar
-5. Sidebar
-6. Modal
-7. Questions
-8. Menu
-9. Video
-10. Scroll
-11. Tabs
-12. Countdown Timer
-13. Lorem Ipsum
-14. Grocery Bud
-15. Slider
-
-#### Course Exclusive
-
-16. Counters (OOP)
-17. Gallery (OOP)
-18. Numbers
-19. Dark Mode
-20. Filters
-21. Dad Jokes
-22. Products
-23. Random User
-24. Cocktails
-25. Slider
-26. Stripe Submenus
-27. Pagination
-28. Wikipedia
-29. Comfy Sloth
+A collection of 29 beginner-to-intermediate JavaScript projects built with plain HTML, CSS, and JavaScript — no frameworks, no build tools. Each project has a `setup/starter` folder (blank starting point) and a `final` folder (completed solution).
+
+---
+
+## Live Demo
+
+[View all projects in action](https://www.vanillajavascriptprojects.com/)
+
+---
+
+## Tech Stack
+
+- HTML5
+- CSS3 (custom properties, flexbox, grid)
+- Vanilla JavaScript (ES6+)
+- Font Awesome icons
+- Public REST APIs (for select projects)
+
+---
+
+## Projects
+
+| # | Project | Key Concepts |
+|---|---------|-------------|
+| 01 | **Color Flipper** | DOM manipulation, arrays, random values |
+| 02 | **Counter** | Event listeners, classList, conditional styling |
+| 03 | **Reviews** | Arrays of objects, dynamic rendering, random index |
+| 04 | **Navbar** | Toggle classes, responsive navigation |
+| 05 | **Sidebar** | Overlay/drawer pattern, classList toggle |
+| 06 | **Modal** | Show/hide overlay, event delegation |
+| 07 | **Questions** | Accordion/FAQ pattern, toggle content |
+| 08 | **Menu** | Filter by category, data attributes |
+| 09 | **Video** | HTML5 video API, play/pause/mute controls |
+| 10 | **Scroll** | `scrollY`, fixed navbar, smooth scroll, back-to-top |
+| 11 | **Tabs** | Tab switching, active state management |
+| 12 | **Countdown Timer** | `setInterval`, date math, DOM updates |
+| 13 | **Lorem Ipsum** | Text generation, form validation, `slice` |
+| 14 | **Grocery Bud** | CRUD, `localStorage`, edit/delete, input validation |
+| 15 | **Slider** | CSS transitions, auto-play, prev/next logic |
+| 16 | **Counters (OOP)** | Classes, `IntersectionObserver`, animation |
+| 17 | **Gallery (OOP)** | Lightbox, OOP pattern, keyboard navigation |
+| 18 | **Numbers** | Animated number counting on scroll |
+| 19 | **Dark Mode** | `localStorage` theme persistence, CSS variables |
+| 20 | **Filters** | Array filter, dynamic rendering, category buttons |
+| 21 | **Dad Jokes** | Fetch API, async/await, custom request headers |
+| 22 | **Products** | Fetch API, product cards, dynamic rendering |
+| 23 | **Random User** | Fetch API, external API consumption |
+| 24 | **Cocktails** | Fetch API, search, dynamic card rendering |
+| 25 | **Slider** | Advanced slider with testimonials |
+| 26 | **Stripe Submenus** | Animated dropdown menus, mouse position tracking |
+| 27 | **Pagination** | Client-side pagination, dynamic page buttons |
+| 28 | **Wikipedia** | Wikipedia API, search debouncing |
+| 29 | **Comfy Store** | Full shopping UI, cart, filters, localStorage |
+
+---
+
+## Getting Started
+
+No installation or build step required. Open any project directly in a browser:
+
+```bash
+# Open a project's final version
+open 01-color-flipper/final/index.html
+
+# Or use the VS Code Live Server extension for hot reload
+```
+
+Each project folder contains:
+```
+project-name/
+├── final/ ← completed solution
+│ ├── index.html
+│ ├── app.js
+│ └── styles.css
+└── setup/ ← blank starting point (starter/)
+ ├── index.html
+ ├── app.js
+ └── styles.css
+```
+
+---
+
+## Course
+
+These projects accompany the Udemy course:
+
+[The Complete JavaScript Course for Beginners](https://www.udemy.com/course/javascript-tutorial-for-beginners-w/?referralCode=DD9FA6C0D976918D3E1C)
+
+---
+
+## Support
+
+Find this useful? [Buy me a coffee ☕](https://www.buymeacoffee.com/johnsmilga)