A weather dashboard that features dynamically updated HTML and CSS using OpenWeather API data.

Overview

Weather Dashboard

A weather dashboard that features dynamically updated HTML and CSS using OpenWeather API data.

User Story

AS A traveler I WANT to see the weather outlook for multiple cities
SO THAT I can plan a trip accordingly

Acceptance Criteria

GIVEN a weather dashboard with form inputs
WHEN I search for a city
THEN I am presented with current and future conditions for that city and that city is added to the search history
WHEN I view current weather conditions for that city
THEN I am presented with the city name, the date, an icon representation of weather conditions, the temperature, the humidity, the wind speed, and the UV index
WHEN I view the UV index
THEN I am presented with a color that indicates whether the conditions are favorable, moderate, or severe
WHEN I view future weather conditions for that city
THEN I am presented with a 5-day forecast that displays the date, an icon representation of weather conditions, the temperature, the wind speed, and the humidity
WHEN I click on a city in the search history
THEN I am again presented with current and future conditions for that city

screenshot

Link to Deployed Application

https://benjamineidum.github.io/weather/

You might also like...

Hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar.

Hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar.

Hourly Weather Card by @decompil3d An hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar. Can y

Dec 29, 2022

Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.

Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.

Introduction Swagger UI allows anyone — be it your development team or your end consumers — to visualize and interact with the API’s resources without

Dec 28, 2022

This is a Weather app based on HTML CSS JavaScipt (Openweathermap API)

This is a Weather app based on HTML CSS JavaScipt (Openweathermap API)

Weather App (Openweathermap API) This is a Weather app based on HTML CSS JavaScipt and data fetched from API Changes background images as per Location

Mar 17, 2022

A web app build with HTML, CSS, and JavaScript. It allow users to add a book title and and it's author. Content are rendered also dynamically.

Awesome books: with ES6 Description the project. Built With Major languages Frameworks Technologies used Awesome Books In this project the featured se

Nov 4, 2022

This project is built with JavaScript, Webpack, HTML & CSS, Leaderboard api. When user clicks on Refresh button it hits the api and responds with the data, The user can also post data to the api

This project is built with JavaScript, Webpack, HTML & CSS, Leaderboard api. When user clicks on Refresh button it hits the api and responds with the data, The user can also post data to the api

leaderboad Description the project. this project is about the leaderboad i did during Microverse to build a website for adding Data to the API and fet

May 30, 2022

Dashboard skeleton Simple and fast dashboard skeleton template

Dashboard skeleton Simple and fast dashboard skeleton template. Installation npm install --save dashboard-skeleton-compostrap Version 1x built on Boo

Aug 23, 2022

Weather Application built using ReactJs , OpenCage API and OpenWeatherMap API

Weather-bot Netlify Site Status : Weather application built using ReactJs, OpenCage Api and OpenWeatherMap Api Tech Stack and Dependencies Name Descri

Oct 17, 2022

A Travel companion app using Google Maps API, Travel Search and Weather API

A Travel companion app using Google Maps API, Travel Search and Weather API

Travel Advisor Introduction An advanced Travel Companion Application using Google Maps. With Geolocation, Google Maps API, Searching for places, Fetch

Nov 11, 2022

Fallback JS - JavaScript library for dynamically loading CSS and JS files

Fallback JS - JavaScript library for dynamically loading CSS and JS files

Fallback JS - JavaScript library for dynamically loading CSS and JS files. Also provides the ability to load multiple files from a CDN with multiple fallback options and shimming!

Nov 13, 2022
Weather app made using openweather api that supports over 200,000 cities

About This is an open-source weather app built using React.js, and you are welcome to add your unique touch to this project by contributing to the rep

Nikhil Mishra 6 Oct 17, 2022
Weather app created using vanilla JavaScript and APIs. You can search cities worldwide and get current and forecast weather features.

Weather App Live Demo About the Project Weather app created using vanilla JavaScript and APIs. You can search cities worldwide and get current and for

Lua 22 Dec 28, 2022
Weather-magic - Working with APIs to create a weather dashboard

Weather Magic link to website Following the link above will bring you to the Wea

null 1 Feb 3, 2022
A Weather API project inspired by The Ultimate API Challenge / Weather API.

Weather API Project A Weather API project inspired by The Ultimate API Challenge / Weather API. Tech Stack: React.js Tailwind Axios Inspiration The Pr

Franziska 1 Dec 29, 2021
This project is about building a web application to show a weather forecast using weather API.

Weather App Web application to show the current and upcoming week weather forecast. Want to see live preview » ✧ View Demo ✧ Report Bug ✧ Getting Star

Mohit Sehrawat 10 Dec 25, 2022
Monorepo project that shows the current weather data and weather forecast for next 7 days. Created from scratch to participate in a 14-days hackathon.

Climatic Monorepo project that shows the current weather data and weather forecast for next 7 days. Created from scratch to participate in a 14-days h

Luis Marsiglia 6 Jun 23, 2022
Its an app that uses a weather API with access to over 200,000 cities current weather conditons.

Weather App Its an app that uses a weather API with access to over 200,000 cities current weather conditons. Screenshots Links Live Site URL: live sit

Yusuf Lawal 5 Aug 17, 2022
Weather Condition App is a mobile application that has a category of countries in the home age and the users can access to weather of each country.

World Weather This is a SPA react-app project that is built using two APIs. And users can select and choose countries and states and get their updated

Ahmad Zamir Yousufi 2 Oct 10, 2022