Task 11 : Todo Application

yogeshtakeo commented 1 year ago

Task 11: Build a Simple To-Do List Application Using React and Native CSS Styling (Single File)

Objective: Build a simple to-do list application using React and style it using native CSS.

Task Overview

Create a React project structure in a single file.
Style the application using native CSS to enhance its visual appearance.

Task Details

Project Setup:

Set up a new React project in a single file by importing the necessary React modules.
Create a functional component called TodoApp to serve as the main container for the to-do list.

Implement To-Do List Functionality:

In the TodoApp component, set up a state variable to store the list of tasks.
Implement functionality to add new tasks by capturing input from a API https://jsonplaceholder.typicode.com/todos/ and updating the state accordingly.

Style the To-Do List:

Use native CSS to style the to-do list application.
Apply styling to the TodoApp component to define the layout and appearance of the overall list.
Style each task item to differentiate completed and pending tasks.
Apply appropriate styles to the input field and buttons to enhance their visual appearance.

Test and Refine:

Start the development server and run the React project.
Verify that the to-do list application functions as expected.
Ensure the application is visually appealing and the styling is well-applied.

Task Submission

Take a screenshot of the web browser displaying the rendered React component . Share the screenshot Optionally, submit the code files (App.js and any other relevant files) for review with the GitHub Repository.