@TheDailyDoseOfStoics

don't stop uploading videos, i wanna see your progress. You can do it! and also a piece of advice, try to learn a simple ui/ux for web designing dont forget that

@DaveJohn-i8d

Dang no veiws

@Goodie_Edirin

.TODO{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 500px;
    padding: 20px;
    background-color: purple;
    border-radius: 20px;  
}

.TODO_COMP{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: lavenderblush;
    border-radius: 30px;
    height: 50px;
}

.TODO_COMP input{
    margin-left: 20px;
    height: 44px;
    font-size: 25px;
    background-color: transparent;
    width: 70%;
    border: none;
    outline: none;
}
.TODO_COMP button{
    width: 20%;
    height: 50px;
    border-radius: 30px;
    outline: none;
    border: none;
    background-color: purple;
    font-size: 25px;
    border-right: 3px solid gold;
    color: lavenderblush;
}

.LIST_COMP{
    width: 100%;
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    
}

.LIST {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid gold;
    font-size: 25px;
    color: white;
}

.LIST button{
    background-color: gold;
    border: none;
    outline: none;
    font-size: 25px;
    border-radius: 30px;
    margin: 5px;
    cursor: pointer;
}

h1{
    color: gold;
    font-weight: bold;
    font-size: 40px;
}

@Goodie_Edirin

import React, { useState } from 'react'
import { MdDeleteForever } from "react-icons/md";

const TodoList = () => {
  const [inputTodo, setInputTode] = useState("")
  const [newTodo, setNewTodo] = useState([])

  function HandleInputChange(event) {
    setInputTode(event.target.value)
  }

  function HandleAddInputedTodo() {
    if (inputTodo.trim()) {
      setNewTodo([...newTodo, {
        text: inputTodo, id: Date.now()
      }])

      setInputTode("")
    }


  }

  function handleDelete(id) {
    setNewTodo(newTodo.filter((item) =>
      item.id !== id
    ))
  }
  return (
    <div className='TODO'>
      <h1>TODO APP</h1>

      <div className='TODO_COMP'>
        <input type='text'
          onChange={HandleInputChange}
          value={inputTodo} />

        <button onClick={HandleAddInputedTodo}>
          Add</button>
      </div>

      <ol className='LIST_COMP'>
        {newTodo.map((items) =>
          <li key={items.id} className='LIST'>
            {items.text}
            <button onClick={() => handleDelete(items.id)}><MdDeleteForever /></button>
          </li>
        )}
      </ol>

    </div>
  )
}

export default TodoList