Build a Weight Unit Converter in HTML5 CSS3 and Javascript Full Project For Beginners

You are currently viewing Build a Weight Unit Converter in HTML5 CSS3 and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a weight unit converter in html5 css3 and 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

 

<!DOCTYPE html>
<html>
  <head>
    <title>Currency Converter in Javascript</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
    />
  </head>
  <style>
  </style>
  <body>
    <div class="container">
        <div class="row">
          <div class="col-md-6 offset-md-3">
            <h1 class="display-4 text-center mb-3">Weight Converter</h1>
            <form>
              <div class="form-group">
                <input id="lbsInput" type="number" class="form-control form-control-lg" placeholder="Enter Pounds...">
              </div>
            </form>
            <div id="output">
              <div class="card card-primary mb-2">
                <div class="card-block">
                  <h4>Grams:</h4>
                  <div id="gramsOutput"></div>
                </div>
              </div>
      
              <div class="card card-success mb-2">
                <div class="card-block">
                  <h4>Kilograms:</h4>
                  <div id="kgOutput"></div>
                </div>
              </div>
      
              <div class="card card-danger mb-2">
                <div class="card-block">
                  <h4>Ounces:</h4>
                  <div id="ozOutput"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="script.js"></script>
</html>

 

 

Now make a script.js file inside the root directory and copy paste the below code

 

script.js

 

document.getElementById("output").style.visibility = "hidden";
document.getElementById("lbsInput").addEventListener("input", function(e) {
  document.getElementById("output").style.visibility = "visible";
  let lbs = e.target.value;
  document.getElementById("gramsOutput").innerHTML = lbs / 0.0022046;
  document.getElementById("kgOutput").innerHTML = lbs / 2.2046;
  document.getElementById("ozOutput").innerHTML = lbs * 16;
});

 

 

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

 

Leave a Reply