Skip to content

Instantly share code, notes, and snippets.

@arnorhs

arnorhs/TodoApp.jsx

Last active May 16, 2023 17:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save arnorhs/3f68f507f1d2fe6bc8f018377541043c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save arnorhs/3f68f507f1d2fe6bc8f018377541043c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. arnorhs revised this gist May 16, 2023. No changes.
  2. arnorhs created this gist May 16, 2023.
    63 changes: 63 additions & 0 deletions TodoApp.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,63 @@
    import React, { useState } from 'react';

    const TodoApp = () => {
    const [todos, setTodos] = useState([]);
    const [inputValue, setInputValue] = useState('');

    const addTodo = () => {
    if (inputValue !== '') {
    const newTodo = {
    id: Date.now(),
    text: inputValue,
    completed: false
    };
    setTodos([...todos, newTodo]);
    setInputValue('');
    }
    };

    const toggleTodo = (id) => {
    const updatedTodos = todos.map((todo) => {
    if (todo.id === id) {
    return {
    ...todo,
    completed: !todo.completed
    };
    }
    return todo;
    });
    setTodos(updatedTodos);
    };

    const removeTodo = (id) => {
    const updatedTodos = todos.filter((todo) => todo.id !== id);
    setTodos(updatedTodos);
    };

    return (
    <div>
    <h1>TODO App</h1>
    <input
    type="text"
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
    />
    <button onClick={addTodo}>Add</button>
    <ul>
    {todos.map((todo) => (
    <li key={todo.id}>
    <input
    type="checkbox"
    checked={todo.completed}
    onChange={() => toggleTodo(todo.id)}
    />
    <span className={todo.completed ? 'completed' : ''}>{todo.text}</span>
    <button onClick={() => removeTodo(todo.id)}>Remove</button>
    </li>
    ))}
    </ul>
    </div>
    );
    };

    export default TodoApp;
    96 changes: 96 additions & 0 deletions vanilla.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,96 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TODO App</title>
    <style>
    .completed {
    text-decoration: line-through;
    }
    </style>
    </head>
    <body>
    <h1>TODO App</h1>
    <input type="text" id="todoInput">
    <button id="addTodoBtn">Add</button>
    <ul id="todoList"></ul>

    <script>
    // Initial todo list
    let todos = [];

    // DOM elements
    const todoInput = document.getElementById('todoInput');
    const addTodoBtn = document.getElementById('addTodoBtn');
    const todoList = document.getElementById('todoList');

    // Function to render the todo list
    function renderTodos() {
    todoList.innerHTML = '';

    todos.forEach(todo => {
    const li = document.createElement('li');

    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.checked = todo.completed;
    checkbox.addEventListener('change', () => toggleTodoStatus(todo.id));

    const text = document.createElement('span');
    text.innerText = todo.text;
    text.className = todo.completed ? 'completed' : '';

    const removeBtn = document.createElement('button');
    removeBtn.innerText = 'Remove';
    removeBtn.addEventListener('click', () => removeTodoItem(todo.id));

    li.appendChild(checkbox);
    li.appendChild(text);
    li.appendChild(removeBtn);

    todoList.appendChild(li);
    });
    }

    // Function to add a new todo
    function addTodo() {
    const text = todoInput.value.trim();
    if (text !== '') {
    const newTodo = {
    id: Date.now(),
    text,
    completed: false
    };
    todos.push(newTodo);
    todoInput.value = '';
    renderTodos();
    }
    }

    // Function to toggle the completion status of a todo
    function toggleTodoStatus(id) {
    todos = todos.map(todo => {
    if (todo.id === id) {
    return {
    ...todo,
    completed: !todo.completed
    };
    }
    return todo;
    });
    renderTodos();
    }

    // Function to remove a todo
    function removeTodoItem(id) {
    todos = todos.filter(todo => todo.id !== id);
    renderTodos();
    }

    // Event listener for the add button
    addTodoBtn.addEventListener('click', addTodo);

    </script>
    </body>
    </html>