Public
HTTP
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { init, tx, id } from "https://esm.sh/@instantdb/core@0.12.12";
const APP_ID = "5518c0f9-481c-4aa8-85cd-eee42bd45319";
function CarWindow({ car, onSave, onClose, title }) {
const [make, setMake] = useState(car?.make || "");
const [model, setModel] = useState(car?.model || "");
const [year, setYear] = useState(car?.year || "");
const [imageUrl, setImageUrl] = useState(car?.imageUrl || "");
const [lastOilChange, setLastOilChange] = useState(car?.lastOilChange || "");
const [insuranceExpiry, setInsuranceExpiry] = useState(car?.insuranceExpiry || "");
const [inspectionExpiry, setInspectionExpiry] = useState(car?.inspectionExpiry || "");
const handleSubmit = (e) => {
e.preventDefault();
onSave({
id: car?.id,
make,
model,
year: parseInt(year),
imageUrl,
lastOilChange,
insuranceExpiry,
inspectionExpiry
});
};
return (
<div className="window" style={{
width: '300px',
position: 'fixed',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)',
zIndex: 1000,
}}>
<div className="title-bar">
<div className="title-bar-text">{title}</div>
<div className="title-bar-controls">
<button aria-label="Close" onClick={onClose}></button>
</div>
</div>
<div className="window-body">
<form onSubmit={handleSubmit}>
<div className="field-row-stacked" style={{width: '200px'}}>
<label htmlFor="edit-make">Make</label>
<input
id="edit-make"
type="text"
value={make}
onChange={(e) => setMake(e.target.value)}
required
/>
</div>
<div className="field-row-stacked" style={{width: '200px'}}>
<label htmlFor="edit-model">Model</label>
<input
id="edit-model"
type="text"
value={model}
onChange={(e) => setModel(e.target.value)}
required
/>
</div>
<div className="field-row-stacked" style={{width: '200px'}}>
<label htmlFor="edit-year">Year</label>
<input
id="edit-year"
type="number"
value={year}
onChange={(e) => setYear(e.target.value)}
required
/>
</div>
<div className="field-row-stacked" style={{width: '200px'}}>
<label htmlFor="edit-image">Image URL</label>
<input
id="edit-image"
type="text"
value={imageUrl}
onChange={(e) => setImageUrl(e.target.value)}
/>
</div>
<div className="field-row-stacked" style={{width: '200px'}}>
<label htmlFor="edit-oil-change">Last Oil Change</label>
<input
id="edit-oil-change"
type="date"
value={lastOilChange}
onChange={(e) => setLastOilChange(e.target.value)}
/>
</div>
<div className="field-row-stacked" style={{width: '200px'}}>
<label htmlFor="edit-insurance">Insurance Expiry</label>
<input
id="edit-insurance"
type="date"