<div className=' bg-purple-300 p-2 flex justify-center rounded-b-xl mt-2'>
            <input type='text' className='ml-10 mr-3 p-1 rounded-md focus:bg-gray-100 focus:outline-none' value={todo} required onChange={(e) => setTodo(e.value)} placeholder='Add ToDo'/>
            <button className='mr-10 ml-3 bg-blue-300 rounded-xl py-1 px-3 font-semibold active:bg-blue-400 active:text-blue-900 duration-75' onClick={addTodo}>Add</button>
          </div>

          <div className=' bg-purple-300 p-2 flex justify-center rounded-b-xl mt-2'>
            <input type='text' className='ml-10 mr-3 p-1 rounded-md focus:bg-gray-100 focus:outline-none' value={todo} required onChange={(e) => setTodo(e.value)} placeholder='Add ToDo'/>
            <button className='mr-10 ml-3 bg-blue-300 rounded-xl py-1 px-3 font-semibold active:bg-blue-400 active:text-blue-900 duration-75' onClick={addTodo}>Add</button>
          </div>

  const [todo, setTodo] = useState('');

  function addTodo(){
    if (todo === '') {
      return;
    }
    if (localStorage.getItem('todos') === null) {
      localStorage.setItem('todos', JSON.stringify([]));
    }
    var todoItems = JSON.parse(localStorage.getItem("todos"));
    var id = null;
    try{id = todoItems[todoItems.length - 1].id + 1;}
    catch{id = 1;}

    todoItems.push({
        "id": id,
        "todo": todo
      }
    );
    alert(JSON.stringify(todoItems));
    localStorage.setItem('todos', JSON.stringify(todoItems));
  }

  const [todo, setTodo] = useState('');

  function addTodo(){
    if (todo === '') {
      return;
    }
    if (localStorage.getItem('todos') === null) {
      localStorage.setItem('todos', JSON.stringify([]));
    }
    var todoItems = JSON.parse(localStorage.getItem("todos"));
    var id = null;
    try{id = todoItems[todoItems.length - 1].id + 1;}
    catch{id = 1;}

    todoItems.push({
        "id": id,
        "todo": todo
      }
    );
    alert(JSON.stringify(todoItems));
    localStorage.setItem('todos', JSON.stringify(todoItems));
  }