Projeto da calculadora, esta fazendo as 4 operações e precisa de algumas melhorias, mas acredito que deu para treinar as ultimas aulas. Sou iniciante em escrever códigos mas escrevi esse sozinho, apenas o front-end que eu peguei do gpt, mas mesmo assim estava com muitos erros que eu corrigi, ficarei muito grato por um feedback.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora Simples</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
background-color: #f7f7f7;
font-family: Arial, sans-serif;
}
.calculator {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
background-color: green;
}
.calculator-screen {
width: 97%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
font-size: 1.5em;
text-align: right;
}
.calculator-keys {
width: 50%;
}
.calculator-keys button {
width: calc(25% - 6px);
padding: 10px;
margin: 3px;
border: none;
border-radius: 5px;
background-color: #e0e0e0;
font-size: 1em;
}
.operator {
background-color: #fe9241;
}
.equals-sign {
background-color: #46cf7a;
}
.all-clear {
background-color: #f86d50;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" class="calculator-screen" id = "display" value="" disabled>
<div class="calculator-keys">
<button onclick="limpar()"class="all-clear" value="all-clear">AC</button>
<button onclick="operacao(id)"class="operator" id="/" value="/">/</button>
<button onclick="operacao(id)"class="operator" id="*" value="*">*</button>
<button onclick="operacao(id)"class="operator" id="-" value="-">-</button>
<button onclick="operacao(id)"class="operator" id="+" value="+">+</button>
<button class="operator" value="x²">x²</button>
<button onclick="botao(id)" id = "7" value="7">7</button>
<button onclick="botao(id)" id = "8" value="8">8</button>
<button onclick="botao(id)" id = "9" value="9">9</button>
<button onclick="botao(id)" id = "4"" value="4">4</button>
<button onclick="botao(id)" id = "5" value="5">5</button>
<button onclick="botao(id)" id = "6" value="6">6</button>
<button onclick="botao(id)" id = "1" value="1">1</button>
<button onclick="botao(id)" id = "2"value="2">2</button>
<button onclick="botao(id)" id = "3" value="3">3</button>
<button onclick="botao(id)" id = "0" value="0">0</button>
<button onclick="" id = "." value=".">.</button>
<button onclick="igual()" class="equals-sign" value="=">=</button>
</div>
</div>
<script src="calculadora.js"></script>
</body>
</html>
JS
let display = document.getElementById('display');
let operador
let valor1
let valor2
function botao(id){
let numero = parseInt(document.getElementById(`${id}`).value);
if (display.value == ''){
display.value = numero;
}
else if (display.value == 0){
display.value = numero;
}
else {
display.value = display.value+numero;
}
console.log(`o botao ${numero} foi clicado`);
}
function operacao(id){
valor1 = parseInt(display.value);
operador = id;
display.value = '';
console.log(`${operador}`)
}
function igual(){
valor2 = parseInt(display.value);
if (operador == "/"){
if (valor1 == 0){
display.value = 'Impossivel dividir por 0'
}
else{
resultado = valor1/valor2;
display.value = resultado;
}
}
else if(operador == "+"){
resultado = valor1+valor2;
display.value = resultado;
}
else if(operador == "-"){
resultado = valor1-valor2;
display.value = resultado;
}
else {
resultado = valor1*valor2;
display.value = resultado;
}
}
function limpar(){
display.value = '';
valor1 = '';
valor2 = '';
operador = '';
}
