Spam Musubi

A. Download the HTML file js_asmt02.html.

B. The js_asmt02.html contains a recipe for SPAM musubi. There are number inputs for the number of servings and ingredients, as well as a button input to reset the recipe.

• Note that there are some dependencies in the file that require Internet access to view properly in the browser. It is just formatting and pictures that are hosted.

C. Change the filename to js_Lastname_02.html, where Lastname is your last name.

D. Open js_Lastname_02.html in Atom to make changes and in a browser to view those changes.

E. At the bottom of js_Lastname_02.html, indicated by an HTML comment, create a script tag to import an external JavaScript file named js02-Lastname-logic.js, where Lastname is your last name.

F. Save js_Lastname_02.html, that is all you will be doing in the HTML file.

G. Create a new file and save it as js02-Lastname-logic.js, where Lastname is your last name. This JavaScript file will contain all the behaviors for the page.

• Ensure this file is saved in the same folder as your js_Lastname_02.html file.

H. In js02-Lastname-logic.js you will be adding an event to all the inputs in js_Lastname_02.html. There are a total of 5 input elements (4 number and 1 button), therefore you will be adding 5 events. Add all events using the addEventListener method.

1. Get each input element and assign them to a variable. All inputs have an id attribute making getting an element convenient. You should have 5 variables.

2. Declare and initialize 4 variables to store the original values of each number input. When you first open js_Lastname_02.html in the browser, the numbers you see are the original, default values. You will use these to calculate the new proportion ratio and assign the new quantities for the ingredients and serving amount.

• Example: let originalServings = 8;

3. Before moving on, you should have a total of 9 variables at the beginning of the JavaScript file.

4. Add functionality to the Reset button by adding a click event to it that does the following:

• Assign the value attribute of each number input to their original values.
• There should just be 4 assignment statements in this event function.

5. Ensure the reset button functions properly on the page before moving on. Change any of the numbers on the page then click on the reset button. The numbers should revert to their original values.

6. Next, you will be adding a change event to each of the number input elements so that if the user changes any of the numbers in the recipe, all other numbers will change proportionally. Keep in mind the following:

• Add and complete one change event at a time and ensure it works before adding another one. Do NOT try to code all the change events at once.
• Be careful when adding the events in JavaScript. Do not add an event listener in another event listener, ensure each event listener is after each other.
• The change event triggers when the user has changed the corresponding number input. For instance, if the user changes the number of servings at the top of the page, the event for the inputServings will trigger.
• To easily trigger the change event on the HTML page, use the up and down arrows on the right side of the number input. All the other numbers should change proportionally when the assignment is complete.
• If you manually type in a number, you need to click away after typing the number to "lose focus" of the element. Even if you merely change the number, the change event will not trigger because it is assumed that you are still "changing" it. Click away after changing the number.

7. Start by adding a change event to the inputServings element. When the user changes the number of servings, the event function will do 2 main things:

• .Calculate a new proportion ratio and store it in a variable.
  • The new proportion ratio = the new value / original value
  • In my solution, it looks like this: let newRatio = inputServingsElement.value / originalServings;
• Use the new proportion ratio to adjust the values of all the ingredients proportionally. Do this by re-assigning the value attribute of each element as follows:
  • The new value = the new proportion ratio * the original value
  • In my solution, adjusting the SPAM ingredient looks like this: inputCanSpamElement.value = newRatio * originalSpam;
  • Repeat for the nori and rice ingredients.
  • There will be a total of 3 of these assignment statements, one for the SPAM, nori, and rice.

8. Ensure the change event for the servings works properly before moving on. Change the number of servings on the page and verify the SPAM, nori, and rice ingredients change proportionally.

9. Repeat for the other 3 number inputs by adding change events to the SPAM, nori, and rice elements. Ensure each event works before moving on to the next.

• Keep in mind that when calculating the new ratio, you will use the corresponding value and original value for that ingredient. For instance, when doing the SPAM event function, you will use the inputCanSpam element value and divide by the original SPAM value.
• When adjusting the ingredients proportionally, be sure you are changing all other ingredients. For instance, when doing the SPAM event function, you will adjust the number of servings, nori, and rice values.
• All the change event functions will be very similar, but specific for each ingredient.

I. Comments are not required for this assignment.

js_asmt02.html

< !doctype html >
< html >
< head >
< meta charset="utf-8" >
< title >ICS 215 JavaScript 02< /title >
< !-- JavaScript Assignment 02 -- >
< !-- Created by: Ed Meyer -- >
< link href="https://laulima.hawaii.edu/x/f67OqE" rel="stylesheet" type="text/css" >
< /head >

< body >
< div id="container" >
< header >
< img src="https://laulima.hawaii.edu/x/rTJXrh" > Happy Fun SPAM Musubi Recipe < img src="https://laulima.hawaii.edu/x/VPicgS" >
< /header >

< div id="content" >
< p >Recipe adapted from: < a href="https://www.favfamilyrecipes.com/musubi/" target="_blank" >https://www.favfamilyrecipes.com/musubi/< /a >< /p >
This recipe makes < input type="number" id="inputServings" value="8" min="0" >
musubi(s).
< input type="button" id="resetRecipe" value="Reset" >

< h2 >Ingredients:< /h2 >
< blockquote >
< input type="number" id="inputCanSpam" value="1" min="0" > (12 ounce) can of SPAM< br >
< input type="number" id="inputNori" value="4" min="0" >
sheet(s) Nori (8 1/4" x 4")< br >
< input type="number" id="inputRice" value="6" min="0" > cup(s) cooked rice < br >
< /blockquote >

< h2 >Directions:< /h2 >
< blockquote >
For this recipe, you will need a musubi mold.< br >< br >
Slice the SPAM into about 8-10 slices (depending on how thick you like it).< br >
< br >
Fry SPAM on each side over medium heat until slightly crispy or until desired doneness.< br >< br >
Cut each sheet of nori in half, length wise. Place a strip of nori on a cutting board or clean surface (shiny side down). Place your musubi mold across the middle of the nori. Add rice to the mold, pressing down firmly and evenly, so there is about 1-1 1/2 inches of rice. (dip the mold and your fingers in water as you go to prevent sticking) < br >< br >
Next, remove the mold from the rice. Now you will have a nice little block of rice right on the nori. Add some of the cooked spam to the top. Wrap up one side of the nori and stick it to the top of the SPAM, then wrap up the other side. Just like you are wrapping a nice little package. Use a little water on your finger to seal if needed. Serve warm.< /blockquote >
< /div >

< footer >JavaScript 02 Assignment< /footer >
< !-- Import your js02-Lastname-logic.js file here. -- >
< /div >
< /body >
< /html >