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

To Do This Week

This week, please message me your Final project description.

Class

Wednesday April 3rd will be an optional workshop class on Zoom.

Weather App Project

Due: Wednesday April 10th

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.

Server Requests/Ajax

Weather App Resources

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

To Get Weather by Geolocation

HTML5 Game: 15% Due Monday April 15th

Weather App: 10%

Due Wednesday April 15th

Overview

Create a personalized weather application using the OpenWeather API to fetch and display real-time weather conditions. This project challenges you to use JavaScript’s fetch() method effectively and design a creative, user-friendly results page.

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.

Final Project: 20%

Sites Completed for Informal Class Critique – BY Wednesday April 24 (10%)

Sites Due for Grading – BY Monday April 29th (90%)

Overview

Create a web-based experience that showcases your web development skills with JavaScript, incorporating AI tools where needed. This project is an opportunity to demonstrate innovative applications of user interaction with multimedia elements.

Project Guidelines

  • Original, interactive design using JavaScript.
  • Integration of multimedia elements such as text, images, video, or audio.
  • Dynamic content and innovative user experiences.

Evaluation Criteria

  • Scripting (30%): Demonstrate JavaScript skills for dynamic interactions.
  • Interface and Interaction Design (30%): Ensure thoughtful usability and aesthetics.
  • Content Completion (30%): Include and integrate multimedia effectively.
  • Progress Reviews (10%): Show consistent progress for peer evaluation.

To Do This Week:

This week, please message me your Final project description.

Class

Wednesday April 3rd will be an optional workshop class on Zoom.

Make a basic Weather app

Weather App Project Due: Wednesday April 10th
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 Class List

Introduce Weather App

Use this weather app template to see how you can create your own weather app. Get an api key from the open weather map api and replace what I have. Check the price page and select the free option.

Server Requests/Ajax:

Weather App:

To get weather by geolocation:

Review: forEach()

Weather App Workshop

Student Pairings

HTML5 Game: 15% – DUE MONDAY APRIL 15th

Weather App: 10%

DUE Wednesday April 15h

OVERVIEW

In this project you will construct a personalized weather application, using the OpenWeather API to fetch and display current weather conditions based on city and state inputs. Your challenge is to apply JavaScript, specifically the fetch() method, to retrieve weather data and creatively design a results page that enhances user interaction and experience. This exercise aims to blend technical skills with design

PROJECT STATEMENT

Your project should include a statement at the top of your source code, enclosed in HTML comments (<!--...-->). This statement will outline the sequence of technical and creative steps for your game development with JavaScript and p5.js. Include how ChatGPT assisted in the ideation, planning, or debugging phases of your work.

PROJECT OBJECTIVES

  • API Integration: Utilize the OpenWeather API to fetch real-time weather information. You’ll need to manage API requests effectively, handling data retrieval with JavaScript’s fetch() method.
  • User Interface Design: Craft a compelling and user-friendly interface for your weather app. The design of your results page should not only present the weather data clearly but also provide an engaging user experience.
  • JavaScript Proficiency: Demonstrate your ability to manipulate DOM elements based on the fetched data, updating the user interface dynamically to reflect current weather conditions.

EVALUATION CRITERIA

  • Functionality (40%): Your app must accurately fetch and display weather data based on user inputs for city and state.
  • Interface Design (30%): Assessed on the creativity, usability, and aesthetics of your results page. Consider using Canvas drawing/animation or P5js.
  • Code Quality (30%): Your JavaScript code should be clean, well-commented, and efficiently structured to manage API requests and update the UI dynamically.

SUBMISSION GUIDELINES

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

Final Project: 20%

Sites Completed for Informal class Critique  – BY Wednesday April 24 (10%)
Sites Due for Grading  – BY Monday April 29th  (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.