Question

In a seperate javascript file

This step in brewing beer is to extract sugars from grains by soaking the grains in hot wate a different wor 3. JavaSeript/DOM Background: The first amount of sugar (the grain's yield) to the wort. Calculating the final amount of sugar in the wort is an imp ing a beer recipe, since the sugars will later ferment into alcohol. To measure the amount of sugar in designi step is called mashing, and the resulting sugar-water is called wort. Each variety of grain contributes we use specific gravity (SG), a decimal number (e.g., 1.054) which represents the ratio of the sugar-waters denso that of pure water (1.000 SG). Specific gravity measurements during the brewing process about 1.010 and 1.100. are typically between estimates the specific gravity of Your job is to write the JavaScript code to add behavior to the following page, which a list of user-entered grains: HTML: Mash-It! Mash-It! Male bill crieldset> clegendMalt billie/legend PPG Tbs Grain 8.5 American 2-Row Pale 38 32 5 Cara-Pils/Dextrene cbutton id-"add gzain" >Add another qrainc/button> Estimated Specific Gravit span id-specific qrvity your、calculated SG. goes hero--> /spanxbr/> Cspan class-"note"> (assumes a 5.5 gallon batch) The page consists of a table in which the user can enter grains. Every time the Add another grain button is clicked, a new row should be added at the bottom of the table. Each row consists of three text-entry fields, each in its own table cell, for entering the following values: an amount (in pounds), a name, and a sugar yield (in "PPG"). These entry fields should have the classes amount, name, and yield respectively. When the Calculate SG button is pressed, your code should estimate the specific gravity of the user-entered grains by performing the following calculation SG round(las + aya 5.5)/1000 +1 (Where a and yi represent the amount and yield of the first grain, and so on.) In other words, for each grain in the list, multiply its amount (the number in the "lbs" column) by its yield (the number in the "PPG" column), and take the sum of these products. Then divide that by 5.5 (which represents the volume of water it's dissolved in, in gallons). Round the result to the nearest integer, then to express it as a number 1 followed by 3 decimal places (e.g., 1.054), divide by 1000 and add 1 For example, using the values in the above screenshot, your calculation would be as follows: .5.34]/ 5.5) /1000+1-1.068 SGan round(8.5.38 +5.32 + .5.34 You should assume all input to text boxes is valid; that is, reasonable values will always be entered in the fields for amount and yield. You may assume the Prototype JavaScript library is loaded prior to your script being loaded. When injecting content into the page, you may use the innerHTML property for injecting plain text only; you may not use it to inject any HTML code These screenshots show various states of the program being used: Mash-It! Mash-It Mash-It! Mash-It! Mat bitl Ibs Grain 8.5 American 2-Row Pale 5 Cara-Pils/Dextrine 38 8.5 American 2-Row Pale 8.5 American 2-Row Pale 32 Add another grain Cakculate SG Add another grain Calculace S Add another grain Calculate s Calculate SG Add another grain Estimated Spectc Cravity Estemaied Specihic Cravity Estimated Specihc Grawity 1062 Estimeed Specific Cravity After another grain has been entered, and Calculate SG has beer clicked Initial state After Add another grain has been clicked After the first grain has been entered Write your solution below)

Answer 1

HTML File chtml> chead> title> Mash-It!</title> </head <script> var GrainCount=1; function add_Graino GrainCount++; var Row document.createElement'tr'); var col! document.createElement('td'); var col2 document.createElement('td'); var col3 document.createElement'td"); var field1 document.createElement Input); field1/d-"amount-"-GrainCount; field1 type-"text" field1class-"amount" var field2-document.createElement('Input) field2.id- "name_"+GrainCount; field2 type-"text" field2 class-"name var field3- teElement(Input); field3.id- "yleld_"+GrainCount; field3.type="text" field3.class-"yleld"

col1.appendChildfield1); col2 appendChildfield2) col3.appendChildfield3); Row.appendChild col1) Row.appendChild col2) Row.appendChild col3); document.getElementByld("malt_bll").appendChild(Row); function calculateSGO var sum=0; var i for(i=1; iにGraincount;i++){ var _amount document.getElementById("amount_4).value; var _yield document.getElementByld("yleld"+i).value sumLamount"_yield); var SG = Math.round(sum/5.5)/1000+1; document.getElementByld"speclfic_gravlity".innerHTML SG; </script> bodys ch1>Mash-It</hi> cfieldset> <legend Malt bill:</legend>

<table id-"malt_bll" str eth lbsc/th cth>Grain</th xth>PPG</th></tr> strs <tdxinput id "amount_1" type "text" class-"amount"/></td:> <td xinput id-"name_1" type-"text" class-"name"/</td> <tdecinput id-"yleld_1" type-"text" class-"yleld"d> </tr </tables </fieldset> br/> <div id-"operatlons" <button id-"add_graln" onClick-"add_Graln0">Add another grain</button> <button id calculate" onClick-calclatesGo" Calulate SG</button> </div> cbr/> <div id "calculations" Estimated Specific Gravity: <b<span id-"speclfic_gravity"/span</b>xbr/> span class-"note" assumes a 5.5 gallon batch)k/span> </div> </body> </html

OutPut Initial State: Mash-It Malt bill lbs Grain PPG Add another grain Calulate SG Estimated Specific Gravity assumes a 5.5 gallon batch) After first grain has been added Mash-It Malt bill Grain PPG lbs American 2-Row Pale38 85 Add another grain Calulate S0 Estimated Specific Gravity (assumes a 5.5 gallon batch)

After Add another grain has been clicked Mash-It Malt bill Grain lbs PPG 85 American 2-Row Pale 38 Add another grain Calulate SG Estimated Specific Gravity (assumes a 5.5 gallon batch) After another grain has been entered, and Calculate SG has been clicked Mash-It Malt bill lbs Grain PPG American 2-Row Pe 38 Cara-PilsDextrene 32 Add another grain Calulate SG Estimated Specific Gravity: 1.062 (assumes a 5.5 gallon batch)