Todo App In React Full Project

Todo App In React Full Project

Share It With Your Firends:

Let’s say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them.

In this post, I’ll explain how to create a Todo app using React (a JavaScript library for building user interfaces), with ES6 syntax and React hooks from scratch. This will be a very basic app, with an input field for inputting the Todo item and a delete button next to each item to delete the item. Additionally, we will use the useState hook from React to preserve the state of our application and some advanced JavaScript features such as map() , arrayspreadternary operator and filter()methods. The goal of this tutorial is to assist you in getting started with React.

simply check the github for all the code:

https://github.com/AkshatMahadeva/React-Todo-App

create a react app

Create React App (CRA) is a tool to create single-page React applications that is officially supported by the React team. The script generates the required files and folders to start the React application and run it on the browser.

npm create-react-app todo

You need to use some css for your todo app. You need to delete some file and you can simply you can use these styles to create your react app.

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgb(18, 100, 231);
  font-size: 24px;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.card{
  max-width: 400px;
}

ol li{
  list-style: none;
  color: rgb(152, 43, 229);
  text-shadow: 1px 1px 3px rgb(116, 112, 112);
  letter-spacing: 2px;
  line-height: 30px;
  font-weight: 20px;
}

i{
  color: red;
  cursor: pointer;

}

.form-control{
  border: none;
  outline: none;
  border-radius: 0;
  border-bottom: 2px solid rgb(139, 19, 226);
}

.form-control:focus{
  outline: none;
  border: none;
}

.btn{
  background-color: rgb(139, 19, 226);
  font-weight: bold;
}

.btn:hover{
  background-color: rgb(199, 26, 230);
}

.text-center{
  color: rgb(152, 43, 229);
  text-shadow: 1px 1px 3px rgb(191, 185, 185);
  letter-spacing: 2.5px;
  font-weight: bold;
}

Now inside these app.js you need to add some code. You need to create the body of your app. you need to use usestate hook and useeffect hook. you need to create a form to create a react list. now you need to use array method to display the list.

Use State

The useState() is a Hook that allows you to have state variables in functional components . so basically useState is the ability to encapsulate local state in a functional component.

Use Effect

The useEffect Hook allows you to perform side effects in your components. Some examples of side effects are: fetching data, directly updating the DOM, and timers. useEffect accepts two arguments. The second argument is optional.

import './App.css';
import {useState} from 'react';
import ToDoLists from './toDoLists';

function App() {
  const [inputList, setInputList] = useState(""); 
  const [Items, setItmes] = useState([]);

  const itemEvent = (event) => {
    setInputList(event.target.value);
  }

  const listOfItems = ()=> {
    setItmes((oldItems)=>{
      return [...oldItems, inputList];
    })
    setInputList("")
  }

  const deleteItems = (id)=>{
    console.log("deleted" + id);

    setItmes((oldItems) => {
      return oldItems.filter((arrElem, index) =>{
          return index !== id;
        })
    }
    )} 

  return (
    <div className="card container mt-5 py-4">
      <h1 className="text-center mb-4">Todo List</h1>
      <div className="d-flex">
        <input className="form-control me-2" type="text" value={inputList} placeholder="Add New Item" onChange={itemEvent} aria-label="Search" required/>
        <button className="btn btn-success" onClick={listOfItems}>Add</button>
      </div>

      <ol>
        { /*inputList*/ }
        {Items.map((itemval, index)=>{
          return <ToDoLists key={index} id={index} text = {itemval} onSelect = {deleteItems}/>
        })}
      </ol>
    </div>
  );
}

export default App;

Share It With Your Friends

Leave a Reply

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python
DIY AI Voice Assistant In Python

September 8, 2023

Build your own AI assistant with Python! Learn to recognize voice commands, generate responses, and more. Create your virtual companion…

share it

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python

Additional Content

CodeWithAM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus.

Products

Automated Chatbot

Data Security

Virtual Reality

Communication

Support

Services

FAQ's

Privacy Policy

Terms & Condition

Team

Contact Us

Company

About Us

Services

Features

Our Pricing

Latest News

© 2023 Codewitham