In this project, you’ll build a web-based shopping list app using JavaScript, HTML, and CSS. The two critical features that you must implement are the ability to 1) add items to the list, and 2) check them off. This is a more challenging problem than the guessing game, so don’t worry if it takes you some time to plan it out, and do not hesitate to ask questions!
For this app, you’ll need to understand how to use JavaScript to accept user input through a form. If you don’t yet know how to do form handling, check out this JavaScript Introduction to Forms.
- Create a new git repository to house your app.
- As a best practice, you are strongly encouraged to design and write your HTML and CSS for your app before touching the JavaScript. In your HTML and CSS, hard-code two entries in your shopping list: 1) What a new item looks like, and 2) what a "checked-off" item looks like.
- Now write JavaScript to handle the necessary “add” and “check_off” functions that will bring your app to life. Try to break down the big problem into smaller problems before jumping in and writing code. Take one feature at a time (i.e. adding items to the list), and break it down into its subcomponents, and write JavaScript code that solves these smaller problems.
- Once you’ve got a working version of your app, as usual, make sure to share a link with your classmates and your mentor, and solicit their feedback.