A Williams student was planning on adding a todo list feature to WSO, but they never got around to finishing it. Your role is to fill in the missing code to finish the todo list. Follow the instructions below to learn how to complete the project.
Clone the app:
git clone https://github.com/WilliamsStudentsOnline/onboarding-frontend.git
cd onboarding-frontendInstall dependencies:
yarnRun the app:
yarn start
This app is written in TypeScript, which is basically a different version of JavaScript. The app also uses React, a JavaScript framework which allows for easy development of an efficient frontend. Both of these technologies are the core technologies behind building the WSO website.
The building blocks of React apps are components, which refer to distinct units comprising the frontend. For example, TodoListItem.tsx is a functional component which takes in props (arguments) and outputs an HTML object which renders as a checkbox. The todo list is comprised of many TodoListItems. We can render these components in our React code to make them appear on our page.
The following exercises will familiarize you with some basic principles of components in React.
Our React app is made of 4 components: an App, a TodoList, a TodoListItem, and an AddTodoForm.
Navigate to the src folder. These components are visible in the folder follows by a .tsx (TypeScript) extension.
The previous owner of the project wants the App component to display a TodoList, followed by an AddTodoForm. Add code to the App.tsx file to render these components.
After successfully adding the TodoList and AddTodoForm, we notice that the TodoListItems are not properly rendering. Add code to the TodoList.tsx file to fix the TodoList and properly render the TodoListItems.
Optional Challenge Extension: We want to display the total number of completed items on the todo list out of the total number of items. Using React hooks, create a counter showing [total number of completed tasks] / [total number of tasks]. You will be able to complete this task by adding code only to App.tsx.