convertor

convertor

HTML

<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
    <link href="/assets/styles.css" rel="stylesheet">
    <title>Multi Converter</title>
  </head>

  <body>
    <header>
      <!-- Title -->
      <h1 id="title">Multi Converter</h1>
    </header>

    <main>
      <!-- About -->
      <nav>
        <!-- Nav -->
        <ul class="nav nav-pills justify-content-center" id="main-tab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="temperature-tab" data-bs-toggle="pill" data-bs-target="#temperature" type="button" role="tab" aria-controls="temperature" aria-selected="true">
              <h2>Temperature</h2>
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="length-tab" data-bs-toggle="pill" data-bs-target="#length" type="button" role="tab" aria-controls="length" aria-selected="false">Length</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="weight-tab" data-bs-toggle="pill" data-bs-target="#weight" type="button" role="tab" aria-controls="weight" aria-selected="false">Weight</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="speed-tab" data-bs-toggle="pill" data-bs-target="#speed" type="button" role="tab"...

CSS

:root {
    --primary-color: #bbbbbb;
    --border-color: #dadce0;
    --link-color: #212529;
  }
  
  body {
    background: #ededed;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  header,
  footer {
    background-color: var(--primary-color);
    border-radius: 12px;
  }
  
  main {
    min-height: 100vh;
    min-height: calc(100vh - 126px);
    min-height: -moz-calc(100vh - 126px);
    min-height: -webkit-calc(100vh - 126px);
    position: relative;
  }
  
  a {
    color: var(--link-color);
  }
  
  a:hover {
    color: var(--link-color);
    font-weight: 500;
    text-decoration: none;
  }
  
  #title {
    margin: 0;
    padding: 0.5rem;
    font-size: 2rem;
    font-weight: 200;
    letter-spacing: 0.2rem;
    text-align: center;
  }
  
  nav ul {
    list-style-type: none;
  }
  
  nav ul li {
    margin: 1rem;
  }
  
  .nav-pills .nav-link {
    color: var(--link-color);
  }
  
  .nav-pills .nav-link.active {
    color: var(--link-color);
    background-color: var(--primary-color);
  }
  
  h2 {
    font-size: 1rem;
    margin-bottom: 0;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  input {
    width: 9rem;
    text-align: center;
    border: 0;
    padding: 0.75rem 0;
  }
  
  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }
  
  input[name="decimal"] {
    width: 4rem;
    margin: 0 10px;
    padding: 1px 2px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 0.9rem;
  }
  
  .block-input {
    display: inline-block;
    margin: 0.5rem;
    border: 1px solid var(--border-color);
  }
  
  h4 {
    font-size: 0.9rem;
    text-align: center;
    padding: 0.25rem 0;
    margin-bottom: 0;
    border-top: 1px solid var(--border-color);
    background-color: #F8F9FA;
  }

JavaScript

// type Unit = "C" | "K" | "RA" | "RO" | "N" | "DE" | "RE"

class Convertor {
    constructor(temp, unit) {
        this.tempInCelsius = this.convertToCelsius(temp, unit);
    }

    get toCelsius() {
        return this.tempInCelsius;
    }
    get toKelvin() {
        return this.tempInCelsius + 273.15;
    }
    get toFahrenheit() {
        return (this.tempInCelsius * 1.8) + 32;
    }
    get toRankine() {
        return (this.tempInCelsius * 9/5 + 491.67).toFixed(2)
    }
    get toRomer() {
        return this.tempInCelsius * 21/40 + 7.5;
    }
    get toNewton() {
        return this.tempInCelsius * 3.0303;
    }
    get toDelisle() {
        return (100 - this.tempInCelsius) * 3/2;
    }
    get toReaumur() {
        return this.tempInCelsius * 0.8;
    }

    convertToCelsius(temp, unit) {
        switch (unit) {
            case 'C':
                return temp;
            case 'K':
                return temp - 273.15;
            case 'RA':
                return (temp - 491.67) * 5/9;
            case 'RO':
                return (temp - 7.5) * 40/21;
            case 'N':
                return temp / 3.0303;
            case 'DE':
                return 100 - (temp * 2/3);
            case 'RE':
                return temp / 0.8;
        }
    }
}

window.oninput = function(event) {
    const campo = event.target.id; // Obtem o ID do campo que chamou o evento
    const i = document.getElementById("decimalTemp").value;
    const degreesCelsius = new Convertor(+(document.getElementById(campo).value), campo);
    C.value = degreesCelsius.toCelsius;
    K.value = degreesCelsius.toKelvin;
    F.value = degreesCelsius.toFahrenheit;
    RA.value = degreesCelsius.toRankine;
    RO.value = degreesCelsius.toRomer;
    N.value = degreesCelsius.toNewton;
    DE.value = degreesCelsius.toDelisle;
    RE.value = degreesCelsius.toReaumur;
  };