Arquivos Tutoriais - Página 2 de 3

Códigos necessários para o projeto:

Neste artigo, será disponibilizado para você os códigos que serão utilizados como base no nosso projeto de Calculadora, baseado em nossa Playlist do YouTube.

Para realização deste projeto, será necessário que você tenha conhecimentos básicos de HTML, e JavaScript. É Interessante que você tenha acompanhado a nossa Playlist no YouTube. Playlist JavaScript Básico

Copie o código HTML que será utilizado no projeto:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Calculadora</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="main.css" />
</head>

<body>
    <div class="container areaCalculadora">
        <div class="row">
            <input id="inputDisplayResultado" type="text" value="" readonly />
        </div>
        <div class="row justify-content-end">
            <div class="col-3">
                <button id="btnLimpar" type="button" class="btn btn-outline-warning">C</button>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <button id="btnValor7" type="button" class="btn btn-outline-primary">7</button>
            </div>
            <div class="col-3">
                <button id="btnValor8" type="button" class="btn btn-outline-primary">8</button>
            </div>
            <div class="col-3">
                <button id="btnValor9" type="button" class="btn btn-outline-primary">9</button>
            </div>
            <div class="col-3">
                <button id="btnDividir" type="button" class="btn btn-outline-success">/</button>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <button id="btnValor4" type="button" class="btn btn-outline-primary">4</button>
            </div>
            <div class="col-3">
                <button id="btnValor5" type="button" class="btn btn-outline-primary">5</button>
            </div>
            <div class="col-3">
                <button id="btnValor6" type="button" class="btn btn-outline-primary">6</button>
            </div>
            <div class="col-3">
                <button id="btnMultiplicar" type="button" class="btn btn-outline-success">*</button>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <button id="btnValor1" type="button" class="btn btn-outline-primary">1</button>
            </div>
            <div class="col-3">
                <button id="btnValor2" type="button" class="btn btn-outline-primary">2</button>
            </div>
            <div class="col-3">
                <button id="btnValor3" type="button" class="btn btn-outline-primary">3</button>
            </div>
            <div class="col-3">
                <button id="btnSubtrair" type="button" class="btn btn-outline-success">-</button>
            </div>
        </div>
        <div class="row">
            <div class="col-3">
                <button id="btnValor0" type="button" class="btn btn-outline-primary">0</button>
            </div>
            <div class="col-3">
                <button id="btnPonto" type="button" class="btn btn-outline-success">.</button>
            </div>
            <div class="col-3">
                <button id="btnResultado" type="button" class="btn btn-outline-success">=</button>
            </div>
            <div class="col-3">
                <button id="btnSoma" type="button" class="btn btn-outline-success">+</button>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="main.js"></script>
</body>

</html>

Você pode utilizar também este código CSS para formatar os botões e campo de preenchimento da sua calculadora:

#inputDisplayResultado{
    font-size: 24px;
    width: 100%;
    text-align: right;
}

.areaCalculadora{
    max-width: 600px;
    margin: 0 auto;
}

.row div{
    padding: 0
}

.row div button{
    width: 100%;
}

A partir deste código, você deverá criar um arquivo chamado main.js e nele será inserida a lógica necessária para o funcionamento da calculadora.