Get the weather details from all over the world with a interactive map.
This project doesn't use any bundlers or dev servers. I would advice you to install Browsersync to serve the web content in this project. You install Browsersync either through NPM, Yarn or any other NPM package manager of choice with global installation functionality.
$ npm install --global browser-sync || yarn global add browser-syncThen proceed to clone this repository.
$ git clone https://github.com/Jelmerovereem/web-app-from-scratch-2021
$ cd web-app-from-scratch-2021
$ browser-sync -w -s -p 5000 # Starts a browser-sync server on port 5000 that watches for file changes in the current directory- Interactive map
- Weather based on searched city
- Weather based on your own location
- Clickable pop-up forwarding to a detail page
- Detail page with a "last updated on" reminder
- Detail page with the temperature and weather description
- Background visuals matching the weather and local time
- Weather forecast, for upcoming days
- The OpenWeather map API
With this API you can fetch weather data from all over the world. It has all different kind of fetches you can do. If you want 4 days forecast or just the current weather data, everything is possible. - Leaflet map
Unsplash API
This is what an API response looks like from The OpenWeather API
data = {
clouds: {}, // The cloudiness in %
coord: {}, // City geo location. Lon and lat
dt: , // Last time when weather was updates in unix (UTC)
id: , // The city ID
main: {}, // The main weather information, temperature, feelslike, etc.
name: , // City name
sys: {}, // More about the country and timezone
timezone: , // How many seconds difference from the UTC timezone
visibility: , // The visiblity meter
weather:[], // An array with weather objects containing weather information like description and id for icon
wind: {} // Information about the wind speed, degrees, etc.
}
