## Build a Area Calculator by Length and Width in Feet in Browser Using Javascript Full Project For Beginners

Welcome folks today in this blog post we will be building a `area calculator by length and width in feet` in browser using javascript. All the full source code of the application is shown below.

# Get Started

In order to get started you need to make an `index.html` file and copy paste the following code

`index.html`

``````<h1>Area Conversion App</h1>

<input type="text" id="length" />
</p>

<input type="text" id="width" />
</p>

<p>
<input type="button" id="calculate" value="Calculate Area"  />
</p>
<p>
Your area in square feet is:<br />
<input type="text" id="squareFeet" />
</p>
<p>
Your area in square yards is:<br />
<input type="text" id="squareYards" />
</p>
<p>Your area in square meters is:<br />
<input type="text" id="squareMeters" />
</p>``````

Now make a `style.css` file and copy paste the following code

`style.css`

``````h1 {
width: 100%;
font-size: 2.5em;
color: navy;
text-align: center;
}
p {
width: 100%;
font-size: 2.5em;
color: #14568E;

}

input[type="text"] {
width: 100%;
margin-top: 8px;
margin-bottom: 8px;
border: 2px solid navy;
}
input[type="button"] {
width: 100%;
margin-top: 8px;
margin-bottom: 8px;
border: 2px solid navy;
font-size: 1em;
color: navy;
font-weight: bold;
}
input[id="squareFeet"] {
background-color: #f6f6ff;
border: 2px solid navy;
}
input[id="squareYards"] {
background-color: #f6f6ff;
border: 2px solid navy;
}
input[id="squareMeters"] {
background-color: #f6f6ff;
border: 2px solid navy;
}``````

See also  How to Upload Multiple Files in Multiple Form Fields in Node.js and Express Using Multer Library Full Example For Beginners

Now make a `script.js` file and copy paste the following code

`script.js`

``````/* Create your JavaScript functionality here */

var \$ = function(id) {
return document.getElementById(id);
};

var calculate_click = function() {
var length = parseFloat(\$("length").value );
var width = parseFloat(\$("width").value );

\$("squareFeet").value = "";
squareFeet = ( length * width );
\$("squareFeet").value = squareFeet.toFixed(2);

\$("squareYards").value = "";
squareYards = ( squareFeet * 0.111111 );
\$("squareYards").value = squareYards.toFixed(2);

\$("squareMeters").value = "";
squareMeters = ( squareFeet * 0.0929 );
\$("squareMeters").value = squareMeters.toFixed(2);

};

Now if you open `index.html` file inside the browser you will see the below output