learn-javascript-the-hard-way
/
js-level-2-projects
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
These are the projects for the JavaScript Level 2 module in Learn JS the Hard Way.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
28 Commits
1 Branch
0 Tags
378 KiB
 
 
 
Tag: Branch: Tree: afe3cfca47
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'afe3cfca47'
${ noResults }
js-level-2-projects/08-a-todo-list-website/README.md

2.2 KiB
Raw Blame History

08: A TODO List Website

You have your TODO database, a module to use it, and a test to make sure the module keeps working. You also know how to create a web application that can accept requests and return HTML responses.

You are now going to combine these things to create a simple TODO list web application. Your web application should do the following:

  1. Use forms, checkboxes, and buttons (at a minimum) in the UI for the TODO list.
  2. Store the changes the user makes in the database you've made.
  3. Use command line options in the Express.js application to let people change the startup options for port, host, and database.
  4. Use a template that lets you change the design without changing the main UI templates. This is a "layout template".
  5. Advanced Support searching for TODOs.
  6. Advanced Support pagination, which means if I have 1000 TODOs then you only show 25 and I can "page through" the results.
  7. Super Advanced Use ava and Playwright to write a UI test for your application.

For pagination, look at the knex-paginate project for help doing it.

Learning Objective

You're objective here is to combine all the things you've learned so far into one simple web application. The simplicity of the TODO list application allows you to flex your learning on the subjects of database access, testing, and web applications. Take your time with this and focus on one thing at a time. I recommend getting the UI to work first with fake data, then connect it to the database.

If you're going to try testing with Playwright then you can changet his tactic and create the UI, then write a test for the UI, then connect it to the database while you keep running the test.

Advanced Options

In this exercise you have 2 Advanced and 1 Super Advanced option. These are useful things to know, but they aren't essential for the learning objective. If you get to these 3 features and you're burned out try taking a break, then redo the whole project again. Repeating these exercises is a great way to prove to yourself you can do it, rather than believing it was "just luck."