Build (Amazon,Flipkart) Product Discount Percentage Calculator Tool in Browser Using HTML5 & Javascript Full Project For Beginners

`index.html`

``````<div class="container">
<h1>Percentage Calculator</h1>
<form action="">
<div>
<label for="percentage">Percentage:</label>
<input type="number" id="percentage">
</div>
<div>
<label for="wholenumber">Amount:</label>
<input type="number" id="wholenumber">
</div>
<div>
<label for="result">Result:</label>
<div id="result">0</div>
</div>
<div>
</div>
</form>
<div>
<button id="button">Calculate</button>
</div>
</div>``````

`style.css`

``````* {
box-sizing: border-box;
}

html,
body {
height: 100vh;
}

body {
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
font-family: "Open Sans", sans-serif;
margin: 0;
}

/* https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically  */

/* Author: Michael_B */

.container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 100vh;
}

h1 {
font-family: "Oswald", sans-serif;
}

#percentage,
#wholenumber,
#result,
#discount {
border: 1px solid #ccc;
background-color: #f8f8f8;
box-sizing: border-box;
display: inline-block;
margin: 8px 0;
width: 100%;
}

form {
width: 300px;
}

button {
background-color: black;
border: none;
color: white;
cursor: pointer;
display: block;
margin: 0 auto;
}``````

`script.js`

``````document.getElementById("button").addEventListener("click", function() {
// Grabs the values from input fields
var percentage = document.getElementById("percentage").value;
var wholenumber = document.getElementById("wholenumber").value;
// selects the result element
var result = document.getElementById("result");
// Returns the result of the percentage portion amount
return (result.textContent = percentage / 100 * wholenumber);
});``````