Val Town Code SearchReturn to Val Town

42    document.getElementById('productForm').addEventListener('submit', saveProduct);
43    
44    // Auto-generate AI image URL
45    const imageUrlInput = document.querySelector('input[name="imageUrl"]');
46    const nameInput = document.querySelector('input[name="name"]');
47    const colorsInput = document.querySelector('input[name="colors"]');
48    const beadStyleSelect = document.querySelector('select[name="beadStyle"]');
49    
50    function generateAIImageUrl() {
51        const name = nameInput.value.toLowerCase().replace(/\s+/g, '-');
52        const colors = colorsInput.value.toLowerCase().replace(/\s+/g, '-').replace(/,/g, '-');
53        const style = beadStyleSelect.value;
54        
55        if (name && !imageUrlInput.value.startsWith('http')) {
56            const description = `${name}-${colors}-${style}-beaded-bag`.replace(/--+/g, '-');
57            imageUrlInput.value = `https://maxm-imggenurl.web.val.run/${description}`;
58        }
59    }
60    
61    nameInput.addEventListener('blur', generateAIImageUrl);
62    colorsInput.addEventListener('blur', generateAIImageUrl);
63    beadStyleSelect.addEventListener('change', generateAIImageUrl);
64}
65
88            <td class="py-3 px-4">
89                <div class="flex items-center space-x-3">
90                    <img src="${product.image_url}" alt="${product.name}" 
91                         class="w-12 h-12 object-cover rounded"
92                         onerror="this.src='https://maxm-imggenurl.web.val.run/beaded-bag-placeholder'">
176        form.colors.value = product.colors || '';
177        form.beadStyle.value = product.bead_style || 'glass';
178        form.imageUrl.value = product.image_url || '';
179        form.category.value = product.category || 'bags';
180        form.inStock.checked = product.in_stock;
205        colors: formData.get('colors'),
206        beadStyle: formData.get('beadStyle'),
207        imageUrl: formData.get('imageUrl'),
208        category: formData.get('category'),
209        inStock: formData.get('inStock') === 'on'

72  try {
73    const body = await c.req.json();
74    const { name, description, price, image_url, category, in_stock = true } = body;
75    
76    if (!name || !description || !price || !image_url || !category) {
77      const response: ApiResponse<number> = {
78        success: false,
86      description,
87      price: parseFloat(price),
88      image_url,
89      category,
90      in_stock

232                    
233                    <div class="md:col-span-2">
234                        <label class="block text-sm font-medium text-gray-700 mb-1">Image URL</label>
235                        <input type="url" name="imageUrl" placeholder="https://example.com/image.jpg or use AI: description-of-your-bag" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
236                        <p class="text-xs text-gray-500 mt-1">For AI-generated images, just describe your bag (e.g., "elegant-silver-beaded-clutch")</p>
237                    </div>
238                    

11    description: row.description,
12    price: row.price,
13    image_url: row.image_url,
14    category: row.category,
15    in_stock: Boolean(row.in_stock),
28    description: row.description,
29    price: row.price,
30    image_url: row.image_url,
31    category: row.category,
32    in_stock: Boolean(row.in_stock),
42    description: row.description,
43    price: row.price,
44    image_url: row.image_url,
45    category: row.category,
46    in_stock: Boolean(row.in_stock),
51export async function createProduct(product: Omit<Product, 'id' | 'created_at'>): Promise<number> {
52  const result = await sqlite.execute(
53    `INSERT INTO ${PRODUCTS_TABLE} (name, description, price, image_url, category, in_stock) VALUES (?, ?, ?, ?, ?, ?)`,
54    [product.name, product.description, product.price, product.image_url, product.category, product.in_stock ? 1 : 0]
55  );
56  return result.lastInsertRowid;

62        <div class="product-card">
63            <div class="aspect-w-1 aspect-h-1 w-full">
64                <img src="${product.image_url}" alt="${product.name}" 
65                     class="w-full h-64 object-cover"
66                     onerror="this.src='https://maxm-imggenurl.web.val.run/elegant-beaded-bag-placeholder'">
115            name: product.name,
116            price: product.price,
117            image_url: product.image_url,
118            quantity: 1
119        });
169        cartItems.innerHTML = cart.map(item => `
170            <div class="flex items-center space-x-4 mb-4 pb-4 border-b">
171                <img src="${item.image_url}" alt="${item.name}" class="w-16 h-16 object-cover rounded">
172                <div class="flex-1">
173                    <h4 class="font-medium text-sm">${item.name}</h4>

6  description: string;
7  price: number;
8  image_url: string;
9  category: string;
10  in_stock: boolean;

5## Features
6
7- **Product Catalog**: Browse beautiful beaded bags with detailed descriptions and images
8- **Shopping Cart**: Add/remove items, adjust quantities, view totals
9- **Customer Orders**: Place orders with contact information
67- description (TEXT)
68- price (REAL)
69- image_url (TEXT)
70- category (TEXT)
71- in_stock (BOOLEAN)

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You 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!
6
7Have fun with it and hopefully your crush says yes hehe.

8    
9    <!-- Favicon -->
10    <link rel="icon" type="image/svg+xml" href="/frontend/logo.svg">
11    
12    <!-- TailwindCSS -->

7    <script src="https://cdn.twind.style" crossorigin></script>
8    <script src="https://esm.town/v/std/catch"></script>
9    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💰</text></svg>">
10    <style>
11        .chart-container {