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

To Do This Week

HTML Game Project DUE Wednesday April 9th

This week, please message me your Final project description.

Module Notes

 

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

Use the OpenWeather API 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.

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.

Submission Guidelines

Compile your project into a folder named weather, ensuring your main HTML file is named index.html. Validate your HTML and CSS, then upload your project to a web server. Submit the URL of your deployed weather app through Canvas.

Weather App Workshop

Server Requests/Ajax

Weather App Resources

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

To Get Weather by Geolocation

Student Pairings

Final Project: 20%

Sites Completed for Informal Class Critique : Wednesday April 23 (10%)
Sites Due for Grading : Monday April 30th (90%)

Overview

In this final project, you will create a web-based experience that showcases your proficiency in web development with JavaScript, using AI as needed. This project is your opportunity to synthesize the skills you’ve developed throughout the course—ranging from scripting to working with APIs, to creatively applying your coding skills. The final product should be a compelling piece for your portfolio, demonstrating an innovative application of user interaction with multimedia elements.

Project Guidelines

Your project must be original, incorporating scripting in JavaScript to create an engaging user interface that interacts seamlessly with various multimedia forms. These include, but are not limited to, text, images, videos, audio, and maps. You’re encouraged to implement dynamic content, such as animated elements, galleries, interactive videos or audio clips, and even generative art or procedures, according to your project’s needs.

Evaluation Criteria:

  • Scripting  (30%): Your project should demonstrate your  JavaScript skills to manipulate elements, manage data, and create dynamic interactions.
  • Interface and Interaction Design (30%): Your project should demonstrate thoughtful usability, aesthetics, and interaction design. 
  • Content Completion (30%): Your project should demonstrate multimedia integration.
  • Progress Reviews (10%): To ensure continuous advancement, project progress will be reviewed in class every week. Lack of progress will impact your final grade. This is especially true for having a near complete project for peer evaluation.

Statement:

Include a detailed project statement within your source code comments, outlining:

  • The scripting steps of your project, detailing the use of JavaScript and any frameworks or APIs.
  • A narrative of how AI tools like ChatGPT were utilized in the ideation, planning, or debugging phases of your project.

Project steps:

  1. Conceptualization: Begin with formulating a unique idea that blends interactive design with multimedia elements.
  2. Design and Storyboarding: Plan the user interface and experience, deciding on the multimedia elements to be included and how they will interact with the user.
  3. Technical Planning: Outline the JavaScript functionalities and any frameworks or APIs that will be employed to bring your project to life.
  4. Development: Start building your project, coding with JavaScript and integrating multimedia elements. Utilize ChatGPT for assistance in troubleshooting or refining your code.
  5. Testing and Refinement: Rigorously test your project to ensure flawless functionality and user experience. Adjust and improve as needed.
  6. Final Touches: Apply CSS for styling, aiming for a design that complements the multimedia experience without overshadowing it.
  7. Documentation: In your code comments, detail the development process and highlight how AI tools supported your project.
  8. Submission: Compile your project files, ensuring your main file is named “index.html” and contained within a folder named “final”. Validate your HTML and CSS, then upload to a server for submission through Canvas.

Project Inspiration:

Consider the following innovative concepts to kickstart your imagination:

  • Interactive Learning Module: Design an educational experience that engages users through interactive quizzes, animations, and videos.
  • Animated Infographic: Create a visually appealing infographic that uses animation and interactivity to convey information dynamically.
  • HTML5 Game: Develop an engaging game utilizing Canvas for graphics and JavaScript for game mechanics, potentially as a collaborative effort.