You should be focusing on meeting these learning outcomes over the three-week period. You will be tested on your learning during weekly quizzes.

Your project this week is to build a to-do list tracker. It should allow users to create, complete and delete tasks from a list.

You should have automated tests covering all the main user stories. Each story below has a test "shell". You have to fill out the body to create a failing test for each story. You should then see the tests pass as you add features to your app. This is the minimum amount of testing required: you should write additional tests to cover the rest of your code.

User stories

Core

As a busy person, I want to:

• Add tasks to a list so that I can keep track of them

  Copy

  test("Submitting a new task adds it to the list", () => {
    // test goes here
  });

• Check things off my list so that I can see what I’ve done

  Copy

  test("Checking an entry marks it as complete", () => {
    // test goes here
  });

• Delete things from the list if I don’t need to do them anymore

  Copy

  test("Deleting an entry removes it from the list", () => {
    // test goes here
  });

As a motor-impaired user, I want to:

• Use all the features of the app without a mouse

Stretch

As a busy person, I want to:

• Filter out completed to-dos from my list so that I can focus on what's left to do

  Copy

  test("Toggling the filter hides completed tasks from the list", () => {
    // test goes here
  });

Acceptance Criteria

• A working to-do list

• Tests for (at least) each user story

• A responsive, mobile-first design

• Ensure your app is accessible to as many different users as possible

Advanced CSS

How can we use advanced CSS features to create complex custom components?

Questions to consider

1. What are "combinator" selectors? Can you provide examples where they're useful?

2. What are pseudo-elements? Can you provide examples where they're useful?

3. How might you create custom-styled checkboxes using both of the above?

Useful resources

• CSS selectors

• A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

• Under-Engineered Custom Radio Buttons and Checkboxen

Advanced DOM

How can we use advanced DOM features to make rendering complex UIs easier.

Questions to consider

1. What is a NodeList?

   • How is it different from an array?

   • What's the different between "live" and "static" NodeLists?

2. What is the <template> element?

   • How can we use this to render dynamic UI?

Useful resources

• NodeList | MDN

• The Content Template Element | MDN

• Template element example

Checking our code

What are all the different ways to make sure our code is correct?

Questions to consider

1. What is Prettier? How might it help us write better code?

2. What is static analysis? How can a linter help us avoid bugs?

3. What are the pros and cons of unit, integration and end-to-end tests?

Useful resources

• How To Format Code with Prettier in Visual Studio Code

• ESLint Getting Started

• Static vs Unit vs Integration vs E2E Testing for Frontend Apps

Testing methodologies

How do different testing methodologies try to improve the way we write tests?

Questions to consider

1. What is Test-Driven Development (TDD)? Can it help us write better code?

2. What is Behavior-Driven Development (BDD)? How do we translate user requirements into automated tests?

3. What is test coverage? Can this tell us about the quality of our tests?

Useful resources

These resources are helpful extra reading that may clarify or enhance concepts you're learning in the main curriculum.

• TDD changed my life

• Behavior Driven Development and Functional Testing

• Test Coverage

• Make Your Test Fail

  Good testing practices so you can be confident your tests are working.

• The advantages of the template element

  A comparison of creating DOM elements manually versus using the <template> element. Useful technique if you're dynamically rendering lots of stuff with JS.