fan-shao / todo-list

Task: Todo List

Features

• Add new items and append them to the bottom of the list with an input and button
• Remove items from the list

Optional Features Included

• Mark item as complete
• Edit item on list
• Delete item from list

To view the app

Go to https://fans-todo-list.netlify.app/

Installation

Clone the repo into your local machine with the following:

git clone https://github.com/fan-shao/todo-list.git

Install dependencies using:

npm install

This app uses React v.17. In the project directory, run the following:

yarn start or npm start

Open http://localhost:3000 to view it in the browser. This app is running in development mode.

App Information

The app contains two components: App and Todo

App Component

The top level App component contains the following user actions: Add Todo and Filter Todo by Completion. The default view for filter is View All.

The user can add items to the list either by clicking the Add Task button or by pressing the Enter key. The item will not add if the input box is empty. Added tasks will display on the page.

The Filter allows users to display their tasks by completion. The default view is View All, and they can select also between Complete and Incomplete.

Todo Component

Contents of the task can be found in the Todo component. It contains the following user actions:

• Complete Task: Clicking on the empty box to the left of the task will check off the box and put a strikethrough on the targeted task.
• Edit Task: Clicking on the Edit button causes a toggle on both the task and the button for the selected task. The task field will display a text input and the Edit button will switch to a Save button.
  • If the user makes no changes or has nothing in the input and clicks Save, the task will not be modified.
  • If the user makes a change, upon clicking Save, if the task was previously complete, it will reset to incomplete: The Complete box will become unmarked and the task will not have a strikethrough. If the task was previously incomplete, the display will not change.
• Delete Task: Clicking on the Delete button will remove the targeted task from the list.

The list of tasks is displayed with alternating colors to help distinguish between the tasks.

HTML and CSS

The app is split into 3 sections: Header, User Action, and the List of Todos.

The User Action is added in a section tag because other tags don't seem to fit. The closest is nav, but the user is not navigating anywhere else.

List of Todos contains the main content of the page, so it is assigned the main tag.

div tags are used to help with content placement.

The CSS is named using the BEM methodology. Styling is grouped by component, with the exception of the header.