FAC-week2-DOM maipulation and Testing

Aim - Use Test driven development(TDD) to build a To-do app

Team

  1. Jack
  2. Gigi
  3. Martha
  4. Jan

Technology & Tools

TDD (Tape & tap-spec), Pair programming, Git and GitHub, npm, vanilla JavaScript, HTML, CSS, VS Code, Atom and command line.

Screenshots

desktop mobile

The project

User stories:

As a disorganised person I want to:

☑ enter tasks I need to do into a web page so that I don't forget them
☑ view the tasks I have added in a list so that I can plan my day
☑ mark tasks as complete so that I can focus on the tasks I have left
☑ the to-dos to be large enough so that I don't hit the wrong one with my thumb

Potential stretch goals

As a disorganised person I want to:

☑ edit my to-dos so that I can amend them if the task changes
☑ click on any part of a to-do to mark it as complete so that it's easier for me to check to-dos off
☑ a visual indication of which to-do I'm about to interact with so that it's clear what I'm editing

What did we learn?

  • To use Test Driven Development on a team project with pair programming
  • To use pure functions whenever possible
  • To manipulate the DOM using node-lists
  • To work with a pre-existing codebase
  • To use IIFEs (Immediately Invoked Function Expressions) to protect variables. Note: we didn't write them but they were in the skeleton
  • To resolve more complex git issues

What did we complete?

For the first part of the project we created three functions using TDD. Then, we covered the stretch goals. In total we have the following functions:

  1. Add to-do
  2. Delete to-do
  3. Mark to-do as done
  4. Sort to-dos by alphabetical order
  5. Edit to-dos using a prompt

checklist