Build a Wishlist Organizer App
Monthly Coding Challenge: July 2024
A blog by: Code Flight — a personalized & affordable learn-to-code platform, that’s fully-virtual & self-paced, so you can learn on your own time from anywhere!
Build a Wishlist Organizer App
Amazon Prime Day is peak wishlist season, and people are saving everything from tech gadgets to must-have kitchen tools. In this challenge, you’ll build your own Wishlist Organizer App, a sleek little tool that helps users keep track of products they love. It’s the perfect real-world project to show off your growing skills in UI design, JavaScript logic, and working with real user input. Plus, it’s useful for gift planning, budgeting, or just staying organized!
Challenge Details:
Challenge Details: Why Build This Project?
This challenge helps you strengthen:
Form handling and capturing user input
JavaScript arrays/objects for storing and updating data
DOM manipulation to dynamically render lists
Conditional styling (e.g., highlight high-priority items)
Basic CRUD functionality (Create, Read, Update, Delete)
Challenge Details: Why Build This Project?
This challenge helps you strengthen:
Form handling and capturing user input
JavaScript arrays/objects for storing and updating data
DOM manipulation to dynamically render lists
Conditional styling (e.g., highlight high-priority items)
Basic CRUD functionality (Create, Read, Update, Delete)
Getting Started: Basic Requirements
Build a wishlist app with the following features:
An input form to add an item (name, price, optional category)
A display area that lists all items
Ability to mark items as:
✅ Purchased
⭐ High Priority
Ability to delete an item
Store everything in JavaScript objects or arrays
Use HTML, CSS, and vanilla JavaScript (no frameworks!)
Leveling Up: Advanced Features
If you’re ready to stretch:
Use
localStorageto save the wishlist across sessionsAdd a “Sort by Price” or “Group by Category” option
Include a running total of wishlist cost vs. budget
Add a dark mode or theme switcher
Use icons or colors to visually distinguish item status (e.g., purchased vs. priority)
Breaking Down the Project: Weekly Goals
Week 1: Setup & Layout
Create your HTML structure (form, wishlist section)
Write basic CSS to organize the layout
Add mock wishlist items manually in HTML to visualize
Week 2: Add & Display Items
Set up JavaScript to handle form submission
Store items in an array and dynamically render them
Show name, price, and buttons (mark purchased, delete)
Week 3: Make It Interactive
Add interactivity: delete button, mark purchased, toggle priority
Improve styling for completed/priority items
Optional: Save the wishlist to
localStorage
Week 4: Polish & Portfolio
Add bonus features (budget tracker, category sorting, etc.)
Clean up your UI and code
Write a README and deploy your app on GitHub Pages or Netlify
