Search
dataTableScript
@skyehersh
// Changes to the inputs will trigger a redraw to update the table
Script
const minEl = document.getElementById("min");
const maxEl = document.getElementById("max");
const searchEl = document.getElementById("search");
const desiredGenderEl = document.getElementById("desired-gender");
const yourGenderEl = document.getElementById("your-gender");
const styleEl = document.getElementById("style");
DataTable.ext.search.push(function(settings, data, dataIndex) {
let min = parseInt(minEl.value, 10);
let max = parseInt(maxEl.value, 10);
let age = parseFloat(data[1]) || 0;
getCaller
@easrng
An interactive, runnable TypeScript val by easrng
Script
export async function getCaller() {
if (arguments[0])
return;
// val callers are now tracked in an AsyncLocalStorage object
let asyncLocalStorage;
// we need to set up a hook to intercept it,
// since the object is only defined in internals.ts
const { AsyncLocalStorage } = await dynamicImport(
"node:async_hooks",
const realGetStore = AsyncLocalStorage.prototype.getStore;
getmiraclechildcounter
@politelyinvinciblepointer
An interactive, runnable TypeScript val by politelyinvinciblepointer
Script
import { miraclechildcounter } from "https://esm.town/v/politelyinvinciblepointer/miraclechildcounter";
export function getmiraclechildcounter() {
return miraclechildcounter;
valle_tmp_59342510692095097966010158625245
@janpaul123
// This val responds with an HTML form to input the user's name and greets them
HTTP
// This val responds with an HTML form to input the user's name and greets them
export default async function(req: Request): Promise<Response> {
const htmlResponse = `
<form action="/" method="POST">
<label for="name">Enter your name:</label><br>
<input type="text" id="name" name="name"><br>
<input type="submit" value="Submit">
</form>
return new Response(htmlResponse, {
headers: { "Content-Type": "text/html" },
chatSampleSystemRoleExpert
@webup
An interactive, runnable TypeScript val by webup
Script
export const chatSampleSystemRoleExpert = (async () => {
const system = `
## Role: Bio 生成器
## Profile:
- author: Arthur
- version: 0.2
- language: 中文
- description: 熟知各个互联网平台的运行规律,熟知互联网信息传播规律。
## Goals: 帮助用户快速生成互联网平台上可以使用的Bio
## Constrains:
replitSet
@claytn
An interactive, runnable TypeScript val by claytn
Script
import { fetch } from "https://esm.town/v/std/fetch";
export let replitSet = (REPLIT_DB_URL, key, value) =>
fetch(`${REPLIT_DB_URL}/${key}=${encodeURIComponent(value)}`, {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
umdImport
@easrng
An interactive, runnable TypeScript val by easrng
Script
export async function umdImport(url: string | URL, globals = {}) {
const res = await fetch(url);
if (!res.ok) throw new Error(await res.text());
let code = await res.text();
code = code.replace(/^#!/gm, "// #!");
const module = {
exports: {} as any,
const global = new Proxy({}, {
...Reflect,
get(o, k) {
val_iHF6nZHjLM
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export default async function handler(req) {
try {
const result = await (async () => {
function findLowestThreeDigitFibonacci() {
let fib = [0, 1];
let nextFib = 1;
while (nextFib < 1000) {
nextFib = fib[fib.length - 1] + fib[fib.length - 2];
fib.push(nextFib);
return fib.filter(num => num >= 100 && num < 1000);
getOctopusEnergyRates
@metart43
// Declare the function as async and export it
HTTP
// Declare the function as async and export it
export const htmlExample = async () => {
const url = new URL(
"https://api.octopus.energy/v1/products/AGILE-24-10-01/electricity-tariffs/E-1R-AGILE-24-10-01-A/standard-unit-rates/",
const todaysDate = new Date();
// Helper function to format the date
function formatDateForOctopus(date) {
const isoString = date.toISOString();
return isoString.slice(0, 16) + "Z"; // Trims milliseconds and keeps up to minutes
// Create start of the day (00:00)
upstashEx
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
Script
import { Redis } from "npm:@upstash/redis";
const redis = new Redis({
url: Deno.env.get("upstashURL"),
token: Deno.env.get("upstashToken"),
const start = performance.now();
console.log(await redis.set("foo", new Date()));
console.log("set time: " + (performance.now() - start));
const start2 = performance.now();
console.log(await redis.get("foo"));
console.log("get time: " + (performance.now() - start2));
codeOnValTown
@stevekrouse
Code on Val Town Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it. This uses github-fork-ribbon-css under the hood. Usage Here are 2 different ways to add the "Code on Val Town" ribbon: 1. Wrap your fetch handler (recommended) import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default modifyFetchHandler(async (req: Request): Promise<Response> => {
return html(`<h2>Hello world!</h2>`);
}); Example: @andreterron/openable_handler 2. Wrap your HTML string import { modifyHtmlString } from "https://esm.town/v/andreterron/codeOnValTown?v=50";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default async (req: Request): Promise<Response> => {
return html(modifyHtmlString(`<h2>Hello world!</h2>`));
}; Example: @andreterron/openable_html Other ways We made sure this was very modular, so you can also add the ribbon using these methods: Get the element string directly: @andreterron/codeOnVT_ribbonElement Modify an HTTP Response: @andreterron/codeOnVT_modifyResponse Use .pipeThrough to append to a stream: @andreterron/InjectCodeOnValTownStream Customization Linking to the val These functions infer the val using the call stack or the request URL. If the inference isn't working, or if you want to ensure it links to a specific val, pass the val argument: modifyFetchHandler(handler, {val: { handle: "andre", name: "foo" }}) modifyHtmlString("<html>...", {val: { handle: "andre", name: "foo" }}) Styling You can set the style parameter to a css string to customize the ribbon. Check out github-fork-ribbon-css to learn more about how to style the element. modifyFetchHandler(handler, {style: ".github-fork-ribbon:before { background-color: #333; }"}) modifyHtmlString("<html>...", {style: ".github-fork-ribbon:before { background-color: #333; }"}) Here's how you can hide the ribbon on small screens: modifyFetchHandler(handler, {style: `@media (max-width: 768px) {
.github-fork-ribbon {
display: none !important;
}
}`}) To-dos [ ] Let users customize the ribbon. Some ideas are the text, color or placement.
Script
# Code on Val Town
![Screenshot 2024-02-27 at 1.25.46 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6b67bb0a-d80f-4f3d-5b17-57b5378b3e00/public)
Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it.
This uses [github-fork-ribbon-css](https://github.com/simonwhitaker/github-fork-ribbon-css) under the hood.
## Usage
Here are 2 different ways to add the "Code on Val Town" ribbon:
* @param bodyText HTML string that will be used to inject the element.
* @param val Define which val should open. Defaults to the root reference
export function modifyHtmlString(
bodyText: string,
aqi
@Exam6918
An interactive, runnable TypeScript val by Exam6918
Cron
export let aqi = async () => {
let pm25 = (
await fetchJSON(
"https://api.openaq.org/v2/latest?" +
new URLSearchParams({
limit: "10",
page: "1",
location: "San Francisco",
offset: "0",
sort: "desc",
nasa
@ejfox
* This program creates an HTTP server that fetches various data from NASA APIs
* and returns a JSON response with a collection of interesting information about today.
* It uses multiple NASA APIs to gather diverse space-related data, including real-time imagery
* and additional interesting data points.
HTTP
* This program creates an HTTP server that fetches various data from NASA APIs
* and returns a JSON response with a collection of interesting information about today.
* It uses multiple NASA APIs to gather diverse space-related data, including real-time imagery
* and additional interesting data points.
const NASA_API_KEY = 'vYg1cCNLVbcgNemMWuLEjoJsGOGbBXZjZjmwVwuV';
async function fetchNASAData() {
const today = new Date().toISOString().split('T')[0];
// Fetch Astronomy Picture of the Day
const apodResponse = await fetch(`https://api.nasa.gov/planetary/apod?api_key=${NASA_API_KEY}`);
const apodData = await apodResponse.json();
val_7zpl8w4v8d
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export default async function handler(req) {
try {
const result = await (async () => {
function findLowestThreeDigitFibonacci() {
let a = 0, b = 1;
let lowestThreeDigitFibonacci = 0;
while (b < 1000) {
let temp = b;
b = a + b;
a = temp;