Search

GDI_TemperatureConverter

@rozek

This val is part of a series of examples to introduce "val.town" in my computer science course at Stuttgart University of Applied Sciences . The idea is to motivate even first-semester students not to wait but to put their ideas into practice from the very beginning and implement web apps with frontend and backend. It contains a reactive(!) converter between °Celsius and °Fahrenheit - made using Townie. This val is licensed under the MIT License.

HTTP

frontend and backend.

It contains a reactive(!) converter between °Celsius and °Fahrenheit - made

using Townie.

/** @jsxImportSource https://esm.sh/react */

import React, { useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

function TemperatureConverter() {

const [fahrenheit, setFahrenheit] = useState('');

const handleCelsiusChange = (e: React.ChangeEvent<HTMLInputElement>) => {

const value = e.target.value;

setFahrenheit(value === '' ? '' : ((Number(value) * 9/5) + 32).toFixed(2));

const handleFahrenheitChange = (e: React.ChangeEvent<HTMLInputElement>) => {

const value = e.target.value;

</div>

function client() {

const root = document.getElementById('root');

if (typeof document !== "undefined") {

client();

export default async function server(request: Request): Promise<Response> {

mlbScoreFetcher

@charmaine

@jsxImportSource https://esm.sh/react

HTTP

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useEffect } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

function App() {

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") {

client();

export default async function server(request: Request): Promise<Response> {

createHorror3DGame

@kutasartem

@jsxImportSource https://esm.sh/react@18.2.0

HTTP

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import React, { useState, useRef, useEffect } from "https://esm.sh/react@18.2.0";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

// Expanded Game Element Types

</div>

function client() {

const root = document.getElementById("root");

createRoot(root).render(<AIGameBuilderLanding />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request) {

RudeAI

@juansebsol

@jsxImportSource https://esm.sh/react

HTTP

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useEffect, useRef } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

function App() {

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") {

client();

function generateSessionId() {

insightfulSalmonRabbit

@ubixsnow

@jsxImportSource https://esm.sh/react

HTTP

/** @jsxImportSource https://esm.sh/react */

import React, { useEffect, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

function App() {

}, [isDarkMode]);

const handleSubmit = async (e: React.FormEvent) => {

e.preventDefault();

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

cardRepaymentCalculator

@lifonnnn

* This credit card payoff calculator app allows users to: * 1. Add and remove multiple credit cards with their balances and interest rates * 2. Calculate monthly payments based on desired payoff time * 3. View individual card payoff information * 4. See a combined view of all cards * 5. Visualize payoff data with different types of charts * * It uses React for the UI, SQLite for data persistence, and Chart.js for visualization. * The app is now optimized for mobile devices with responsive design.

HTTP

* 5. Visualize payoff data with different types of charts

* It uses React for the UI, SQLite for data persistence, and Chart.js for visualization.

* The app is now optimized for mobile devices with responsive design.

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useEffect, useRef } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import Chart from "https://esm.sh/chart.js/auto";

setCards(data);

const addCard = async (e: React.FormEvent) => {

e.preventDefault();

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

async function server(request: Request): Promise<Response> {

telegramAudioMessageTranscription

@artem

@jsxImportSource https://esm.sh/react@18.2.0

HTTP

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

import React, { DragEvent, useRef, useState } from "https://esm.sh/react@18.2.0";

function App() {

handleFileUpload(files[0]);

const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {

const files = e.target.files;

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

PaintSeq

@youkq95

@jsxImportSource https://esm.sh/react

HTTP

/** @jsxImportSource https://esm.sh/react */

import React, { useEffect, useRef, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

// Amino Acid Physiochemical Groups (default configuration)

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

htmlToMarkdownConverter

@willow

@jsxImportSource https://esm.sh/react

HTTP

/** @jsxImportSource https://esm.sh/react */

import React, { useState, useEffect } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import TurndownService from "https://esm.sh/turndown";

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

npmExplorer

@all

NPM explorer

HTTP

* It displays a grid of npm packages with basic information, categories, and navigation.

* The approach uses React for the frontend and fetch for API calls.

* It includes a details view for each package, a link to the npm page, and category navigation.

* The app includes a left column for categories and a right column for package details.

/** @jsxImportSource https://esm.sh/react */

import React, { useEffect, useState, useCallback } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

const ITEMS_PER_PAGE = 30;

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

async function server(request: Request): Promise<Response> {

reactPinterestClone

@Ronu12_05

@jsxImportSource https://esm.sh/react@18.2.0

Cron

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

interface BlogPost {

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

businessApp

@Ankit285001

@jsxImportSource https://esm.sh/react@18.2.0

HTTP

/** @jsxImportSource https://esm.sh/react@18.2.0 */

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";

function BusinessDashboard() {

return <BusinessDashboard />;

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

valtowntown

@maxm

🏘️ Val Town Town Val Town implemented in Val Town. What if you want to build your own Val Town? What if you want features we haven't built yet? Val Town Town demonstrates how you can run untrusted code yourself. Extend it and see what you can build!

HTTP

/** @jsxImportSource npm:react */

import { serveRequest } from "https://esm.town/v/maxm/reqEvaltown";

import { Hono } from "npm:hono";

import React from "npm:react";

import { renderToString } from "npm:react-dom/server";

const { httpEndpoint } = extractValInfo(import.meta.url);

sampleVanSSR

@reosablo

simple SSR + hydration example with VanJS

HTTP

/** cached client HTML */

let clientHtml: string | undefined;

/** load client HTML */

async function loadClientHtml() {

/** cached client script for App component hydration */

let clientScript: string | undefined;

/** load client script for App component hydration */

async function loadClientScript() {

clientHtml ??= await loadClientHtml();

return new Response(clientHtml, {

WundergroundStationDisplayV2

@Croniac

For reasons I don't fully understand, this doesn't always work properly in the val.town preview, however if you use the endpoint in a browser it should be fine. Wunderground stationId are ALL CAPS.

HTTP

// and display a simplified version of the current conditions in separate tiles. We'll use

// the fetch API to make the HTTP request and React for rendering the UI.

/** @jsxImportSource https://esm.sh/react */

import React, { useEffect, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

function calculateDensityAltitude(elevation, temperature, pressure) {

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

async function server(request: Request): Promise<Response> {