JSFiddle - React, Tailwind, and code Playground

by andredgusmao

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">
    <title>Calculadora de páginas</title>
</head>
<body>
    <h1 id="msg">Calculadora de páginas</h1>
    <h3 id="resultado">Resultado</h3>
    <div style="margin: 0 auto;">
        <label for="colegas">Colegas: </label>
        <input type="text" id="colegas" placeholder="número de colegas"/>
        <br/>
        <br/>
        <label for="paginas">Páginas: </label>
        <input type="text" id="paginas" placeholder="número de páginas do dever de cas"/>
        <br/>
    </div>
    <div style="padding: 1em 0;">
        <button id="calcular">Calcular!</button>
        <button id="resetar">Resetar</button>
    </div>

    <h5>
    <a href="https://www.codewars.com/kata/55f9b48403f6b87a7c0000bd">Fonte</a>
    </h5>

    <script src="funcao.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript

function calculaNumeroPaginas(colegas, paginas) {

}




























var resultado = document.getElementById('resultado');
var colegas = document.getElementById('colegas');
var paginas = document.getElementById('paginas');
var calcular = document.getElementById('calcular');
var resetar = document.getElementById('resetar');

calcular.addEventListener('click', () => { 
    colegas.disabled = true;
    paginas.disabled = true; 
    
    let cVal = colegas.value;
    let pVal = paginas.value;
    
    resultado.innerText = "Resultado: " + calculaNumeroPaginas(cVal, pVal) + " páginas";
});

resetar.addEventListener('click', () => { 
    colegas.disabled = false;
    paginas.disabled = false;

    colegas.value = "";
    paginas.value = "";

    resultado.innerText = "Resultado"; 
})