Search

noCollectionTracker

@cecedeecodes

No Collection Challenge 🚀 Introduction The No Collection Challenge is an interactive web application designed to encourage personal growth and resilience through the practice of making bold asks and embracing rejection. This app guides users through a journey of self-discovery, reflection, and empowerment. 🌟 Key Features Bold Ask Tracker : Users can log their bold asks, reflections, and outcomes. No Counter : The app tracks the number of "No" responses, with a goal of reaching 5. Reflection Stage : After 5 "No" responses, users enter a reflection stage to contemplate their journey. Motivational Quotes : Dynamic quotes change based on the user's progress to provide encouragement. Journey Visualization : Users can upload a symbolic image representing their journey. PDF Generation : At the end of the challenge, users can generate a PDF summary of their journey. Data Privacy : All data is stored locally on the user's device, ensuring privacy and security. Export/Import : Users can export their journey data and import it later or on another device. 💡 How It Works Ask Stage : Users input their bold asks and initial reflections. They mark each ask as successful or unsuccessful. The app tracks progress towards 5 "No" responses. Reflection Stage : Triggered after receiving 5 "No" responses. Users can upload a symbolic image and write a comprehensive reflection. Completion Stage : Users can review their journey, download a PDF summary, and start a new challenge. 🔒 Data Privacy All data is stored locally in the browser's localStorage. No data is transmitted or stored on external servers. Users have full control over their data, including the ability to clear all stored information. 🛠 Technical Details Built with React for a responsive and interactive user interface. Uses localStorage for data persistence. Implements PDF generation using jsPDF and html2canvas libraries. Responsive design for various device sizes. 🚀 Getting Started Open the app in your web browser. Start logging your bold asks and reflections. Progress through the challenge until you reach the reflection stage. Complete your journey by generating a PDF summary. 📝 Note This app is designed to be a personal growth tool. It encourages users to step out of their comfort zone, embrace rejection, and learn from each experience. Remember, the goal is not just to collect "No" responses, but to grow through the process of making bold asks. Happy challenging yourself and growing!

HTTP

function formatDate(dateString) {

function App() {

function safeSetItem(key, value) {

// Enhanced PDF Generation Function

async function generatePDF() {

function clearAllData() {

// Export/Import Functionality

function exportJourney() {

function importJourney(event) {

function startNewJourney() {

valle_tmp_3661823205745988729784285117582465

@janpaul123

// This val responds with "Hello World" styled with crazy gradients using CSS

HTTP

// This val responds with "Hello World" styled with crazy gradients using CSS

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

const html = `

<html>

aqi

@recklessreticence

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?v=5";

export async function aqi(interval: Interval) {

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

const data = await easyAQI({ location });

visionaryPeachAsp

@stevekrouse

A proxy that lets Val Town users get some free SocialData Search to power their Twitter Alerts, ie @stevekrouse/twitterAlert I reccomend interfacing with this proxy via this helper function: @stevekrouse/socialDataSearch

HTTP

A proxy that lets Val Town users get some free [SocialData](https://socialdata.tools) Search to power their Twitter Alerts, i

I reccomend interfacing with this proxy via this helper function: @stevekrouse/socialDataSearch

type User = { id: string; username: string; tier: string };

function SimpleLineChart({ data, width = 800, height = 400, margin = { top: 20, right: 20, bottom: 30, left: 40 } }) {

const chartWidth = width - margin.left - margin.right;

</svg>

function Dashboard({ data }) {

const chartData = Object.keys(data[0].users).map(username => ({

</div>

function App({ initialData }) {

const [data] = useState(initialData);

return <Dashboard data={data} />;

function client() {

const initialData = (window as any).INITIAL_DATA;

client();

async function getUsageData() {

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

return Object.values(usageByDate);

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

const url = new URL(req.url);

mightyAmberAlbatross

@anniewong25

// 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",

beetleGroundMobileIndia

@Anishraj

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

HTTP

const BET_AMOUNTS = [10, 50, 100, 250, 500];

function ColorTradingBetApp() {

const [balance, setBalance] = useState(INITIAL_BALANCE);

</div>

function client() {

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

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

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

return new Response(`

instantdbReactionsExample

@vawogbemi

@jsxImportSource https://esm.sh/react

HTTP

"rounded-lg bg-white p-3 text-3xl shadow-lg transition duration-200 ease-in-out hover:-translate-y-1 hover:shadow-xl";

function animateEmoji(

config: { emoji: string; directionAngle: number; rotationAngle: number },

setTimeout(() => rootEl.remove(), 800);

function style(el: HTMLElement, styles: Partial<CSSStyleDeclaration>) {

Object.assign(el.style, styles);

function InstantTopics() {

const db = init({

</div>

function App() {

return <InstantTopics />;

function client() {

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

client();

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

return new Response(

valle_tmp_1383961774625823777944450091493644

@janpaul123

// This code will create a simple Hacker News clone with 30 fake sample stories,

HTTP

// Store initial sample stories if they don't exist

async function initializeStories() {

const stories = await blob.getJSON(storiesKey);

// Fetch all stored stories

async function getStories() {

return (await blob.getJSON(storiesKey)) || [];

// Save stories

async function saveStories(stories) {

await blob.setJSON(storiesKey, stories);

return c.json({ error: "Story not found" }, 404);

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

await initializeStories();

infoboxCrawler

@jdan

@jsxImportSource https://esm.sh/react

1 2

HTTP

const TITLE_SELECTOR = "#firstHeading > span";

function labelPredicate(label) {

return label === "Father" || label === "Mother" || /^Parent/.test(label);

async function* crawlWikipedia(

url: string,

yield* crawlWikipedia(nextUrl, generation + 1, visited);

function App() {

const [url, setUrl] = useState("");

fit: true,

cyRef.current.on("tap", "node", function(evt) {

if (isCytoscapeDisabled) return;

window.open(node.id(), "_blank");

cyRef.current.on("layoutstop", function() {

cyRef.current.center();

</div>

function client() {

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

client();

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

const url = new URL(req.url);

sitTrackerApp

@olivas20000

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

HTTP

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

function App() {

const [jobs, setJobs] = useState([]);

</div>

function client() {

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

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

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

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

createMovieSite

@temptemp

// Utility function to generate movie poster URL

HTTP

const app = new Hono();

async function fetchMovies(page = 1, limit = 20) {

const cacheKey = `movies_page_${page}_limit_${limit}`;

const movieCache = new Map();

// Utility function to generate movie poster URL

function getMoviePosterUrl(movie) {

return movie.poster_path

// Ensure modal close functionality

document.addEventListener('DOMContentLoaded', () => {

amberPig

@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]}`,

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);

wordRangeFinder

@jrunning

Search for all 5-letter words between two words; good for cheating at Betweenle

HTTP

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

function App() {

const [words, setWords] = useState<string[]>([]);

</div>

function client() {

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

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

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

const url = new URL(request.url);

valle_tmp_526792188447901650436660713051491

@janpaul123

// This script creates an HTTP val that generates a Sparkline SVG and embeds an animated crawling cat GIF overlaying the screen.

HTTP

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

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

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

const data = [5, 3, 9, 6, 5, 9, 7, 3, 5, 2, 6]; // Sample data for the sparkline

// SVG and inline CSS to animate a crawling cat GIF

labLoginUpdateStatus

@todepond

An interactive, runnable TypeScript val by todepond

HTTP

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

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

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

const TABLE_NAME = "lab_login_users_with_times";

const body = await req.json();

…

215 216

217

218 219

…

467