js-weather-app

A minimalistic weather web application created with javascript, OpenWeatherMap API and geolocation

Main Features

• The user can get the weather of most of the cities in the world

• Autocomplete when selecting countries

• Icons and main card background changes relative to weather conditions

• Option to switch between Celsius and Fahrenheit

• Simple, minimalistic and clean design

Screenshots

Built With

• HTML
• CSS
• Bulma CSS
• Javascript
• Webpack
• LocationIQ
• OpenWeatherMap
• Netlify for deployment

Live Demo

JS Weather App live version

Getting Started

To running it locally follow these simple steps.

Setup

First, you need to create a .env file in your root folder with the necessaries API keys to run the website (OpenWeatherMap and LocationIQ)) This is the structure you must follow:

WEATHER_API_KEY = ############
IQ_ACCESS_KEY = #############

Then, install the dependencies of the project with this command:

npm install

Then build the project with this command:

npm run build

Next set up the Webpack Dev Server executing this command:

npm start

Usage

Now you can open the project going to this address http://localhost:7000/ in your browser

Potential Features

• Some animations can be added and improved animations for styling purposes

• More weather elements can be added to the UI

• Review and improve responsiveness

Author

👤 Fernando Bahamondes

• Github: @ferbaco86
• Twitter: @ferbac0
• Linkedin: fernando-bahamondes-correa

🤝 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!

Acknowledgments

Main weather Icons by: ThoseIcons

Weather Icons Webfont by Erik Flowers

📝 License

This project is MIT licensed