Search

count_visits

@muhammad_owais_warsi

Count Visits Get code and embed it on your website to count the number of visitors.

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

<h2>Embed Code (Copy and paste this into your React component):</h2>

</div>

function client() {

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

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

client();

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

const embedCode = `

import { useState, useEffect } from 'react';

function VisitorCounter() {

portfolioSite

@shegosthato

@jsxImportSource https://esm.sh/react

Script

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

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

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

// Custom Icons

const baseStyles = 'px-4 py-2 rounded-md transition-colors flex items-center justify-center';

if (asChild && React.isValidElement(children)) {

return React.cloneElement(children, {

className: `${baseStyles} ${variantStyles[variant]} ${className} ${children.props.className}`

</div>

function client() {

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

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

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

app

@mahictn

@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 App() {

</div>

function client() {

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

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

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

oktrue

@all

@jsxImportSource https://esm.sh/react

HTTP

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

import React from "https://esm.sh/react";

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

function App() {

'--position': `${Math.random() * 100}%`

} as React.CSSProperties} />

</div>

className="char"

style={{ '--index': i } as React.CSSProperties}

{char === ' ' ? '\u00A0' : char}

</div>

function client() {

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

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

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

allvalsindex

@ejfox

@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 to get a random emoji

</div>

function client() {

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

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

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

throw new Error('valtown token is not set');

const client = new ValTown({ apiKey: token });

const username = 'ejfox';

const user = await client.alias.username.retrieve(username);

if (!user || !user.id) {

let vals = [];

for await (const val of client.users.vals.list(user.id, { limit: 100 })) {

vals.push(val);

sharedTextBox

@wolf

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

import { useDebouncedCallback } from "https://esm.sh/use-debounce";

</div>

function client() {

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

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

client();

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

anthropicCaching

@stevekrouse

* This val creates an interactive webpage that demonstrates the functionality of the Anthropic API. * It uses a React frontend with an input for the API key and buttons to trigger different operations. * The Anthropic API key is stored in the frontend state and sent with each API request.

HTTP

* It uses a React frontend with an input for the API key and buttons to trigger different operations.

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

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

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

function client() {

client();

const client = new anthropic.Anthropic({ apiKey });

const response = await client.messages.create({

const client = new anthropic.Anthropic({ apiKey });

const response = await client.beta.promptCaching.messages.create({

MultiEncryptionKeyGenerator

@heltonteixeira

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

import { md5 } from "https://esm.sh/js-md5";

</div>

function client() {

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

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

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

juicyBowTie

@all

fix pattern layering

HTTP

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

import confetti from "https://esm.sh/canvas-confetti@1.6.0";

import React, { useEffect, useRef, useState } 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> {

selflessBlackEarthworm

@webandapktesting

@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 App() {

gap: '10px'

function client() {

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

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

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

gameTool

@Mindsparkai

@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 GameTool() {

</div>

function client() {

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

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

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

pluckyGreenHyena

@stevekrouse

@jsxImportSource https://esm.sh/react

HTTP

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

import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";

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

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

function App() {

try {

const client = new Cerebras({ apiKey });

const completionCreateResponse = await client.chat.completions.create({

messages: [

</div>

function client() {

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

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

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

sophisticatedCoffeeLandfowl

@teachergatis

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

import CodeMirror from "https://esm.sh/@uiw/react-codemirror@4.21.21";

import { EditorState } from "https://esm.sh/@codemirror/state@6.2.0";

zIndex: 1000,

function client() {

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

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

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

GDI_ClientInfo

@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 sends a GET request to a preconfigured server that responds with a JSON structure containing some interesting details about the client and its request. The JSON structure is received and finally shown to the user. This val is the companion of https://rozek-gdi_clientinfoservice.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

about the client and its request. The JSON structure is received and finally

[https://rozek-gdi_clientinfoservice.web.val.run/](https://rozek-gdi_clientinfoservice.web.val.run/)

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

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

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

const response = await fetch("https://rozek-gdi_clientinfoservice.web.val.run");

<h1>Client Info</h1>

function client() {

client();

<title>Client Info</title>

fluentAmberHyena

@deepmojo

@jsxImportSource https://esm.sh/react

HTTP

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

import React, { useState } 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(req: Request): Promise<Response> {

…

14 15

17 18

…

249