Practice and reinforce the concepts from Lesson 9
Estimated time: 45-60 minutes
What you'll do: Open the project and familiarize yourself with the interface
Time needed: 5 minutes
academic-telebort/Web-3-Concept-9-Application-Programming-Interface
src/lib
folder to create your componentstip If StackBlitz is slow, try refreshing the page or use the download option to work locally.
:warning: IMPORTANT: Before You Start DO NOT DELETE the existing files in the template:
- Package files
- Any other files you didn't create
ONLY EDIT the necessary files.
Time needed: 10 minutes
In this project, we will be fetching weather data of any city using this weather API in a new SvelteKit project:
https://goweather.herokuapp.com/weather/ + location
Time needed: 5 minutes
https://goweather.herokuapp.com/weather/KL
tip Common city codes
This is the finished project:
Time needed: 5 minutes
academic-telebort/telebort-web-series-W3-Concept9-ApplicationProgrammingInterface
src/lib
folder to create your componentsTime needed: 10 minutes
In the index.svelte
file, there will be a HTML form with a location search input box that calls the getWeather async function when the submit button is clicked:
index.svelte
<script>
let location = "";
let temperature= "";
let description= "";
//Api Codes Here
</script>
<div style={{'textAlign':'center'}}>
<h1>Weather App</h1>
<form on:submit|preventDefault={getWeather}>
<label for="location">Location:</label>
<input id="location" bind:value={location} type="text" />
<button type="submit">Check</button>
</form>
<p>Temperature: {temperature}</p>
<p>Description: {description}</p>
</div>
Total time needed: 15 minutes
An async function is an asynchronous function, which means the function takes time to perform. In this case, inside the function it will fetch the data using the weather API and this takes time to complete.
:information_source: Info What are async functions? Async functions allow JavaScript to wait for operations that take time (like fetching data from the internet) without freezing your entire app!
Time needed: 2 minutes
getWeather()
async function getWeather() {
// Your code will go here
}
Time needed: 3 minutes
location
variable to make the API dynamicasync function getWeather() {
fetch('https://goweather.herokuapp.com/weather/' + location)
}
tip
The location
variable comes from the input field where users type the city name!
Time needed: 3 minutes
.then()
to handle the responseasync function getWeather() {
fetch('https://goweather.herokuapp.com/weather/' + location)
.then((response) => response.json())
}
Time needed: 5 minutes
.then()
to handle the JSON dataasync function getWeather() {
fetch('https://goweather.herokuapp.com/weather/' + location)
.then((response) => response.json())
.then((data) => {
temperature = data.temperature; // Get temperature from API
description = data.description; // Get description from API
});
}
:warning: Common mistake Make sure the variable names match exactly what the API returns. Check the API response in Hoppscotch first!
Time needed: 5 minutes
Here's the complete working code with error handling and better user experience:
<script>
let location = "";
let temperature = "";
let description = "";
async function getWeather() \{
if (location.trim() === "") \{
temperature = "Please enter a location";
description = "";
return;
\}
try \{
const response = await fetch(`https://goweather.herokuapp.com/weather/${location}`);
const data = await response.json();
temperature = data.temperature || "No data available";
description = data.description || "No description available";
\} catch (error) \{
temperature = "Error fetching data";
description = "Please try again";
console.error("API Error:", error);
\}
\}
</script>
<div class="container">
<h1>Weather App</h1>
<form on:submit|preventDefault={getWeather} class="weather-form">
<div class="input-group">
<label for="location">Enter City Name:</label>
<input
id="location"
bind:value={location}
type="text"
placeholder="e.g., London, Tokyo, KL"
required
/>
<button type="submit">Get Weather</button>
</div>
</form>
{#if temperature || description}
<div class="weather-result">
<h2>Weather for {location}</h2>
<p class="temperature">Temperature: {temperature}</p>
<p class="description">Description: {description}</p>
</div>
{/if}
</div>
<style>
.container \{
max-width: 500px;
margin: 50px auto;
padding: 20px;
font-family: Arial, sans-serif;
text-align: center;
\}
h1 \{
color: #333;
margin-bottom: 30px;
\}
.weather-form \{
margin: 30px 0;
\}
.input-group \{
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
\}
label \{
font-weight: bold;
color: #555;
\}
input \{
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 16px;
width: 250px;
text-align: center;
\}
input:focus \{
outline: none;
border-color: #007bff;
\}
button \{
padding: 12px 24px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
\}
button:hover \{
background-color: #0056b3;
\}
.weather-result \{
margin: 30px 0;
padding: 20px;
background-color: #f8f9fa;
border-radius: 10px;
border: 1px solid #e9ecef;
\}
.weather-result h2 \{
color: #28a745;
margin-bottom: 15px;
\}
.temperature \{
font-size: 18px;
font-weight: bold;
color: #dc3545;
margin: 10px 0;
\}
.description \{
font-size: 16px;
color: #6c757d;
margin: 10px 0;
\}
</style>
Time needed: 5 minutes
Weather App (Code Review)
:emoji: Watch the video: https://youtu.be/ryQNlzmzmzE
tip Before watching Try to complete the exercise on your own first, then watch the video to compare your solution!
Code with AI: Get weather data and display it.
Helpful prompts to try:
Problem | Solution |
---|---|
API returns "undefined" | Check if the city name is spelled correctly |
No data shows up | Make sure you're using the correct variable names from the API |
Form refreshes the page | Add on:submit|preventDefault to your form |
CORS error | The API might be down - try again later |
:information_source: Info Need help?
:warning: Important: Submit Your Work!
- Test your weather app with at least 3 different cities
- Make sure error handling works (try an invalid city name)
- Commit and push your changes to GitHub
- Submit your GitHub repository link
Submission deadline: Check your course schedule