robs-am / weather-app

🌩️ Weather App

A Weather App using HTML5, CCS3, JavaScript and API

https://weather-app-robs.netlify.app/

About • Layout • Tech Stack •

About

This was my first attempt learning JavaScript while doing a project. I was able to learn about:

CSS:

➡️ Variety of styles of the text shadow attribute to do a slightly bevel effect on the temperature.
➡️ Use of source landscape images of Unsplash website to generate random background images as you reload the page.

JavaScript:

➡️ Use of the fetch() method to request to the server and load the weather information in the webpage. It was used an API that returned data in the JSON data format.
➡️ Implementing the Math.trunc() method to return the integer part of numbers, in that case, of the Celsius temperature.
➡️ Use of the API from OpenWeathermap.com

Layout

Mobile

Desktop

Tech Stack

Website:

HTML5, CSS3, JavaScript
Editor: https://code.visualstudio.com/
React Icons: https://react-icons.github.io/react-icons/
API: https://openweathermap.org/api
Text effects: https://medialoot.com/blog/quick-tip-how-to-create-css-text-effects-using-only-the-text-shadow-attribu/
Background: https://unsplash.com/s/photos/source