Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

What’s wrong with my code?
18-22) When (Any selected value) is selected the showWeather function should display the data from the API in the respective HTML elements. If the value from the API is undefined, you should show N/A.
23. If there is an error, your getWeather function should log the error to the console.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Weather App</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <h1>Weather App</h1>
    <main>
        <div id="data-container">
            <div class="location" >
                <img id="weather-icon" alt="Weather icon" src="" hidden>
               <p hidden style="font-size: 2rem;"><span id="location"></span> Forecast</p>
            </div>
           <p hidden style="color:hsl(209, 73%, 50%);font-size: 1.5rem; text-align: center;" id="weather-main"></p>
            <div class="temp">
                <p hidden>Main: <span style="color:hsl(209, 73%, 50%);" id="main-temperature"></span> Feels like <span id="feels-like" style="color:hsl(209, 73%, 50%);"></span></p>
                <p hidden>Humidity: <span style="color:hsl(209, 73%, 50%);" id="humidity"></span></p>
                <p hidden>Wind: <span style="color:hsl(209, 73%, 50%);" id="wind"></span> Gust: <span style="color:hsl(209, 73%, 50%);" id="wind-gust"></span></p>
            </div>
            
            
        </div>
        <div id="btn-container">
            <select>
                <option value="">Select a city</option>
                <option value="new york">New York</option>
                <option value="los angeles">Los Angeles</option>
                <option value="chicago">Chicago</option>
                <option value="paris">Paris</option>
                <option value="tokyo">Tokyo</option>
                <option value="london">London</option>
            </select>
            <button type="button" id="get-weather-btn">Get Weather!</button>
        </div>
    </main>
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Roboto+Slab:wght@100..900&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;
}
body {
    background: linear-gradient(135deg, hsl(209, 73%, 50%), hsl(0, 0%, 95%));
    width: 100vw;
    height: 100vh;
}
h1 {
    text-align: center;
    font-family: 'Nunito Sans', Arial, Helvetica, sans-serif;
    font-size: 3rem;
    margin-bottom: 4rem;
}
main {
    max-width: fit-content;
    max-height: fit-content;
    border: 5px solid hsl(0, 0%, 95%);
    border-radius: 10px;
    box-shadow: 0px 0px 5px 2px black;
    margin: 0 auto;
}
#data-container {
    width: 24rem;
    height: 16rem;
    max-width: 30rem;
    max-height: 20rem;
    border-radius: 5px;
    border: 2px solid black;
    background: hsla(0, 0%, 5%, 0.7);
    color: white;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background:hsl(0, 0%, 95%);
    padding: 0.5rem
}
#get-weather-btn {
    padding: 5px;
    background: hsl(209, 73%, 50%);
    border: 2px solid hsl(209, 73%, 50%);
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    color: hsl(0, 0%, 95%);
}
#get-weather-btn:hover {
    transform: scale(1.1);
    background: hsl(0, 0%, 95%);
    color: black;
}
select {
    padding: 5px;
    border: 2px solid hsl(209, 73%, 50%);
    border-radius: 5px;
}
.location {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    padding: 5px;;
}
.temp {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-direction: column;

}

/* file: script.js */

const icon = document.getElementById('weather-icon');
const loc = document.getElementById('location');
const main = document.getElementById('weather-main');
const temp = document.getElementById('main-temperature');
const feelsLike = document.getElementById('feels-like');
const humidity = document.getElementById('humidity');
const wind = document.getElementById('wind');
const gust = document.getElementById('wind-gust');

async function getWeather(city) {
    return fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`)
        .then(response => response.json())
        .then(data => {
            return data;
        })
        .catch(error => {
            console.log(error);
            throw error; 
        });
}
async function showWeather(city){
    try {
        const data = await getWeather(city);
        
        icon.src = data.weather?.[0]?.icon || '';
        loc.textContent = data.name ?? "N/A";
        main.textContent = data.weather?.[0]?.main ?? "N/A";
        temp.textContent = data.main?.temp !== undefined ? data.main.temp + '°C': "N/A";
        feelsLike.textContent = data.main?.feels_like !== undefined ? data.main.feels_like + '°C' : "N/A";
        humidity.textContent = data.main?.humidity !== undefined ? data.main.humidity + '%' : "N/A";
        wind.textContent = data.wind?.speed !== undefined ? data.wind.speed + ' m/s' : "N/A";
        gust.textContent = data.wind?.gust !== undefined ? data.wind.gust + ' m/s' : "N/A";

    } catch(e){
        alert('Something went wrong, please try again later');
    }
}

const btn = document.getElementById('get-weather-btn');
const select = document.querySelector('select');
btn.onclick = ()=>{
    let value = select.value;
    if(!value) return;
    showWeather(value);
    icon.hidden = false;
    loc.parentElement.hidden = false;
    main.hidden = false;
    temp.parentElement.hidden = false;
    humidity.parentElement.hidden = false;
    wind.parentElement.hidden = false;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Challenge Information:

Build a Weather App - Build a Weather App

2

if you do promise chaining it looks like it takes too long and the tests fail, try to not use promise chaining

3

I tried using try catch block but i still have the same errors

4

Here’s an example from Understanding Asynchronous Programming - What Is Async/Await, and How Does It Work? that shows how to use async/await rather than the .then() promise chaining you’re using:

async function fetchUserData() {
  try {
    let response = await fetch(`https://api.example.com/users`);
    let userData = await response.json();
    console.log(userData);
  } catch (error) {
    console.log("Error fetching user data:", error);
  }
}
5

It worked, even though I used try catch before and it didn’t work, but anyways thank you!