Pounds To Kilograms Converter Using Javascript

Submitted by alpha_luna on Monday, May 2, 2016 - 11:51.
Related Code: Kilograms To Pounds Converter Using Javascript In the previous tutorial, we create Kilograms To Pounds Converter Using Javascript. Today, we are going to create another converter and it's called Pounds To Kilograms Converter Using Javascript. This program numeric values only accepts in the textbox and not allow the characters by setting the code like this: <input type="number">. This simple program has a textbox and button for the user to put a numeric value number of Pounds to Convert into Kilograms after clicking the "Convert" button. JavaScript Code This script will execute for the converting of a pound(s) to kilogram(s). 
  1. <script>
  2. var button = document.getElementsByTagName('button');
  3. button[0].onclick = display_result;
  4. button[1].onclick = clear_text;
  5. document.onload = function() {
  6. document.getElementById('values').focus();
  7. 	};
  8. 	function convert_to_pounds(number_value)
  9. 	{
  10.  
  11. 	return (number_value * 0.453592 );
  12. 	 }
  13. function display_result() {
  14. 	 var kilograms = document.getElementById("values").value;
  15. 	 var result = convert_to_pounds(kilograms);
  16.  
  17. 	 if (document.getElementById("values").value == '') {
  18. 	alert("Cannot be empty. Kindly type your value to convert.");
  19. 	document.getElementById('values').focus();
  20.  
  21. 	}
  22. 	 else {
  23. 	 document.getElementById('result').innerHTML = kilograms + " pound(s) is equal to "
  24. 	+ result.toFixed(2) + " kilogram(s). ";
  25. 	 }
  26. }
  27. function clear_text() {
  28. 	 document.getElementById("values").value="";
  29. 	 document.getElementById("result").innerHTML="";
  30. 	 document.getElementById("values").focus();
  31. }
  32. function numberTo_Convert(evt) {
  33. evt = (evt) ? evt : window.event;
  34. var charCode = (evt.which) ? evt.which : evt.keyCode;
  35. if (charCode > 31 && (charCode < 48 || charCode > 57)) {
  36. return false;
  37. }
  38. return true;
  39. }
  40. </script>
HTML Source Code This simple code where the user input their numeric value to convert pound(s) to kilogram(s). 
  1. <h2 style="text-align:center; color:blue;">Pounds To Kilograms<br /> Converter Using Javascript</h2>
  2.  
  3. <table width="100%" cellpadding="5" cellspacing="5">
  4. 	<tr>
  5. 		<td><label>Enter a value</label></td>
  6. 		<td><input type="number" id="values" class="txt_Number" onkeypress="return numberTo_Convert(event)" required autofocus="autofocus"></td>
  7. 	</tr>
  8. 	<tr>
  9. 		<td colspan="2" style="text-align:center;"></td>
  10. 	</tr>
  11. 	<tr>
  12. 		<td colspan="2" style="text-align:center;">
  13. 			<button class="btn_convert">Convert</button>
  14. 			<button class="btn_clear">Clear</button>
  15. 		</td>
  16. 	</tr>
  17. </table>
  18.  
  19. <div id="result"></div>
And, this is our style. 
  1. <style type="text/css">
  2. body {
  3. 	margin:auto;
  4. 	width:400px;
  5. }
  6. td {
  7. 	text-align: center;
  8.     color: blue;
  9.     font-size: 18px;
  10.     font-weight: bold;
  11.     font-family: cursive;
  12. }
  13. .txt_Number {
  14.     width: 100px;
  15.     text-align: center;
  16.     border: blue 1px solid;
  17.     font-size: 25px;
  18.     background: aliceblue;
  19. }
  20. .btn_convert {
  21.     border: blue 1px solid;
  22.     background: azure;
  23.     color: blue;
  24.     font-size: 18px;
  25.     font-family: cursive;
  26.     padding: 5px;
  27. }
  28. .btn_clear {
  29.     border: red 1px solid;
  30.     background: azure;
  31.     color: red;
  32. 	width: 75px;
  33.     font-size: 18px;
  34.     font-family: cursive;
  35.     padding: 5px;
  36. }
  37. #result {
  38.     font-size: larger;
  39.     font-family: cursive;
  40.     text-align: center;
  41.     margin-top: 70px;
  42.     border: blue 1px solid;
  43.     line-height: 80px;
  44. 	color:red;
  45. }
  46. </style>
Related Code: Kilograms To Pounds Converter Using Javascript So, this is it. You can have Pounds To Kilograms Converter after following codes above. So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.

Tags

Add new comment

About text formats
  • 1298 views