Task 5 b : Todo Application ( fetching the data )

[yogeshtakeo]

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

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

Task Details

Project Setup:

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

Implement To-Do List Functionality:

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

Style the To-Do List:

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

Test and Refine:

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

Submission

Share the screenshots of your code and the rendered component in the issue's comment section of your GitHub repository. Make sure to include the GitHub repository URL in the comment.

Note: Feel free to use any additional JavaScript or CSS features or syntax to enhance your solution. Provide comments where necessary to explain your code.

[onsever]

Onurcan Sever Github Link: https://github.com/onsever/bsf/tree/main/js-concept-5b

Code Screenshot:

Output Screenshot:

[bjornbaniya]

Bjorn Baniya

https://github.com/bjornbaniya/jsontodo.git

[RoneshSingh]

Annish Singh

Repo: https://github.com/RoneshSingh/post-to-do

[GM-Frost]

Nayan Task: TODO App API Fetch Git: https://github.com/GM-Frost/BFS33-TodoApi-Fetch.git

[YashKharel19]

YASH KHAREL Task 5 b : Todo Application ( fetching the data ) GITHUB: https://github.com/YashKharel19/To-Do-List-Application-Using-React-and-Native-CSS-Styling

[ngawangsherpa]

Ngawang Sherpa Task 5b Github Link: https://github.com/ngawangsherpa/TodoApi-Fetch