Build this React To-Do List app in 20 minutes! ☝

#reactjs #utorial #course
This is a project you can write using React JS with only using the useState hook. Impress your friends or potential employer!
00:00:00 setup
00:03:12 HTML
00:09:26 CSS
00:16:39 JS functions

[@BroCodez]

I apologize if my voice sounds strained. I had to record this video 3 separate times because it wouldn't turn out right. My voice REALLY hurts 😂
import ToDoList from './ToDoList.jsx';
function App() {
return ()
}
export default App
import React, { useState } from 'react'
function ToDoList(){
const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState("");
function handleInputChange(event){
setNewTask(event.target.value);
}
function addTask(){
if(newTask.trim() !== ""){
setTasks(t => [...t, newTask]);
setNewTask("");
}
}
function deleteTask(index){
const updatedTasks = tasks.filter((_, i) => i !== index);
setTasks(updatedTasks);
}
function moveTaskUp(index){
if(index > 0){
const updatedTasks = [...tasks];
[updatedTasks[index], updatedTasks[index - 1]] =
[updatedTasks[index - 1], updatedTasks[index]];
setTasks(updatedTasks);
}
}
function moveTaskDown(index){
if(index < tasks.length - 1){
const updatedTasks = [...tasks];
[updatedTasks[index], updatedTasks[index + 1]] =
[updatedTasks[index + 1], updatedTasks[index]];
setTasks(updatedTasks);
}
}
return(

To-Do-List



Add



{tasks.map((task, index) =>

{task}
deleteTask(index)}>
Delete

moveTaskUp(index)}>
☝

moveTaskDown(index)}>
👇


)}

);
}
export default ToDoList
body{
background-color: hsl(0, 0%, 10%);
}
.to-do-list{
font-family: Arial, sans-serif;
text-align: center;
margin-top: 100px;
}
h1{
font-size: 4rem;
color: white;
}
button{
font-size: 1.7rem;
font-weight: bold;
padding: 10px 20px;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.5s ease;
}
.add-button{
background-color: hsl(125, 47%, 54%);
}
.add-button:hover{
background-color: hsl(125, 47%, 44%);
}
.delete-button{
background-color: hsl(10, 90%, 50%);
}
.delete-button:hover{
background-color: hsl(10, 90%, 40%);
}
.move-button{
background-color: hsl(207, 90%, 64%);
}
.move-button:hover{
background-color: hsl(207, 90%, 54%);
}
input[type="text"]{
font-size: 1.6rem;
padding: 10px;
border: 2px solid hsla(0, 0%, 80%, 0.5);
border-radius: 5px;
color: hsla(0, 0%, 0%, 0.5);
}
ol{
padding: 0;
}
li{
font-size: 2rem;
font-weight: bold;
padding: 15px;
background-color: hsl(0, 0%, 97%);
margin-bottom: 10px;
border: 3px solid hsla(0, 0%, 85%, 0.75);
border-radius: 5px;
display: flex;
align-items: center;
}
.text{
flex: 1;
}
.delete-button, .move-button{
padding: 8px 12px;
font-size: 1.4rem;
margin-left: 10px;
}

[@JavaDoesThings]

yeah its okay

[@YS-cc1nk]

I bet you got it twisted!!

[@ISpeakOnly]

When are you going to post the full course of React JS? I am waiting for it!

[@xzex2609]

your voice is great , your voice is what we love and don't be hard on your self

[@s-qc9ns]

use ai to clear your voice in the video.

[@valerylouis6747]

One of the best tutorials on how to do a todolist in react.

[@blaaaabla]

I’m not a react beginner but experienced dev who just wanted to go back to good old times and watch some beginner tutorial and I truly loved and enjoyed this video. First time seeing your video and it’s absolutely nice and well explained. Keep up the good work and to the guys who are watching and maybe just starting - don’t give up, study hard and see you at the top!❤️❤️❤️

[@Jim49267]

Do you brag about your experience?

[@blaaaabla]

@@Jim49267 hahah lol😀 i want to motivate the beginners which experience hard times right now and i want them to not give up because every experienced guy was a beginner once.

[@michaelschroeder3091]

I just watched your entire react course this far and it have been a life saver thank you! You taught me Java, C, HTML, CSS, JS and Python, literally helped carry me through my degree.

[@kolya_SAKHA]

Thank you so much for these useful videos, your voice is calm and your videos are so understandable 🙏

[@shaikshahed413]

The best todo list app teaching on youtube by React

[@greengoatsh1t888]

Hoping that you will upload more videos in react js. I've been watching your videos from HTML,CSS,JS and this react js tutorial your videos are very understandable. I hope this coming 2024 I will be a frontend developer as a stepping stones into full stack developer.

[@hasnainmalik8982]

Please never stop making this kind of useful video...❤

[@al-cadaalachannel3194]

Thanks dear tutor. Useful video

[@danielo_tunes1922]

Thanks bro, very helful for my first react app

[@abrahamsimonramirez2933]

Petition for a Svelte course, I am starting to watch a 20 hour long one, since svelte is less troublesome than react it could be possible to have a comprehensive course in maybe 5-8 hours plus I like your style. I will anyways check documentation when I get some time to spare. No pressure though just an idea you'll perhaps like, ❤

[@x..darkfate..x]

Quick and clean but it take time to understand the logic how the up and down function work

[@rohannaidu6277]

I just logged in to TH-cam to tell you thank you for this.

[@deeplife9654]

Hey bro. So happy to see you back in making video on but please make video for Springboot too

[@CarCinCal]

THIS! 👏🏽 TUTORIAL! 👏🏽 IS! 👏🏽 THE DOPEST! 👏🏽 INTRO! 👏🏽 TUTORIAL! 👏🏽 TO! 👏🏽 REACT! 👏🏽 PERIOD! 👏🏽

[@kathikr9360]

thank you

[@aninh7456]

can you make a video guide about vuejs, nodejs? We are looking forward to it!!!

[@andromilk2634]

When an element ends up moving up or down by using the function, we update our new array. Does this mean we also recreate the mapping with the new positioned elements by reinserting them into the unordered list? (Because we also need to take into account that the element which have changed position have take new indexes, so we have to readjust their id, index given to the callback functions, etc.) ?

[@NoobExploits]

You should create lua guides

[@andromilk2634]

By the way, I just tested the code and it seems that I'm still able to enter input even though I removed the " value={newTask}" line?

[@naturespirit104]

Thanks bro, can you make a flutter tutorial please? I hope you see this comment

[@harshasrinivas4745]

Can you please add edittask to this.

[@McDonuts1675]

Hello i’m new. What is he using for a platform to write the code and run it? I use apps on my Mac, like Hello Web and know about note pad. curious as to what else i can use.

[@miikkarautio]

Visual studio code

[@loke3969]

Hello Bro, can you make a video on the redux toolkit.

[@eharsha7389]

Make video for destructuring

[@kadirertan8664]

21:10 he says "i do have a seperate video on destructuring if you need a refresher".

[@Vinishmachado]

source code anyone

[@georgenikou]

Only a little bit stinky huh lol

[@shaikshahed413]

The best todo list app teaching on youtube by React