src/App.js - master - android113/react_todo

src/App.js
107 строк3 KB
Скороходов Андрей Андреевич
initial commit
08 дек 2025, 15:01
08 дек 2025, 15:01b4d75a2
// Импортируем хук useState — это функция "памяти" внутри React. 
// Она позволяет запоминать текст ввода и список задач.
import React, { useState } from 'react';
import './App.css';

function App() {
  // --- ЛОГИКА (BRAINS) ---

  // todos - массив задач. setTasks - функция для их изменения
  const [todos, setTodos] = useState([
    { id: 1, text: 'Изучить React', completed: false },
    { id: 2, text: 'Создать первый компонент', completed: false }
  ]);

  // value - текст в поле ввода
  const [value, setValue] = useState('');

  // Функция добавления задачи
  const addTodo = () => {
    if (value.trim()) { // Если строка не пустая
      setTodos([
        ...todos, // Берем старые задачи
        { // Добавляем новую в конец
            id: Date.now(), // Генерируем уникальный ID
            text: value,
            completed: false 
        }
      ]);
      setValue(''); // Очищаем поле ввода
    }
  };

  // Удаление задачи по ID
  const removeTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  // Переключение статуса "выполнено"
  const toggleComplete = (id) => {
    setTodos(
      todos.map(todo => {
        if (todo.id !== id) return todo;
        // Если ID совпал, меняем статус на противоположный
        return { ...todo, completed: !todo.completed };
      })
    );
  };

  // Обработка нажатия Enter
  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
        addTodo();
    }
  }

  // --- ВЕРСТКА (JSX) ---
  return (
    <div className="app-container">
      <div className="card">
        <h1 className="header">📝 Список дел</h1>
        
        <div className="input-group">
          <input
            type="text"
            placeholder="Что нужно сделать?"
            value={value}
            onChange={(e) => setValue(e.target.value)} // Когда пишем, обновляем value
            onKeyDown={handleKeyPress}
          />
          <button onClick={addTodo} className="add-btn">
            Добавить
          </button>
        </div>

        <ul className="todo-list">
          {todos.length === 0 && <p className="empty-msg">Нет задач! Время отдохнуть? 🌴</p>}
          
          {todos.map((todo) => (
            <li key={todo.id} className={`todo-item ${todo.completed ? 'completed' : ''}`}>
              <div 
                className="todo-text" 
                onClick={() => toggleComplete(todo.id)}
              >
                {/* Кружочек-чекбокс */}
                <span className="check-circle"></span>
                {todo.text}
              </div>
              <button 
                onClick={() => removeTodo(todo.id)} 
                className="delete-btn"
                aria-label="Delete"
              >
                🗑️
              </button>
            </li>
          ))}
        </ul>

        <div className="footer">
            Задач: {todos.length}
        </div>
      </div>
    </div>
  );
}

export default App;