planning design

As a user/developer I can follow the design process.

• there is a mobile wireframe file

• there is a desktop wireframe file

• there is a figma document link

• this will be developed on the branch design.

css setup

As a user I want the page to be pretty and friendly to use

• the page looks nice, is accessible and can be used on mobile devices

type: css

• use .button class to stylize button

• this will be developed on the branch 5-css-setup.

11 - keyboard assignments

As a user I can use my keyboard buttons to confirm or cancel choices

the page is responsive to the user's keyboard
type: js

use addEventListener for listener

use innerHTML for handler

use if conditional for logic/component

this will be developed on the branch 11-keyboard.

remove button

A user can remove any item from their list

• there is a 'remove' button

type: html

• use button for remove button

type: css

• use .button class to stylize button

type: js

• use addEventListener for listener

• use getElementById and .removeChild for handler

• use if conditional for logic/component

• this will be developed on the branch 4-remove-button.

page title and header

As a user I can see what page I am on

• there is a page title and header/or intro section

type: html

• use h1 for header and title for title

type: css

• use .header class to stylize header

• this will be developed on the branch 0-header-and-title.

#13 - list formatting

As a user I want the page to help me avoid empty fields

type: html

use code for warning
type: css

use .warning class to stylize warning message
type: js

use addEventListener for listener

use for for handler

use if conditional for logic/component

there is a warning when an empty field is left on the list

12 - share/export

As a user I can share my lists with others

there is a 'share' section on the page
type: html

use input and button for share/export section
type: css

use .share class to stylize export section
type: js

use addEventListener for listener

use for for handler

use if conditional for logic/component

this will be developed on the branch 12-share-export.

planning documents

As a user/developer I can read a readme of the project and follow the development process.

• there is a readme file

• there is a communication plan

• there is a constraints document

• there is a backlog file

• there is a development strategy

• there is a retrospective

• this will be developed on the branch planning.> As a user/developer I can read a readme of the project and follow the development process.

• there is a readme file

• there is a communication plan

• there is a constraints document

• there is a backlog file

• there is a development strategy

• there is a retrospective

• this will be developed on the branch planning.

list display

A user can see all the items in their list

• there is a list display area

type: html

• use table and td for list display

type: css

• use .display class to stylize display section container

type: js

• use if conditional for handler

• use createElement and appendChild for component

• this will be developed on the branch 3-list-display.

7 - add and edit item descriptions

A user can edit the description of each item in their list

There is a 'description' column and 'edit description' button for every list item
type: html

use input and button for description section
type: css

use .description class to stylize section
type: js

use addEventListener for listener

use getElementById for handler

use if conditional for logic/component

this will be developed on the branch 7-description-edit.

list input

A user can add new items to their list

• there is an 'add' button and input bar

type: html

• use input and button for input section

type: css

• use .input class to stylize input section

type: js

• use addEventListener for listener

• use getElementById and .appendChild for handler

• use if conditional for logic/component

• this will be developed on the branch 2-input-add.

page title and header

As a user I can see what page I am on

• there is a page title and header/or intro section

html:

• use h1 for header and title for title

css:

• use .header class to stylize header

• this will be developed on the branch 0-header-and-title.

9 - sort list

As a user I can sort my list in different ways

there is a 'sort' drop-menu for different sorting methods
type: html

use select and option for dropbox
type: css

use .sort class to stylize sort section
type: js

use addEventListener for listener

use getElementById for handler

use if conditional for logic/component

this will be developed on the branch 9-sort-dropbox.

page instructions

• there are some instructions or greeting for the user

type: html

• use p for instructions/greeting

type: css

• use .intro class to stylize greeting/instructions

• this will be developed on the branch instructions-section.

delete reset list

As a user I can reset or delete an entire list

• there is a 'delete list' or 'reset list' button

type: html

• use button for delete/reset button

type: css

• use .button class to stylize button

type: js

• use addEventListener for listener

• use getElementById and .removeChild for handler

• use if conditional for logic/component

• this will be developed on the branch 6-reset-delete.

10 - change font

As a user I can change the font and stylization of my list items

there is a 'stylize' function on the page
type: html

use select and option for style dropbox
type: css

use .font class to stylize change font section
type: js

use addEventListener for listener

use innerHTML for handler

use if conditional for logic/component

this will be developed on the branch 10-change-font.

8 - done/undone checkbox

A user can mark an item as "done" or "not done"

There is a checkbox for every item in the list
type: html

use input and checkbox for checkbox
type: css

use .checkbox class to stylize checkbox
type: js

use addEventListener for listener

use getElementById for handler

use if conditional for logic/component

this will be developed on the branch 8-checkbox.