Wood Calculator Website With Vanilla JavaScript
Today you’re gonna build a Wood Calculator Website with Vanilla JavaScript(Not Vanilla Ice Cream!)
Project Overview
On this website users can say how many Bed, Table, Chair they need, and how much cubic foot wood is needed for a Bed, Table, Chair. And your website will show the user how much cubic foot is needed for making the Bed, Table, Chair. So let’s get started.
Setting The HTML And CSS
Make a new folder called wood calculator open the folder with a text editor. I opened the folder Visual Studio Code(VS Code).
On the VS Code, I installed the extension called Live Server.
Now we need to make an index.html, style.css, script.js.
In the index.html file, I set the boilerplate HTML. On the VS Code if I write! they show an emmet abbreviation now press enter the boilerplate HTML is ready for you. If you are not using VS Code don’t worry write the boilerplate HTML manually. Set the Title to Wood Calculator. And link the CSS and JavaScript file.
I’m using Bootstrap for making the design easier. So link the Bootstrap CDN.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wood Calculator</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body><script src="script.js"></script>
</body>
</html>
If you are using VS Code Open the HTML file with Live Server. make a div with a class of container and under the div make six input tag with a class of form-control and set the type to number.
<div class="container>
<input type="number" class="form-control">
<input type="number" class="form-control">
<input type="number" class="form-control">
<input type="number" class="form-control">
<input type="number" class="form-control">
<input type="number" class="form-control">
</div>Set the 1st input placeholder How Many Bed You Need. The 2nd input placeholder How Many Table You Need. The 3rd input placeholder How Many Chair You Need. The 4th one is How Much Wood Is Needed For A Bed. The 5th one is How Much Wood Is Needed For A Table. 6th one is How Much Wood Is Needed For A Chair. And add some id. That is in the example.
<input type="number" id="bed-quantity" placeholder="How Many Bed You Need" class="form-control">
<input type="number" id="table-quantity" placeholder="How Many Table You Need" class="form-control">
<input type="number" id="chair-quantity" placeholder="How Many Chair You Need" class="form-control">
<input type="number" id="bed-wood" placeholder="How Much Wood Is Needed For A Bed" class="form-control">
<input type="number" id="table-wood" placeholder="How Much Wood Is Needed For A Table" class="form-control">
<input type="number" id="chair-wood" placeholder="How Much Wood Is Needed For A Chair" class="form-control">Make a Button after the inputs.
Make a div with a class of result after the button. under the div make an h3 That says The Total Wood Needed Is: a span tag with an id of result.
<div class="result">
<h3>The Total Wood Needed Is:<span id="result"></span></h3>
</div>Now add some style on the style.css file.
.form-control{
margin-top: 25px !important;
width: 500px !important;
text-align: center;
margin: auto;
}.result{
margin-top: 30px;
text-align: center;
}.btn{
margin-top: 50px !important;
margin-left: 500px;
}
Add The JavaScript
Make a Function called calculateWood that takes bed, table, chair, bedQuantity, tableQuantity, chairQuantity.
function calculateWood(bed, table, chair, bedQuantity, tableQuantity, chairQuantity) {}
Under the function write a variable totalBedWood = bed * bedQuantity . Similarly write a variable totalTableWood = table * tableQuantity. And a variable totalChairWood = chair * chairQuantity.
const totalBedWood = bed * bedQuantity;
const totalTableWood = table * tableQuantity;
const totalChairWood = chair * chairQuantity;Make a variable totalWood = totalBedWood + totalTableWood + totalChairWood.
const totalWood = totalBedWood + totalTableWood + totalChairWood;Then set the totalWood variable as the innerText of the result span
document.getElementById('result').innerText = totalWood;Now outside the Function capture, the submit button and add an event listener to it.
document.getElementById('submit').addEventListener('click' , ()=>{})
Under the event listener function write some variables. Follow the example.
const bed = parseInt(document.getElementById('bed-wood').value);
const table = parseInt(document.getElementById('table-wood').value);
const chair = parseInt(document.getElementById('chair-wood').value);
const bedQuantity = parseInt(document.getElementById('bed-quantity').value);
const tableQuantity = parseInt(document.getElementById('table-quantity').value);
const chairQuantity = parseInt(document.getElementById('chair-quantity').value);Now call the function and give the parameters.
calculateWood(bed, table, chair, bedQuantity, tableQuantity, chairQuantity);