Build a Weather App - Build a Weather App

Español JavaScript
1

Cuéntanos qué está pasando:

Build a Weather App.
Please help, I can’t complete tests 17 and 21.

Tu código hasta el momento

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

  <body>
    <div class="container">
      <label for="select">Weather for:</label>
      <select id="select">
        <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 id="get-forecast">Get Forecast</button>
    </div>
    <div id="weather-container"></div>
  <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */


/* file: script.js */
async function getWeather(city) {
  try {
    const response = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${encodeURIComponent(city)}`);
    if (!response.ok) throw new Error("Network response was not ok");
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
    return null;
  }
}

async function showWeather(city) {
  const data = await getWeather(city);
  if (!data) {
    alert("Something went wrong, please try again later.");
    return;
  }

  function safe(value) {
    return (value === undefined || value === null) ? "N/A" : value;
  }

  function safeTemp(value) {
    return (value === undefined || value === null) ? "N/A" : `${value} °C`;
  }

  function safeHumidity(value) {
    return (value === undefined || value === null) ? "N/A" : `${value}%`;
  }

  function safeWind(value) {
    return (value === undefined || value === null) ? "N/A" : `${value} m/s`;
  }

  const container = document.getElementById("weather-container");
  const iconSrc = data.weather?.[0]?.icon || "";

  container.innerHTML = `
    <div class="weather-card">
      <div class="weather-header">
        <h2 id="location">${safe(data.name)}</h2>
        <span id="weather-main">${safe(data.weather?.[0]?.main)}</span>
      </div>
      <div class="weather-main">
        <img id="weather-icon" src="${iconSrc}" alt="${safe(data.weather?.[0]?.description)}" />
        <div class="weather-temp" id="main-temperature">${safeTemp(data.main?.temp)}</div>
      </div>
      <div class="weather-details">
        <div class="weather-detail">
          <span>Feels Like:</span>
          <span id="feels-like">${safeTemp(data.main?.feels_like)}</span>
        </div>
        <div class="weather-detail">
          <span>Humidity:</span>
          <span id="humidity">${safeHumidity(data.main?.humidity)}</span>
        </div>
        <div class="weather-detail">
          <span>Wind Speed:</span>
          <span id="wind">${safeWind(data.wind?.speed)}</span>
        </div>
        <div class="weather-detail">
          <span>Wind Gust:</span>
          <span id="wind-gust">${safeWind(data.wind?.gust)}</span>
        </div>
      </div>
    </div>
  `;
}

document.getElementById("get-forecast").addEventListener("click", () => {
  const selectedCity = document.getElementById("select").value;
  if (!selectedCity) return;
  showWeather(selectedCity);
});

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Información del Desafío:

Build a Weather App - Build a Weather App

2

what are those tests for? what part of your code are you sure satisfied them?

3

From tests 17 to 21, it asks me to display the API data in the HTML elements when selecting an option. If the value is undefined, it should display N/A.
Within showWeather, I validate if the value is undefined, insert the HTML data, and when selecting an option, it displays the data correctly. However, it fails tests 17 and 21, which would be when selecting New York and Los Angeles. :disappointed_face:

4

It is an issue with using encodeURIComponent for the city names with spaces.

The helper function used by the tests is splitting the URL and using that as the key for an object but the %20 in the encodeURIComponent URL breaks that.

It is a bit of an edge case, but I don’t think the code should fail because of the helper function.

5

Thank you very much, that solved the problem. :face_holding_back_tears: