mariosknl / weather_app_javascript Goto Github PK

This is my weather app created in Javascript. I'm using the open-weather-API to retrieve the data and output it in the browser. Also, I have added the Geolocation attribute so each time you are visiting the page for the first time, you will be asked if you allowing it to showcase the weather data from your location. The background image is changing according to the data you are getting back from API and depended to the current weather situation in the requested location. You can see the temperature both in Celsius and Fahrenheit by clicking the specific button. There plenty of details showing like minimum temperature, maximum temperature, humidity, longitude and latitude. Everything is created from Javascript and gets appended to the HTML file. I'm using webpack v4.43.0. There are 2 different configuration files, one for development and one for production. The plugins I'm using are:

• Html webpack plugin
• style loader
• css-loader
• sass-loader
• webpack-dev-server
• url-loader
• tailwindcss
• clean-webpack-plugin
• mini-css-extract-plugin
• node-sass
• optimize-css-assets-webpack-plugin
• postcss-loader

Lastly, I used Tailwind CSS for this project

• Sunny Screenshot
• Cloudy Screenshot
• Rainy Screenshot

In this project I'm using webpack and API to retrieve the requested data. For styling of the application I used Tailwind CSS.

• HTML
• CSS
• Javascript
• Tailwind CSS
• Sass
• Webpack
• Open Weather API
• Geolocation API

Live Version - Githack

• git clone [email protected]:mariosknl/weather_app_javascript.git
• npm start in the terminal to test it locally.
• npm run build will create the updated version. Check dist/index.html in the broswer to see it in production mode.

👤 Marios Kanellopoulos

• Github: @mariosknl
• Twitter: @mariosknl
• Linkedln: marios-kanellopoulos
• Portfolio: marios-kanellopoulos

• Microverse
• The Odin Project
• Open Weather API
• Freecodecamp Youtube webpack video tutorial
• Expedito Inácio de Andrade Neto
• Unsplash.com - Images
• Tailwind CSS

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Give a ⭐️ if you like this project!

This project is MIT licensed