Kilograms To Pounds Converter Using Javascript

[awesomemc1]

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
    
    >
    
17. </
    
    table
    
    >
    
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.

Download