Public
Back
Version 63
2/22/2024
// convert these react dependencies to use the non minified production version for development
/** @jsxImportSource https://esm.sh/react */
import { useState } from "https://esm.sh/react@18.2.0";
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON";
export default function({ initialTodos }) {
const [todos, setTodos] = useState(initialTodos);
const [todo, setTodo] = useState("");
async function addTodo() {
let newTodo = todo;
setTodo("");
setTodos([...todos, { text: newTodo }]);
const newTodos = await fetchJSON("https://stevekrouse-todo_list.web.val.run/todos", {
method: "POST",
body: JSON.stringify(newTodo),
});
setTodos(newTodos);
}
return (
<html>
<head>
<title>Todo List</title>
<script src="https://cdn.tailwindcss.com" />
</head>
<body>
<div className="container mx-auto p-4">
<h2 className="text-xl font-bold">Todo list</h2>
<ul style={{ listStyleType: "none", paddingLeft: 0 }}>
{todos.map(
(todo, index) => (
<li
key={index}
className=""
>
stevekrouse-todoapp.web.val.run
Updated: February 29, 2024