Skip to content

Stajgar/pixel-weather-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

pixel-weather-app

Description

The goal of this project was to create an application which fetches weather data of searched cities or based on data from browser geolocalization. Main features:

  • search for weather data from desired city or web browser geolocation
  • Fahrenheit to Celsius unit conversion
  • display current weather (wind speed, precipitation, weather description)
  • display weather forecast

Design

Pixel Weather App is inspired by 90's Windows style. Vintage-looking background and pixelated icons are giving the project a retro vibe. Weather icons from Adobe Stock were recolored using Adobe Illustrator.

Approach

Pixel Weather App utilises OpenWeather API to provide real time data about weather in searched places. Frontend layer was built using Javascript ES6 and Bootstrap - a full list of technology and tools used to create this project from design to implementation can be found below.

Live demo

Launch Pixel Weather App

Tech stack & tools

  • JavaScript ES6
  • Bootstrap 4.5.3
  • Prettier 2.2.1
  • OpenWeather API
  • Font Awesome
  • GitHub
  • Netlify
  • InVision
  • Adobe XD
  • Adobe Illustrator

Running instructions

Clone the repository:

$ git clone https://github.com/Stajgar/pixel-weather-app.git

Enter the project directory:

cd pixel-weather-app

Open index.html in your favorite web browser.

Type in the search bar your desired city and click the magnifier button. Then you’ll find out what the weather is there today.

Click the geolocation button to check what the weather is in your current area.

You can also change the current temperature displayed in Celsius to Fahrenheits.

Acknowledgments

This application was created as part of SheCodes workshops which are a great way to start learning frontend development.