Hurricane
Freelance Ecosystem Builder
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
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).
HTML Code
This simple code where the user type their numeric value to convert yard(s) to feet(s).
And, this is our style for the layout of the program.
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.
Download
JavaScript Source Code
This source code will execute for the converting of a yard(s) to feet(s).
- <
script>
- var
button =
document.getElementsByTagName
(
'button'
)
;
- button[
0
]
.onclick
=
display_result;
- button[
1
]
.onclick
=
clear_text;
- document.onload
=
function
(
)
{
- document.getElementById
(
'values'
)
.focus
(
)
;
- }
;
- function
convert_to_pounds(
yard_Amount)
- {
- return
(
yard_Amount *
3
)
;
- }
- function
display_result(
)
{
- var
kilograms =
document.getElementById
(
"values"
)
.value
;
- var
result =
convert_to_pounds(
kilograms)
;
- if
(
document.getElementById
(
"values"
)
.value
==
''
)
{
- alert(
"Cannot be empty. Kindly type your value to convert."
)
;
- document.getElementById
(
'values'
)
.focus
(
)
;
- }
- else
{
- document.getElementById
(
'result'
)
.innerHTML
=
kilograms +
" yard(s) is equal to "
- +
result.toFixed
(
)
+
" feet(s). "
;
- }
- }
- function
clear_text(
)
{
- document.getElementById
(
"values"
)
.value
=
""
;
- document.getElementById
(
"result"
)
.innerHTML
=
""
;
- document.getElementById
(
"values"
)
.focus
(
)
;
- }
- function
numberTo_Convert(
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>
HTML Code
This simple code where the user type their numeric value to convert yard(s) to feet(s).
- <h2
style
=
"text-align:center; color:blue;"
>
Yard To Feet<br
/
>
Converter Using Javascript</
h2
>
- <table
width
=
"100%"
cellpadding
=
"5"
cellspacing
=
"5"
>
- <tr
>
- <td
><label
>
Enter a value</
label
></
td
>
- <td
><input
type
=
"number"
id
=
"values"
class
=
"txt_Number"
onkeypress
=
"return numberTo_Convert(event)"
required autofocus=
"autofocus"
></
td
>
- </
tr
>
- <tr
>
- <td
colspan
=
"2"
style
=
"text-align:center;"
></
td
>
- </
tr
>
- <tr
>
- <td
colspan
=
"2"
style
=
"text-align:center;"
>
- <button
class
=
"btn_convert"
>
Convert</
button
>
- <button
class
=
"btn_clear"
>
Clear</
button
>
- </
td
>
- </
tr
>
- </
table
>
- <div
id
=
"result"
></
div
>
And, this is our style for the layout of the program.
- <style type=
"text/css"
>
- body {
- margin
:
auto
;
- width
:
400px
;
- }
- td {
- text-align
:
center
;
- color
:
blue
;
- font-size
:
18px
;
- font-weight
:
bold
;
- font-family
:
cursive
;
- }
- .txt_Number
{
- width
:
100px
;
- text-align
:
center
;
- border
:
blue
1px
solid
;
- font-size
:
25px
;
- background
:
aliceblue
;
- }
- .btn_convert
{
- border
:
blue
1px
solid
;
- background
:
azure
;
- color
:
blue
;
- font-size
:
18px
;
- font-family
:
cursive
;
- padding
:
5px
;
- }
- .btn_clear
{
- border
:
red
1px
solid
;
- background
:
azure
;
- color
:
red
;
- width
:
75px
;
- font-size
:
18px
;
- font-family
:
cursive
;
- padding
:
5px
;
- }
- #result
{
- font-size
:
larger
;
- font-family
:
cursive
;
- text-align
:
center
;
- margin-top
:
70px
;
- border
:
blue
1px
solid
;
- line-height
:
80px
;
- color
:
red
;
- }
- </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.
Download
You must upgrade your account or reply in the thread to view hidden text.