You are currently viewing Height Converter Using HTML & JavaScript (Source Code)

Height Converter Using HTML & JavaScript (Source Code)

Telegram Group Join Now

Height Converter Using HTML, CSS, and JavaScript (Source Code)

Create a Height Converter HTML CSS JavaScript Code
Create a Height Converter HTML CSS JavaScript 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

Height Converter HTML CSS JavaScript
Height Converter HTML CSS JavaScript

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

Height Converter HTML CSS JavaScript

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 

Height Converter Javascript
Height Converter Javascript

 

Height Converter Javascript
Height Converter Javascript

 

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

Telegram Group Join Now

Leave a Reply