Unit12 Weather Application

Overview

In this module, you will build a weather application showing the current weather information for any zip code in the US.

Vocabulary

Open Weather Map

They provide highly recognizable weather products that make working with the weather data easier. We work with millions of developers around a clock and believe that these benefits might be suitable for most of applications

API Key

Is a code used to identify and authenticate an application or user. They are commonly used to control the utilization of the API’s interface and track how it is being used.

"input" event type

The input event fires when the value of an input, select, or textarea element has been changed.

Objectives

At the end of this module, you should be able to...

• Create an account on the Open Weather site
• Locate your personal API key
• Retrieve JSON Data and display it to the screen
• Use classList with toggle
• Implement toDateString for a simplified date
• Use slice on a string to shorten it
• Implement innerHTML to write HTML in your JavaScript

Tasks

• Download the start file for this unit.
• Download the settings.svg file used in this tutorial.
• Create your own account on Open Weather Maps
• Find your personal API key
• View the weather icons provided by Weather Maps
• Learn to switch between temperature units

Watch

• Unit Lectures
something in Kultra
• Watch 1720_12a Weather-Overview
• Watch 1720_12b Weather-HTML
• Watch 1720_12c Grab-Weather-Data
• Watch 1720_12d Configure-ZIP
• Watch 1720_12e Image-Path
• Watch 1720_12f Current-Date
• Watch 1720_12g Other-Weather-Information
• Watch 1720_12i Town-Name
• Watch 1720_12j Modal-Show-Hide
• Watch 1720_12k Modal-Save-Zip
• Watch 1720_12l Validate-Zipcode
• Watch 1720_12m Style-Application
• Watch 1720_04j Creating an Application Icon (review)

Reflection Questions

Read Understanding CSS Grid: Creating A Grid Container by Rachel Andrew

• What is the best part about CSS Grid?

Assignment Example

• View the small screen version
• View the medium screen version
• View the large screen version

Assignment Checklist

Unit12 Weather Application (10 pts)

Build a weather application showing the current weather information for any zip code

Phone Application

Build an weather icons as you did for assignment 4 Home Improvement

• Follow Apple's recommendations for app icons
• Create a favorite icon set
• Add the icon links to your header
• Create an link on your phones home screen

Page Header

• Should contain an h1 for the site name
• Should contain and an icon to change the zip code

Page Content

Look at the provided JSON information and pick 6 items that you want to display

• Show the current date
• Weather icon displayed from weather maps site
• Pick 4 additional JSON items to display to the page (use fahrenheit)
• Style and sequence these items to impress a potential employer
• Include a degree entity with the current temperature

Modal Dialogue

• Display a modal dialogue when the header icon is clicked
• Allow a 5 digit number to be entered
• Verify the number is valid

Page Footer

• Your name
• The assignment name

Overall Page Requirements

Your page needs to meet these requirements

• Link to a normailze.css file (this creates a common starting point for all browsers)
• Link to a small.css file
• Link to a medium.css file
• Link to a large.css file
• Link to an external Google Font of your choice
• Media Queries are included in the medium and large css files
• Demonstrate the design principles of Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
• Passes the HTML5 validation test.
• Passes the CSS3 validation test.
• Upload your assignemnt to GitHub
• Change your repository to private
• Publish the GitHub repository to Netlify using the name that they provide

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail