john-smilga · asgoodman224 · May 8, 2026
diff --git 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
diff --git 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 = `<p class="title">${value}</p>
+    element.innerHTML = `<p class="title"></p>
             <div class="btn-container">
               <!-- edit btn -->
               <button type="button" class="edit-btn">
@@ -46,6 +46,7 @@ function addItem(e) {
               </button>
             </div>
           `;
+    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 = `<p class="title">${value}</p>
+  element.innerHTML = `<p class="title"></p>
             <div class="btn-container">
               <!-- edit btn -->
               <button type="button" class="edit-btn">
@@ -207,6 +208,7 @@ function createListItem(id, value) {
               </button>
             </div>
           `;
+  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
@@ -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)