DEV Community

Cover image for Daily Code 75 | 🧮 Measuring Unit Converter
Gregor Schafroth
Gregor Schafroth

Posted on

1

Daily Code 75 | 🧮 Measuring Unit Converter

Alrigh after a bit of a break I’m back at coding!

Still working on the basics.

Today I built a measuring unit converter with HTML, CSS, and JS. It’s a nice little exercise to practice all the three of them.

I can actually build the HTML well and the JS works as well, but I find it difficult to make the CSS look really good. I guess design is really something that one needs to learn about almost as a separate discipline

My Code

Anyways, with that said here is my converter!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Currency Converter</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
    }

    h1 {
      margin: 0;
      padding: 20px;
    }

    h2 {
      margin: 0;
      padding: 10px;
    }

    p {
      margin: 0;
      padding: 3px;
    }

    .convertion-div {
      background-color: white;
      width: 450px;
      margin: 10px;
      padding: 10px;
      border-radius: 10px;
    }

    #body-container {
      background-color: rgb(181, 236, 252);
      width: 600px;
      border-radius: 10px;
      margin: 20px;
      padding: 50px;
      box-sizing: border-box;
    }

    #convertion-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    #input-container {
      margin-bottom: 50px;
    }
  </style>
</head>

<body>
  <div id="body-container">
    <div id="input-container">
      <h1>Metric/Imperial Unit Conversion</h1>
      <input type="number" id="c-number">
      <button id="c-button">Convert</button>
    </div>
    <div id="convertion-container">
      <div id="length-div" class="convertion-div">
        <h2>Length (Meters/US Feet)</h2>
        <p id="m-to-f">1 meter = 3.281 feet</p>
        <p id="f-to-m">1 feet = 0.305 meter</p>
      </div>
      <div id="volume-div" class="convertion-div">
        <h2>Volume (Liters/US Gallons)</h2>
        <p id="l-to-g">1 liter = 0.264 gallon</p>
        <p id="g-to-l">1 gallon = 3.788 liter</p>
      </div>
      <div id="mass-div" class="convertion-div">
        <h2>Mass (Kilograms/US Pounds)</h2>
        <p id="k-to-p">1 kilogram = 2.204 pound</p>
        <p id="p-to-k">1 pound = 0.454 kilogram</p>
      </div>
    </div>
  </div>
  <script>
    const convertButton = document.getElementById("c-button");
    let factor = 1

    convertButton.addEventListener("click", function () {
      let convertNumber = document.getElementById("c-number").value;
      console.log(convertNumber);
      factor = Number(convertNumber)
      document.getElementById("c-number").value = "";

      document.getElementById("m-to-f").textContent = `${factor} meter = ${(factor * 3.281).toFixed(3)} feet`;
      document.getElementById("f-to-m").textContent = `${factor} feet = ${(factor * 0.305).toFixed(3)} meter`;
      document.getElementById("l-to-g").textContent = `${factor} liter = ${(factor * 0.264).toFixed(3)} gallon`;
      document.getElementById("g-to-l").textContent = `${factor} gallon = ${(factor * 3.788).toFixed(3)} liter`;
      document.getElementById("k-to-p").textContent = `${factor} kilogram = ${(factor * 2.204).toFixed(3)} pound`;
      document.getElementById("p-to-k").textContent = `${factor} pound = ${(factor * 0.454).toFixed(3)} kilogram`;
    });

  </script>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)