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>

Daily Code 75 | 🧮 Measuring Unit Converter

My Code

Subscribe to my newsletter

Gregor Schafroth

Gregor Schafroth