2A.1

Mathematical converter for tempterature

by Lucille Kenney

HTML

<h4>1) Create a mathematical converter for temperature</h4>
      <p>In the zip file you downloaded for this project, open js/hw2ConvertTemp.js. It contains a function called 
        <span style="font-family: monospace;">convertFtoC()</span>
        and one called 
        <span style="font-family: monospace;">convertCtoF()</span>,
        which, at the moment, do nothing. You're going to edit this file to provide the code that
        makes these functions work to convert Fahrenheit to Celsius, and vice
        versa.&nbsp; You can test your code with the form fields below&mdash;your
        conversion code will run whenever you change the content of the input
        fields.</p>
      <p>If the user types in values that are not numbers, do nothing.</p>
      <p>Remember that the formula for converting temperature looks like this:</p>
      <span style="font-family: monospace;">
        °C x 9/5 + 32 = °F<br>
        <br>
        (°F - 32) x 5/9 = °C</span><br>
      <br>
      &nbsp; 
      <input size="3" id="degC">°C is equal to 
      <span class="degOutput" id="degFOut"></span>°F
      <br>&nbsp; 
      <input size="3" id="degF">°F is equal to 
      <span class="degOutput" id="degCOut"></span>°C
      <p><br>
      </p>

CSS

#studentname{
	border:1px solid darkgray;
	padding:.7em;
	background-color: gray;
	width:20%;
}

.namedata{
	color: maroon;
	font-weight:bold;
}

.degoutput{
	width:4em;
	border: 1px solid gray;
	padding: 1px;
}

#putAnX{
	width:600px;
	height:400px;
	border:1px solid black;
}
#theX{
	position:relative;
}
body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
}
.container {
	width: 80%;
	margin: auto;
}

h4 {
	border-top: 1px solid black;
	padding-top: 1em;
	width: 95%;
}

.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

.hwbutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #fed897;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fed897;
	box-shadow:inset 0px 1px 0px 0px #fed897;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
	background:-moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b33d', endColorstr='#d29105');
	background-color:#f6b33d;
	-webkit-border-top-left-radius:20px;
	-moz-border-radius-topleft:20px;
	border-top-left-radius:20px;
	-webkit-border-top-right-radius:20px;
	-moz-border-radius-topright:20px;
	border-top-right-radius:20px;
	-webkit-border-bottom-right-radius:20px;
	-moz-border-radius-bottomright:20px;
	border-bottom-right-radius:20px;
	-webkit-border-bottom-left-radius:20px;
	-moz-border-radius-bottomleft:20px;
	border-bottom-left-radius:20px;
	text-indent:0;
	border:1px solid...

JavaScript

/********************************************************************
  *
  * First problem: temperature conversion
  *
  * If the values entered by the user aren't numbers (or convertible to numbers),
  * return nothing (or, more specifically, leave the output field blank)
  *
  ********************************************************************/

 var convertCtoF = document.getElementById("degC");
 convertCtoF.onchange = function(){  
                //onchange means that every time the value in the input box changes, this function will run
                var degreesC = document.getElementById("degC").value; // this is the value from the form field
                     if (degreesC === "" || isNaN(degreesC)) {
                         document.getElementById("degFOut").innerHTML = "";
                         return;
                     }

                // your calculations go here. You'll start with the variable degreesC, convert it to Fahrenheit
                var cToF = ((degreesC * 9) / 5) + 32;

                //  and place the result in the variable 'degreesF'
                //"you haven't written this code yet"; // you will set this to the results of your conversion
                var degreesF = cToF; 
                
                // now we write the result to the page
                document.getElementById("degFOut").innerHTML = degreesF;
 };

                var convertFtoC = document.getElementById("degF");
                //onchange means that every time the value in the input box changes, this function will run
                convertFtoC.onchange = function(){  
                var degreesF = document.getElementById("degF").value; // this is the value from the form field
                     if (degreesF === "" || isNaN(degreesF)) {
                         document.getElementById("degCOut").innerHTML = "";
                         return;
                     }

                // your calculations go here. You'll start with the...