Desafio Javacript Matemática #3 Dividendo, Divisor, Quociente e Resto

Faça uma tabela cujos cabeçalhos são: Dividendo, Divisor, Quociente e Resto.

• Se preencher o Dividendo e o Divisor o programa completa a tabela escrevendo o Quociente e o Resto.

• Se preencher o Dividendo e o Quociente o programa completa a tabela escrevendo o Divisor e o Resto.

Resolva o problema, coloque o código no post e coloque o código em algum site de compilação online tipo o https://codepen.io/ ou https://jsfiddle.net/ ou https://codesandbox.io ou https://stackblitz.com/ ou qualquer outro que dê para compartilhar a página.

O primeiro que responder corretamente ganha 1000 xp (pois vai ter a resposta marcada como solucionada).

E depois de 24 horas se ninguém postar a resposta eu mesmo posto.

Resolvido:

https://codepen.io/ThiagoDiasV/pen/zMdYoo

  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="estilo.css" />
  </head>
  <body>
    <h2>Calculadora de divisão</h2>
    <p>Insira dois valores, dentre dividendo, divisor ou quociente, e aperte o botão para calcular:</p>
    <form id="formulario">
        <table id="tabela">
          <thead>
              <tr>
                  <th>Dividendo</th>
                  <th>Divisor</th>
                  <th>Quociente</th>
                  <th>Resto</th>
              </tr>
          </thead>
          <tbody>
              <tr id="linha-valores">
                  <td><input class="campo" id="dividendo" name="dividendo" type="text" placeholder="Insira dividendo"/></td>
                  <td><input class="campo" id="divisor" name="divisor" type="text" placeholder="Insira divisor"/></td>
                  <td><input class="campo" id="quociente" name="quociente" type="text" placeholder="Insira quociente"/></td>
                  <td class="campo" id="resto"></td>
              </tr>
          </tbody>
      </table>
      <br />
      <button id="botao-calcular">Calcular divisão</button>
      <br />
      <br />
      <button id="botao-limpar">Limpar valores</button>
    </form>
  </body>
  <script>
    var botaoCalcular = document.querySelector("#botao-calcular");
    botaoCalcular.addEventListener('click', function(event) {
      event.preventDefault();
      var valores = document.querySelectorAll(".campo");
      var dividendo = valores[0].value;
      var divisor = valores[1].value;
      var quociente = valores[2].value;
      var resto = valores[3].value;
      if(dividendo.length > 0 && divisor.length > 0) {
        var resultadoQuociente = Math.trunc(dividendo / divisor);
        var resultadoResto = dividendo % divisor;
        var tdQuociente = document.querySelector("#quociente");
        var tdResto = document.querySelector("#resto");
        tdQuociente.value = resultadoQuociente;
        tdResto.textContent = resultadoResto;
      }else if (dividendo.length > 0 && quociente.length > 0) {
        var resultadoDivisor = Math.trunc(dividendo / quociente);
        var resultadoResto = dividendo - (quociente * resultadoDivisor);
        var tdDivisor = document.querySelector("#divisor");
        var tdResto = document.querySelector("#resto");
        tdDivisor.value = resultadoDivisor;
        tdResto.textContent = resultadoResto;
      }else{
        alert('Faltou um dos valores.');
      }
    });
    var botaoLimpar = document.querySelector("#botao-limpar");
    botaoLimpar.addEventListener('click', function(){
      location.reload();
    });

  </script>
</html>

Mergulhe em IA generativa do zero com Alura e Google

5 aulas gratuitas | com certificado