Weather City App

Live Demo

Description

CLICK HERE FOR FULL PROJECT BREAKDOWN

Weather City App allows users to enter a city name and receive current weather data using the OpenWeatherMap API.

All cities with the specified name are displayed, and a temperature unit toggle is available to switch between Celsius and Fahrenheit.

Tecnologies Used

• React & Javascript
• SASS
• Git & Github

Main Features

• Responsive design
• Search for weather data
• Displays different coloured cards and weather icons dependant on the weather

Technical details

An example of array iteration and converting the response data into displayable information. Full script here .

useEffect(() => {
  (function convertWeather() {
    if (weatherData) {
      const weather = () => {
        return {
          visibility: null,
          wind: null,
          sunrise: null,
          humidity: null,
          clouds: null,
          sunset: null,
          temp: null,
          icon: null,
          flag: null,
          country: null,
          name: null,
          description: null,
        };
      };

      const weatherArray = [];

      for (let i = 0; i < weatherData.length; i++) {
        weatherArray.push(weather());
      }

      let count = 0;
      weatherData.forEach((newWeather) => {
        weatherArray[count].country = newWeather.sys.country;
        weatherArray[count].name = newWeather.name;
        weatherArray[count].description = newWeather.weather[0].description;
        weatherArray[count].temp = newWeather.main.temp;
        weatherArray[count].visibility = convertVisibility(
          newWeather.visibility
        );
        weatherArray[count].speed = convertWindSpeed(newWeather.wind.speed);
        weatherArray[count].sunrise = convertTime(
          newWeather.sys.sunrise,
          newWeather.sys.timezone
        );
        weatherArray[count].humidity = convertPercentage(
          newWeather.main.humidity
        );
        weatherArray[count].clouds = convertPercentage(newWeather.clouds.all);
        weatherArray[count].sunset = convertTime(
          newWeather.sys.sunset,
          newWeather.sys.timezone
        );
        weatherArray[count].icon = convertIcon(newWeather.weather[0].icon);
        weatherArray[count].flag = convertFlag(newWeather.sys.country);
        weatherArray[count].wind = convertWindSpeed(newWeather.wind.speed);
        ++count;
      });

      loadResults(weatherArray);
    }
  })();
}, [weatherData, loadResults]);

Responsive Design

Project setup

npm install
npm start