pages/imc.html

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="../assets/css/styles.imc.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
      integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <script src="../assets/js/script.imc.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculadora IMC</title>
  </head>
  <body>
    <div id="back-button">
      <a href="../index.html">
        <button>Voltar para Home</button>
      </a>
    </div>
    <main>
      <section id="picture">
        <img src="../assets/images/picture.svg" alt="" />
      </section>

      <section id="form">
        <div id="calculator">
          <h1 id="title">Calculadora - IMC</h1>

          <div class="input-box">
            <label for="weight">Peso em kg</label>
            <div class="input-field">
              <i class="fa-solid fa-weight-hanging icon"></i>
              <input type="number" id="weight" name="weight" required />
              <span class="unit">kg</span>
            </div>
          </div>

          <div class="input-box">
            <label for="height">Altura em metros</label>
            <div class="input-field">
              <i class="fa-solid fa-ruler icon"></i>
              <input type="number" id="height" name="height" required />
              <span class="unit">m</span>
            </div>
          </div>

          <button id="calculate" onclick="calculateIMC()">Calcular</button>
        </div>

        <div id="infos" class="hidden">
          <div id="result">
            <div id="imc">
              <span id="value"></span>
              <span id="status">Seu IMC</span>
            </div>

            <div id="description">
              <span id="text"></span>
            </div>
          </div>

          <div id="more-infos">
            <a href="https://mundoeducacao.uol.com.br/saude-bem-estar/imc.htm">
              Mais informações sobre o IMC
              <i class="fa-solid fa-arrow-up-right-from-square"></i>
            </a>
          </div>
        </div>
      </section>
    </main>
  </body>
</html>