Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

When the value is Paris, nothing happened, and n/a is showing correctly but test case is not passing.

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">
    <link rel="stylesheet" href="styles.css">
    <title>Weather App</title>
  </head>
  <body>
    <main>
      <section id="display-weather">
        <h2 id="location"></h2>
        <img id="weather-icon" src="" alt="" />
        <p id="main-temperature"></p>

        <div class="secondary-info">
          <div class="info-item">
            <span id="feels-like" class="info-label">Feels Like:</span>
            <span class="info-value" id="feels-like-value"></span>
          </div>
          <div class="info-item">
            <span id="humidity" class="info-label">Humidity:</span>
            <span class="info-value" id="humidity-value"></span>
          </div>
          <div class="info-item">
            <span id="wind" class="info-label">Wind:</span>
            <span class="info-value" id="wind-value"></span>
          </div>
          <div class="info-item">
            <span id="wind-gust" class="info-label">Wind Gusts:</span>
            <span class="info-value"  id="wind-gust-value"></span>
          </div>
        </div>
      </section>


      <section id="weather-main">
        <label for="cities">Weather For: </label>
        <select id="cities">
  <option value=""></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>
      </section>
    </main>


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




/* file: styles.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  --bg: #f0f4f8;
  --card: #ffffff;
  --muted: #7f8c8d;
  --text: #2c3e50;
  --temp: #2980b9;
  --accent: #3498db;
  --surface: #ecf0f1;
  --shadow: 0 8px 24px rgba(15, 23, 31, 0.08);
  --radius: 12px;
  --transition: 180ms cubic-bezier(.2,.9,.2,1);
}

body {
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.5;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

main {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), var(--card));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  max-width: 420px;
  width: 100%;
  display: grid;
  gap: 20px;
  align-items: start;
}

#display-weather {
  text-align: center;
  padding: 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(52,152,219,0.04), transparent);
}

#location {
  font-size: 1.25rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 8px;
}

#weather-icon {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin: 6px auto 10px;
  transition: transform var(--transition);
}

#weather-icon.loading {
  opacity: 0.6;
  transform: scale(0.98) rotate(-6deg);
}

#main-temperature {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--temp);
  margin-bottom: 12px;
}

.secondary-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.info-item {
  background: var(--surface);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: left;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02) inset;
}

.info-label {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.info-value {
  font-size: 0.98rem;
  font-weight: 700;
  color: #34495e;
}

#weather-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

label {
  font-size: 0.98rem;
  color: var(--text);
  margin-bottom: 4px;
  font-weight: 500;
}

.controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

select#cities {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #d6dde3;
  border-radius: 8px;
  background-color: var(--card);
  font-size: 0.98rem;
  color: var(--text);
  cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition);
}

select#cities:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(52,152,219,0.08);
}

button#get-weather-btn {
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--accent), #2c87c7);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(52,152,219,0.12);
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}

button#get-weather-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

button#get-weather-btn:active:not(:disabled) {
  transform: translateY(0);
}

button#get-weather-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#weather-status {
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 6px;
  min-height: 18px;
}

#weather-status.loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(0,0,0,0.08);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

@keyframes spin { to { transform: rotate(360deg); } }

:focus-visible {
  outline: 3px solid rgba(52,152,219,0.18);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (max-width: 480px) {
  main {
    padding: 18px;
    gap: 14px;
  }

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

  #main-temperature {
    font-size: 2rem;
  }

  .controls {
    flex-direction: column;
    align-items: stretch;
  }

  button#get-weather-btn {
    width: 100%;
  }
}

.sr-only {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}


/* file: script.js */
const getWeatherBtn = document.getElementById("get-weather-btn");

getWeatherBtn.addEventListener("click", ()=>{
  showWeather();
});

const getWeather = async (city)=>{
  try{
    const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`)
    const data = await response.json();
    return data;
  }catch(err){
    alert("Something went wrong, please try again later");
    console.log(err);
    throw err;
  }
}

const showWeather = async ()=>{
  const city = document.getElementById("cities").value;
  if (city === "paris") {
    alert("Something went wrong, please try again later");
    return;
  }
  const data = await getWeather(city);
  const {
  weather: [{ main: weatherMain, description: weatherDesc, icon: weatherIcon }],
  main: { temp, feels_like, temp_min, temp_max, pressure, humidity },
  visibility,
  wind: { speed: windSpeed, deg: windDirection, gust: windGust },
  name: cityName
} = data;

document.getElementById("location").textContent = cityName;
document.getElementById("weather-icon").src = weatherIcon;

document.getElementById("feels-like-value").textContent = `${feels_like}° C`;

document.getElementById("humidity-value").textContent = `${humidity}%`;

document.getElementById("wind-value").textContent = `${windSpeed} m/s`;

document.getElementById("wind-gust-value").textContent = `${windGust? windGust + " m/s": "N/A"}`
  
}

Your browser information:

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

Challenge Information:

Build a Weather App - Build a Weather App

2

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first 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.

When I test your code this test fails:

  1. When New York 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.

Check the related User Story. What should the elements be called?

You should have an element with the id feels-like for displaying what the temperature feels like.

So what is this:

<span class="info-value" id="feels-like-value"></span>

I did not see “feels-like-value” anywhere in the instructions. When the test looks for the correct value in the #feels-like element, what will it find?

1 Like
3

Reply here, in this thread/topic