Crie uma calculadora simples com HTML, CSS e JavaScriptReviltec

Neste tutorial, construiremos uma calculadora simples que nos permitirá realizar operações básicas como:

subtração
Adição
multiplicação
divisão

Usaremos HTML, CSS e JavaScript para projetar a calculadora e implementar as diversas funcionalidades de operações. A calculadora terá um display e vários botões.

Ao final deste tutorial, você deverá ter uma calculadora totalmente funcional semelhante a esta:

<br />

Comece com HTML e CSS

Começaremos construindo a interface com HTML e CSS. Na tua index.html arquivo, defina a estrutura. Teremos um contêiner de grade externo div elemento para abrigar todo o layout. O contêiner usará um layout de grade, permitindo alinhar nosso conteúdo em linhas e colunas e proporcionando flexibilidade.

Dentro do grid-container, crie outro div chamada calculadora-grid contendo a exibição da área de texto e todos os elementos do botão.

Você pode preferir usar uma entrada para a exibição, mas uma área de texto permite que o resultado seja quebrado se for uma string muito longa.

 class = "grid-container">
     class = "calculator-grid ">
         type="text" id = "inputtext" placeholder="0">
        C
        DEL
        
        +
        7
        8
        9
        -
        4
        5
        6
        *
        1
        2
        3
        /
        00
        0
        .
        =
    
    

Estilizando a calculadora com CSS

Aplicar o display:grid atributo para tornar o grid-container uma grade. align-items: center e justify-content: center garantirá que o conteúdo seja centralizado horizontal e verticalmente no elemento contêiner.

.grid-container {
    display: grid;
    align-items: center;
    justify-content: center; 
}

O próximo passo é estilizar o calculator-grid Elemento div, que contém os botões e o elemento textarea. CSS fornece a propriedade grid-template-columns que define as colunas e tamanhos de um contêiner de grade. No nosso caso, grid-template-columns: repeat(4, 1fr) significa que teremos quatro colunas de largura e tamanho iguais.

O grid-gap: 1px; regra junto com uma cor de fundo criará uma borda de espaço igual entre todas as células.

.calculator-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-gap: 1px;
    background-color: #999;
} 

Estilizando os botões

Vamos aplicar os seguintes estilos aos botões para torná-los mais atraentes. Estamos usando a fonte DM Mono do Google para esta interface, para nos dar uma sensação genuína de calculadora.

.calculator-grid button {
    font-family: 'DM Mono', monospace;
    font-size: 25px;
    background-color: #fff;
    border: none;
    cursor: pointer;
} 

Estilizando a tela

Queremos que a exibição ocupe toda a largura de 4 colunas e o texto alinhado no final. Também aplicamos uma cor de fundo para dar separação visível aos botões.

textarea {
    grid-column: span 4;
    font-family: 'DM Mono', monospace;
    font-size: 25px;
    text-align: end;
    background-color: #fad3cb;
    padding: 15px;
    border: none;
}

Também queremos que os 4 botões na parte inferior tenham uma cor de fundo diferente.

1	.calculator-grid button:nth-child(n+18) {
2	background-color: tomato;
3	}

Também queremos aplicar uma cor de fundo escura quando os botões passam o mouse.

button:hover,
.calculator-grid button:nth-child(n+18):hover {
    background-color: #440b15;
    color: white;
    transition: 0.2s;
}

Funcionalidade de operações matemáticas com JavaScript

Agora terminamos a interface, então vamos adicionar o JavaScript para tornar a calculadora funcional. Começaremos selecionando o #inputtext elemento e os botões.

1	const input = document.getElementById('inputtext');
2	const buttons = document.querySelectorAll('button');

A seguir, vamos criar uma função chamada operation que pegará o valor do botão clicado como argumento e fará o seguinte:

se o valor for C, limparemos o conteúdo do elemento de entrada.
se o valor for DEL, removeremos o último caractere do elemento de entrada. Por exemplo, se o valor atual na entrada for 123, clicar no botão DEL removerá 3; se você clicar no botão DEL novamente, o valor 2 será removido e assim por diante.
se o valor for =, aplicaremos outra função que retornará o resultado da expressão.

