Todo list application using ReactJs

By Ashutosh Anand

Boost your productivity ,never forget an important task again ,effortlessly manage your tasks and stay organized with our sleek and user-friendly Todo app.

Firstly import the necessary modules and libraries, including Bootstrap components and the useState hook from React.

Within the Todomain component, it sets up two pieces of state using the useStatehook: activity and items. activity is used to store the current task being entered by the user, and items is an array that holds a list of tasks.

The addactivity function is defined to add a new task to the items array. It updates the items state by spreading the existing tasks and adding the new task. After adding the task, it clears the activity input field.

The removeactivity function is defined to remove a task from the list. It filters the items array to exclude the task with the specified index i.There's also a remove function that clears all tasks from the items array.

The component renders an HTML structure that includes:

• A heading displaying "TODO LIST".
• An input field for entering tasks.
• A button to add a task.
• A list of tasks with a "Remove" button for each task.
• A "REMOVE ALL" button that appears when there are tasks in the list.

The component uses Bootstrap classes for styling buttons and input fields.

Event handlers are set up to handle input changes and button clicks, which update the component's state and trigger rendering updates.

CODE

import { Button } from "bootstrap";

import { useState } from "react";

import "../App.css";

const Todomain = () => {

    const [activity, setActivity] = useState("");

    const [items, setItems] = useState([]);

    const addactivity = () => {

        setItems([...items, activity]);

        setActivity("");

    };

    const removeactivity = (i) => {

        const updatedList = items.filter((elements, id) => {

            return i != id;

        });

        setItems(updatedList);

    };

    const remove = () => {

        setItems([]);

    };

    return (

        <>

       

           

        </>

    );

};

export default Todomain;

.container{
  background-color: antiquewhite;
  width: 100%;
  height: 100vh;
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.heading{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: rgb(180, 50, 50);
  font-weight: 500;
}


.button-add{
  transition: box-shadow 0.60s;
}
.button-add:hover{
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.45);
}

.input-field{
  padding: 10px;
  width: 300px;
}

.button-add{
  padding: 5px;

}
.text{
  display: inline-block;
  margin-right: 50px;
}

 WORKING APP SCREENSHOTS