Project 1: Task Manager

yogeshtakeo commented 6 months ago

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

Project Objective: Build a simple Task 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 Task list.

Implement Task 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 Task List:

Use native CSS to style the Task 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 Task 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.