A função de operação

Vamos criar o operation() função.

function operation(buttonValue) {
    if (buttonValue === 'C') {
        input.value = '';
    } else if (buttonValue === 'DEL') {
        input.value = input.value.slice(0, -1);
    } else if (buttonValue === '=') {
        input.value = calculate(input.value);
    } else {
        input.value += buttonValue;
    }
}

A Função Calcular

O calculate() função toma a expressão como argumento. Dentro de calculate() função, criamos uma nova função com o Function() construtor. A nova função retorna o resultado da avaliação da expressão. Então, chamamos a função para executar a expressão. Se a expressão não puder ser avaliada, retornamos “Operação Malformada”.

function calculate(expression) {
    console.log(expression);
    try {
        return new Function('return ' + expression)();
    } catch (error) {
        return 'Malformed Operation';
    }
}

Por fim, para cada botão, obteremos seu valor, adicionaremos um ouvinte de evento que escutará os cliques e aplicaremos a operação function().

buttons.forEach(button=> { 
    let buttonValue = button.innerText;
    button.addEventListener('click', function(){operation(buttonValue)})

});

Código JavaScript completo

O código JavaScript completo é assim:

const input = document.getElementById('inputtext');
const buttons = document.querySelectorAll('button');

function calculate(expression) {
    console.log(expression);

    try {
        return new Function('return ' + expression)();
    } catch (error) {
        return 'Malformed Operation';
    }
}


function operation(buttonValue) {
    if (buttonValue === 'C') {
        input.value = '';
    } else if (buttonValue === 'DEL') {
        input.value = input.value.slice(0, -1);
    } else if (buttonValue === '=') {
        input.value = calculate(input.value);
    } else {
        input.value += buttonValue;
    }
}

buttons.forEach(button => {
    let buttonValue = button.innerText;
    button.addEventListener('click', function () {
        operation(buttonValue);
    });
});

Como lembrete, veja nossa calculadora em ação abaixo:

<br />

Conclusão

Este tutorial abordou como construir uma calculadora básica. Agora é a sua vez de experimentar e criar o seu próprio! Divirta-se construindo!

Relacionado

Posted by admin

Tagged with

1	class = "grid-container">
2	class = "calculator-grid ">
3	type="text" id = "inputtext" placeholder="0">
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

1	.grid-container {
2	display: grid;
3	align-items: center;
4	justify-content: center;
5	}

1	.calculator-grid {
2	display: grid;
3	grid-template-columns: repeat(4, 1fr);
4	grid-template-rows: repeat(6, 1fr);
5	grid-gap: 1px;
6	background-color: #999;
7	}

1	.calculator-grid button {
2	font-family: 'DM Mono', monospace;
3	font-size: 25px;
4	background-color: #fff;
5	border: none;
6	cursor: pointer;
7	}

1	textarea {
2	grid-column: span 4;
3	font-family: 'DM Mono', monospace;
4	font-size: 25px;
5	text-align: end;
6	background-color: #fad3cb;
7	padding: 15px;
8	border: none;
9	}

1	button:hover,
2	.calculator-grid button:nth-child(n+18):hover {
3	background-color: #440b15;
4	color: white;
5	transition: 0.2s;
6	}

1	function operation(buttonValue) {
2	if (buttonValue === 'C') {
3	input.value = '';
4	} else if (buttonValue === 'DEL') {
5	input.value = input.value.slice(0, -1);
6	} else if (buttonValue === '=') {
7	input.value = calculate(input.value);
8	} else {
9	input.value += buttonValue;
10	}
11	}

1	function calculate(expression) {
2	console.log(expression);
3	try {
4	return new Function('return ' + expression)();
5	} catch (error) {
6	return 'Malformed Operation';
7	}
8	}

1	buttons.forEach(button=> {
2	let buttonValue = button.innerText;
3	button.addEventListener('click', function(){operation(buttonValue)})
4
5	});