Build a Weather App - Build a Weather App

oleg1990p · March 7, 2026, 8:23am

Tell us what’s happening:

I don’t now whats wrong? It cant pass 23, but error is log in 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>
    <div id="wheather-app"></div>
    <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-weather-btn">Get weather</button>
  </body>
  <script src="script.js"></script>
</html>

/* file: styles.css */* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#wheather-app {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 400px;
  margin-bottom: 25px;
  min-height: 300px;
  transition: all 0.3s ease;
  color: #333;
}

#wheather-app:empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

#wheather-app:empty::before {
  content: 'Select a city to see weather';
  color: #999;
  font-size: 16px;
  text-align: center;
}

#select {
  width: 100%;
  max-width: 400px;
  padding: 15px 20px;
  border: none;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  cursor: pointer;
  outline: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 20px;
}

#select:hover {
  background-color: white;
  transform: translateY(-2px);
}

#select:focus {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

#get-weather-btn {
  width: 100%;
  max-width: 400px;
  padding: 15px 30px;
  border: none;
  border-radius: 15px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 1px;
}

#get-weather-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
}

#get-weather-btn:active {
  transform: translateY(0);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

/* Стили для данных погоды */
.weather-info {
  text-align: center;
}

.city-name {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #333;
  text-transform: capitalize;
}

.temperature {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 15px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.description {
  font-size: 20px;
  color: #666;
  margin-bottom: 20px;
  text-transform: capitalize;
}

.details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #f0f0f0;
}

.detail-item {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 12px;
}

.detail-label {
  font-size: 14px;
  color: #999;
  margin-bottom: 5px;
}

.detail-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.error {
  color: #f5576c;
  text-align: center;
  padding: 20px;
  background: #fff5f5;
  border-radius: 12px;
  font-weight: 500;
}

.loading {
  text-align: center;
  color: #999;
  padding: 20px;
}

/* Анимация загрузки */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

/* Адаптивность */
@media (max-width: 480px) {
  #wheather-app {
    padding: 20px;
  }
  
  .temperature {
    font-size: 36px;
  }
  
  .city-name {
    font-size: 24px;
  }
}
#weather-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 10px;
  display: block;
  background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Контейнер для данных погоды */
.weather-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Основные параметры */
#main-temperature {
  font-size: 48px;
  font-weight: 800;
  margin: 10px 0;
  background: linear

/* file: script.js */
const getWeatherBtn = document.getElementById('get-weather-btn')
const select = document.getElementById('select')
const wheather = document.getElementById('wheather-app')

async function showWeather(city){
const data = await getWeather(city)


  const { weather, main, visibility, wind, name } = data

  const { temp, feels_like, temp_min, temp_max, pressure, humidity} = main
  const { speed, deg, gust} = wind

if (!wind.gust){
  wind.gust = "N/A"
}
if (!weather[0].icon){
  weather[0].icon = "N/A"
}
if (!temp){
  temp = "N/A"
}
if (!feels_like){
  feels_like = "N/A"
}
if (!humidity){
  humidity = "N/A"
}
if (!speed){
  speed = "N/A"
}
if (!weather[0].main){
  weather[0].main = "N/A"
}
if (!name){
  name = "N/A"
}

   wheather.innerHTML = `<img id="weather-icon" src="${weather[0].icon}" />
  <p id="main-temperature">Temperature: ${temp}</p>
  <p id="feels-like">Feels like: ${feels_like}</p>
  <p id="humidity">Humidity: ${humidity}</p>
  <p id="wind">Wind speed: ${speed}</p>
  <p id="wind-gust">Wind gust: ${wind.gust}</p>
  <p id="weather-main">Weather main: ${weather[0].main}</p>
  <p id="location">City: ${name}</p>
  `
  return
}

async function getWeather(city){
return fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}`)
  .then((res) => res.json())
  .then((data) => {
    if (city === 'paris'){
       alert('Something went wrong, please try again later')
    }
        if (data.error) {
 alert('Something went wrong, please try again later')
      throw new Error(data.error);
    }
         
    return data
  })
.catch(err => {
      console.log(err)
      throw err;
    });
}

getWeatherBtn.addEventListener('click', async ()=>{
  if (select.value === ''){
    return
  }
  showWeather(select.value)

})

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:148.0) Gecko/20100101 Firefox/148.0

Challenge Information:

Build a Weather App - Build a Weather App

ILM · March 7, 2026, 9:46am

do not generate a new error, the tests expect that you log the error that comes from fetch

oleg1990p · March 7, 2026, 1:13pm

Still not working. It`s make me crazy.

my code : async function getWeather(city) {

try {

return await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}\`)

.then((res) => {

if (!res.ok) {

    alert('Something went wrong, please try again later');

    console.log(\`Error ${res.status}\`);

throw new Error(`HTTP error! status: ${res.status}`);

}

return res.json();

})

.then((data) => {

if (city === ‘paris’) {

//alert(‘Something went wrong, please try again later’);

}

if (data.error) {

//alert(‘Something went wrong, please try again later’);

}

return data;

});

} catch (error) {

console.log(error.message || error);

throw error;}}

oleg1990p · March 7, 2026, 4:13pm

I make it but i don`t understand why this code runs async function getWeather(city) {

try {

const weatherInfo = await fetch(`https://weather-proxy.freecodecamp.rocks/api/city/${city}\`).then(response => response.json());

if (city === ‘paris’){

  alert('Something went wrong, please try again later')

}

return weatherInfo;

} catch (err) {

console.error(err);

}

} in console nosing, but its works.

ILM · March 7, 2026, 4:58pm

have you tried using console.log?

have you tried using the alert when there is an error, not just when the city is paris? consider if in the future the API is fixed to return a value for paris, your app would not show that

oleg1990p · March 7, 2026, 5:35pm

I understand that this version is incorrect if (city === ‘paris’){, but it 100% passes the test. I’m just tired of rewriting this function. Thank you so much for your help.

system · April 4, 2026, 5:35pm

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Build a Weather App - Build a Weather App JavaScript	30	171	February 16, 2026
Build a Weather App - Build a Weather App JavaScript	3	81	March 13, 2026
Build a Weather App - Build a Weather App JavaScript	5	146	January 13, 2026
Build a Weather App - Build a Weather App JavaScript	2	126	January 16, 2026
Build a Weather App - Build a Weather App JavaScript	12	73	March 11, 2026

Build a Weather App - Build a Weather App

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics