Build a Weather App - Build a Weather App

JavaScript
1

Tell us what’s happening:

After running the test, the console always shows that"14. You should have a getWeather function.", “15. The getWeather function should accept a city as its only argument and return the JSON from the Weather API.”, I tried many different ways, but still failed to fix them. I hope somebody can give me some tips. Thanks.
"
"

Your code so far



/* file: styles.css */


/* file: script.js */
const getWeatherBtn = document.getElementById("get-weather-btn");
async function getWeather(city) {
  try {
    const url = `https://weather-proxy.freecodecamp.rocks/api/city/${encodeURIComponent(city)}`;
    const response = await fetch(url);
    if(!response.ok) {
      throw new Error('Something went wrong, please try again later');
    }
    const weatherData = await response.json();
    return weatherData;
  } catch(error) {
    console.error('Here is wrong', error);
    throw error;
  }
};

Your browser information:

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

Challenge Information:

Build a Weather App - Build a Weather App

https://www.freecodecamp.org/learn/full-stack-developer/lab-weather-app/lab-weather-app

2

can you share the rest of your code? can’t easily debug with only a snippet

4

I will continue to complete and post the rest later. Thanks for your reply ~

6

const getWeatherBtn = document.getElementById(“get-weather-btn”);
const weatherIcon = document.getElementById(“weather-icon”);
const mainTemperature = document.getElementById(“main-temperature”);
const feelsLike = document.getElementById(“feels-like”);
const humidity = document.getElementById(“humidity”);
const wind = document.getElementById(“wind”);
const windGust = document.getElementById(“wind-gust”);
const weatherMain = document.getElementById(“weather-main”);
const locationElement = document.getElementById(“location”);

async function getWeather(city) {
try {
const url = https://weather-proxy.freecodecamp.rocks/api/city/${encodeURIComponent(city)};
const response = await fetch(url);
if (!response.ok) {
throw new Error(HTTP error: ${response.status});
}

const data = await response.json();
return data;

} catch (error) {
console.error(error);
return undefined;
}
}

async function showWeather(city) {
const weatherData = await getWeather(city);

if (!weatherData) {
alert(“Something went wrong, please try again later”);
locationElement.textContent = “Error loading data”;
mainTemperature.textContent = “N/A”;
feelsLike.textContent = “N/A”;
humidity.textContent = “N/A”;
wind.textContent = “N/A”;
windGust.textContent = “N/A”;
weatherMain.textContent = “N/A”;
weatherIcon.src = “”;
weatherIcon.alt = “Error”;
return;
}

locationElement.textContent = weatherData.name ?? “N/A”;
weatherMain.textContent = weatherData.weather?.[0]?.main ?? “N/A”;

mainTemperature.textContent =
weatherData.main?.temp !== undefined
? ${weatherData.main.temp}°C
: “N/A”;

feelsLike.textContent =
weatherData.main?.feels_like !== undefined
? ${weatherData.main.feels_like}°C
: “N/A”;

humidity.textContent =
weatherData.main?.humidity !== undefined
? ${weatherData.main.humidity}%
: “N/A”;

wind.textContent =
weatherData.wind?.speed !== undefined
? ${weatherData.wind.speed} m/s
: “N/A”;

windGust.textContent =
weatherData.wind?.gust !== undefined
? ${weatherData.wind.gust} m/s
: “N/A”;

if (weatherData.weather?.[0]?.icon) {
weatherIcon.src = weatherData.weather[0].icon;
weatherIcon.alt = weatherData.weather[0].main ?? “Weather icon”;
} else {
weatherIcon.src = “”;
weatherIcon.alt = “No weather icon available”;
}
}

getWeatherBtn.addEventListener(“click”, () => {
const selectElement = document.querySelector(“select”);
const selectedCity = selectElement.value.trim();
if (selectedCity) {
showWeather(selectedCity);
}
});

I found what I wrong about, I forgot add script in fronf of the end of body