Lab 3 - Learn JavaScript basics

Story

Imagine, you're a frontend developer from Melbourne, Australia. You and your company Sleep2nigth Pty Ltd are working on a brand new product - smart To-do lists!

You've pitched the idea in the local startup accelerator and you've won first round of investitions. The only thing what's left - to build the app itself.

Task

1. Copy index.html, style.css and app.js to your repo;
2. Modify them to build an application for to-do list;
3. The app has to cover basic needs:

• to add to the list;
• to remove from the list;
• to mark as done;
• see "done" and "to-do" lists separately.

4. The app has to look attractive.

Special conditions

You're not allowed to use any third-party library for JS, except utility packages such as lodash or underscore. jquery is not allowed. If you use third-party CSS libraries/frameworks, make sure they don't use JS.

Grading

Points:

• basic app - 6 points
• attractive app - +1 point
• the list is preserved after page refresh - +1 point;

You can get +1 point if the app implements a notification mechanism. You can get +1 point for each useful feature the app implements, besides the ones listed above (up to 3 points, approved by the teacher).

Hints

• For UI, you are free to use any CSS library. You can try Tailwind CSS, Bootstrap or Bulma;
• Use the latest standards of ECMAScript (2015 or later) to write JS code;
• To debug JS, put debugger somewhere in the code you want to check what's going wrong there, open Developer Tools and then refresh the page;
• Use JS classes to separate business logic from data representation.