WEEK 12: Weather App
(March 31 & April 2)

To Do This Week

HTML Game Project DUE Wednesday April 9th

This week, please post to the class Slack channel your Final project description. It can be quite brief and general. 

Collaborative Research Paper 

Learning JavaScript with AI: Thinking Like a Coder Before Writing Code
>LINK to Google Doc

Weather App Project (5%)
Due: Wednesday April 16th

Use the OpenWeather API (Application Programming Interface) to create your own weather app using JavaScript’s fetch() method to get the current weather by city and state. Design your results page and upload the project in a folder called weather. Validate your HTML and CSS, then submit your project link on Canvas.

Refer to this weather app template to get started. Get an API key from the OpenWeather API, selecting the free option. Replace the placeholder key in the template with your own.

Project Objectives

  • API Integration: Use the OpenWeather API to fetch real-time weather data.
  • User Interface Design: Create an engaging and intuitive interface for your app.
  • JavaScript Proficiency: Use JavaScript to dynamically manipulate the DOM based on the fetched data. You can integrate media or Canvas drawing/animations.

Evaluation Criteria

  • Functionality (40%): The app must fetch and display accurate weather data based on user input.
  • Interface Design (30%): Evaluate creativity, usability, and aesthetics of the design.
  • Code Quality (30%): Ensure clean, well-commented JavaScript code that dynamically updates the UI. Include natural language steps in script comments.

Submission Guidelines

The folder should be named “weather”, with an index.html. Validate your HTML and CSS, then upload your project to a web server. Submit the URL of your weather app through Canvas.

Weather App Workshop

Server Requests

  • OLD WAY: Ajax – asynchronous JavaScript and XML, used for passing data (GET or POST) without refreshing the page. XML – extensible markup language, was used for storing and exchanging the data.

  • NEW WAY (with ES6): JavaScript Fetch API  along with JSON – JavaScript Object Notation, a format for storing and exchanging data.

    The fetch API is a built-in browser feature. It’s a JavaScript interface (i.e. a set of methods) that lets you make network requests like:

    • GET (grab data)

    • POST (send data)

    • PUT / DELETE (update/remove data)

     

Weather App Resources

if (response.weather[0].description.includes('clouds')) {
   // Do something
}

To Get Weather by Geolocation

Final Project: 20%

Sites Completed for Informal Class Critique : Wednesday April 23 

Overview

Your Final Project is your chance to build something original and meaningful using the skills you’ve gained in this class.  You may build on a previous project (like your HTML5 Game) as long as you significantly expand and improve it.

Use this project to showcase your creativity, programming logic, and ability to design a clear user experience. Whether you’re building a game, interactive infographic, or multimedia story, make it something you’d be proud to include in a portfolio.

Requirements

  • Originality: You can expand a past project, but it must go well beyond the original with new features and design elements.

  • JavaScript Logic: Include clear, natural language comments outlining your logic in plain English—use as many JS terms as possible.

  • Usability & Visual Design: Apply visual hierarchy or clear user instructions so users know what to do.

  • Header Info: Include a title and your name in the UI.

  • Project Statement (in code comments):

    • How you built it—your thinking and steps.

    • How AI, if applicable, helped with planning, coding, or debugging.

What You’ll Be Graded On

  • JS Scripting (30%) – Using JS to create interactive features and control multimedia.

  • Interface & Design (30%) – Thoughtful UX, visuals, and how easy it is to interact with.

  • Content Completion (30%) – Fully built, multimedia-rich experience.

  • Progress Reviews (10%) – Weekly class updates required. Lack of progress will lower your grade.

Ideas to Spark Inspiration

  • Upgrade your HTML5 Game with levels, images, media, animations, or level-ups.

  • Interactive infographic with scroll-based animations.

  • Multimedia learning tool using quizzes, videos, or audio along with images.

  • Generative art or sound visualizations using Canvas.

APIs for Final Project Ideas:

Quid’s interactive site

NASA Open APIs

  • URL: https://api.nasa.gov/

  • Description: NASA offers numerous APIs, such as the Astronomy Picture of the Day (APOD), Mars Rover Photos, Earth observation data, and more.

  • Ideas: Show the “Astronomy Picture of the Day” on your site with details and a short description.

Trivia API (Open Trivia DB)

  • URL: https://opentdb.com/api_config.php

  • Description: Provides trivia questions on various topics and difficulty levels.

  • Ideas: 1) Build a quiz application with multiple-choice questions. 2) Create a trivia challenge game where users track their scores.

 

U.S. Census Bureau API

  • URL: https://www.census.gov/data/developers.html

  • Description: Provides detailed demographic, socioeconomic, and housing data at various geographic levels in the U.S.

  • Ideas: 1) Build a data visualization dashboard highlighting population changes in different states/counties. 2) Compare demographics (income, educational attainment, etc.) across regions.

 

Data.gov (U.S. Government Open Data)

  • URL: https://api.data.gov/

  • Description: A central repository of U.S. government datasets, including health, environment, science, energy, and more. Many sub-APIs exist, such as: EPA (Environmental Protection Agency). USDA (U.S. Department of Agriculture). FDA (Food and Drug Administration)

  • Ideas: 1) Visualize air quality data, water data, or other environmental metrics. 2) Create a local or state-level data explorer for various government stats.

     

Open Library API

  • URL: https://openlibrary.org/developers/api

  • Description: Internet Archive’s Open Library project provides book metadata (title, author, publication year), cover images, and more.

  • Ideas: Create a book search/lookup tool that fetches cover images and details by ISBN or title.

     

The Metropolitan Museum of Art Collection API

  • URL: https://metmuseum.github.io/

  • Description: Access over 400,000 artworks in The Met’s open access collection with images, artist info, object data, etc.

  • Ideas: 1) Make an “art of the day” feature that highlights a random piece from The Met.  2) Allow users to search for artworks by period or medium and display them in a custom UI.

     

Free Dictionary API (dictionaryapi.dev)

  • URL: https://dictionaryapi.dev/

  • Description: A completely free, open-source dictionary API. Provides definitions, phonetics, and examples without requiring an API key.

  • Key Points: Completely free and open to the public. Primarily English, but they have some other languages in progress.