adicionado maquininha da caixa

kaliztro · Oct 29, 2023 · 536977a · 536977a
1 parent 5e441dd
commit 536977a
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 4 deletions.
diff --git a/css/input.css b/css/input.css
@@ -91,6 +91,27 @@ input:focus~.cielo-barra-border {
     width: 10.3rem; 
 }
 
+/* Efeito para o input caixa */
+
+.caixa-barra {
+    --border-after-color: #ffc013;
+    position: relative;
+}
+
+.caixa-barra-border {
+    position: absolute;
+    background: var(--border-after-color);
+    width: 0%;
+    height: 2px;
+    bottom: 0;
+    left: 2.8rem;
+    transition: 0.3s;
+}
+
+input:focus~.caixa-barra-border {
+    width: 10.2rem; 
+}
+
 /* Efeito para o input Dinheiro */
 
 .dinheiro-barra {

diff --git a/css/light.css b/css/light.css
@@ -13,6 +13,11 @@ body.light-theme .box {
     box-shadow: 15px 15px 30px rgb(128, 124, 124), -15px -15px 30px rgb(114, 106, 106);
 }
 
+body.light-theme .box-resultado {
+    background-color: #7D7C7C;
+    box-shadow: 15px 15px 30px rgb(128, 124, 124), -15px -15px 30px rgb(114, 106, 106);
+}
+
 body.light-theme .input {
     background-color: #ffffff;
     color: #000000;

diff --git a/css/styles.css b/css/styles.css
@@ -16,7 +16,17 @@ button {
 
 .box {
     width: 20rem;
-    height: 42rem;
+    height: 45rem;
+    background-color: #2e2f30;
+    border-radius: 20px;
+    box-shadow: 15px 15px 30px rgb(25, 25, 25), -15px -15px 30px rgb(60, 60, 60);
+    border: none;
+}
+
+.box-resultado {
+    min-width: 20rem;
+    width: 25rem;
+    height: 45rem;
     background-color: #2e2f30;
     border-radius: 20px;
     box-shadow: 15px 15px 30px rgb(25, 25, 25), -15px -15px 30px rgb(60, 60, 60);
@@ -58,6 +68,10 @@ p {
     color: #ffffff;
 }
 
+.caixa {
+    color: #ffc013;
+}
+
 .dinheiro {
     color: #FFE500;
 }

diff --git a/index.html b/index.html
@@ -67,6 +67,10 @@ <h1 class="titulo"><b>Entrada</b></h1>
                         <p class="cielo">Cielo 2 <input class="input" type="text" step="any" id="cielo2" placeholder="0" onblur="cieloSoma()" min="0"><span class="cielo-barra-border"></span> </p>
                     </div>
                     <p class="cielo" id="cieloTotal">Total</p>
+                    <div class="caixa-barra">
+                        <p class="caixa">Caixa <input class="input" type="text" step="any" id="caixa" placeholder="0" onblur="caixaSoma()" min="0"><span class="caixa-barra-border"></span> </p>
+                    </div>
+                    <p class="caixa" id="caixaTotal">Total</p>
                     <div class="dinheiro-barra">
                         <p class="dinheiro">Dinheiro <input class="input" type="text" step="any" id="dinheiro" placeholder="0" onblur="total()" min="0"><span class="dinheiro-barra-border"></span> </p>
                     </div>
@@ -85,7 +89,7 @@ <h1 class="titulo"><b>Entrada</b></h1>
                 </p>            
             </div>
         </div>
-        <div class="box">
+        <div class="box-resultado">
             <h1 class="titulo" id="total"> Total</h1>
             <div class="box-itens">
                 <p class="maqui" id="mac">Cartão: R$ 0</p>

diff --git a/javascript/script.js b/javascript/script.js
@@ -22,17 +22,21 @@ function Maquininhas() {
     let stone2 = validarNumero(element('stone2'))
     let cielo1 = validarNumero(element('cielo1'))
     let cielo2 = validarNumero(element('cielo2'))
+    let caixa = validarNumero(element('caixa'))
 
     let banrisulTotal = banri1 + banri2 + banri3
     let stoneTotal = stone1 + stone2
     let cieloTotal = cielo1 + cielo2
+    let caixaTotal = caixa
 
-    let total = banrisulTotal + stoneTotal + cieloTotal
+
+    let total = banrisulTotal + stoneTotal + cieloTotal + caixaTotal
 
     return {
         banrisul: banrisulTotal,
         stone: stoneTotal,
         cielo: cieloTotal,
+        caixa: caixaTotal,
         total: total
     }
 }
@@ -80,6 +84,15 @@ function cieloSoma() {
     total()
 };
 
+function caixaSoma() {
+    let valorFormatado = ValorFormatado(Maquininhas().caixa)
+
+    document.getElementById('caixaTotal').textContent = `Total: ${valorFormatado}`
+    document.getElementById("dialog-soma-resultado").textContent = `Total ${valorFormatado}`;
+    document.getElementById("dialog-sub-resultado").textContent = `Total ${valorFormatado}`;
+    total()
+};
+
 function total() {
     let dinheiro = validarNumero(element('dinheiro'));
     let pix = validarNumero(element('pix'));
@@ -222,7 +235,7 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     $(document).ready(function() {
-        var ids = ['#banri1', '#banri2', '#banri3', '#stone1', '#stone2', '#cielo1', '#cielo2', '#dinheiro', '#pix'];
+        var ids = ['#banri1', '#banri2', '#banri3', '#stone1', '#stone2', '#cielo1', '#cielo2', '#caixa', '#dinheiro', '#pix'];
 
         for (var i = 0; i < ids.length; i++) {
           $(ids[i]).mask('000.000.000.000.000,00', { reverse: true });