Add files via upload

RaquelCCabral · Oct 25, 2022 · 289a789 · 289a789
commit 289a789
Show file tree

Hide file tree

Showing 7 changed files with 260 additions and 0 deletions.
diff --git a/imagens porcentagem/porcentagem alert.png b/imagens porcentagem/porcentagem alert.png
diff --git a/imagens porcentagem/porcentagem com dados.png b/imagens porcentagem/porcentagem com dados.png
diff --git a/imagens porcentagem/porcentagem vazia.png b/imagens porcentagem/porcentagem vazia.png
diff --git a/index.html b/index.html
@@ -0,0 +1,59 @@
+<!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>Porcentagem</title>
+    <script src = 'script.js'></script>
+    <link rel = 'stylesheet' href = 'style.css'>
+</head>
+<body>
+    <div class = 'container'>
+        <div class = 'box' id = 'box1'>
+            <h3>Quantidade Equivalente</h3>
+            <input type = 'text' placeholder = 'Qtd' id = 'input1'>
+            <input type = 'text' placeholder = '%' id = 'input2'><br>
+            <input type = 'text' placeholder = '%' id = 'input3'><br>
+            <button onclick = "qtd_equivalente()">Calcular</button><br>
+            <span id = 'resultado1'></span>
+        </div>
+        <div class = 'box' id = 'box2'>
+            <h3>Quantidade Aumentada</h3>
+            <input type = 'text' placeholder = 'Qtd' id = 'input4'><br>
+            <input type = 'text' placeholder = '%' id = 'input5'><br>
+            <button onclick = "qtd_aumentada()">Calcular</button><br>
+            <span id = 'resultado2'></span>
+        </div>
+        <div class = 'box' id = 'box3'>
+            <h3>Quantidade Diminuída</h3>
+            <input type = 'text' placeholder = 'Qtd' id = 'input6'><br>
+            <input type = 'text' placeholder = '%' id = 'input7'><br>
+            <button onclick = "qtd_diminuida()">Calcular</button><br>
+            <span id = 'resultado3'></span>
+        </div>
+        <div class = 'box' id = 'box4'>
+            <h3>Porcentagem Equivalente</h3>
+            <input type = 'text' placeholder = 'Qtd' id = 'input8'>
+            <input type = 'text' placeholder = '%' id = 'input9'><br>
+            <input type = 'text' placeholder = 'Qtd' id = 'input10'><br>
+            <button onclick = "porcentagem_equivalente()">Calcular</button><br>
+            <span id = 'resultado4'></span>
+        </div>
+        <div class = 'box' id = 'box5'>
+            <h3>Aumento Percentual</h3>
+            <input type = 'text' placeholder = 'Qtd' id = 'input11'><br>
+            <input type = 'text' placeholder = 'Qtd' id = 'input12'><br>
+            <button onclick = "aumento_percentual()">Calcular</button><br>
+            <span id = 'resultado5'></span>
+        </div>
+        <div class = 'box' id = 'box6'>
+            <h3>Desconto Percentual</h3>
+            <input type = 'text' placeholder = 'Qtd' id = 'input13'><br>
+            <input type = 'text' placeholder = 'Qtd' id = 'input14'><br>
+            <button onclick = "desconto_percentual()">Calcular</button><br>
+            <span id = 'resultado6'></span>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/manual.txt b/manual.txt
@@ -0,0 +1,45 @@
+Antes de começar a utilizar as calculadoras é necessário saber qual a finalidade de cada uma, todas elas envolvem porcentagem.
+
+Obs 1.: No caso de números decimais, utilize ponto (.) ao invés de vírgula (,).
+
+1. Quantidade Equivalente:
+
+    ♦ Descrição: Calculadora para descobrir a quantidade/valor de determinado percentual.
+    ♦ Obs.: Caso tenha um valor inteiro digite no espaço da primeira porcentagem 100.
+    ♦ Ex 1.: Em um evento, estão presentes 150 pessoas, 45% delas são mulheres, qual a quantidade de mulheres nesse evento?
+        => Aqui você colocaria o 150 na 1ª caixa, 100 (de 100%, que é o total de pessoas em percentual) na 2ª, e, 45 na caixa debaixo.
+    ♦ Ex 2.: Em um evento, 250 pessoas presentes são pagantes, o que corresponde a 95% do público. Qual o público total desse evento?
+        => Nesse caso, colocaria 250 na 1ª, 95 na 2ª, e, 100 (o que corresponde em % o total) na caixa debaixo.
+
+2. Quantidade Aumentada:
+
+    ♦ Descrição: Calculadora para somar a quantidade dada ao percentual dado em cima dela.
+    ♦ Ex.: Você vai a um restaurante e seu consumo é de R$ 75, mas ainda falta incluir na conta os 10% do garçom. Qual valor da conta?
+        => Nesse caso, você colocaria o 75 na caixa de cima e o 10 na caixa debaixo.
+
+3. Quantidade Diminuída:
+
+    ♦ Descrição: Calculadora para descontar a quantidade dada pelo percentual dado em cima dela.
+    ♦ Ex.: Você vai a uma loja e suas compras deram R$ 105, mas você possui um desconto de 10% na sua compra. Qual o valor da compra?
+        => Nesse caso, você colocaria o 105 na caixa de cima e o 10 na caixa debaixo.
+
+4. Porcentagem Equivalente:
+
+    ♦ Descrição: Calculadora para descobrir o percentual de determinada quantidade.
+    ♦ Obs.: Caso tenha um valor inteiro digite no espaço da primeira porcentagem 100.
+    ♦ Ex 1.: Em um evento, estão presentes 150 pessoas, 65 são mulheres, qual a porcentagem de mulheres nesse evento?
+        => Aqui você colocaria o 150 na 1ª caixa, 100 (de 100%, que é o total de pessoas em percentual) na 2ª, e, 65 na caixa debaixo.
+    ♦ Ex 2.: Você está no posto de gasolina e pagou R$ 70 pra encher meio tanque. Quantos % do tanque você preencheria com R$ 20?
+        => Nesse caso, colocaria 70 na 1ª, 50 (já que representa metade do tanque) na 2ª, e, 20 na caixa debaixo.
+
+5. Aumento Percentual:
+
+    ♦ Descrição: Calculadora para definir quantos % de aumento teve de um caso pro outro.
+    ♦ Ex.: Você vai pagar uma conta de R$ 350 e percebe que no mês passado essa conta foi de R$ 285. Quantos % sua conta aumentou?
+        => Nesse caso, você colocaria o 285 na caixa de cima e o 350 na caixa debaixo.
+
+6. Desconto Percentual:
+
+    ♦ Descrição: Calculadora para definir quantos % de desconto teve de um caso pro outro.
+    ♦ Ex.: Você foi comprar um produto por R$ 80, ao passar no caixa, recebeu um desconto e seu produto custou R$ 55. Quantos % de desconto você teve?
+        => Nesse caso, você colocaria o 80 na caixa de cima e o 55 na caixa debaixo.
diff --git a/script.js b/script.js
@@ -0,0 +1,83 @@
+function qtd_equivalente(){
+    let qtd = parseFloat(document.getElementById('input1').value); 
+    let porcentagem1 = parseFloat(document.getElementById('input2').value);
+    let porcentagem2 = parseFloat(document.getElementById('input3').value);
+    let resultado = (porcentagem2*qtd/porcentagem1).toFixed(2);
+    if(isNaN(qtd) || isNaN(porcentagem1) || isNaN(porcentagem2)){
+        alert('Certifique-se que todos os campos estejam preenchidos corretamente.');
+    }
+    else{
+        document.getElementById('resultado1').innerHTML = resultado;
+    }
+};
+
+function qtd_aumentada(){
+    let qtd = parseFloat(document.getElementById('input4').value); 
+    let porcentagem = parseFloat(document.getElementById('input5').value);
+    let resultado = (qtd + qtd*porcentagem/100).toFixed(2);
+    if(isNaN(qtd) || isNaN(porcentagem)){
+        alert('Certifique-se que todos os campos estejam preenchidos corretamente.');
+    }
+    else{
+        document.getElementById('resultado2').innerHTML = resultado;
+    }
+};
+
+function qtd_diminuida(){
+    let qtd = parseFloat(document.getElementById('input6').value); 
+    let porcentagem = parseFloat(document.getElementById('input7').value);
+    let resultado = (qtd - qtd*porcentagem/100).toFixed(2);
+    if(isNaN(qtd) || isNaN(porcentagem)){
+        alert('Certifique-se que todos os campos estejam preenchidos corretamente.');
+    }
+    else{
+        document.getElementById('resultado3').innerHTML = resultado;
+    }
+};
+
+function porcentagem_equivalente(){
+    let qtd1 = parseFloat(document.getElementById('input8').value);
+    let porcentagem = parseFloat(document.getElementById('input9').value);
+    let qtd2 = parseFloat(document.getElementById('input10').value);
+    let resultado = (porcentagem*qtd2/qtd1).toFixed(2) + '%';
+    if(isNaN(qtd1) || isNaN(porcentagem) || isNaN(qtd2)){
+        alert('Certifique-se que todos os campos estejam preenchidos corretamente.');
+    }
+    else{
+        document.getElementById('resultado4').innerHTML = resultado;
+    }
+};
+
+function aumento_percentual(){
+    let qtd1 = parseFloat(document.getElementById('input11').value); 
+    let qtd2 = parseFloat(document.getElementById('input12').value);
+    if(isNaN(qtd1) || isNaN(qtd2)){
+        alert('Certifique-se que todos os campos estejam preenchidos corretamente.');
+    }
+    else{
+        if(qtd2 >= qtd1){
+            let resultado = (qtd2*100/qtd1 - 100).toFixed(2) + '%';
+            document.getElementById('resultado5').innerHTML = resultado;
+        }
+        else{
+            alert('A quantidade 2 tem que ser maior que a quantidade 1.');
+        }
+    }
+};
+
+function desconto_percentual(){
+    let qtd1 = parseFloat(document.getElementById('input13').value); 
+    let qtd2 = parseFloat(document.getElementById('input14').value);
+    if(isNaN(qtd1) || isNaN(qtd2)){
+        alert('Certifique-se que todos os campos estejam preenchidos corretamente.');
+    }
+    else{
+        if(qtd2 <= qtd1){
+            let resultado = (100 - qtd2*100/qtd1).toFixed(2) + '%';
+            document.getElementById('resultado6').innerHTML = resultado;
+        }
+        else{
+            alert('A quantidade 2 tem que ser menor que a quantidade 1.');
+        }
+    }
+};
diff --git a/style.css b/style.css
@@ -0,0 +1,73 @@
+body{
+    background-color: black;
+}
+
+.container{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.box{
+    width: 50%;
+    margin: 25px auto;
+    border-radius: 20px;
+    line-height: 50px;
+    min-height: 300px;
+    align-self: center;
+    text-align: center;
+}
+
+#box1{
+    /*background-color: rgb(246, 178, 51);*/
+    background: rgb(255,46,0);
+    background: linear-gradient(90deg, rgba(255,46,0,1) 0%, rgba(237,159,12,1) 100%);
+}
+
+#box2{
+    /*background-color: rgb(245, 190, 89);*/
+    background: rgb(237,159,12);
+    background: linear-gradient(90deg, rgba(237,159,12,1) 0%, rgba(241,255,0,1) 100%);
+}
+
+#box3{
+    /*background-color: rgb(243, 243, 104);*/
+    background: rgb(241,255,0);
+    background: linear-gradient(90deg, rgba(241,255,0,1) 0%, rgba(21,200,44,1) 100%);
+}
+
+#box4{
+    /*background-color: rgb(74, 166, 252);*/
+    background: rgb(21,200,44);
+    background: linear-gradient(90deg, rgba(21,200,44,1) 0%, rgba(0,212,255,1) 100%);
+}
+
+#box5{
+    /*background-color: rgb(86, 214, 237);*/
+    background: rgb(0,212,255);
+    background: linear-gradient(90deg, rgba(0,212,255,1) 0%, rgba(9,9,121,1) 100%);
+}
+
+#box6{
+    /*background-color: rgb(108, 237, 237);*/
+    background: rgb(9,9,121);
+    background: linear-gradient(90deg, rgba(9,9,121,1) 0%, rgba(149,0,255,1) 50%);
+}
+
+input{
+    width: 15%;
+    font-size: large;
+    text-align: center;
+}
+
+button{
+    background-color: black;
+    color: white;
+    border-radius: 10%;
+    font-size: large;
+}
+
+span{
+    font-size: larger;
+    font-style: bold;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}