Flashcard App

{currentCard[0]}

\n \n \n

\n {showDefinition &&

{currentCard[1]}

}\n

\n \n \n

\n View source\n

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

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n margin: 0;\n padding: 20px;\n}\n.flashcard-app {\n max-width: 600px;\n margin: 0 auto;\n background-color: white;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\nh1 {\n text-align: center;\n color: #333;\n}\n.flashcard {\n background-color: #f9f9f9;\n border: 1px solid #ddd;\n border-radius: 5px;\n padding: 20px;\n margin-bottom: 20px;\n}\nh2 {\n margin-top: 0;\n color: #2c3e50;\n}\n.buttons {\n display: flex;\n justify-content: space-around;\n margin-top: 20px;\n}\nbutton {\n padding: 10px 20px;\n font-size: 16px;\n cursor: pointer;\n background-color: #3498db;\n color: white;\n border: none;\n border-radius: 5px;\n transition: background-color 0.3s;\n}\nbutton:hover {\n background-color: #2980b9;\n}\n.definition {\n margin-top: 20px;\n font-style: italic;\n color: #7f8c8d;\n}\n.file-upload {\n margin-top: 20px;\n text-align: center;\n}\n.file-upload input[type=\"file\"] {\n margin-bottom: 10px;\n}\n.source {\n text-align: center;\n margin-top: 20px;\n font-size: 12px;\n}\n`;","deleted","subdomain","children",[],[148],"files",[146],"counts",{"_169":33,"_170":171,"_172":33,"_173":33},"pulls","branches",1,"forks","envVars","contents",[176],{"_106":147,"_99":148,"_149":118,"_150":-5,"_151":138,"_152":137,"_153":120,"_108":177,"_103":155,"_156":157,"_158":159,"_160":27,"_161":-5,"_102":178},["D",1729274863017],[148],"file","upstream","screenshots","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_97":98,"_99":100,"_101":43,"_104":186,"_190":191,"_225":33,"_226":27},{"_106":107,"_99":100,"_108":187,"_110":-5,"_111":27,"_112":113,"_114":-5,"_115":-5,"_12":116,"_117":118,"_119":120,"_121":-5,"_122":33,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":27,"_21":188,"_135":189},["D",1746134125590],{"_97":98,"_133":134},{"_103":137,"_99":43,"_106":138,"_139":107,"_140":-5,"_141":-5,"_142":-5,"_143":-5},"history",[192,197,205,212,219],{"_149":118,"_103":137,"_108":193,"_151":138,"_165":194},["D",1729274863017],[195],{"_106":147,"_151":138,"_149":118,"_99":148,"_158":159,"_156":157,"_103":155,"_150":-5,"_108":193,"_152":137,"_161":-5,"_153":120,"_160":27,"_102":196},[148],{"_149":118,"_103":155,"_108":198,"_151":138,"_165":199},["D",1729274551707],[200],{"_106":201,"_151":138,"_149":118,"_99":148,"_158":202,"_156":157,"_103":203,"_150":-5,"_108":198,"_152":155,"_161":-5,"_153":27,"_160":27,"_102":204},"6671d950-26d1-11f0-a428-569c3dd06744","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport Papa from \"https://esm.sh/papaparse@5.4.1\";\n\nfunction App() {\n const [flashcards, setFlashcards] = useState([]);\n const [currentCard, setCurrentCard] = useState(null);\n const [showDefinition, setShowDefinition] = useState(false);\n const [file, setFile] = useState(null);\n\n useEffect(() => {\n fetchCSV();\n }, []);\n\n useEffect(() => {\n if (flashcards.length > 0) {\n selectRandomCard();\n }\n }, [flashcards]);\n\n const fetchCSV = async () => {\n const response = await fetch(\"/csv\");\n const csvText = await response.text();\n const result = Papa.parse(csvText, { header: false });\n setFlashcards(result.data);\n };\n\n const selectRandomCard = () => {\n const randomIndex = Math.floor(Math.random() * flashcards.length);\n setCurrentCard(flashcards[randomIndex]);\n setShowDefinition(false);\n };\n\n const handleDefinitionClick = () => {\n setShowDefinition(true);\n };\n\n const handleNextClick = () => {\n selectRandomCard();\n };\n\n const handleFileChange = (event) => {\n setFile(event.target.files[0]);\n };\n\n const handleUpload = async () => {\n if (!file) {\n alert(\"Please select a file first!\");\n return;\n }\n const formData = new FormData();\n formData.append(\"csv\", file);\n const response = await fetch(\"/upload\", {\n method: \"POST\",\n body: formData,\n });\n if (response.ok) {\n alert(\"File uploaded successfully!\");\n fetchCSV();\n } else {\n alert(\"Error uploading file.\");\n }\n };\n\n if (!currentCard) {\n return

Loading flashcards...

;\n }\n\n return (\n

{currentCard[0]}

\n \n \n

\n {showDefinition &&

{currentCard[1]}

}\n

\n \n \n

\n View source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const url = new URL(request.url);\n const KEY = \"createFlashcardsVal\";\n \n if (url.pathname === \"/csv\") {\n let csv;\n try {\n csv = await blob.getJSON(`${KEY}_flashcards.csv`);\n } catch (error) {\n // If the blob doesn't exist, csv will be null\n if (!(error instanceof ValTownBlobNotFoundError)) {\n throw error;\n }\n }\n\n if (!csv) {\n // Fallback to default CSV if no file has been uploaded yet\n csv = `apple,a round fruit with red or green skin and crisp flesh\nbanana,a long curved fruit with a yellow skin\ncherry,a small round stone fruit with red skin`;\n }\n return new Response(csv, {\n headers: { \"Content-Type\": \"text/csv\" },\n });\n }\n\n if (url.pathname === \"/upload\" && request.method === \"POST\") {\n const formData = await request.formData();\n const file = formData.get(\"csv\");\n if (file instanceof File) {\n const csvContent = await file.text();\n await blob.setJSON(`${KEY}_flashcards.csv`, csvContent);\n return new Response(\"File uploaded successfully\", { status: 200 });\n }\n return new Response(\"Invalid file\", { status: 400 });\n }\n\n return new Response(`\n \n \n Flashcards\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #f0f0f0;\n}\n.flashcard {\n background-color: white;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n text-align: center;\n max-width: 400px;\n width: 100%;\n}\nh2 {\n margin-top: 0;\n}\n.buttons {\n display: flex;\n justify-content: space-around;\n margin-top: 20px;\n}\nbutton {\n padding: 10px 20px;\n font-size: 16px;\n cursor: pointer;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n transition: background-color 0.3s;\n}\nbutton:hover {\n background-color: #45a049;\n}\n.definition {\n margin-top: 20px;\n font-style: italic;\n}\n.file-upload {\n margin-top: 20px;\n}\n.source {\n margin-top: 20px;\n font-size: 12px;\n}\n`;",3,[148],{"_149":118,"_103":203,"_108":206,"_151":138,"_165":207},["D",1729274503794],[208],{"_106":209,"_151":138,"_149":118,"_99":148,"_158":210,"_156":157,"_103":94,"_150":-5,"_108":206,"_152":203,"_161":-5,"_153":27,"_160":27,"_102":211},"666c8d38-26d1-11f0-a428-569c3dd06744","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport Papa from \"https://esm.sh/papaparse@5.4.1\";\n\nfunction App() {\n const [flashcards, setFlashcards] = useState([]);\n const [currentCard, setCurrentCard] = useState(null);\n const [showDefinition, setShowDefinition] = useState(false);\n\n useEffect(() => {\n fetchCSV();\n }, []);\n\n useEffect(() => {\n if (flashcards.length > 0) {\n selectRandomCard();\n }\n }, [flashcards]);\n\n const fetchCSV = async () => {\n const response = await fetch(\"/csv\");\n const csvText = await response.text();\n const result = Papa.parse(csvText, { header: false });\n setFlashcards(result.data);\n };\n\n const selectRandomCard = () => {\n const randomIndex = Math.floor(Math.random() * flashcards.length);\n setCurrentCard(flashcards[randomIndex]);\n setShowDefinition(false);\n };\n\n const handleDefinitionClick = () => {\n setShowDefinition(true);\n };\n\n const handleNextClick = () => {\n selectRandomCard();\n };\n\n if (!currentCard) {\n return

Loading flashcards...

;\n }\n\n return (\n

{currentCard[0]}

\n \n \n

\n {showDefinition &&

{currentCard[1]}

}\n

\n View source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n \n if (url.pathname === \"/csv\") {\n // This is a placeholder CSV. In a real application, you'd want to load this from a file or database.\n const csv = `apple,a round fruit with red or green skin and crisp flesh\nbanana,a long curved fruit with a yellow skin\ncherry,a small round stone fruit with red skin`;\n return new Response(csv, {\n headers: { \"Content-Type\": \"text/csv\" },\n });\n }\n\n return new Response(`\n \n \n Flashcards\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #f0f0f0;\n}\n.flashcard {\n background-color: white;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n text-align: center;\n max-width: 400px;\n width: 100%;\n}\nh2 {\n margin-top: 0;\n}\n.buttons {\n display: flex;\n justify-content: space-around;\n margin-top: 20px;\n}\nbutton {\n padding: 10px 20px;\n font-size: 16px;\n cursor: pointer;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 5px;\n transition: background-color 0.3s;\n}\nbutton:hover {\n background-color: #45a049;\n}\n.definition {\n margin-top: 20px;\n font-style: italic;\n}\n.source {\n margin-top: 20px;\n font-size: 12px;\n}\n`;",[148],{"_149":118,"_103":94,"_108":213,"_151":138,"_165":214},["D",1729274407095],[215],{"_106":216,"_151":138,"_149":118,"_99":148,"_158":217,"_156":157,"_103":171,"_150":-5,"_108":213,"_152":94,"_161":-5,"_153":27,"_160":27,"_102":218},"6667404e-26d1-11f0-a428-569c3dd06744","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport Papa from \"https://esm.sh/papaparse@5.4.1\";\n\nfunction App() {\n const [flashcards, setFlashcards] = useState([]);\n const [currentCard, setCurrentCard] = useState(null);\n const [showDefinition, setShowDefinition] = useState(false);\n const [file, setFile] = useState(null);\n\n useEffect(() => {\n fetchCSV();\n }, []);\n\n useEffect(() => {\n if (flashcards.length > 0) {\n selectRandomCard();\n }\n }, [flashcards]);\n\n const fetchCSV = async () => {\n const response = await fetch(\"/csv\");\n const csvText = await response.text();\n const result = Papa.parse(csvText, { header: false });\n setFlashcards(result.data);\n };\n\n const selectRandomCard = () => {\n const randomIndex = Math.floor(Math.random() * flashcards.length);\n setCurrentCard(flashcards[randomIndex]);\n setShowDefinition(false);\n };\n\n const handleDefinitionClick = () => {\n setShowDefinition(true);\n };\n\n const handleNextClick = () => {\n selectRandomCard();\n };\n\n const handleFileChange = (event) => {\n setFile(event.target.files[0]);\n };\n\n const handleUpload = async () => {\n if (!file) {\n alert(\"Please select a file first!\");\n return;\n }\n const formData = new FormData();\n formData.append(\"csv\", file);\n const response = await fetch(\"/upload\", {\n method: \"POST\",\n body: formData,\n });\n if (response.ok) {\n alert(\"File uploaded successfully!\");\n fetchCSV();\n } else {\n alert(\"Error uploading file.\");\n }\n };\n\n if (!currentCard) {\n return

Loading flashcards...

;\n }\n\n return (\n

{currentCard[0]}

\n \n \n

\n {showDefinition &&

{currentCard[1]}

}\n

\n \n \n

\n View source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const url = new URL(request.url);\n const KEY = \"createFlashcardsVal\";\n \n if (url.pathname === \"/csv\") {\n let csv = await blob.get(`${KEY}_flashcards.csv`);\n if (!csv) {\n // Fallback to default CSV if no file has been uploaded yet\n csv = `apple,a round fruit with red or green skin and crisp flesh\nbanana,a long curved fruit with a yellow skin\ncherry,a small round stone fruit with red skin`;\n }\n return new Response(csv, {\n headers: { \"Content-Type\": \"text/csv\" },\n });\n }\n\n if (url.pathname === \"/upload\" && request.method === \"POST\") {\n const formData = await request.formData();\n const file = formData.get(\"csv\");\n if (file instanceof File) {\n const csvContent = await file.text();\n await blob.set(`${KEY}_flashcards.csv`, csvContent);\n return new Response(\"File uploaded successfully\", { status: 200 });\n }\n return new Response(\"Invalid file\", { status: 400 });\n }\n\n return new Response(`\n \n \n Flashcards\n \n \n \n

History