Build a Unit Weight Converter (Kilograms + Pounds + Ounces + Grams) in Javascript Full Project For Beginners

Build a Unit Weight Converter (Kilograms + Pounds + Ounces + Grams) in Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a unit weight converter in javascript. All the full source code of the application is given below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<div class="container">
  <header>
    <h1>Weight Converter</h1>
  </header>
  <section>
    <div id="input">
      <select name="weightSelect" id="weightType">
        <option>Choose weight type</option>
        <option value="1">Kilograms</option>
        <option value="2">Pounds</option>
        <option value="3">Grams</option>
        <option value="4">Ounces</option>
      </select><br>
      <input type="number" id="weightValue" value="0">
    </div>
    <div id="output">
      <div class="card kilos" id="lbCard">
        <h3>Pounds</h3>
        <h4 id="toPounds"></h4>
      </div>
      <div class="card pounds" id="kgCard">
        <h3>Kilos</h3>
        <h4 id="toKilos"></h4>
      </div>
      <div class="card grams" id="gmCard">
        <h3>Grams</h3>
        <h4 id="toGrams"></h4>
      </div>
      <div class="card ounces" id="ozCard">
        <h3>Ounces</h3>
        <h4 id="toOunces"></h4>
      </div>
    </div>
  </section>
</div>

 

 

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

 

style.css

 

@import url('https://fonts.googleapis.com/css?family=Oswald');

body {
  background: #333;
  color: #FFF;
  font-family: 'Oswald', sans-serif;
}
.container {
  width: 50%;
  margin: 3em auto;
  padding: 2em;
}
header {
  margin-bottom: 30px;
}
header h1 {
  font-size: 2em;
  text-align: center;
  text-transform: uppercase;
}
section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
select, input {
  width: 250px;
  outline: none;
  border: 0;
  height: 30px;
  border-radius: 5px;
  font-size: 16px;
  margin-bottom: 10px;
  text-indent: 10px;
}
option {
  text-indent: 10px;
}
#input {
  margin-bottom: 20px;
}
#output {
  width: 70%;
}
.card {
  margin-bottom: 10px;
  padding: 20px;
  text-transform: uppercase;
  border-radius: 10px;
  overflow: auto;
}
.card h3 {
  font-size: 1.6em;
  float: left;
}
.card h4 {
  font-size: 1.5em;
  color: #FFF !important;
  float: right;
}

.kilos {
  color: #FF9900;
  border: 3px solid #FF9900;
}
.pounds {
  color: #FF0077;
  border: 3px solid #FF0077;
}
.grams {
  color: #14BAFC;
  border: 3px solid #14BAFC;
}
.ounces {
  color: #2CCA31;
  border: 3px solid #2CCA31;
}

 

See also  Deno & MongoDB REST API Tutorial with Oak Framework

 

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

 

script.js

 

// Reference all DOM elements
const weightType = document.getElementById('weightType');
const weightValue = document.getElementById('weightValue');
const ozCard = document.getElementById('ozCard');
const kgCard = document.getElementById('kgCard');
const toPounds = document.getElementById('toPounds');
const toKilos = document.getElementById('toKilos');
const toGrams = document.getElementById('toGrams');
const toOunces = document.getElementById('toOunces');
const output = document.getElementById('output');

// Get a list of all cards
const cardArray = ['lbCard', 'kgCard', 'gmCard', 'ozCard'];
// Keep track of select box option
let wt = 0;

// Hide input box and cards on startup
weightValue.style.visibility = 'hidden';
output.style.visibility = 'hidden';

// Listen for change in select box
weightType.addEventListener('change', (e) => {
  // Show input box and cards
  weightValue.style.visibility = 'visible';
  output.style.visibility = 'visible';
  // Get current selected option value
  let val = e.target.value;
  // Hide selected card and display the rest
  if(val === '1') {
    wt = 1;
    hideCard('kgCard');
  }
  if(val === '2') {
    wt = 2;
    hideCard('lbCard');
  }
  if(val === '3') {
    wt = 3;
    hideCard('gmCard');
  }
  if(val === '4') {
    wt = 4;
    hideCard('ozCard');
  }
});

// Updates converted values on input
weightValue.addEventListener('input', (e) => {
  let val = e.target.value;
  convert(wt, val);
});

// FUNCTION: Hides currently selected card and displays the rest
function hideCard(card) {
  for(var i=0; i < cardArray.length; i++) {
    if(cardArray[i] === card) {
      let match = cardArray[i];
      document.getElementById(match).style.display = 'none';
    } else {
      document.getElementById(cardArray[i]).style.display = 'block';
    }
  }
  updateValues();
}

// FUNCTION: Used only with hideCard function
// Updates cards converted values when selected weight type has changed
function updateValues() {
  let val = weightValue.value;
  convert(wt, val);
}

// FUNCTION: Handles all conversion ratios
function convert(wt, val) {
  switch(wt) {
    case 1: // Kilos to...
      toPounds.innerHTML = (val*2.2046).toFixed(2);
      toGrams.innerHTML = val*1000;
      toOunces.innerHTML = (val*35.274).toFixed(2);
      break;
    case 2: // Pounds to...
      toKilos.innerHTML = (val/2.2046).toFixed(2);
      toGrams.innerHTML = (val/0.0022046).toFixed(2);
      toOunces.innerHTML = val*16;
      break;
    case 3: // Grams to...
      toKilos.innerHTML = val/1000;
      toPounds.innerHTML = val/500;
      toOunces.innerHTML = (val*0.035274).toFixed(4);
      break;
    case 4: // Ounces to...
      toKilos.innerHTML = (val/35.274).toFixed(3);
      toPounds.innerHTML = (val*0.062500).toFixed(3);
      toGrams.innerHTML = (val/0.035274).toFixed(4);
      break;
  }
}

 

See also  Build a Electron.js + React.js Audio Mp3 Song Player GUI Desktop App Using Howler.js Library in HTML5 & Javascript Full Project For Beginners

 

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

 

Leave a Reply