react-todo

App.jsx

import React from "react";

// import React from 'react';
const REACT_VERSION = React.version;

function Todo({ todo, index, markTodo, removeTodo }) {
  return (
    <div className="todo">
      <span style={{ textDecoration: todo.isDone ? "line-through" : "" }}>
        {todo.text} - {todo.type}
      </span>
      <div>
        <button variant="outline-success" onClick={() => markTodo(index)}>
          ✓
        </button>{" "}
        <button variant="outline-danger" onClick={() => removeTodo(index)}>
          ✕
        </button>
      </div>
    </div>
  );
}

function FormTodo({ addTodo }) {
  const [value, setValue] = React.useState("");
  const [type, setType] = React.useState("work");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!value) return;
    addTodo(value, type);
    setValue("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          <b>Add Todo</b>
        </label>
        <input
          type="text"
          className="input"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="Add new todo"
        />
        <select value={type} onChange={(e) => setType(e.target.value)}>
          <option value="work">Work</option>
          <option value="life">Life</option>
        </select>
      </div>
      <button className="primary mb-3" type="submit">
        Submit
      </button>
    </form>
  );
}

export default function App() {
  const [todos, setTodos] = React.useState([
    {
      text: "This is a sampe todo",
      isDone: false,
      type: "work",
    },
  ]);

  const addTodo = (text, type) => {
    const isDone = false;
    const newTodos = [...todos, { text, type, isDone }];
    setTodos(newTodos);
  };

  const markTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index].isDone = !newTodos[index].isDone;
    setTodos(newTodos);
  };

  const removeTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div className="app">
      <div className="container">
        <h1>Hello world</h1>
        <div>React version: {REACT_VERSION}</div>
        <button className="fa fa-heart"></button>

        <h1 className="text-center mb-4">Todo List</h1>
        <FormTodo addTodo={addTodo} />
        <div>
          {todos.map((todo, index) => (
            <div>
              <Todo
                key={index}
                index={index}
                todo={todo}
                markTodo={markTodo}
                removeTodo={removeTodo}
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

codeswing.json

{
  "scripts": [
    "react",
    "react-dom"
  ],
  "styles": [
    "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.css"
  ]
}

style.css

.app {
  padding: 30px;
  background-color: floralwhite;
}

.todo {
  align-items: center;
  display: flex;
  font-size: 18px;
  justify-content: space-between;
}