Untitled

<!DOCTYPE html>
<html>
  <head>
      <!-- Lawrence Lin Section 32-->
    <meta charset = "UTF-8" />
    <title> Exam2-Part4 </title>
    <style>
        body {background-color: lightskyblue; font-family: optima;
                  color: maroon; text-align: center}
        p { font-size: 20px}
        button {font-size: 20px; background-color: coral}
        input { font-size: 20px;text-align: center}
     </style>
  </head>

  <script>
      var paintCost = 0;    //total cost for the painting
      var ductCost = 0      //total cost for the heating duct work
      var floorCost = 0;    //total cost for the oak flooring
      var smartCost = 0;    //total cost for the smart home devices
      var devices = new Array();   //array to hold the number of devices in each room

       /*
       This function calculates and returns the total cost of the paint job as described in the .pdf file.
       The parameter rooms is the number of rooms to be painted. You can assume rooms >= 0.
       The parameter thirdCoat has either the value 'yes' or the value 'no'.
       */
      function calculatePaintCost(rooms, thirdCoat){

        paintCost = 300 * rooms;

        if (thirdCoat == 'yes'){

            paintCost = (paintCost * 0.3) + paintCost;

        }


        return paintCost;
      }
      /*
       This function calculates and returns the total cost of the heating duct work and is cvalculated as
       described in the .pdf file.
       The parameter length is the length of one side of the room. You can assume length >= 0.
       The parameter width is the width of the adjacecent side of the room. You can assume width >= 0.
       The parameter shortcut has either the value 'yes' or the value 'no' and indicates whether
       or not the customer wants to "cut corners". The calculatations are described in the .pdf file.
       */
      function calculateDuctCost(length,width,shortcut){

        return 0;
      }

       /*
       This function calculates and returns the total cost of installing oak flooring as described in the .pdf file.
       The parameter feet is the number of square feet of oak flooring to be installed. You can assume feet >= 0.
       */
      function calculateFloorCost(feet){

          if (feet < 1000){
              floorCost = feet * 8;
          }
          else if (feet < 1500){
              floorCost = feet * 7;
          }
          else if(feet < 2500){
              floorCost = feet * 6;
          }
          else{
              floorCost = feet * 4;
          }

        return floorCost;
      }

      function calculateSmartCost(rooms){
        return 0;

      }

/*********************************************************************************/
/*          YOU DO NOT HAVE TO LOOK AT OR MODIFY ANYTHING BELOW !!!              */
/*********************************************************************************/

      function printSmartInfo(){
        var s = "";
        for (var i = 0; i < devices.length; i++){
          s = s + "Rm " + (i+1) + ": " + devices[i] + " device(s)  ";
        }
        return s;
      }

      function calculateTotal(){
        return paintCost + ductCost + floorCost + smartCost;
      }


  </script>

  <body>

<h2> Painting</h2>
    <p>How many rooms?
     <input type = "text" id = "rooms" size = "10" value = "" onchange="numRooms = Number(value);"  />
    </p>
    <p> Do you want a third coat?
     <input type = "radio" id = "yes3" name = "coats" value = ""
     onclick = "
     paintCost = calculatePaintCost(numRooms,'yes');
     costOfPaint.value = '$' + paintCost.toFixed(2);
     ">  YES
    <input type = "radio" id = "no3" name = "coats" value = ""
    onclick = "
    paintCost = calculatePaintCost(numRooms,'no');
    costOfPaint.value = '$' + paintCost.toFixed(2);
    ">  NO
    </p>

    <p>
    Paint Cost <input type = "text" id = "costOfPaint" size = "10" value = "" readonly/>
    </p>

    <h2> Heating Duct Work</h2>
     <p>Length of room?
      <input type = "text" id = "roomL" size = "10" value = "" onchange=" roomL = Number(value); "  />
      &nbsp Width of room?
     <input type = "text" id = "roomW" size = "10" value = "" onchange= "roomW = Number(value); "   />
    </p>
    <p> If possible, do you want diagonal duct work?
     <input type = "radio" id = "yes3d" name = "ducts" value = ""
     onclick = "
     ductCost = calculateDuctCost(roomL, roomW,'yes');
     costOfDuct.value = '$' + (ductCost).toFixed(2);
     ">  YES
    <input type = "radio" id = "no3d" name = "ducts" value = "" onclick = "
    ductCost = calculateDuctCost(roomL, roomW,'no');
    costOfDuct.value = '$' + (ductCost).toFixed(2);
    ">  NO
    </p>
    <p>
      Cost of Duct Work <input type = "text" id = "costOfDuct" size = "10" value = "" readonly/>
      </p>


<h2> Oak Flooring</h2>
    <p>Enter the number of square feet you wish to cover with Oak Flooring:

     <input type = "text" id = "rooms" size = "10" value = "" onchange="
     sqFeet = Number(value);
     floorCost = calculateFloorCost(sqFeet)
     costOfFloor.value = '$' + floorCost.toFixed(2);"  />
    <p>
   Your flooring cost is: <input type = "text" id = "costOfFloor" size = "10" value = "" readonly/>
    </p>

<h2>Smart Home Devices </h2>
<p>Enter the number of smart rooms you would like:
 <input type = "text" id = "srooms" size = "10" value = "" onchange="
 var smartRooms = Number(value);
 smartCost = calculateSmartCost(smartRooms);
 costOfSmart.value = '$' + smartCost.toFixed(2);
 smartInfo.value = printSmartInfo(devices);
 "  />
<p> The number of devices in each of your rooms is:<br>
  <input type = "text" id = "smartInfo" size = "100" value = "" readonly />
</p>

<p>
The cost of your smart devices is: <input type = "text" id = "costOfSmart" size = "10" value = "" readonly/>

</p>

<p>
  <button onclick= "totalCost.value = '$' + (calculateTotal()).toFixed(2); " Calcuate Total is:>Calculate Total</button>
  <input type = "text" id = "totalCost" size = "10" value = "" readonly />
</p>

  </body>
</html>