Val Town Code SearchReturn to Val Town

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![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e2a6db10-906d-4398-6e13-32475a0b6500/public)
6

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7Use this button to install the val:

23
24  const headers = {
25    ...(opts.withImagesSummary && { 'X-With-Images-Summary': 'true' }),
26    ...(opts.withGeneratedAlt && { 'X-With-Generated-Alt': 'true' }),
27    ...(opts.withLinksSummary && { 'X-With-Links-Summary': 'true' }),
258    const requestOptions = {
259      returnFormat: optsArray.includes('html') ? 'html' : optsArray.includes('json') ? 'json' : undefined,
260      withImagesSummary: optsArray.includes('images'),
261      withLinksSummary: optsArray.includes('links'),
262      withGeneratedAlt: optsArray.includes('caption')

1/**
2 * This app allows users to drop an image onto the canvas, add text to it, move the text around,
3 * edit the text directly on the canvas, and save the result to their local disk.
4 * We'll use the HTML5 Canvas API for image manipulation and the File System Access API for saving files.
5 * The app is styled with a playful and colorful design, using the Caveat font for a handwritten feel.
6 */
11
12function App() {
13  const [image, setImage] = useState(null);
14  const [text, setText] = useState("Enter text here");
15  const [textPosition, setTextPosition] = useState({ x: 250, y: 250 });
25    window.addEventListener('resize', handleResize);
26    return () => window.removeEventListener('resize', handleResize);
27  }, [image, text, textPosition, canvasSize, textColor, fontSize, fontFamily]);
28
29  const handleResize = () => {
30    if (!image) {
31      setCanvasSize({ width: window.innerWidth, height: window.innerHeight });
32    }
38    ctx.clearRect(0, 0, canvas.width, canvas.height);
39    
40    if (image) {
41      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
42    } else {
43      ctx.fillStyle = "#f0f0f0";
46      ctx.font = "20px Caveat";
47      ctx.textAlign = "center";
48      ctx.fillText("Drop an image here", canvas.width / 2, canvas.height / 2);
49    }
50
95    e.preventDefault();
96    const file = e.dataTransfer.files[0];
97    if (file && file.type.startsWith('image/')) {
98      const reader = new FileReader();
99      reader.onload = (event) => {
100        const img = new Image();
101        img.onload = () => {
102          setImage(img);
103          const aspectRatio = img.width / img.height;
104          let newWidth = Math.min(window.innerWidth, img.width);
123  const handleSave = async () => {
124    try {
125      const blob = await new Promise(resolve => canvasRef.current.toBlob(resolve, 'image/png'));
126      const handle = await window.showSaveFilePicker({
127        suggestedName: 'image-with-text.png',
128        types: [{
129          description: 'PNG Files',
130          accept: {'image/png': ['.png']},
131        }],
132      });
134      await writable.write(blob);
135      await writable.close();
136      console.log('Image saved successfully!');
137    } catch (err) {
138      console.error('Error saving the image:', err);
139      console.log('Failed to save the image. Please try again.');
140    }
141  };
169          <option value="Courier New">Courier New</option>
170        </select>
171        <button onClick={handleSave} disabled={!image} className="save-button">
172          Save Image with Text
173        </button>
174        <a href={import.meta.url.replace("esm.town", "val.town")} className="source-link">View Source</a>