Скачать или смотреть Build Awesome Todo App With REACT Using Hooks in 2023 | Part 4 | React Bangla Tutorial

Welcome, How to Build A Todo App With REACT & Hooks in 2023. React Todo App project including Hooks in 2023. Hello, Today I'll show you how to create an amazing Todo application using only React JS. Features included in React Todo Application - Todo List Create New Todo ListCreate on click or enter button click delete Todo react todo application, todo application in react js
styling :

*{ margin: 0; padding: 0;}.main{ height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; background-image: linear-gradient(to right, #434343 0%, black 100%); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }.todo{ position: fixed;min-height: 65vh;max-height: auto;width: 28%;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;border-radius: 15px;background-image: linear-gradient(to right, #434343 0%, black 100%);}.adding,form{ margin-top: 3%;height: 20%;width: 100%;display: flex;flex-direction: row;justify-content:flex-start;align-items: center;}.inp{ width: 77%; height: 40px; outline: none; margin-left: 3px; font-size: x-large; text-align: center; font-weight: bold;}.add{ width: 19%; margin-left: 5px; height: 45px; color: white; font-weight: bold; font-size: 23px; background-color: #8608ed; border: none; }.add:hover{ background-color: #57009e; }.items{ margin-top: 5%;height: 70%;width: 100%; display: flex; justify-content:flex-start; flex-direction: column; align-items: center; text-align: center; color: white;}.h1{ font-weight:400; width: 95%; font-size: 35px; background-color: #000000; margin: 5px 0px 5px 0px; padding: 2px; display: flex; justify-content: space-between;}.iconbtn{ background-color: black; height:50px; width: 50px; background-color: crimson; color: white; border-radius: 50%;}.iconbtn:hover{ background-color: rgb(245, 6, 54);}.edit{ background-color: black; height: 100%; width: 50px; color: rgb(30, 255, 0);}.edit:hover{ background-color:rgb(30, 255, 0); color: white;}.icon{font-size: 25px; }@media (min-width: 100px)and (max-width: 600px) { .todo{ position: fixed; min-height: 65vh; max-height: auto; width: 90%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #2155CD; border-radius: 8px; } } @media (min-width: 600px)and (max-width: 800px) { .todo{ position: fixed; min-height: 60vh; max-height: auto; width: 60%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #764AF1; border-radius: 8px; } }
#reactTodoApp #react #react_bangla_tutorial #web_development #bangla_web_development #bangla_react #react_video #html #javascript