How To Create Converter For Yard To Feet

Submitted by alpha_luna on Monday, May 2, 2016 - 15:17.
In this simple tutorial, we are going to create a simple program and it’s called Converter For Yard To Feet. The user will ask to enter a number of yards then the program will convert into feet. This is another kind of converter, hope you can learn from this. JavaScript Source Code This source code will execute for the converting of a yard(s) to feet(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(yard_Amount)
  9.         {
  10.        
  11.         return (yard_Amount * 3 );
  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 + " yard(s) is equal to "
  24.         + result.toFixed() + " feet(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 Code This simple code where the user type their numeric value to convert yard(s) to feet(s).
  1. <h2 style="text-align:center; color:blue;">Yard To Feet<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 our style for the layout of the program.
  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>
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
Yard To Feet Converter 1.0 Using Classes
Yard to Feet Lister

Add new comment

About text formats
  • 48 views