JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div id="app"></div>

CSS

#app {
  width: 400px;
  margin: auto;
}

h1 {
  text-align: center;
}

li {
  padding-bottom: 10px;
}

i {
  float: right;
  color: red;
  cursor: pointer;
}

.inputBar {
  width: 200px;
  margin: auto;
}

React

const {useState, useEffect} = React;


const TodoItem = ({ todo, onDelete }) => {
  const handleDelete = () => {
    onDelete(todo);
  };

  return (
    <li>
      {todo}
      <span onClick={handleDelete}>remove</span>
    </li>
  );
};

const TodoList = () => {
  const initialList = ['Get a life', 'Get a girlfriend', 'Get a job'];
  const [list, setList] = useState(initialList);
  const [inputValue, setInputValue] = useState('');

  const updateInputValue = (evt) => {
    setInputValue(evt.target.value);
  };

  const handleAdd = () => {
    const todos = [...list];
    todos.push(inputValue);
    localStorage.setItem('todos', JSON.stringify(todos));
    setList(todos);
    setInputValue('');
  };

  const handleDelete = (todo) => {
    const todos = [...list];
    todos.splice(todos.indexOf(todo), 1);
    localStorage.setItem('todos', JSON.stringify(todos));
    setList(todos);
  };

  const listItems = list.map((listValue) => (
    <TodoItem key={listValue} todo={listValue} onDelete={handleDelete} />
  ));

  return (
    <div>
      <h1>My To do list</h1>
      <ul>{listItems}</ul>
      <div className="inputBar">
        <input type="text" value={inputValue} onChange={updateInputValue} />
        <button onClick={handleAdd}>Add</button>
      </div>
    </div>
  );
};


const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(
  <React.StrictMode>
    <TodoList />
  </React.StrictMode>
);