posicao e valor de saldo guardados no armazenamento local, páginas 's…

…aldo.html', 'Operacoes.html' criadas e página de estilo 'operacoes.css' criadas.
DiogoJP202 · Apr 1, 2024 · 645a1f5 · 645a1f5
1 parent d3fec4e
commit 645a1f5
Show file tree

Hide file tree

Showing 8 changed files with 330 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -59,7 +59,9 @@ <h2>Seja bem vindo</h2>
                     <button class="numero">9</button>
                 </div>
                 <div class="linha">
+                    <button class="numero left"><</button>
                     <button class="numero">0</button>
+                    <button class="numero right">></button>
                 </div>
             </section>
             <section id="opcoes">

diff --git a/js/cadastro.js b/js/cadastro.js
@@ -23,7 +23,7 @@ const enviaFormulario = event => {
         if(user.usuario === usuario) return alert("Usuário já cadastrado!");
     };
 
-    usuarios.push({usuario: usuario, senha: senha});
+    usuarios.push({usuario: usuario, senha: senha, saldo: 100000});
     localStorage.setItem('usuarios', JSON.stringify(usuarios)); // Adiciona as informações do usuário para o armazenamento local.
 
     alert('Usuário cadastrado com sucesso!');

diff --git a/js/login.js b/js/login.js
@@ -3,7 +3,7 @@ import opcoes from "./opcoes.js";
 import teclado, {contador, input, posicao} from "./teclado.js";
 
 adicionarUsuarioPadrao();
-// window.alert("Usuário Padrão: admin, senha: 3589");
+window.alert("Usuário Padrão: admin, senha: 3589");
 
 const form = document.querySelector("form"); 
 
@@ -14,15 +14,24 @@ const enviaFormulario = event => {
     let senha =  document.querySelector("#Isenha").value;
     let usuarios = JSON.parse(localStorage.getItem('usuarios'));
     let validado = false;
+    let posicaoUsuario = 0;
 
     for(let user of usuarios){ // Verifica os nomes de usuários do armazenamento local
+        console.log(user, usuarios, usuario, senha)
         if(user.usuario === usuario && user.senha === senha){
             validado = true;
-            continue;
+            break;
         };
+        posicaoUsuario++;
     };
 
-    validado === true ? window.location.href = "../pages/Login.html" : alert('Usuário ou Senha Inválidos!');
+    if(validado === true){
+        localStorage.setItem("usuarioAtual", usuario);
+        localStorage.setItem("posicaoUsuario", posicaoUsuario);
+        return window.location.href = "../pages/Operacoes.html"
+    } 
+
+    alert('Usuário ou Senha Inválidos!');
 };
 
 form.addEventListener("submit", enviaFormulario);
