Search

interview_practice

@knulp222

@jsxImportSource https://esm.sh/react

HTTP

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

import { MoonIcon, SunIcon, XCircleIcon } from "https://esm.sh/@heroicons/react/24/solid";

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

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

interface InterviewItem {

inputRef.current?.focus();

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> {

calculateRequiredQuantityApp

@kalawaja

README: Price Optimizer Application Overview Price Optimizer is a simple yet powerful application designed to help users calculate the required quantity of an asset to achieve a desired average price. This tool is especially useful for investors aiming to optimize their portfolio costs and align with target financial goals. Key Features Target Price Calculation: Automatically compute the additional quantity needed to reach a specified target price. Customizable Inputs: Easily adjust current quantity, current price, new price, and target price. User-Friendly Interface: Designed for simplicity and clarity, ensuring accessibility for all users. How It Works The app uses the following formula to calculate the required quantity: Example: Current Quantity: 500 Current Price: 20 New Price: 10 Target Price: 15 The app calculates the Required Quantity as 500 units. Usage Open the application. Input the following values: Current Quantity Current Price New Price Target Price Click Calculate to get the Required Quantity.

HTTP

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

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

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

function PriceQuantityCalculator() {

const targetPriceRef = useRef<HTMLInputElement>(null);

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

const { name, value } = e.target;

return <PriceQuantityCalculator />;

function client() {

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

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

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

GDI_AIChatCompletion

@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 simple web page which allows users to enter a "System Message" and a "User Message" in order to be sent to a preconfigured server. That server then runs a chat completion and returns the computed "Assistant Message" back to the client where the result is presented to the user. This val is the companion of https://rozek-gdi_aichatcompletionservice.web.val.run/ which contains the server part (aka "backend") for this example. The code was created using Townie - with only a few small manual corrections. This val is licensed under the MIT License.

HTTP

runs a chat completion and returns the computed "Assistant Message" back to the

client where the result is presented to the user.

This val is the companion of

/** @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> {

chatApp

@ahmed9ali

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

Script

/** @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";

import { v4 as uuidv4 } from "https://esm.sh/uuid";

</div>

function client() {

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

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

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

imageToWebPConverter

@eligosmlytics

@jsxImportSource https://esm.sh/react

HTTP

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

import React, { useState, 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(); }

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

falDemoApp

@mda1125

@jsxImportSource https://esm.sh/react

HTTP

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

import { createFalClient } from "https://esm.sh/@fal-ai/client";

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

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

import { falProxyRequest } from "https://esm.town/v/stevekrouse/falProxyRequest";

{ value: "1152x2048", label: "Portrait 9:16" }

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

e?.preventDefault();

try {

const fal = createFalClient({

proxyUrl: "/api/fal/proxy",

</div>

function client() {

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

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

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

geocode

@stevekrouse

* This code creates a geocoder widget similar to the Google Maps API search widget. * It uses React for the frontend, the Cerebras API for LLM-based geocoding, * and Leaflet for displaying the map.

HTTP

* This code creates a geocoder widget similar to the Google Maps API search widget.

* It uses React for the frontend, the Cerebras API for LLM-based geocoding,

* and Leaflet for displaying the map.

/** @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 debounce from "https://esm.sh/lodash.debounce";

</div>

function client() {

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

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

client();

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

laserCutterSimulator

@all

@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";

const BED_SIZE = 450;

</div>

function client() {

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

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

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

legalAssistant

@websrai

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

HTTP

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

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

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

function LegalDisclaimer() {

</div>

function client() {

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

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

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

podcast

@all

@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";

const PRESET_PODCASTS = [

</div>

function client() {

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

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

client();

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

anon_doc

@stevekrouse

@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, useCallback } from "https://esm.sh/react@18.2.0";

import ReactMarkdown from "https://esm.sh/react-markdown@8.0.7?deps=react@18.2.0";

function MarkdownPreview({ content }) {

<ReactMarkdown>{content}</ReactMarkdown>

</div>

function client() {

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

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

client();

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

iconExplorer

@all

Icon Explorer [ ] Dropdown for Popular Libraries [ ] Color [ ] Fix Filtering

HTTP

* The approach uses React for the frontend and react-icons library for icon rendering.

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

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

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

import * as FiIcons from "https://esm.sh/react-icons/fi";

import * as FaIcons from "https://esm.sh/react-icons/fa";

import * as AiIcons from "https://esm.sh/react-icons/ai";

`import { ${icon.name} } from 'react-icons/${icon.prefix.toLowerCase()}';`

function client() {

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

RefiComparison

@jbwinters

* This app creates a comprehensive mortgage refinance offer comparison tool. * It calculates monthly payments, total interest paid, and displays charts for visual comparison. * It uses React for the frontend, Chart.js for data visualization, and Val Town's blob storage for data persistence.

HTTP

* It calculates monthly payments, total interest paid, and displays charts for visual comparison.

* It uses React for the frontend, Chart.js for data visualization, and Val Town's blob storage for data persistence.

/** @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";

console.error("Error fetching offers:", error);

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

const { name, value } = e.target;

return (monthlyPayment * termYears * 12) - principal;

const handleSubmit = 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> {

competentCoffeeTyrannosaurus

@shivammunday

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

HTTP

/** @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";

function WebsiteChatbot() {

const [isLoading, setIsLoading] = useState(false);

async function handleSubmit(e: React.FormEvent) {

e.preventDefault();

</div>

function client() {

const chatbotRoot = document.createElement('div');

createRoot(chatbotRoot).render(<WebsiteChatbot />);

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

export default async function server(request: Request) {

reacttemplate

@gueejla

A common react template/setup that I gleaned from others on valtown

HTTP

A common react template/setup that I gleaned from others on valtown

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

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

import { sillyCSS } from "https://esm.town/v/gueejla/sillyCSS";

</div>

function client() {

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

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

client();

function server(req: Request): Promise<Response> {

…

27 28

30 31

…

250