Kilograms To Pounds Converter Using Javascript

Submitted by alpha_luna on Tuesday, April 26, 2016 - 12:41.
In this tutorial, we are going to learn Kilograms To Pounds 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 contains a textbox and button for the user to put the desired amount of Kilograms to Convert into Pounds after clicking the "Convert" button. JavaScript Code This script will execute the converting of kilograms to pound.
  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 * 2.20462262 );
  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 + " kilogram(s) is equal to "
  24.         + result.toFixed(2) + " pound(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 kilograms into pounds.
  1. <h2 style="text-align:center; color:blue;">Kilograms To Pounds <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>
  18.  
  19. <div id="result"></div>
And, this is the 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>
Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Tags
Kilograms To Pounds Converter
Kilograms
Pounds

Add new comment

About text formats
  • 1051 views