In this article I will show you how use Javascript to convert kilograms to pounds . In the code I included a function that will only accept numeric value and not allow characters like letters and special characters. I hope you will find my work useful and beneficial in learning how to program in Javascript.
If you have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. My mobile number here in the Philippines is 09173084360.
Sample Program Output
Program Listing
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title> Kilograms To Pounds Converter in Javascript</title>
</head>
<style>
body,label {
background-color:lightgreen;
font-family:arial;
color:blue;
font-size:18px;
font-weight:bold;
}
label{
display: table-cell;
text-align: right;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}
button {
font-family: 'arial';
font-size:18px;
color:red;
}
input[type="number"] {
font-family: 'arial';
font-size:18px;
color:red;
height: 25px;
width: 38px;
}
</style>
<body>
<h2> Kilograms To Pounds Converter in Javascript </h2>
<div class="row"><label>Enter a value to convert</label>
<input type="number" size="5" id="values" maxlength="5" onkeypress="return isNumber(event)"
required autofocus><br></div>
<br>
<button title="Click here to convert to pounds.">Convert To Pounds</button>
<button title="Click here to clear the text box.">Clear</button><br>
<br><br>
<div id="result"></div>
<script>
var button = document.getElementsByTagName('button');
button[0].onclick = display_result;
button[1].onclick = clear_text;
document.onload = function() {
document.getElementById('values').focus();
};
// Function to convert kilogram(s) to pound(S)
function convert_to_pounds(number_value)
{
return (number_value * 2.20462262 );
}
// This function will display the pounds equivalent
function display_result() {
var kilograms = document.getElementById("values").value;
var result = convert_to_pounds(kilograms);
if (document.getElementById("values").value == '') {
alert("Cannot be empty. Please put a numerical value.");
document.getElementById('values').focus();
}
else {
document.getElementById('result').innerHTML = kilograms + " kilogram(s) is equal to "
+ result.toFixed(2) + " pound(s). ";
}
}
// This function will clear the text box.
function clear_text() {
document.getElementById("values").value="";
document.getElementById("result").innerHTML="";
document.getElementById("values").focus();
}
// This function will only allow numerical value in the text box.
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
</script>
</body>
</html>
No comments:
Post a Comment