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)