Weather Query

In this chapter, we will build a weather query tool.

Setup

Create src/pages/weather.astro:

---

---

<MainLayout>
  <h1>Weather Query</h1>
  <form>
    <input type="text" placeholder="Enter city" />
    <button type="submit">Query</button>
  </form>
</MainLayout>

API Integration

Use a weather API to fetch data:

const response = await fetch(
  `https://api.weather.com/query?city=${city}`
);
const data = await response.json();

Display Results

Show the weather information:

<div class="weather-info">
  <h2>{data.city}</h2>
  <p>Temperature: {data.temperature}°C</p>
  <p>Condition: {data.condition}</p>
</div>

Next Steps

In the next chapter, we will add more tools.