/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import Papa from "https://esm.sh/papaparse@5.4.1"; // In-memory storage for CSV data let csvData = `apple,a round fruit with red or green skin and crisp flesh banana,a long curved fruit with a yellow skin cherry,a small round stone fruit with red skin`; function App() { const [flashcards, setFlashcards] = useState([]); const [currentCard, setCurrentCard] = useState(null); const [showDefinition, setShowDefinition] = useState(false); const [file, setFile] = useState(null); useEffect(() => { fetchCSV(); }, []); useEffect(() => { if (flashcards.length > 0) { selectRandomCard(); } }, [flashcards]); const fetchCSV = async () => { const response = await fetch("/csv"); const csvText = await response.text(); const result = Papa.parse(csvText, { header: false }); setFlashcards(result.data); }; const selectRandomCard = () => { const randomIndex = Math.floor(Math.random() * flashcards.length); setCurrentCard(flashcards[randomIndex]); setShowDefinition(false); }; const handleDefinitionClick = () => { setShowDefinition(true); }; const handleNextClick = () => { selectRandomCard(); }; const handleFileChange = (event) => { setFile(event.target.files[0]); }; const handleUpload = async () => { if (!file) { alert("Please select a file first!"); return; } const formData = new FormData(); formData.append("csv", file); const response = await fetch("/upload", { method: "POST", body: formData, }); if (response.ok) { alert("File uploaded successfully!"); fetchCSV(); } else { alert("Error uploading file."); } }; if (!currentCard) { return

Loading flashcards...

; } return (

Flashcard App

{currentCard[0]}

{showDefinition &&

{currentCard[1]}

}

View source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === "/csv") { return new Response(csvData, { headers: { "Content-Type": "text/csv" }, }); } if (url.pathname === "/upload" && request.method === "POST") { const formData = await request.formData(); const file = formData.get("csv"); if (file instanceof File) { csvData = await file.text(); return new Response("File uploaded successfully", { status: 200 }); } return new Response("Invalid file", { status: 400 }); } return new Response(` Flashcard App

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 20px; } .flashcard-app { max-width: 600px; margin: 0 auto; background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #333; } .flashcard { background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; padding: 20px; margin-bottom: 20px; } h2 { margin-top: 0; color: #2c3e50; } .buttons { display: flex; justify-content: space-around; margin-top: 20px; } button { padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #3498db; color: white; border: none; border-radius: 5px; transition: background-color 0.3s; } button:hover { background-color: #2980b9; } .definition { margin-top: 20px; font-style: italic; color: #7f8c8d; } .file-upload { margin-top: 20px; text-align: center; } .file-upload input[type="file"] { margin-bottom: 10px; } .source { text-align: center; margin-top: 20px; font-size: 12px; } `;

createFlashcardsVal

Version 4