autocode2 · gingerhendrix · Jul 16, 2024
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # Auto Code Example - To Do App
 
+**Model**: claude-3-haiku-20240307
+
 The hello world of web apps. Build a simple todo list.
 
 ## Prompts
@@ -15,3 +17,21 @@ Build a simple react app which a simple todo app.
 
 Generate an index.html and a src/App.js use ES modules and import dependencies from a cdn
 
+
+# Model Response
+
+Okay, let's build a simple React todo app with the requested features. Here's how we can do it:
+Creating file:  index.html
+Creating file:  src/App.js
+The key features of this todo app are:
+
+1. **Add Todo**: Users can add a new todo by typing in the input field and pressing Enter or clicking the "Add Todo" button.
+2. **Delete Todo**: Users can delete a todo by clicking the "Delete" button next to the todo.
+3. **Update Todo**: Users can update a todo by editing the text in the input field next to the todo.
+4. **Mark as Complete**: Users can mark a todo as complete by checking the checkbox next to the todo.
+5. **Filter Todos**: Users can filter the todos by "All", "Completed", or "Incomplete" using the buttons provided.
+6. **Todo Counts**: The app displays the count of completed and incomplete todos.
+
+The app uses React's `useState` hook to manage the state of the todo list, including the new todo input, the list of todos, and the current filter. The `filteredTodos` function is used to display the appropriate todos based on the selected filter.
+
+To run this app, save the `index.html` and `App.js` files, then open the `index.html` file in a web browser. You should see the todo app running.
diff --git a/generated/index.html b/generated/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Todo App</title>
+  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="text/babel" src="src/App.js"></script>
+</body>
+</html>
diff --git a/generated/src/App.js b/generated/src/App.js
@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+
+const TodoApp = () => {
+  const [todos, setTodos] = useState([]);
+  const [newTodo, setNewTodo] = useState('');
+  const [filter, setFilter] = useState('all');
+
+  const addTodo = () => {
+    if (newTodo.trim() !== '') {
+      setTodos([...todos, { text: newTodo, completed: false }]);
+      setNewTodo('');
+    }
+  };
+
+  const deleteTodo = (index) => {
+    const newTodos = [...todos];
+    newTodos.splice(index, 1);
+    setTodos(newTodos);
+  };
+
+  const toggleTodo = (index) => {
+    const newTodos = [...todos];
+    newTodos[index].completed = !newTodos[index].completed;
+    setTodos(newTodos);
+  };
+
+  const updateTodo = (index, newText) => {
+    const newTodos = [...todos];
+    newTodos[index].text = newText;
+    setTodos(newTodos);
+  };
+
+  const filteredTodos = () => {
+    switch (filter) {
+      case 'completed':
+        return todos.filter((todo) => todo.completed);
+      case 'incomplete':
+        return todos.filter((todo) => !todo.completed);
+      default:
+        return todos;
+    }
+  };
+
+  const completedCount = todos.filter((todo) => todo.completed).length;
+  const incompleteCount = todos.length - completedCount;
+
+  return (
+    <div>
+      <h1>Todo App</h1>
+      <input
+        type="text"
+        value={newTodo}
+        onChange={(e) => setNewTodo(e.target.value)}
+        onKeyPress={(e) => {
+          if (e.key === 'Enter') {
+            addTodo();
+          }
+        }}
+      />
+      <button onClick={addTodo}>Add Todo</button>
+      <div>
+        <button onClick={() => setFilter('all')}>All</button>
+        <button onClick={() => setFilter('completed')}>Completed</button>
+        <button onClick={() => setFilter('incomplete')}>Incomplete</button>
+      </div>
+      <ul>
+        {filteredTodos().map((todo, index) => (
+          <li key={index}>
+            <input
+              type="checkbox"
+              checked={todo.completed}
+              onChange={() => toggleTodo(index)}
+            />
+            {todo.completed ? <del>{todo.text}</del> : todo.text}
+            <button onClick={() => deleteTodo(index)}>Delete</button>
+            <input
+              type="text"
+              value={todo.text}
+              onChange={(e) => updateTodo(index, e.target.value)}
+            />
+          </li>
+        ))}
+      </ul>
+      <div>
+        Completed: {completedCount}, Incomplete: {incompleteCount}
+      </div>
+    </div>
+  );
+};
+
+ReactDOM.render(<TodoApp />, document.getElementById('root'));