lab-antwerp-1 / group-3-soc-project Goto Github PK

• Backlog
• Development Strategy
• Readme
• Wireframe
• Constraints

2 - Add items

A user can add items to their list.

• there is a text box where user can type in the new item in the list.
• there is an add button to send the typed item onto the list.

type: HTML

• use form and input = text to type the new item in.
• use input = button to create the Add button.

type: CSS

• use add-button class to style button.

type: JS

• use addEventListener and click to create a user event for the button element.

• use getElementById and appendChild method in handler function.

• create a data file to store user's input.

• This will be developed on the branch 2-add-item.

4 - Removing items

A user can remove items in their list.

• there is a Delete button next to each item in the pending list.

type: HTML

• use input type = button to create button element.
• use id = delete-button to reference element.

type: CSS

• use id = delete-button to style it.

type: JS

• use addEventListener and click event set user's event.

• use getElementById and .removeChild to delete element.

• This will be developed on the branch 4-remove-item.

5 - Done items

A user can mark items as done

• there is a Done button to mark an item/task as done.

type: HTML

• use input type = button to create button element.
• use id = done-button to reference the element.

type: CSS

• use id = done-button to style it.

type:JS

• use data to store a new list with all elements marked as done.

• use addEventListener and click to create user's event.

• This will be developed on the branch 5-done-items.

1 - Short description of the page

A user can read a short description of the page

• there is a short text describing after the title describing basic usability.

type: HTML

• use div and id = text to create a container for all text, including title
• use p and class = introduction to set the body of the text.

type: CSS

• use the class = introduction to style the text.

• This will be developed on the branch 1-description.

3 - List display

A user can see all items in their list, wether they are done or not done.

• there is a list with all pending items/tasks.
• there is a list with all done items/tasks.

type: HTML

• use div and id = pending-list to display new items.
• use ul and li to set the elements.
• use div and id = done-list to display the completed items.
• use ul and li to set the elements.

type: CSS

• use text-decoration: line-through for the elements in the done list.

• use text-align: center to center all content.

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

6 - Reset all lists

A user can delete all current info and restart with an empty list.

• there is a Refresh all button that clears all current information.

type: HTML

• use button to create the element.
• use a to turn the button into a link that redirects to the home page.
• use id = refresh-button to reference the element.

type: CSS

• use id = refresh-button to style it.

• This will be developed on the branch 6-reset.

0 - Page title/header

A user can see the title of the page.

• there is a header with the name To do as the title of the page.

type: HTML

• use h1 and id header to set the title.

type: CSS

• use .header to create style.

• This will be developed on the branch 0-title.