diff --git a/js/moduloUsuarioPadrao.js b/js/moduloUsuarioPadrao.js
@@ -1,6 +1,6 @@
 export default () => {
     if(!localStorage.getItem('usuarios')){
-        const usuarios = [{usuario: 'admin', senha: 3589}]; // Adiciona um usuário pré-configurado. 
+        const usuarios = [{usuario: 'admin', senha: '3589', saldo: 100000}]; // Adiciona um usuário pré-configurado. 
         let JSONUsuarios = JSON.stringify(usuarios);
         localStorage.setItem('usuarios', JSONUsuarios);
     };

diff --git a/pages/Operacoes.html b/pages/Operacoes.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cubo Bank</title>
+    <link rel="stylesheet" href="../styles/Mobile.css" media="all">
+    <link rel="stylesheet" href="../styles/MediaQueries.css">
+    <link rel="stylesheet" href="../styles/operacoes.css">
+</head>
+<body>
+    <div id="atm">
+        <header>
+            <h1>CUBO BANK</h1>
+            <div id="cubo">
+                <div class="aresta"></div>
+                <div class="aresta"></div>
+                <div class="aresta"></div>
+                <div class="aresta"></div>
+                <div class="aresta"></div>
+                <div class="aresta"></div>
+            </div>
+        </header>
+        <main>
+            <section class="botoes">
+                <button class="active"></button>
+                <button class="btnAbaixo active"></button>
+                <button class="btnAbaixo active"></button>
+            </section>
+            <div id="tela">
+                <div id="conteudo">
+                    <h2>
+                        Seja bem vindo <span class="recepcao">usuário</span>!<br>
+                        O que deseja fazer hoje ?
+                    </h2>
+                    <div class="linha">
+                        &larr;
+                        <div class="operacao">VER SALDO</div>
+                        <div class="operacao">DEPOSITAR</div>
+                        &rarr;
+                    </div>
+                    <div class="linha">
+                        &larr;
+                        <div class="operacao">VER EXTRATO</div>
+                        <div class="operacao">TRANFERÊNCIA</div>
+                        &rarr;
+                    </div>
+                    <div class="linha">
+                        &larr; 
+                        <div class="operacao"> SACAR</div>
+                        <div class="operacao">SAIR </div> 
+                        &rarr;
+                    </div>
+                </div>
+            </div>
+            <section class="botoes">
+                <button class="active"></button>
+                <button class="btnAbaixo active"></button>
+                <button class="btnAbaixo active"></button>
+            </section>
+        </main>
+        <footer id="Teclado">
+            <section id="numeros">
+                <div class="linha">
+                    <button class="numero">1</button>
+                    <button class="numero">2</button>
+                    <button class="numero">3</button>
+                </div>
+                <div class="linha">
+                    <button class="numero">4</button>
+                    <button class="numero">5</button>
+                    <button class="numero">6</button>
+                </div>
+                <div class="linha">
+                    <button class="numero">7</button>
+                    <button class="numero">8</button>
+                    <button class="numero">9</button>
+                </div>
+                <div class="linha">
+                    <button class="numero left"><</button>
+                    <button class="numero">0</button>
+                    <button class="numero right">></button>
+                </div>
+            </section>
+            <section id="opcoes">
+                <button class="entrar">ENTRAR</button>
+                <button class="sair">SAIR</button>
+                <button class="limpar">LIMPAR</button>
+            </section>
+        </footer>
+    </main>
+    <script type="module">
+        import opcoes from "../js/opcoes.js";
+        import teclado, {contador, input, posicao} from "../js/teclado.js";
+
+        const nome = document.querySelector('.recepcao');
+        nome.innerHTML = localStorage.getItem('usuarioAtual');
+
+        document.addEventListener("click", e => {
+            const element = e.target;
+
+            if(element.classList.contains("active")){
+                const botoes =  document.querySelectorAll(".active");
+
+                if(element === botoes[0]) return window.location.href = "../pages/saldo.html";
+
+                if(element === botoes[1]){
+                    console.log("Extrato");
+                }
+
+                if(element === botoes[2]){
+                    console.log("Sacar");
+                }
+
+                if(element === botoes[3]){
+                    console.log("Depositar");
+                }
+
+                if(element === botoes[4]){
+                    console.log("Transferência");
+                }
+
+                if(element === botoes[5]){
+                    console.log("Sair");
+                }
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/pages/saldo.html b/pages/saldo.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cubo Bank</title>
+    <link rel="stylesheet" href="../styles/Mobile.css" media="all">
+    <link rel="stylesheet" href="../styles/MediaQueries.css">
+    <link rel="stylesheet" href="../styles/operacoes.css">
+    <style>
+        .saldo{
+            width: 100%;
+            height: 38%;    
+        }
+
+        .textoSaldo{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 85%;
+            width: 90%;
+            margin: 10px;    
+            font-size: 1.4em;
+            color: #64BA21;
+            background-color: #fff;
+            border: 1px solid #000;
+            border-radius: 10px;
+        }
+
+        #conteudo .linha{
+            justify-content: flex-start;
+            gap: 15px;
+        }
+
+        .operacao{
+            width: 45%;
+        }
+    </style>
+</head>
+<body>
+    <div id="atm">
+        <header>
+            <h1>CUBO BANK</h1>
+            <div id="cubo">
+                <div class="aresta"></div>
+                <div class="aresta"></div>
+                <div class="aresta"></div>
+                <div class="aresta"></div>
+                <div class="aresta"></div>
+                <div class="aresta"></div>
+            </div>
+        </header>
+        <main>
+            <section class="botoes">
+                <button class="active"></button>
+                <button class="btnAbaixo"></button>
+                <button class="btnAbaixo"></button>
+            </section>
+            <div id="tela">
+                <div id="conteudo">
+                    <h2>
+                        SALDO
+                    </h2>
+                    <div class="linha">
+                        &larr; <div class="operacao">VOLTAR</div>
+                    </div>
+                    <div class="saldo">
+                        <h2>Saldo Atual</h2>
+                        <p class="textoSaldo"></p>
+                    </div>
+                </div>
+            </div>
+            <section class="botoes">
+                <button class=""></button>
+                <button class="btnAbaixo"></button>
+                <button class="btnAbaixo"></button>
+            </section>
+        </main>
+        <footer id="Teclado">
+            <section id="numeros">
+                <div class="linha">
+                    <button class="numero">1</button>
+                    <button class="numero">2</button>
+                    <button class="numero">3</button>
+                </div>
+                <div class="linha">
+                    <button class="numero">4</button>
+                    <button class="numero">5</button>
+                    <button class="numero">6</button>
+                </div>
+                <div class="linha">
+                    <button class="numero">7</button>
+                    <button class="numero">8</button>
+                    <button class="numero">9</button>
+                </div>
+                <div class="linha">
+                    <button class="numero left"><</button>
+                    <button class="numero">0</button>
+                    <button class="numero right">></button>
+                </div>
+            </section>
+            <section id="opcoes">
+                <button class="entrar">ENTRAR</button>
+                <button class="sair">SAIR</button>
+                <button class="limpar">LIMPAR</button>
+            </section>
+        </footer>
+    </main>
+    <script type="module">
+        import opcoes from "../js/opcoes.js";
+        import teclado, {contador, input, posicao} from "../js/teclado.js";
+
+        const saldo = document.querySelector('.textoSaldo');
+        const usuarios = JSON.parse(localStorage.getItem('usuarios'));
+
+        if(usuarios[localStorage.getItem("posicaoUsuario")].saldo < 0) saldo.style.color = "#f00";
+
+        saldo.innerHTML = `R$ ${usuarios[localStorage.getItem("posicaoUsuario")].saldo}`;
+
+        document.addEventListener("click", event => {
+            const element = event.target;
+
+            if(element.classList.contains("active")) return window.location.href = "../pages/Operacoes.html";
+        });
+    </script>
+</body>
+</html>
diff --git a/styles/Mobile.css b/styles/Mobile.css
@@ -122,8 +122,20 @@ main{
 main .botoes{
     display: flex;
     flex-direction: column;
-    justify-content: space-around;
+    justify-content: space-evenly;
     width: 10%;
+    position: relative;
+    top: 42px;
+}
+
+.btnAbaixo:nth-child(even){
+    position: relative;
+    top: -4px;
+}
+
+.btnAbaixo:nth-child(odd){
+    position: relative;
+    top: -10px;
 }
 
 button{
@@ -209,7 +221,7 @@ main .botoes button{
 #Teclado{
     display: flex;
     justify-content: space-between;
-    width: 200px;
+    width: 210px;
     padding: 5px;
     background-color: var(--color1);
     border: 1px solid #000;