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 {
  /* https://www.w3schools.com/colors/colors_gradient.asp */
  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;
  border-radius: 1em;
  background-color: #f8f8f8;
  box-sizing: border-box;
  display: inline-block;
  margin: 8px 0;
  padding: 10px 10px;
  width: 100%;
}

form {
  width: 300px;
}

button {
  background-color: black;
  border: none;
  border-radius: 1em;
  color: white;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  padding: 10px 10px;
}

 

See also  Build a Wikipedia Page Viewer Search Engine in Browser Using Vanilla Javascript Full Project For Beginners

 

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);
});

Leave a Reply