In: Computer Science
Problem: Design a web page to provide a metric conversion guide for college students. Provide the capability to convert the following (both ways):
Miles to kilometers (distance)
Gallons to liters (volume)
Pounds to kilograms (weight)
Fahrenheit to Celsius (temperature)
must have a separate PHP and HTML page
HTML Source code for converting Miles to Kilometers
<html>
<head><title>Miles to Kilometers</title>
<script language="javascript">
var textMiles; var textKm; var KILOMETERS_TO_MILES = 0.621371; var MILES_TO_KM = 1.60934; function initElements() { if (!textMiles) { // Intitialization of the elements textMiles = document.getElementById("text-miles"); textKm = document.getElementById("text-km"); } } function calMilesFromKilometers() { initElements(); var km = parseFloat(txtKm.value); txtMiles.value = String(km * MILES_TO_KM);//Formula to calculate the conversion rate of the KM into miles } function calcKilometersFromMiles() { initElements(); var miles = parseFloat(txtMiles.value); txtKm.value = String(miles * KM_TO_MILES);//formula to calculate KM_to_Miles
}
</script>
</head>
<body>
<body> <b>Miles To Kilometers Converter</b> <br> <br> <table border="0" cellpadding="5" cellspacing="0" style="width: 500px;"> <tbody> <tr> <td> </td> <td><b>Miles</b> </td> <td> </td> <td><b>Kilometers</b> </td> </tr> <tr> <td>miles: </td> <td><input id="txt-miles" size="20" type="text" value="50"/> </td> <td>km: </td> <td><input id="txt-km" size="20" type="text" value=""/> </td> </tr> <tr> <td> </td> <td> <button type="button" onclick="calcMilesFromKilometers();">Calculate Miles</button> </td> <td> </td> <td> <button type="button" onclick="calcKilometersFromMiles();">Calculate Kilometers</button> </td> </tr> </table> </body> </html> The above HTML Program would help the user to write a script and execute the script in the HTML Program. __________________________________________________________________ 2.Gallons to Litres <html> <head> <script language="Java script"> $(function () { // set values var toGallons = 0.26417; var toMetric = 3.7854; var converted = 0; $('input[name="data"]').change(function () { // convert the value to convert(); }); $('input[name="convert"]').change(function () { // change radip to convert convert(); }); function convert() { var theValue = $('input[name="data"]').val(); //value of original var selected = $("input[type='radio'][name='convert']:checked").val(); //determine if Metric or Imperial if (selected === 'i') { //If imperial converted = "The Imperial Value of " + theValue + " = the metric value of " + theValue * toMetric; } else {//If metric converted = "The Metric Value of " + theValue + " = the Imperial value of " + theValue * toGallons; } $('#newData').html(converted); //Place new data in div id newData } }); </script> <title>Gallons to litres conversion</title> </head> <body> <input type="radio" name="convert" value="m"> Metric <input type="radio" name="convert" value="i" checked> Imperial <div>Data<br><input name="data" value="0"> </div> <div>Converted</div><div id="newData"></div> </body> </html> ___________________________________________________________________
3. HTML Program to convert pounds to kilogram
<html>
<head>
<script language="java
script">
function weightConverter(valNum) {
{
document.getElementById("outputGrams").innerHTML=valNum/0.0022046;
}
</script>
</head>
<body>
<p>
<label>Pounds</label>
<input id="inputPounds" type="number"
placeholder="Pounds" oninput="weightConverter(this.value)"onchange="weightConverter(this.value)">
</p>
<p>Grams: <span
id="outputGrams"></span></p>
</body>
</html>
________________________________________________________________________
We need to use the Math.round() method for the conversion
HTML Program to convert fareign heit
to celsius
<html>
<body>
<h1>JavaScript Fahrenheit to Celsius</h1>//heading
<p>Insert a number into one of the input fields below:</p>
<p><input id="f" onkeyup="convert('F')"> degrees Fahrenheit</p>
<p><input id="c" onkeyup="convert('C')"> degrees Celsius</p>
<script>
function convert(degree) {
var x;
if (degree == "C") {
x = document.getElementById("c").value * 5 / 9 - 32;
document.getElementById("f").value = Math.round(x);
} else {
x = (document.getElementById("f").value +32) * 9 /5;
document.getElementById("c").value = Math.round(x);
}
}
</script>
</body>
</html>
___________________________________________________________________________
The above method can help the user to enter the values and
conversion formulas in script language.