Marisol514 / Sunshine-Availability

06 Server-Side API's: Weather Dashboard

06 Server-Side APIs: Weather Dashboard

Sunshine Availabiliy

My Task

My challenge is to build a weather dashboard that will run in the browser and feature dynamically updated HTML and CSS.

User Story

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

Acceptance Chriteria

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, and the wind speed
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

Screen Shots

Review Links

GitHub: https://github.com/Marisol514/Sunshine-Availability

Deployed Site: https://marisol514.github.io/Sunshine-Availability/

Resources

XpertLearning Assisant - BCS

openweathermap.org: https://openweathermap.org/forecast5

JavaScript Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

Request Response: https://coding-boot-camp.github.io/full-stack/apis/how-to-use-api-keys

addEventListener() method: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

DOM ContentLoaded Event: https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

async function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

const: https://developer.mozilla.org/en-US/docs/WebAssembly/Reference/Numeric/Const

var vs const let: https://www.freecodecamp.org/news/differences-between-var-let-const-javascript/#:~:text=const%20creates%20%22constant%22%20variables%20that,good%20practice%20to%20use%20const%20.

https://www.youtube.com/watch?v=Gd_JG3e1g4A&feature=youtu.be

Function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function

getElementById()method: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function

Strict Equality: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality

Addtion Assignments (+=): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition_assignment

JSON.parse(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

setInterval: https://developer.mozilla.org/en-US/docs/Web/API/setInterval

jQuery Adding a div: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page

jQuery: https://api.jquery.com/

jQuery Selector: https://api.jquery.com/jquery/#jQuery-selector-context

jQuery Element Selector: https://learn.jquery.com/using-jquery-core/selecting-elements/

jQuery Selectors: https://api.jquery.com/category/selectors/

JQuert Array: https://api.jquery.com/Types/#Array

JavaScript 'date': https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

JavaScript 'parseInt(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

JavaScript Class manipulation: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList