[Projeto] Desafio calculadora | Lógica de programação: praticando com desafios

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Lucas Vinicius Cornelius

| 85.9k xp | 7 posts

Segue abaixo a maneira que desenvolvi o desafio da calculadora, aceito qualquer feedback!!

link do repositório no github: https://github.com/Lucas-Cornelius/calculadora

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.2.0/uicons-bold-rounded/css/uicons-bold-rounded.css'>
    <link rel="stylesheet" href="style/style.css">
    <title>Calculadora</title>
</head>
<body>
    <section class="container">
        <article class="container-display">
            <p id="display"></p>
        </article>
        <article class="container-grid">
            <button onclick="sendValue('clear')" class="second-button"><i class="fi fi-br-c"></i></button>
            <button onclick="sendValue('%')" class="second-button"><i class="fi fi-br-percentage"></i></button>
            <button onclick="sendValue('/')" class="second-button"><i class="fi fi-br-divide"></i></button>
            <button onclick="sendValue('*')" class="second-button"><i class="fi fi-br-cross"></i></button>
            <button onclick="sendValue(7)" ><i class="fi fi-br-7"></i></button>
            <button onclick="sendValue(8)"><i class="fi fi-br-8"></i></button>
            <button onclick="sendValue(9)"><i class="fi fi-br-9"></i></button>
            <button onclick="sendValue('-')" class="second-button"><i class="fi fi-br-minus"></i></button>
            <button onclick="sendValue(4)"><i class="fi fi-br-4"></i></button>
            <button onclick="sendValue(5)"><i class="fi fi-br-5"></i></button>
            <button onclick="sendValue(6)"><i class="fi fi-br-6"></i></button>
            <button onclick="sendValue('+')" class="second-button"><i class="fi fi-br-plus"></i></button>
            <button onclick="sendValue(1)"><i class="fi fi-br-1"></i></button>
            <button onclick="sendValue(2)"><i class="fi fi-br-2"></i></button>
            <button onclick="sendValue(3)"><i class="fi fi-br-3"></i></button>
            <button onclick="sendValue(0)"><i class="fi fi-br-0"></i></button>
            <button onclick="sendValue('.')"><i class="fi">.</i></button>
            <button onclick="sendValue('del')"><i class="fi fi-br-delete"></i></button>
            <button onclick="sendValue('=')" class="second-button enter"><i class="fi fi-br-equals"></i></button>
        </article>
    </section>
    <p class="credits">Uicons by <a href="https://www.flaticon.com/uicons">Flaticon</a></p>
    <script src="js/app.js"></script>
</body>
</html>

function sendValue(x) {
    let valor = document.getElementById('display'); 

    if(x == '=') {
        let porcentagem = valor.innerHTML.includes('%');

        if(porcentagem) {
            let valorArray = valor.innerHTML.split('%');
            calculo = eval(valorArray[0])*eval(valorArray[1])*0.01;
            valor.innerHTML = calculo;
            
        }
        
        valor.innerHTML = eval(valor.innerHTML);

        if(isNaN(parseInt(valor.innerHTML))) {
            alert('Houve um erro, tente novamente!');
            valor.innerHTML = '';
            return
        }
        
        return;
    } else if(x == 'clear') {
        valor.innerHTML = '';
        return;
    } else if(x == 'del') {
        let novoValor = ((valor.innerHTML).split('')).slice(0,-1);
        valor.innerHTML = novoValor.join('');
        return;
    } else {
        document.getElementById('display').innerHTML += x;
    }

}

2 respostas

por Lucas Vinicius Cornelius

| 85.9k xp | 7 posts

07/04/2024

style.css não coube então vou mandar aqui:

:root {
    --gradient-color: radial-gradient(circle, rgba(48,0,22,1) 0%, rgba(0,22,47,1) 100%);
    --text-color: #EEE4B1;
    --text-color-hover: #aca68d;
    --primary-color: #8b4769;
    --primary-color-hover: #583948;
    --second-color: #a17260;
    --second-color-hover: #69534a;
    --border-color: white;
}

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--gradient-color);
}

.fi {
    font-size: 2em;
    color: var(--text-color);
}

.container {
    border: 3px solid var(--border-color);
    width: 30%;
    height: 80%;
    padding: .5em;
    border-radius: 1em;
}

.container-display {
    width: 100%;
    height: 28%;
    border-bottom: 1px solid var(--border-color);
    border-radius: 16px;
    margin-bottom: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
    overflow: hidden;
    color: var(--border-color);
}

.container-grid {
    display: grid;
    width: 100%;
    height: 70%;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 20% 20% 20% 20% 20%;
}

button {
    border-radius: 16px;
    background-color: var(--second-color);
}

button:hover {
    background-color: var(--second-color-hover);
}

.second-button {
    background-color: var(--primary-color);
}

.second-button:hover {
    background-color: var(--primary-color-hover);
}

.enter {
    grid-row: 4;
    grid-column: 4;
    height: 200%;
    background-color: var(--text-color);
}

.enter:hover {
    background-color: var(--text-color-hover);
}

.fi-br-equals {
    color: var(--primary-color);
}

.credits {
    height: 3%;
    color: var(--border-color);
}

.credits a {
    color: var(--border-color);
}

@media screen and (max-width: 800px) {
    .container {
        width: 80%;
    }
}

solução!

por Sarah Ocy Sousa Medeiros

| 1840.1k xp | 3790 posts

Alura Scuba Team Monitora de Fórum Ops

09/04/2024

Olá, Lucas! Tudo bem?

Excelente código, parabéns! Espero que continue a explorar os conteúdos para ampliar seu conhecimento e desenvolver novas habilidades. Caso tenha restado alguma dúvida em relação a qualquer conteúdo do curso ou atividade, não hesite em perguntar. Estou disponível e ficarei super feliz em poder ajudar!

Um forte abraço e bons estudos!

Mergulhe em programação