You are currently viewing Create a Height Converter Using HTML, CSS, & JavaScript

Create a Height Converter Using HTML, CSS, & JavaScript

Create a Height Converter Using HTML, CSS, & JavaScript

Create a Height Converter HTML CSS JavaScript Code
Create a Height Converter HTML CSS JavaScript Code

 

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

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

Leave a Reply