How To Create a Height Converter HTML CSS JavaScript | Height Converter Javascript







How To Create a Height Converter HTML CSS JavaScript | Height Converter Javascript

Welcome🎉 to Code With Random blog. In this blog, we learn how we create a  Height Converter. We use HTML, Css, and javascript for this Height Converter. I hope you enjoy our blog so let’s start with a basic HTML structure for the Height Converter.

HTML Code  

 <!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 then we write javascript for the Height Converter.

output

How To Create a Height Converter HTML CSS JavaScript | Height Converter Javascript

CSS code

 #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;
}

Css Updated output


How To Create a Height Converter HTML CSS JavaScript | Height Converter Javascript

Javascript code

 //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;
}

Final output

How To Create a Height Converter HTML CSS JavaScript | Height Converter Javascript

How To Create a Height Converter HTML CSS JavaScript | Height Converter Javascript


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Height Converter. 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

Share on:

Leave a Comment