Giter Club home page Giter Club logo

to-do-app's Introduction

To Do App ๐ŸŽฏ๐Ÿ“

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

to-do-app's People

Contributors

gminova avatar crianonim avatar jackbridger avatar mkatenolan avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.