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:
- 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
- accessing current weather data
- geocoding api : ways to search with names and coordinates
- 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
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:
- Conceptualization: Begin with formulating a unique idea that blends interactive design with multimedia elements.
- 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.
- Technical Planning: Outline the JavaScript functionalities and any frameworks or APIs that will be employed to bring your project to life.
- Development: Start building your project, coding with JavaScript and integrating multimedia elements. Utilize ChatGPT for assistance in troubleshooting or refining your code.
- Testing and Refinement: Rigorously test your project to ensure flawless functionality and user experience. Adjust and improve as needed.
- Final Touches: Apply CSS for styling, aiming for a design that complements the multimedia experience without overshadowing it.
- Documentation: In your code comments, detail the development process and highlight how AI tools supported your project.
- 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.