Build a Unit Weight (Mass) Conversion Calculator in HTML5 CSS3 and Javascript Full Project For Beginners

Build a Unit Weight (Mass) Conversion Calculator in HTML5 CSS3 and Javascript Full Project For Beginners

 

 

Welcome folks today in this blog post we will be building a unit weight (mass) conversion calculator 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

 

 

<html lang="en">

<head>
  <title>Weight Converter</title>
</head>

<body>
  <div id='content'>

    <h1 id='title'>Weight Converter</h1>
    <div id='button'>
      <button id='clearButton'>Clear All</button>
    </div>

    <div id='ul'>
      <ul>
        <li><label>Pounds (lbs) <input id="poundsInput"></label>
          <li><label>Kilograms (kg) <input id="kilogramsInput"></label>
            <li><label>Grams (g) <input id='gramsInput'></label>
              <li><label>Ton [US] (t) <input id='tonInput'></label>
                <li><label>Ounce (oz) <input id='ounceInput'></label>
      </ul>
    </div>

    <footer id='clearFloat' class='footer'>
      <p>Created by Mitchell Console &copy2016
    </footer>
  </div>
  </div>
</body>

</html>

 

 

And now make a style.css file and copy paste the following code

 

style.css

 

html {
  background: linear-gradient(to top right, black, grey);  
}

body {
  height: 100%;
  font-family: sans-serif;
  background: url('http://www.publicdomainpictures.net/download-picture.php?adresar=30000&soubor=old-calculator.jpg&id=27368');
  background-size: 100%;
}

html, body {
    margin: 0;
    height: 100%;
  background-repeat: no-repeat;
  overflow-y: hidden;
}

#clearButton {
  border: solid black 2px;
  font-weight: bold;
  margin: 10px auto 20px auto;
  cursor: pointer;
}

ul {
  list-style-type: none;
  
}

#ul {
  display: table;
  margin: 0 auto;
}

hr {
  width: 90%;
  border-color: black;
}

.footer {
  margin: 75px 0 0 0;
  font-style: italic;
}

#title {
  text-decoration: underline;
}

#content {
  margin: 50px auto 0 auto;
  width: 25%;
  border: solid 5px;
  background: url('https://c2.staticflickr.com/8/7248/7501404260_e29f728a4a_b.jpg');
  text-align: center;
}

h1 {
  font-size: 28px;
}

input {
  width: 70px;
  border: solid 2px;
  text-align: center;
}

label {
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: right;
  margin: 20px auto 40px auto;
  font-weight: bold;
}

@media (max-width: 768px) {
  #content {
width: 50%;
  }
}

@media (max-width: 425px) {
  #content {
    width: 100%;
  }
}

 

See also  Build a Minecraft Game Tick Calculator in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

And now make a script.js file and copy paste the following code

 

script.js

 

//Clear All button function
function clearAll() {
  poundsInput.value = '';
  kilogramsInput.value = '';
  gramsInput.value = '';
  tonInput.value = '';
  ounceInput.value = '';
  cInput.value = '';
  fInput.value = '';
  kInput.value = '';
  raInput.value = '';
  reInput.value = '';
}

clearButton.onclick = clearAll;

//Functions for weight conversions
function updateKilograms() {
  poundsInput.value = (kilogramsInput.value * 2.20462).toFixed(1);
  gramsInput.value = (kilogramsInput.value * 1000).toFixed(1);
  tonInput.value = (kilogramsInput.value / 907.18474).toFixed(1);
  ounceInput.value = (kilogramsInput.value * 35.27396).toFixed(1);
}

function updatePounds() {
  kilogramsInput.value = (poundsInput.value * 0.45359).toFixed(1);
  gramsInput.value = (poundsInput.value * 453.59237).toFixed(1);
  tonInput.value = (poundsInput.value * 0.0005).toFixed(1);
  ounceInput.value = (poundsInput.value * 16).toFixed(1);
}

function updateGrams() {
  kilogramsInput.value = (gramsInput.value * 1000).toFixed(1);
  poundsInput.value = (gramsInput.value * 0.002205).toFixed(1);
  tonInput.value = (gramsInput.value * 0.0000011).toFixed(1);
  ounceInput.value = (gramsInput.value * 0.035274).toFixed(1);
}

function updateTon() {
  kilogramsInput.value = (tonInput.value * 907.18474).toFixed(1);
  poundsInput.value = (tonInput.value * 2000).toFixed(1);
  gramsInput.value = (tonInput.value * 907184.74).toFixed(1);
  ounceInput.value = (tonInput.value * 32000).toFixed(1);
}

function updateOunce() {
  kilogramsInput.value = (ounceInput.value * 0.02835).toFixed(1);
  poundsInput.value = (ounceInput.value * 0.0625).toFixed(1);
  tonInput.value = (ounceInput.value * 0.000031).toFixed(1);
  gramsInput.value = (ounceInput.value * 28.34952).toFixed(1);
}

kilogramsInput.oninput = updateKilograms;
poundsInput.oninput = updatePounds;
gramsInput.oninput = updateGrams;
tonInput.oninput = updateTon;
ounceInput.oninput = updateOunce;

 

 

See also  Koa.js Multer Uploading Files with Validation of File Extension Filters and File Limits in Browser Using koa-multer Library Full Project For Beginners

And now if you open index.html file inside the browser you will see the below screenshot

 

Leave a Reply