Skip to content

Instantly share code, notes, and snippets.

@arnorhs

arnorhs/TodoApp.jsx

Last active May 16, 2023 17:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arnorhs/3f68f507f1d2fe6bc8f018377541043c to your computer and use it in GitHub Desktop.
Save arnorhs/3f68f507f1d2fe6bc8f018377541043c to your computer and use it in GitHub Desktop.
Download ZIP
ChatGPT gave me these two apps when proompting for: "write TODO application in react" and followed up with "That's great. Now can you port the same application to vanilla javascript using no framework"
Raw
TodoApp.jsx
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;
Raw
vanilla.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment