10* Create a [Val Town API token](https://www.val.town/settings/api), open the browser preview of this val, and use the API token as the password to log in.
11
12<img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7077d1b5-1fa7-4a9b-4b93-f8d01d3e4f00/public"/>
338 ---
339
340 Val Town comes with blob storage built-in. It allows for storing any data: text, JSON, images. You can access it via [\`std/blob\`](https://www.val.town/v/std/blob).
341
342 Blob storage is scoped globally to your account. If you set a blob in one val, you can retrieve it by the same key in another val. It's backed by Cloudflare R2.
10* Create a [Val Town API token](https://www.val.town/settings/api), open the browser preview of this val, and use the API token as the password to log in.
11
12<img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7077d1b5-1fa7-4a9b-4b93-f8d01d3e4f00/public"/>
3 * Users can vote for their preferred seminar location from four options.
4 * The app uses React for the frontend and SQLite for storing votes on the backend.
5 * The design is inspired by Side.school and includes an image in the first frame.
6 * It features a celebration animation when voting, a distinct style for the selected option,
7 * and allows users to cancel their vote by clicking on the selected option again.
74 return (
75 <div className="container">
76 <div className="image-frame"></div>
77 <div className="content">
78 <h1>Side School Seminar</h1>
206 position: relative;
207}
208.image-frame {
209 width: 100%;
210 height: 300px;
211 background-image: url('https://media.discordapp.net/attachments/1210186058440900690/1276662221681852446/paKC1TADWHlq2ilOrkbiQNwIbw.png?ex=66cc5218&is=66cb0098&hm=9e97febd99094480aa2c113488311f23db3c2d43af69c607212b05e55b794433&=&format=webp&quality=lossless&width=662&height=936');
212 background-size: cover;
213 background-position: center;
218 functions where possible. Unless specified, don't add error handling,
219 make sure that errors bubble up to the caller.
220 Avoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's
221 not practical for the user's request (e.g. if they ask for a particular animated gif).
222 If the user asks for something that requires persistence, use the Val Town Blob storage API, unless
280functions where possible. Unless specified, don't add error handling,
281make sure that errors bubble up to the caller.
282Avoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's
283not practical for the user's request (e.g. if they ask for a particular animated gif).
284If the user asks for something that requires persistence, use the Val Town Blob storage API, unless
315 ---
316
317 Val Town comes with blob storage built-in. It allows for storing any data: text, JSON, images. You can access it via [\`std/blob\`](https://www.val.town/v/std/blob).
318
319 Blob storage is scoped globally to your account. If you set a blob in one val, you can retrieve it by the same key in another val. It's backed by Cloudflare R2.
1import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON";
2
3export const nasaImageDetails = async () => {
4 const nasaAPOD = await fetchJSON("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY");
5 let nasaImageHtml = nasaAPOD.hdurl
6 ? `<img width="100%" src="${nasaAPOD.hdurl}"/>`
7 : nasaAPOD.media_type === "video"
8 ? `<iframe width="100%" height="100%" src="${nasaAPOD.url}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`
9 : `<p>Unknown Type</p><br/><code><pre>${JSON.stringify(nasaAPOD, null, 2)}</pre></code>`;
10 nasaImageHtml += `<p>${nasaAPOD.explanation}</p>`;
11 nasaImageHtml += "<p>"
12 + (nasaAPOD.media_type === "video"
13 ? `<small>Video Url: ${nasaAPOD.url}</small>`
14 : `<p><small>Image Url: ${nasaAPOD.hdurl}</small>`)
15 + "</p>";
16 return { html: nasaImageHtml, nasaAPOD };
17};
248 "Use modern CSS techniques",
249 "Add client-side form validation",
250 "Implement lazy loading for images",
251 "Use CSS Grid for layout",
252 "Use CSS flex for layout",
248 "Use modern CSS techniques",
249 "Add client-side form validation",
250 "Implement lazy loading for images",
251 "Use CSS Grid for layout",
252 "Use CSS flex for layout",
7* Type text prompts, select it, press "Q". Select a previous generation with a new text prompt to keep iterating. Selecting shapes doesn't work yet. Have fun!
8
9<a href="https://x.com/JanPaul123/status/1815502582015754657"><img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/5893dfbf-c2de-4be0-049e-d8fdd1970a00/public"/></a>
10
3Move circles around. State is synced with the server. Open a window in another tab and watch the circles update as you move them .
4
5
6
