The Weather App

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

Built With

• JavaScript, HTML, CSS
• Webpack, Sass

Live Demo

Live Demo Link

Getting Started

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.

Prerequisites

• npm
• Git

Setup

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 [email protected]:oscardelalanza/the-weather-app.git.
• Run the command cd the-weather-app to enter to the project directory.

Install

To install the requires packages do the following.

• Inside the-weather-app directory run the command npm install.

Usage

Search bar

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.

result div

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.

Deployment

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.

Future features

• Icons on the search input.
• Improve search bar effect.
• Redefine background colors to make characters more visible.

Authors

👤 Oscar De La Lanza

• Github: @oscardelalanza
• Twitter: @twitterhandle
• Linkedin: Oscar De La Lanza
• Email: [email protected]

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!