Tuesday, January 26, 2016

Unit Conversion Calculators

Here are the three different unit conversion calculators that I coded.

Simple Unit Conveters

Feet to Miles

feet
miles

Ounces to Cups

ounces
cups

Hours to Seconds

hours
seconds


Most of the code that I used was from a video that Dr. Harris made. I used a handy online programming tool called JSbin. JSbin is useful because it allows you to program while it updates the code and projects it on the other side of the screen. You can also program in both html and Java Script. I decide to use another code from a different example that Dr. Harris gave.

I pulled the video out into another window and tiled it with the JSbin window. As Dr. Harris walked through the code, I typed it into JSbin. I did change the code as I saw fit. For example, I renamed some of the elements to clarify them. I mainly used the modified html code from the first example, but I used the Java Script from the second example.

I did document my work by taking screen captures and saving my work as a .txt file.

Here is a picture of some rough code that really did not work. As you can see the html worked, but the Java Script did not. You can also see that I was going to do grams to pounds, but all three would have been division. I decide to make one a multiplication function instead.



Here is the same code at a later point. This code is incomplete, but it is only missing the first four lines of code which are the same as above. In this version I revised some of the code and tidy it up a bit. 



I also have a .txt file of some rough code.

Another thing that I tried was making my code into a html file. I did so by pasting the code onto notepad and then choosing save as... I then named it and put .html onto the end. I saved it and then launched it. The .html file opened on a web browser page, but was using the browser and not the internet.

I had a lot of trouble learning how to code. I went through four or five different iterations of code. I even sat for a good 45 minutes looking at the code and trying to trouble shoot it. I simply was missing two parentheses on the end of the function name. That was frustrating. Over all, it took me between 5-6 hours to learn the basics of programming and to write the converters. However, the original post got deleted and I had to rewrite it which added another 2 hours.

Here is my finished code in a .txt file on my google drive.

I also put my code into a highlighter that I found online that was called tohtml. This link may or may not work, it can be finicky. 


<html>
<head></head>
<script type="text/javascript">
  //I used some code of Dr. Harris. I did modify it to fit my purposes.
  
function calculateFuncion1() {
  //Get value of input1
var first = document.getElementById("input1").value;
  //Convert text to numbers and divide by 5280
var answer = parseFloat(first)/5280;
  //Output answer to outPut1
var outPut1 = document.getElementById('outPut1');
outPut1.value=answer;}

function calculateFuncion2() {
  //Get value of input2
var first = document.getElementById("input2").value;
  //Convert text to numbers and divide by 8
var answer = parseFloat(first)/8;
  //Output answer to outPut2
var outPut2 = document.getElementById('outPut2');
outPut2.value=answer;}
  
function calculateFuncion3() {
  //Get value of input3
var first = document.getElementById("input3").value;
  //Convert text to numbers and mulitply by 3600
var answer = parseFloat(first)*3600;
  //Output answer to outPut3
var outPut3 = document.getElementById('outPut3');
outPut3.value=answer;}
  
</script>  
<body>
<h1>Simple Unit Conveters</h1>
  
<!Each unit converter is number from 1 - 3./> 
<!I decided to rename the textboxes to input or output, depemending on what it is./>
<!I found this is clearer and easier when writing./>
  
<p>Feet to Miles</p>
<input type="text" name="input1" id="input1" /> feet
<input type="submit" name="button" id="button1" onClick="calculateFuncion1()" value="=" />
  
    </br>
  
<input type="text" name="outPut1" id="outPut1" readonly/> miles
  
    </br>
  
<p>Ounces to Cups</p>
<input type="text" name="input2" id="input2" /> ounces
<input type="submit" name="button" id="button2" onClick="calculateFuncion2()" value="=" />
  
    </br>
  
<input tpe="text" name="outPut2" id="outPut2" readonly/> cups
  
    </br>

<p>Hours to Seconds</p>
<input tpe="text" id="input3"/> hours 
<input type="submit" name="button" id="button3" onClick="calculateFuncion3()" value="=" />

    </br>

<input tpe="text" id="outPut3" readonly/> seconds
  
    </br>

</body>
</html>
Posted by at