https://github.com/codeupjewell/weather-app-html-css-js-v2

Build a weather app in HTML CSS & JavaScript. Get weather details of any place or city by entering the name. Get your current location weather details by clicking on the "Get Device Location" button. You can also get weather details including temperature in Fahrenheit, weather conditions, location, what the weather feels like, and humidity.
https://github.com/codeupjewell/weather-app-html-css-js-v2

css html html-css-javascript javascript weather-app weather-application

Last synced: about 1 month ago
JSON representation

Build a weather app in HTML CSS & JavaScript. Get weather details of any place or city by entering the name. Get your current location weather details by clicking on the "Get Device Location" button. You can also get weather details including temperature in Fahrenheit, weather conditions, location, what the weather feels like, and humidity.

• Host: GitHub
• URL: https://github.com/codeupjewell/weather-app-html-css-js-v2
• Owner: CodeUpJewell
• Created: 2022-11-03T22:20:44.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-11-03T22:33:16.000Z (over 3 years ago)
• Last Synced: 2025-01-21T18:49:21.780Z (over 1 year ago)
• Topics: css, html, html-css-javascript, javascript, weather-app, weather-application
• Language: CSS
• Homepage:
• Size: 1.98 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Weather-app-using-HTML-CSS-JS v2

Project Overview

In this project I will be utilizing HTML,CSS and JS to build a working simple weather app. 

Project Files:

    Index.html Contains all our HTML properties.

    script.js Contains our Javascript properties.

    style.css Contains our CSS properties.

    cloudy.png cloudy png if the entered location is cloudy

    rainy.png rainy png if the entered location is rainy

    sunny.png Sunny png  if the entered location is sunny

    foggy.png foggy png if the entered location is foggy

    stormy.png stormy png if the entered location is stormy

    

Component of this Project:

    

    • OpenWeatherMap API fetch to return current weather data.

    • Search bar where you can input cities or countries to find out the weather.

    • By selecting the 'Get Device Location', the current latitude and longitude of the device is sent to the OpenWeatherMap API and you will receieve your current locations weather information.

    • We use Id value that API provides us, and then we are shown custom weather icon/image according to the weather condition.

    

v2 Project enhancements:

    • Details by entering the city name or you can also get your current location weather details by clicking on the “Get Device Location” button. 

    • If you enter an invalid city name then an error message will be shown. 

    • Many weather details in this app like temperature in Farhenheit, weather conditions, location, feels like, and humidity.