The Weather App project comes at the end of the Asynchronous Javascript and APIs section of the Javascript course. It is intended to test the knowledge of the student about asynchronous communication with promises or async/await and when to use them.
You can find the original requirements in The Odin Project
- JavaScript, HTML, CSS
- Webpack, Sass
This project consists of an application to check the weather of any city in the world. It makes an Http
request to the
OpenWeather API
in order to get the current weather conditions of the desired city. Also it makes a request to the Unsplash API
in order to get a random image depending on the weather conditions of the requested city and placed as background.
To get a local copy up and running follow these simple example steps.
npm
Git
To clone the project into your local environment do the following.
- Open a new
terminal
window and navigate to the directory where the project will be stored. - Run the command
git clone git@github.com:oscardelalanza/the-weather-app.git
. - Run the command
cd the-weather-app
to enter to the project directory.
To install the requires packages do the following.
- Inside
the-weather-app
directory run the commandnpm install
.
In order to get the current weather of any city in the world, fill the input
with the name of the city in the search bar
choose the desired metric system by clicking the C°
or the F°
units, then click the Q
button to make the request.
Once you click the Q
button, it will fill the central div
with the weather information of the requested city. It shows
information like temperature
, wind
, clouds
, humidity
, pressure
, country
and so on.
To start the local development server do the following.
- Run the command
npm run dev
.
To build the project do the following.
- run the command
npm run build
.
- Icons on the search input.
- Improve search bar effect.
- Redefine background colors to make characters more visible.
👤 Oscar De La Lanza
- Github: @oscardelalanza
- Twitter: @twitterhandle
- Linkedin: Oscar De La Lanza
- Email: oscardelalanza@gmail.com
Contributions, issues and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!