Giter Site home page Giter Site logo

sintija / weather-app-shecodes Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 2.0 68.63 MB

A weather app, which is pulling Open Weather API data dynamically. For more info please refer to Read.md section.

HTML 33.13% CSS 22.75% JavaScript 44.12%
weather-app weather forecast vanilla-js weather-api bootstrap responsive weather-widget dynamic-data

weather-app-shecodes's Introduction

Simple Weather App

It was created as part of SheCodes project, hosted on Netlify. For the demo, please visit - https://elegant-brahmagupta-cfd2cc.netlify.app.

Description

This weather application is using real-time data from the OpenWeatherMap API - https://openweathermap.org/. This application is not collecting or storing any data from the user, and it does not have any integrated tracking on cookies on the site. This application's primary function is to display weather data and forecast for the user's selected city.

Functionality

In this application user can:

  1. Search for a city. Weather data is available for most cities; however, there might be cases where the data for smaller towns might not be available. In this case, the user will be presented with the feedback.
  2. Use the map icon to get weather data for the current location. For this, the user will need to enable/allow location sharing on a browser.
  3. Show when the weather data was last updated.
  4. Show the weather forecast with maximum temperature for the selected city in 3-hour time slots for the next 9 hours.
  5. User can select to display Fahrenheit or Celsius temperature.
  6. User can see the weather description, for example, "light rain", "showers" or similar.
  7. User can see wind speed and humidity data for their searched city.

Credits

Icons - https://ui8.net/piqodesign/products/weatherly Illustrations - Royalty-free /www.dreamstime.com

Technologies used include Vanilla JS, WeatherMapAPI and Bootstrap.

Low and Hi-fidelity wireframes available on request.

More comments available in the code.

UX

The website was regularly tested on most devices, and it is designed to fit the majority of screen sizes. Please see the mockups below:

mockup

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.