Val Town Code SearchReturn to Val Town

1# Handling query params in requests
2
3Using the standard [URL#searchParams](https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams) method, you can grab query parameters out of any val that is operating using the [Web API](https://docs.val.town/api/web).
4
5This val demonstrates how to grab one or more query parameters. It returns the all the query parameters found as a json response.

1# Returning HTML from the Val Town Web API
2
3This just lets you use the standard [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) object with our [Web API](https://docs.val.town/api/web) to return an HTML response from this Val.

1export default async function createProject(projectName) {
2  const apiToken = Deno.env.get("VAL_TOWN_RW_PROJECTS");
3
4  const response = await fetch("https://api.val.town/v1/projects", {
5    method: "POST",
6    headers: {
7      "Content-Type": "application/json",
8      "Authorization": `Bearer ${apiToken}`,
9    },
10    body: JSON.stringify({

8
91. Click `Fork`
102. Change `location` (Line 4) to describe your location. It accepts fairly flexible English descriptions which it turns into locations via [nominatim's geocoder API](https://www.val.town/v/stevekrouse/nominatimSearch).
113. Click `Run`
12

9const getForecast = async () => {
10  const forecastData = await fetchJSON(
11    `http://dataservice.accuweather.com/forecasts/v1/daily/1day/${accuweatherCityCode}?apikey=${process.env.accuWeather}&details=true&metric=true`,
12  );
13  return forecastData.DailyForecasts[0];

3}
4
5async function convertValToProject(input: string, apiToken: string): Promise<string> {
6  try {
7    const projectName = generateProjectName();
8
9    // Create a new project
10    const projectResponse = await fetch("https://api.val.town/v1/projects", {
11      method: "POST",
12      headers: {
13        "Content-Type": "application/json",
14        "Authorization": `Bearer ${apiToken}`,
15      },
16      body: JSON.stringify({
37    const directories = getUniqueDirectories(files);
38    for (const dir of directories) {
39      await createDirectory(project.id, dir, apiToken);
40    }
41
42    // Create all files
43    for (const file of files) {
44      await createFile(project.id, file, apiToken);
45    }
46
138}
139
140async function createDirectory(projectId: string, directoryPath: string, apiToken: string): Promise<void> {
141  const encodedPath = encodeURIComponent(directoryPath);
142  const response = await fetch(`https://api.val.town/v1/projects/${projectId}/files/${encodedPath}`, {
143    method: "POST",
144    headers: {
145      "Content-Type": "application/json",
146      "Authorization": `Bearer ${apiToken}`,
147    },
148    body: JSON.stringify({ type: "directory" }),
158  projectId: string,
159  file: { path: string; content: string; type: string },
160  apiToken: string,
161): Promise<void> {
162  const validTypes = ["script", "file", "directory", "http"];
167
168  const encodedPath = encodeURIComponent(file.path);
169  const fileResponse = await fetch(`https://api.val.town/v1/projects/${projectId}/files/${encodedPath}`, {
170    method: "POST",
171    headers: {
172      "Content-Type": "application/json",
173      "Authorization": `Bearer ${apiToken}`,
174    },
175    body: JSON.stringify({
443app.post("/convert", async (c) => {
444  try {
445    const { valCode, apiToken } = await c.req.json();
446    
447    if (!apiToken) {
448      return c.json({ message: "Error: API token is required" }, 400);
449    }
450    
451    const result = await convertValToProject(valCode, apiToken);
452    return c.json({ message: result });
453  } catch (error) {

31app.post("/convert", async (c) => {
32  try {
33    const { valCode, apiToken } = await c.req.json();
34
35    if (!apiToken) {
36      return c.json({ message: "Error: API token is required" }, 400);
37    }
38
40    const { convertValToProject } = await import("./converter.ts");
41
42    const result = await convertValToProject(valCode, apiToken);
43    return c.json({ message: result });
44  } catch (error) {

5## Files
6
7* `index.ts` - The main HTTP entrypoint for the project that serves frontend assets and API endpoints
8
9## Important Notes

5function App() {
6  const [valCode, setValCode] = useState("");
7  const [apiToken, setApiToken] = useState("");
8  const [result, setResult] = useState("");
9  const [isLoading, setIsLoading] = useState(false);
12    e.preventDefault();
13
14    if (!apiToken.trim()) {
15      setResult("Please enter your Val Town API token");
16      return;
17    }
27        method: "POST",
28        headers: { "Content-Type": "application/json" },
29        body: JSON.stringify({ valCode, apiToken }),
30      });
31
52      <form onSubmit={handleSubmit}>
53        <div style={{ marginBottom: "20px" }}>
54          <label htmlFor="apiToken">Val Town API Token:</label>
55          <input
56            id="apiToken"
57            type="password"
58            className="api-token"
59            value={apiToken}
60            onChange={(e) => setApiToken(e.target.value)}
61            placeholder="Enter your Val Town API token"
62          />
63          <small style={{ display: "block", marginTop: "5px", color: "#666" }}>
64            You can generate an API token in your Val Town settings
65          </small>
66        </div>

74}
75
76.api-token {
77  width: 100%;
78  padding: 10px;