Search

web_mhVADHMQe1

@dhvanil

An interactive, runnable TypeScript val by dhvanil

HTTP

export async function web_mhVADHMQe1(req) {

return new Response(`<!DOCTYPE html>

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

function playSound() {

const oscillator = audioContext.createOscillator();

oscillator.stop(audioContext.currentTime + 0.1);

function explodeEmojis(event) {

const emojis = ['🎉', '✨', '💫', '🌟', '💥'];

// Make the cube transform on click

document.querySelector('.cube').addEventListener('click', function() {

this.style.transform = `scale(${Math.random() + 0.5}) rotateX(${Math.random() * 360}deg) rotateY(${Math.random()

@maxm

// This approach injects a notification indicator with a counter into the top toolbar

HTTP

cookie_value TEXT

function createErrorPage(title: string, message: string): string {

return `

return userCookie;

function injectNotificationIndicator(html: string): string {

const notificationCount = 21; // Hardcoded for now

`$1 |${notificationIndicator}|`

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

const url = new URL(req.url);

sipCalculator

@roysarajit143

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

HTTP

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

function SIPCalculator() {

const [monthlyInvestment, setMonthlyInvestment] = useState(5000);

</div>

function client() {

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

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

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

return new Response(`

aqi

@hajitorus

AQI Alerts Get email alerts when AQI is unhealthy near you. Set up Click Fork Change location (Line 4) to describe your location. It accepts fairly flexible English descriptions which it turns into locations via nominatim's geocoder API . Click Run Background This val uses nominatim's geocoder to get your lat, lon, and air quality data from OpenAQ. It uses EPA's NowCast AQI Index calculation and severity levels. Learn more: https://www.val.town/v/stevekrouse.easyAQI

Cron

import { email } from "https://esm.town/v/std/email?v=9";

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

export async function aqi(interval: Interval) {

const location = "toowoomba city, australia"; // <-- change to place, city, or zip code

const data = await easyAQI({ location });

sympatheticApricotOtter

@judeholz

// Fetches a random joke.

Script

import { email } from "https://esm.town/v/std/email?v=9";

// Fetches a random joke.

async function fetchRandomJoke() {

const response = await fetch(

"https://official-joke-api.appspot.com/random_joke",

valentine

@eitanattias

Hello!!! Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right. You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen! Have fun with it and hopefully your crush says yes hehe.

HTTP

const NO_PHRASES = [

function App() {

const [noClicks, setNoClicks] = useState(0);

</div>

function client() {

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

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

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

return new Response(

bookmarklets

@vladimyr

Bookmarklet Manager Write your bookmarklets in val.town. Usage You val should export an anonymous function, containing the code that will run when the bookmarklet is triggered. export default () => { alert("Hi mom!"); } Make sure that your val is either unlisted or public, then navigate to https://pomdtr-bookmarklets.web.val.run/v/:author/:name to generate the bookmarklet link. Sharing a bookmarklet Make sure that your val is public, and add a #bookmarklet tag anywhere in the code. export default () => { alert("Hi mom!"); } // #bookmarklet It should automatically appears on https://pomdtr-bookmarklets.web.val.run . ⚠️ If you are using the Arc Browser , you can use the Powerlet extension to install bookmarklets.

HTTP

## Usage

You val should export an anonymous function, containing the code that will run when the bookmarklet is triggered.

```typescript

import { minify } from "npm:terser";

const app = new Hono();

async function bookmarkletUrl(author: string, name: string) {

const { code } = await api(`/v1/alias/${author}/${name}`);

const { code: minifedCode } = await minify(`(${code})();`);

count_visits

@muhammad_owais_warsi

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

HTTP

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

function App() {

const [websiteUrl, setWebsiteUrl] = useState("");

</div>

function client() {

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

client();

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

const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");

import { useState, useEffect } from 'react';

function VisitorCounter() {

const [count, setCount] = useState(0);

redMonkey

@tempguy

An interactive, runnable TypeScript val by tempguy

Script

import { blob } from "https://esm.town/v/std/blob";

export async function doodstream(ctx: Context) {

let url = ctx.url;

url: `https:${thumbnailTrack[1]}`,

function unpack(p, a, c, k) {

while (c--) if (k[c]) p = p.replace(new RegExp("\\b" + c.toString(a) + "\\b", "g"), k[c]);

return p;

function mat(r, l) {

return r.exec(l);

export async function streamwish(ctx) {

const _embed = await fetch(ctx.url);

Referer: "https://streamwish.com",

export async function format(ctx) {

const url = ctx;

Referer: "",

export async function streamtape(ctx) {

// const _ = await blob.get("streamtapeLimit");

Referer: "https://streamtape.com",

export async function streamium(ctx) {

const _embed = await fetch(ctx.url);

refresher

An interactive, runnable TypeScript val by u

RPC (deprecated)

import { alert } from "https://esm.town/v/u/alert";

import { refreshData } from "https://esm.town/v/u/refreshData";

export async function refresher(name: string) {

let resp = "";

if (refreshData[name] === undefined) {

emailRandomJoke

@gitneukev

// Fetches a random joke.

Cron

import { email } from "https://esm.town/v/std/email?v=9";

// Fetches a random joke.

async function fetchRandomJoke() {

const response = await fetch(

"https://official-joke-api.appspot.com/random_joke",

marineMoccasinLizard

@kaz

* This app implements a "Would You Rather" game with a ranking system for answers and a progress bar. * It uses React for the frontend and SQLite for persistent storage on the backend. * The ranking system updates based on user choices and displays in the Answers tab. * A progress bar is added to show completion of 20 questions.

HTTP

"Have another set of eyes in the back of your head (they are fully functional)",

function App() {

function SplashScreen({ onGetStarted }: { onGetStarted: () => void }) {

function TabBar() {

function Game({ user, saveAnswer }: { user: User | null; saveAnswer: (answer: Answer, losingAnswer: string) => void }) {

function Answers(

function Profile({ user, setUser }: { user: User | null; setUser: (user: User | null) => void }) {

function client() {

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

async function updateEloRankings(sqlite: any, KEY: string, winningAnswer: string, losingAnswer: string) {

reluctantCoffeeGayal

@kaz

HTTP

"Have another set of eyes in the back of your head (they are fully functional)",

function App() {

function SplashScreen({ onGetStarted }: { onGetStarted: () => void }) {

function TabBar() {

function Game({ user, saveAnswer }: { user: User | null; saveAnswer: (answer: Answer, losingAnswer: string) => void }) {

function Answers(

function Profile({ user, setUser }: { user: User | null; setUser: (user: User | null) => void }) {

function client() {

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

async function updateEloRankings(sqlite: any, KEY: string, winningAnswer: string, losingAnswer: string) {

viewSource

@reecer

View source code Just like a right click + inspect on desktop, except available on mobile too! Just write the website after the / e.g. https://neverstew-viewSource.web.val.run/bbc.co.uk

HTTP

import { fetchText } from "https://esm.town/v/stevekrouse/fetchText?v=6";

import { escape } from "npm:html-sloppy-escaper";

export default async function viewSource(req: Request) {

const pathname = new URL(req.url).pathname;

const html = await fetchText(pathname === "/" ? "example.com" : pathname); // .then(prettifyHtml);