Project 3: Make an Object

Part 1

In the previous exercise you learned how to extract data from an object and inject it into a webpage. During the process you created a drop-down list that triggered a function so that, whenever a given value was clicked, a drink name, image, and description appeared on a web page.

Your job for this assignment is to create something very similar with a couple of twists. Here are the instructions:

  1. Using beverage.js from the previous lesson as an example, create your OWN object with at least 5 name value pairs. (The beverage lesson had five name value pairs)
  2. Create just ONE function that will display the value of a given name on a web page when a button is clicked. This will require you to add an argument to your function and add a value for the argument when you call the function from a button.
  3. Create a series of buttons on a webpage that will call the function and display the value for a given name when the button is clicked. You can hard-code the buttons into html (the easy way) or impress me and use JavaScript to generate the buttons in your html (the hard way).

Hint: When you call the function from a button you will need to use single quotes around the argument. In the example below, my function is titled nameit and Latte is the argument.
onclick=”nameit(‘Latte’)”

Here are some examples:

Click on the character to reveal their name and image.
Click on the Horcrux to reveal its description and image.

Part 2: Case File

Using Codex, create a case file. Include several sections (overview, witnesses, timeline, trial, etc.), and incorporate objects in a few of the sections.

Here is an example of a prompt for The Murdaugh Trial: Can you create a new HTML, CSS, and JS file all called “murdaugh” I want to do a quick explanation for a class on the key witness of The Murdaugh Trial – the housekeeper. I also want to include a quick overview of the case including Paul Murdaugh’s boat accident, the history of the Murdaugh family in South Carolina, and the many other cold cases and accusations against the family.

Here is the result.

Make any necessary changes, and make at least three HTML, CSS, or JS changes. The most crucial part of this assignment is the reflection. Do not use AI for this portion of the assignment. At the bottom of the case file, include your responses to the following questions:

  1. Provide at least one prompt you used to build this case file.
  2. What did you change after the AI output?
  3. What did you learn about JS objects?
  4. During this project, did you see AI as a shortcut, a collaborator, or something else?
  5. After this project, what is a new boundary you would set for yourself OR a boundary you would remove when using AI?

Rubric

A-Level Work

  • Exceptional quality, originality, and/or insight
  • Fully meets criteria with no significant errors
  • Polished, organized, and professional

B-Level Work

  • Meets all criteria with minor issues
  • Solid understanding and effort
  • Good organization and presentation

C-Level Work

  • Meets most criteria; notable gaps
  • Basic or inconsistent understanding
  • Organization or clarity needs work

Below C-Level (Not Passing)

  • Disorganized, incomplete, or poor quality
  • Meets few or no criteria; major errors or omissions
  • Limited or no understanding and effort