Telegram Group Join Now
Height Converter Using HTML, CSS, and JavaScript (Source Code)
Welcome To Codewithrandom Blog. Today We are going to Create A Height Converter Using Html, Css, And JavaScript. In this Height Converter, you enter Feet and Inches and It Converts into Centimeter.
Live Preview Of Height Converter
I Hope You Enjoy Our Blog So Let’s Start With A Basic Html Structure For The Height Converter.
ADVERTISEMENT
Restaurant Website Using HTML and CSS
Html Code For Height Converter:-
<!DOCTYPE html> <html> <head> <title>Height Converter</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <h1>Height Converter</h1> Feet <input type="text" id="feet" /> <br /> Inches <input type="text" id="inches" /> <br /> <input type="submit" id="submit" value="Convert to cm" /> <br /><br /> <div id="result"></div> </div> <script src="app.js"></script> </body> </html>
There Is All The Html Code For The Height Converter. Now, You Can See An Output With A Height Converter Html Code Then We Write Css And Javascript For The Height Converter.
50+ Html ,Css & Javascript Projects With Source Code
Only Html Code Output Height Converter
Css Code Code Height Converter:-
#container {
width: 375px;
height: 425px;
margin-left: 350px;
margin-top: 65px;
background-color: #000;
padding-left: 30px;
color: #fff;
}
#feet {
width: 150px;
height: 25px;
margin-top: 30px;
margin-left: 15px;
}
#inches {
width: 150px;
height: 25px;
margin-top: 30px;
}
#result {
font-size: 35px;
margin-left: 60px;
color: yellow;
}
#submit {
width: 250px;
height: 35px;
margin-left: 20px;
margin-top: 25px;
border-radius: 5px;
border-style: none;
background-color: red;
color: #fff;
font-size: 25px;
}
h1 {
padding-left: 15px;
padding-top: 25px;
}
Only Html And Css Updated Code Height Converter
Javascript Code For Height Converter:-
//BMI = KG / (H/100 * H/100)
document.getElementById("submit").addEventListener("click", heightConverter);
function heightConverter(){
var feet = parseInt(document.getElementById("feet").value *12);
var inches = parseInt(document.getElementById("inches").value);
var cm = (feet + inches) *2.54;
var n = cm.toFixed(0);
document.getElementById("result").innerHTML = n;
}
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Final Output Of Height Converter
Now That We Have Completed Our Javascript Code Section. Here Is Our Updated Output With Html,css And Javascript For Height Converter. Hope You Like The Height Converter Project.
10+ Javascript Project Ideas For Beginners( Project Source Code)
You Can See The Output Video And Project Screenshots. See Our Other Blogs And Gain Knowledge In Front-end Development.
Thank You!
In This Post, We Learn How To Create A Height Converter Using Simple Html & Css, And Javascript. If We Made A Mistake Or Any Confusion, Please Drop A Comment To Reply Or Help You In Easy Learning.
Written By – Code With Random/anki
Code By – Contact Us For Credit
