Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {
10  const [isLoading, setIsLoading] = useState(false);
11
12  const handleSubmit = async (e: React.FormEvent) => {
13    e.preventDefault();
14    if (!input.trim()) return;

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function CredibilityIndicator({ score }) {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useMemo, useState } from "https://esm.sh/react@18.2.0";
4
5// Utility function to format date as MM/DD/YYYY

1/** @jsxImportSource https://esm.sh/react */
2import React, { useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5function generateProblem(config) {
162  };
163
164  return React.createElement(
165    "div",
166    { className: `math-flashcard-container ${isSettingsVisible ? "flipped" : ""}` },
167    React.createElement(
168      "div",
169      { className: "flashcard-inner" },
170      React.createElement(
171        "div",
172        { className: "flashcard-front" },
173        React.createElement(
174          "div",
175          { className: "flashcard-header" },
176          React.createElement("h1", null, "Math Flashcards 🧮"),
177          React.createElement(
178            "button",
179            {
184          ),
185        ),
186        React.createElement(
187          "div",
188          { className: "flashcard" },
189          React.createElement(
190            "div",
191            { className: "problem" },
192            React.createElement("div", { className: "first-number" }, problem.a),
193            React.createElement(
194              "div",
195              { className: "second-line" },
196              React.createElement("span", { className: "operation" }, problem.operation),
197              React.createElement("span", { className: "second-number" }, problem.b),
198            ),
199          ),
200          React.createElement(
201            "div",
202            { className: "result-display" },
203            showResult && React.createElement("div", { className: "result" }, problem.result),
204          ),
205          React.createElement(
206            "div",
207            { className: "multiple-choice" },
208            problem.choices.map((choice, index) =>
209              React.createElement(
210                "button",
211                {
225            ),
226          ),
227          React.createElement(
228            "button",
229            {
235        ),
236      ),
237      React.createElement(
238        "div",
239        { className: "flashcard-back" },
240        React.createElement("h2", null, "Settings"),
241        React.createElement(
242          "div",
243          { className: "settings-section" },
244          React.createElement("h3", null, "Operations"),
245          React.createElement(
246            "div",
247            { className: "toggle-group" },
248            React.createElement(
249              "label",
250              null,
251              React.createElement("input", {
252                type: "checkbox",
253                checked: config.addition,
256              "Addition (+)",
257            ),
258            React.createElement(
259              "label",
260              null,
261              React.createElement("input", {
262                type: "checkbox",
263                checked: config.subtraction,
266              "Subtraction (-)",
267            ),
268            React.createElement(
269              "label",
270              null,
271              React.createElement("input", {
272                type: "checkbox",
273                checked: config.multiplication,
278          ),
279        ),
280        React.createElement(
281          "div",
282          { className: "settings-section" },
283          React.createElement("h3", null, "Number Ranges"),
284          React.createElement(
285            "div",
286            { className: "toggle-group" },
287            React.createElement(
288              "label",
289              null,
290              React.createElement("input", {
291                type: "checkbox",
292                checked: config.range1to10,
295              "1-10",
296            ),
297            React.createElement(
298              "label",
299              null,
300              React.createElement("input", {
301                type: "checkbox",
302                checked: config.range10to90,
305              "10-90 (by 10's)",
306            ),
307            React.createElement(
308              "label",
309              null,
310              React.createElement("input", {
311                type: "checkbox",
312                checked: config.range100to900,
317          ),
318        ),
319        React.createElement(
320          "button",
321          {
331
332function App() {
333  return React.createElement("div", { className: "app" }, React.createElement(MathFlashcards, null));
334}
335
336function client() {
337  createRoot(document.getElementById("root")).render(React.createElement(App, null));
338}
339if (typeof document !== "undefined") { client(); }

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {

markdownBlogStarterLayout.tsx3 matches

@stevekrouse•Updated 2 months ago

1/** @jsxImportSource npm:react@18.2.0 */
2import type { ReactNode } from "npm:react@18.2.0";
3
4export function Layout({ children }: { children: ReactNode }) {
5  return (
6    <html lang="en">

1/** @jsxImportSource https://esm.sh/preact */
2import { makeBadge } from "npm:badge-maker";
3import { render } from "npm:preact-render-to-string";
4import prettyMilliseconds from "npm:pretty-ms";
5

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {

1# React Hono Val Town Project Starter Template
2
3This is a starter template for a full-stack app in a Val Town Project. The app itself is a simple persistent message board.
23This template is actively accepting pull requests, particularly for bugs, but also for anything that can be done more idiomatically.
24
25If you'd like to make a template with other technologies choices (ie no Hono or no React), please create a new template and we can link to it from this one as another way to go. Eventually, we'd like to be many templates that show how to use Projects. The next one I'm personally excited about making is a fullstack React Router 7 one. [This one](https://www.val.town/x/just_be/reactRouter7) is a good start, but I'd like to rebuild the message board app from this template in that format.