[SOLVED] CS101 Final ProjectJava

CS101 Final Project

Due @ 11:59PM Tues Dec 10

This is the latest possible due date I am allowed to assign. However, this is not the last possible moment I am allowed to accept assignments. The submission portal will remain open for a few days after the “due date.”

Overview

The goal of this project is to design a simple dynamic web page and understand what it does and how it works. You will be provided with a specific prompt to use with ChatGPT that will guide you in producing a website following the MVC pattern we have studied in class.

There is no requirement for the web page beyond it being dynamic. Specifically, it must include at least one triggerable event (in addition to window .onload) that changes the appearance of the web page. The expectation is that you should be able to earn 90 points with minimal effort. Additional points can be earned by making your web page more interesting. Details about earning additional points are discussed below.

Deliverable

You will need to submit the following:

1. Prompts:

○ A complete list of all your prompts to ChatGPT.

○ Do not include ChatGPT’s responses.

2. Final Code:

○ The final code created by ChatGPT for your webpage.

3. Documentation:

○ Overview:

■   A brief paragraph summarizing the purpose of your website.

■    Explain how users can interact with it.

○ Model / View / Controller Descriptions:

■    Provide a description of each object in no more than four sentences.

■   Address the primary state and functionality each object contributes to the website.

4. Class-Based Diagrams:

○    Provide a class-based diagram for each of the model, view, and controller objects.

5. Control-Flow Pseudocode:

○    For each event triggered on the webpage (e.g., click events, mouse events,

onload events), provide pseudocode tracing the control flow between objects.

○ Include:

■ Which object methods are called and in what order.

■    How these methods interact with the webpage’s state.

■ What values are passed/returned.

■   What properties are updated.

Collaboration Policy

Everyone must submit their own assignment and documentation. However, you are welcome (and encouraged) to create the webpage in teams of two or three.

Guidelines for Using ChatGPT

● You cannot cut and paste ChatGPT’s output verbatim and submit it as your own work.

●    However, you are encouraged to use ChatGPT to explain as much as possible before writing your own answers.

Grading Rubric

You can earn up to 85 points simply by re-doing HW5 with your own prompt. Additional points can be earned as follows:

1. Design Decisions (5 points):

○    Earn points by making deliberate design decisions (e.g., specific styling or layout choices).

2. Complexity (10 points):

○    Earn points for adding complexity to your project, as described below.

The minimum requirement is that there be at least one triggerable event (in addition to window .onload) that changes the appearance of the web page

Generic Starter Prompt:

Please create a simple webpage in JavaScript. using the MVC framework. Follow these guidelines:

1.   Structure:

○    Place the HTML, CSS, Model, View, and Controller code in separate files.

2.   Encapsulation:

○    Ensure all functionality is encapsulated in objects with appropriate getters and setters.

○    Don’t use classes and constructors. Create all objects as constants.

3.   Dynamic Interactions:

○    Do not use form. submissions or page reloads.

○   All interactions should happen dynamically using JavaScript.

4.   Session Independence:

○   You do not need to store information between sessions. The collection can reset when the page reloads.

5.   Functionality:

○ (Insert your project idea here.)

Example project ideas

You may use these or come up with your own ideas.

●   Create a webpage that allows me to add songs from my music collection and filter them by artist, genre, etc.

●   Create a webpage that allows users to enter text and displays anagrams of what they’ve typed

●   Create a webpage that presents you with a (hard-coded) list of multiple-choice questions and keeps track of how many you get right

●   Create a webpage that displays inspirational quotes (e.g. from the Zen Quotes API).

Active design decisions

Begin with a prompt along the lines of “now make it look good.” This is not an active   design decision and is not worth any points. Now start describing how you would like the page to look. Here are examples:

●   Move the input area further down the page and center it / uncenter it.

●   Create more space around the  element.

●   Make the background of the page FloralWhite / #FFFAF0

○   A completelist of available colors can be found here: HTML Color Names (w3schools.com)

Including APIs

APIs are like asking another website to provide information that can be incorporated into your web page. For example, we saw an example of getting the weather for a zip code using the OpenWeather API.

There are many APIs that do interesting things that are either free or give you a certain number of free requests per minute / day / month.

●   Note that while you are highly unlikely to go over these limits, they may require   you to provide a credit card. You do not have to do this. You can very easily earn all 100 points without providing any personal information.

Here are some examples of free APIs. Here’s a database. You can also google for more and / or specific ones or ask ChatGPT to list some.

● NASA has a large number of APIs

● A database of Pokémon info

● Horrible jokes

●   AI text summarization. There are many, many, many of these

● Recipes and other food facts

● Stock market info (These also exist for cryptocurrency. Go ahead. I dare you )

Complexity

The goal of the complexity component is to allow you to do more interesting things while you still have the opportunity to discuss it with us face-to-face in office hours and labs. You are encouraged to ask us how complex we think it is before you begin. You can also ask ChatGPT to rate it on a scale from 1 to 10.

Note: in my experience ChatGPT under-reports the complexity of projects

Here are questions you can ask.

●   I don’t knowhow to program, but I understand the MVC pattern and can more or less read javascript, especially with explanations. Here is an explanation rt prompts>. On a scale of 1 to 10, how complex would you say a web page that does here>?

● I don’t knowhow to program, but I understand the MVC pattern and can more or less read javascript, especially with explanations. Here is an explanation sert prompts>. Give me ideas for a web page that you would rate as a choice here> on a scale of 1 to 10 in terms of complexity.

If you want to tackle something ChatGPT thinks is a 7 or above, check in with us to make sure we think it’s feasible.

Complexity examples:

● Include an API call (a request to an external website)

● Adding randomized behaviors

● Additional events (onKeyPress, onMouseOver, etc.)

● Creating interactions between JavaScript. and CSS styling

● Adding more objects / more dynamic components that are manipulated by the MVC components

● Using local storage