Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

I’m having issues with test 23 & 24 which has to do with error

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>

    <div id="weather-display">
      <img id="weather-icon" alt="Weather Icon">
      <div id="main-temperature" class="weather-info"></div>
      <div id="feels-like" class="weather-info"></div>
      <div id="humidity" class="weather-info"></div>
      <div id="wind" class="weather-info"></div>
      <div id="wind-gust" class="weather-info"></div>
      <div id="weather-main" class="weather-info"></div>
      <div id="location" class="weather-info"></div>
    </div>

    <div id="weather-form">
      <label for="city-select">Weather for:</label>
      <select id="city-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 id="get-weather-btn">Get Weather</button>
    </div>

    <script src="script.js"></script>

  </body>
</html>


/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: #e0f7fa; /* light blue-green */
  margin: 0;
  padding: 20px;
}

/* Weather display card */
#weather-display {
  background-color: #ffffff; /* white card */
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  padding: 30px;
  margin-bottom: 20px;
  text-align: center;
}

#weather-icon {
  width: 100px;
  height: 100px;
}

#main-temperature {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 10px;
}

/* Form container */
#weather-form {
  background-color: #80cbc4; /* teal-ish */
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#weather-form label {
  font-weight: bold;
}

select, button {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #555;
  font-size: 1rem;
}

button {
  background-color: #4db6ac; /* darker teal */
  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: #00897b; /* hover color */
}

/* Weather info text */
.weather-info {
  margin: 5px 0;
  font-size: 1rem;
}

/* file: script.js */
async function getWeather(city) {
  try {
    const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.log(error);
    throw error; 
  }
}

async function showWeather(city) {
  if (!city) return; 

  try {
    const data = await getWeather(city);
    
    document.getElementById('weather-icon').src = data?.weather?.[0]?.icon ?? '';
    document.getElementById('main-temperature').textContent = data?.main?.temp ?? 'N/A';
    document.getElementById('feels-like').textContent = data?.main?.feels_like ?? 'N/A';
    document.getElementById('humidity').textContent = data?.main?.humidity ?? 'N/A';
    document.getElementById('wind').textContent = data?.wind?.speed ?? 'N/A';
    document.getElementById('wind-gust').textContent = data?.wind?.gust ?? 'N/A';
    document.getElementById('weather-main').textContent = data?.weather?.[0]?.main ?? 'N/A';
    document.getElementById('location').textContent = data?.name ?? 'N/A';

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

document.getElementById('get-weather-btn').addEventListener('click', () => {
  const city = document.getElementById('city-select').value;
  showWeather(city);
});

Your browser information:

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

Challenge Information:

Build a Weather App - Build a Weather App

2

Ok can you let us know what investigation you’ve already done and what you’ve tried?

3
    1. If there is an error, your getWeather function should log the error to the console.

  • Failed:24. When Paris is selected the app should show an alert with Something went wrong, please try again later.

4

Ok can you let us know what investigation you’ve already done and what you’ve tried?

5 
console.log('getWeather error:', error);

This code is meant to log error to console but i don’t know why i still fail test 23.

6

Does it log an error to the console?

Here are some debugging steps you can follow.

Focus on Test 23

  1. Are there any errors or messages in the console?
  2. What is the requirement of the failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

7

I don’t see this in your code.

You should be able to easily handle Paris. Where is the first point when you know the city?

Shouldn’t you also check to see if your API response is okay before you attempt to parse to JSON?

8

Yes it’s logs an error message to the console but test 23 still fails

9

Check my code now, it’s there

10

What do you mean to check your code now?

Did you try to edit your original post?

11

Yes i have edited my original code

12

You changed it in the fCC code editor?

13

Yes this is the edit:

catch (error) {
    console.log('getWeather error:', error);
    throw error; 
  }
14

We’re not able to see or check code that’s in your editor. Everyone can only see their own code.

If you want to share your updated code with the forum, you’ll need to copy it and paste it into a new comment here.

15

Okay this is it:

async function getWeather(city) {
  try {
    const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.log('getWeather error:', error);
    throw error; 
  }
}

async function showWeather(city) {
  if (!city) return; 

  try {
    const data = await getWeather(city);
    
    document.getElementById('weather-icon').src = data?.weather?.[0]?.icon ?? '';
    document.getElementById('main-temperature').textContent = data?.main?.temp ?? 'N/A';
    document.getElementById('feels-like').textContent = data?.main?.feels_like ?? 'N/A';
    document.getElementById('humidity').textContent = data?.main?.humidity ?? 'N/A';
    document.getElementById('wind').textContent = data?.wind?.speed ?? 'N/A';
    document.getElementById('wind-gust').textContent = data?.wind?.gust ?? 'N/A';
    document.getElementById('weather-main').textContent = data?.weather?.[0]?.main ?? 'N/A';
    document.getElementById('location').textContent = data?.name ?? 'N/A';

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

document.getElementById('get-weather-btn').addEventListener('click', () => {
  const city = document.getElementById('city-select').value;
  showWeather(city);
});
16

Ok can you let us know what investigation you’ve already done and what you’ve tried?

Hopefully you didn’t open a thread immediately after getting an error without trying to get more information and trying a fix of some kind?

What kind of debugging did you do?

17

I don’t understand why the test is saying my code doesn’t log error to console where as it does and i have prove of that:

async function getWeather(city) {
  try {
    const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.log('getWeather error:', error);
    throw error; 
  }
}
18

Ok, what are you doing to generate an error?

What error does it log to the console?

19

This is what it logs:

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

That’s your code, that’s not what appears in the console.

What are you doing to generate an error?

What error does it log to the console?