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

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>

<p>Please enter your length in feet:<br />
    <input type="text" id="length" />
</p>

<p>Please enter your width in feet:<br />
    <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>

 

See also  Node.js Project to Check HTTP Status Code (Active or Dead),Header of Website Link or URL Using link-check Library in Javascript Full Project For Beginners

 

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;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 2px solid navy;
    border-radius: 4px;
}
input[type="button"] {
    width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 2px solid navy;
    border-radius: 4px;
    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);  
    
};


window.onload = function () {
    $("calculate").onclick = calculate_click;
};

 

 

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

 

Leave a Reply