It is a beginner project in which we will clear all the concepts of forms for taking input from the user and then use the javascript concepts to convert the height accordingly so convert them from feet into the center.

50+ HTML, CSS and JavaScript Projects With Source Code

Inputs here consist of two. You can enter the first one in feet and the second one in millimeters. All of the computations can be seen on a display that is also included. To create this height converter, I used HTML, CSS, and JavaScript. CSS’s fundamentals were created by HTML, and JavaScript implemented them.

Live Preview Of Height Converter:-

I Hope You Enjoy Our Blog So Let’s Start With A Basic Html Structure For The Height Converter.

Restaurant Website Using HTML and CSS

Html Code For Height Converter:-

We need to add a few connections to our stylesheet before building the framework for our height calculator. We will add the link for the stylesheet using the external CSS file. Since we also made the file for the javascript, we also need to add the link for it inside the body tag.

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

Now to add the structure for the height converter using the <h1> tag we will add the heading for our height converter and then using the input type with text we will create the input box for our height converter. Now using the input tag with the type submit we will create the submit button for the height converter.

Create Portfolio Website Using HTML and CSS (Source Code)

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

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.

100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

Only Html Code Output:-

Step1:The container’s width and height will be changed to 375 pixels and 425 pixels, respectively, using the ID selector (container). In the future, we’ll introduce a 350px margin using the margin-left property. Additionally, we’ll change the background colour to “black” using the background property.

To add styling to our feet and input box, we will now use the id selector. With the margin property, we will add a left margin of 60 pixels and change the font colour to “yellow.” We will set the width and height to 150 pixels and 25 pixels, respectively.

Gym Website Using HTML and CSS (Source Code)

Step2:We will now style our submission app and show the outcome. We will make our submit button’s backdrop red using the id selector, and we will centre the text using the text align property. We will give our height converter a boundary radius of 5 pixels by using the border radius property.

#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 Output:-