Day2 of 100 days of code

Today I created a unit converter app which deals with length, volume and weight conversion. The mini project will take in a variable and then convert in length, volume and weight.

Below is the converter app

Here is the html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/converter.css">
    <title>Document</title>
</head>
<body onload="conversion()">

  <section >

      <h2>Metric/Imperial unit conversion</h2>
      <div class="unit">
      <p id ="unit-value">20</p>
    </div>
  </section>
  <section>

<p class="units-body"> Length (Meter/Feet)</p>


        <p id ='length-measure'>20 meters = 65.616 feet | 20 feet = 6.096 meters
</p>
<p class ='units-body'>Volume (Liters/Gallons)</p>
<p id ="volume-measure">20 liters = 5.284 gallons | 20 gallons = 75.708 liters</p>
<p class="units-body">Mass (Kilograms/Pounds)</p>
<p id ="mass-measure">20 kilos = 44.092 pounds | 20 pounds = 9.072 kilos</p>


  </section>
    <script src="js/converter.js"></script>
</body>
</html>

Below is javascript code

let unit = 30;
document.getElementById("unit-value").textContent = unit;
let length2 = document.getElementById("length-measure");
let volume = document.getElementById("volume-measure");
let mass = document.getElementById("mass-measure");
var x , y, a,b,c,d;

function conversion() {
    x = (unit * 3.281).toFixed(3);
    y = (unit / 3.281).toFixed(3);
    a = (unit / 3.785).toFixed(3);
    b = (unit * 3.785).toFixed(3);
    c = (unit * 2.205).toFixed(3);
    d = (unit / 2.205).toFixed(3);
    length2.textContent = unit + "metres" + "= " + x + "feet" + "|" + unit + " feet" + "= " + y + "meters "
    volume.textContent = unit + "Litres" + "= " + a + "gallons" + "|" + unit + " gallons" + "= " + b + "Litres "
    mass.textContent = unit + "Kilos" + "= " + c + "pounds" + "|" + unit + " pounds" + "= " + d + "kilos "
}

The CSS below

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-repeat: no-repeat;
  background: linear-gradient(#585dfe, #fb3796 40%, #1f2937 5%, #1f2937);
  color: white;
  font-family: Georgia, "Times New Roman", Times, serif;
  text-align: center;
  font-size: 16px;
}

h2 {
  padding-top: 2rem;
}
.unit {
  font-size: 97.57px;
  font-weight: 800;
}
.units-body {
  font-weight: bold;
}
#length-measure {
  margin-bottom: 4%;
  font-weight: normal;
}
#volume-measure {
  margin-bottom: 4%;
  font-weight: normal;
}
#mass-measure {
  margin-bottom: 4%;
  font-weight: normal;
}

Day2 of 100 days of Code