Synchronous JS Todo App

• Tools: HTML5, CSS, Javascript

Goal

You will be creating a CRUD app that tracks a user's todo list. Users should be able to add todo items, view them in a list or grid, mark each as completed, and delete them from the list.

Constraints

This todo app only needs to be built using plain HTML, CSS, and Javascript. No HTTP requests, databases or external libraries are necessary. Don't expect your data to persist through page refreshes.

Use what you know about adding/editing/removing DOM elements to dynamically generate the UI.

Checklist

• Store todo items as an array of objects. As users add todo items, they should look something like this:

var todos = [{
    title: "example",
    description:"lorem ipsum",
    price: 30,
    completed: false
},
...]

• Use a form to allow users to add items to their list. The information should immediately display on the screen once submitted.
• Each todo item should have a checkbox which allows the user to mark it as completed. Use a strike-through or some other effect using CSS to convey its status.
• Each todo item should have a delete button which removes its information from the DOM.
• The app should be responsive and styled well using good CSS design principles.
• Remember to debug using the browser developer tools.
• [Optional] Allow the user to edit the properties of each todo item, e.g. change the name, price, or description after it's been added to the list.

Demo

Click Here for an example.