To Do This Week:
Message me your Final project description if you haven’t already done so – on Slack
Class
Make a basic Weather app
Weather App Project Due: April 19th (5%)
Use the openweather API to create your own weather app using Javascript fetch() method to get the current weather by city and state. Design your results page.
upload in a folder called “weather”
Weather App List
Introduce Weather App
Use this weather app template to create your own weather app. Get an api key from the open weather map api and replace what I have. Access the JSON weather output and get particular data to make a change to the page that reflects the current weather.
Server Requests/Ajax:
- intro to Ajax– asynchronous javascript and xml, passing data (GET or POST) without refreshing page
- intro to XML– extensible mark-up language, used for storing and exchanging data.
- JSON-javascript object notation, used for storing and exchanging data.
- JavaScript Fetch api / FreeCodeCamp’s Explanation of Fetch
Weather App:
- open weather map api / geocoding api
- example output: Chicago / JSON prettify
- JSON weather data
- weather conditions – list of all the weather descriptions
- weather icons
- JS includes() – search a result for a word or phrase
if (response.weather[0].description.includes('clouds')) { do something } - weather app template
- student example using canvas
To get weather by geolocation:
Review: forEach()
Weather App Workshop
Weather App (5%)
Use the openweather API to create your own weather app using Javascript fetch() method to get the current weather by city and state. Design your results page.
- You will be graded on effort, innovation and design.
- Please include a statement of resources used. And provide comments on the script.
Final Project: 25%
Sites Completed for Informal class Critique – BY Wednesday April 26 (10%)
Sites Due for Grading – BY Monday May 1st (90%)
The Final Project is quite open, but it must include your own scripting in JavaScript (with ChatGPT as a code assistant) and your own design with HTML/CSS. You can take any previous project to significantly build upon. Please get my approval for this.
The subject and genre may be anything, but you will have to design something that involves user interaction with multimedia. Multimedia means using text, images, video, audio, maps in an integrated way. JavaScript can be used to get data, add animation, create galleries, create dynamic video/audio, interactive elements, generative/random procedures -anything you want.
Include a commented out statement in the <head> that details your resources, the steps you started with to build the project and how you used ChatGPT. Also include detailed comments describing what is happening in the JavaScript.
You will be graded on your scripting using JavaScript (30%), interface and interaction design (30%) and the completion of the content (30%).