From dac9a218c9683567d02a8e42375dd9777619d71f Mon Sep 17 00:00:00 2001 From: Gareth Andrew Date: Tue, 16 Jul 2024 01:24:12 +0100 Subject: [PATCH] claude-3-haiku-20240307 --- README.md | 20 ++++++++++ generated/index.html | 13 +++++++ generated/src/App.js | 91 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 124 insertions(+) create mode 100644 generated/index.html create mode 100644 generated/src/App.js diff --git a/README.md b/README.md index ab71471..ff7138b 100644 --- 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 new file mode 100644 index 0000000..7db6b14 --- /dev/null +++ b/generated/index.html @@ -0,0 +1,13 @@ + + + + Todo App + + + + + +
+ + + \ No newline at end of file diff --git a/generated/src/App.js b/generated/src/App.js new file mode 100644 index 0000000..280aa00 --- /dev/null +++ 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 ( +
+

Todo App

+ setNewTodo(e.target.value)} + onKeyPress={(e) => { + if (e.key === 'Enter') { + addTodo(); + } + }} + /> + +
+ + + +
+ +
+ Completed: {completedCount}, Incomplete: {incompleteCount} +
+
+ ); +}; + +ReactDOM.render(, document.getElementById('root')); \ No newline at end of file