reprograma · visilsan · Sep 25, 2020
diff --git a/entrega/viviane/exemplo1/css/style.css b/entrega/viviane/exemplo1/css/style.css
@@ -0,0 +1,84 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  background-color: #1d8dc0;
+  background-image: url('../../../assets/news.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+}
+
+.news {
+  width: 30%;
+  margin: 0 auto;
+  padding: 5px;
+  background-color: rgba(76, 0, 255, 0.274);
+}
+
+.news__title {
+  color: #ffffff;
+  top: -130px;
+}
+
+.news__title__novo {
+  color: #ff0101
+  top
+  ;
+}
+
+.news__form-group {
+  position: relative;
+  width: 100%;
+}
+
+.news__label {
+  display: block;
+  color: #ffffff;
+}
+
+.news__input {
+  width: 100%;
+  border-radius: 2px;
+  border: 1px solid #ffffff;
+  height: 40px;
+  padding: 10px;
+  font-size: 14px;
+}
+
+.error {
+  border: 3px solid #ff0101;
+}
+
+.news__button {
+  background-color: #ecddf3;
+  color: #000000;
+  border-radius: 50px;
+  border: 0;
+  padding: 10px 20px;
+  width: 130px;
+  position: absolute;
+  bottom: -50px;
+  font-weight: bold;
+  left: 50%;
+  margin-left: -65px;
+  font-size: 16px;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.news__button:hover {
+  background-color: #053c55;
+  color: #ffffff;
+  transition: 0.3s;
+}
diff --git a/entrega/viviane/exemplo1/index.html b/entrega/viviane/exemplo1/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>DevGirl Newsletter</title>
+
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+    <div class="wrapper">
+        <div class="news">
+            <h1 class="news__title" id="formTitle">Hey DevGirl, assine nossa newsletter!</h1>
+
+            <p class="mensagem">
+                <!--posso inserir uma mendagem aqui-->  
+            </p>
+
+            <form action="" class="news__form">
+                <div class="news__form-group">
+                    <label for="newsInputEmail" class="news__label">
+                        Email
+                    </label>
+                    <input type="email" class="news__input" id="newsInputEmail" placeholder="nome@email.com">
+                </div>
+                <div class="news__form-group">
+                    <button class="button news__button">Enviar</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <script src="./script/script.js"></script>
+</body>
+
+</html>
diff --git a/entrega/viviane/exemplo1/script/script.js b/entrega/viviane/exemplo1/script/script.js
@@ -0,0 +1,53 @@
+//Capturar o valor inserido no input quando acionar o botão
+//Retornar em um pop-up uma mensagem de sucesso para o usuário quando acionar o botão
+//Adicionar um novo campo para a mensagem de sucesso quando acionar o botão
+//Adicionar uma mensagem de sucesso personalizada com o email informado
+//Alterar a cor do texto caso o email tenha sido cadastrado com sucesso
+//Validar se os campos estão vazios ou não
+
+let input = document.getElementById('newsInputEmail')
+let button = document.querySelector('.button')
+let mensagem = document.querySelector( '.mensagem' )
+
+button.addEventListener('click',function(event){
+    event.preventDefault()
+    let emailValue = input.value 
+
+    if (valorDoInput == ' '){
+      mensagem.textContent = "Por favor, preencha o campo de email"
+
+    } else { 
+      mensagem.textContent =  `Seu email ${valorDoInput} foi cadastrado com sucesso`
+    }
+
+    //console.log(input.value)
+    //alert('O email ' + valorEmail + ' foi cadastrado com sucesso')
+    //alert('Olá, seu email:  ${valorEmail} foi cadastrado com sucesso')
+    //let feedback = document.createElement('p')
+    //let messageFeedback = document.createTextNode (
+       // `olá seu email ${emailValue} foi cadastrado com sucesso`
+        //)
+    //console.log(feedback.appendChild (messageFeedback))
+
+  //Modificar a cor do texto
+
+    feedback.appendChild(messageFeedback)
+    feedback.style.color = 'green'
+    input.value = ''
+
+   // let colorTitle = document.querySelector('.new__title')
+    //colorTitle.style.color = 'red'
+    //colorTitle.style.fontSize = '50px'
+    // colorTitle.classlist.add(new__title__novo)
+    //colorTitle.classlist.remove(new__title__novo)
+
+    //let userMassage = document.querySelector('.mensagem')
+    //userMassage.appendChild(feedback)
+
+    //criar tag div e dentro criar uma p
+    //let userMassage = document.querySelector('.mensagem')
+   //console.log(userMassage.appendChild(feedback))
+
+   // let userMassage = document.que(.mensagem)
+    //userMassage.textContent = 'Oi'
+});
diff --git a/entrega/viviane/exemplo2/css/style.css b/entrega/viviane/exemplo2/css/style.css
@@ -0,0 +1,89 @@
+/* GERAL */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  background-color: rgb(172, 12, 221);
+  padding: 20px;
+}
+
+.wrapper {
+  padding: 20px;
+  background-color: #1e013242;
+}
+
+.transacao {
+  width: 100%;
+  margin: 0 auto;
+  position: relative;
+}
+
+.transacao__form {
+  display: flex;
+  justify-content: space-between;
+}
+
+.transacao__title {
+  color: #ffffff;
+}
+
+.transacao__form-group {
+  position: relative;
+  width: 100%;
+}
+
+.transacao__label {
+  display: block;
+  color: #000000;
+}
+
+.transacao__input {
+  width: 90%;
+  border-radius: 2px;
+  border: 1px solid #ecddf3;
+  height: 40px;
+  padding: 10px;
+  font-size: 14px;
+}
+
+.transacao__button {
+  background-color: #a414ea;
+  color: #ffffff;
+  border-radius: 10px;
+  width: 90%;
+  font-weight: bold;
+  font-size: 16px;
+  transition: 0.3s;
+  cursor: pointer;
+  margin-top: 21px;
+  height: 40px;
+}
+
+.transacao__button:hover {
+  background-color: #7f29aa;
+  color: #140a1a;
+  transition: 0.3s;
+}
+
+.extrato__table {
+  width: 100%;
+  text-align: left;
+}
+
+.extrato__header span + span {
+  border-left: 1px solid #ecddf3;
+  padding: 10px;
+}
+
+.extrato__header span + span {
+  border-left: 1px solid #ecddf3;
+  padding: 10px;
+}
+
+.extrato div:last-of-type span + span {
+  border-left: 1px solid #ecddf3;
+  padding: 10px;
+}
diff --git a/entrega/viviane/exemplo2/index.html b/entrega/viviane/exemplo2/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>MyBank</title>
+
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+    <div class="wrapper">
+        <div class="transacao">
+            <h1 class="transacao__title title">Controle Financeiro MyBank</h1>
+            <h2 class="transacao__subtitle subtitle">Adicionar Gastos</h2>
+            <form action="" class="transacao__form">
+                <div class="transacao__form-group">
+                    <label for="transacaoInputName" class="transacao__label">Meu último gasto</label>
+                    <input type="text" class="transacao__input" id="transacaoInputName"
+                        placeholder="Insira aqui o seu último gasto">
+                </div>
+                <div class="transacao__form-group">
+                    <label for="transacaoInputMoney" class="transacao__label">Valor</label>
+                    <input type="number" class="transacao__input" id="transacaoInputMoney" placeholder="R$ 0,00">
+                </div>
+                <div class="transacao__form-group">
+                    <label for="transacaoInputDate" class="transacao__label">Data</label>
+                    <input type="text" class="transacao__input" id="transacaoInputDate" placeholder="dd/mm/aaaa">
+                </div>
+                <div class="transacao__form-group">
+                    <button class="button transacao__button">Adicionar novo gasto</button>
+                </div>
+            </form>
+        </div>
+        <div class="extrato">
+            <h2 class="extrato__subtitle subtitle">Relatório de Gastos</h2>
+            <div class="extrato__table">
+                <h2 class="extrato__header">
+                    <span>Nome da transação</span>
+                    <span>Valor</span>
+                    <span>Data</span>
+                </h2>
+            </div>
+        </div>
+    </div>
+    <script src="./script/script.js"></script>
+</body>
+
+</html>
diff --git a/entrega/viviane/exemplo2/script/script.js b/entrega/viviane/exemplo2/script/script.js
@@ -0,0 +1,29 @@
+//adicionar um novo gasto nos inputs e ao clicar o botão adicionar as informações devem aparecer abaixo do campo relatório de gastos
+
+// validar os três campos de input para que nenhum valor vazio possa ser adicionado
+
+const inputGastos = document.getElementById ('transacaoInputName')
+const inputValor = document.getElementById ('transacaoInputMoney')
+const inputData = document.getElementById ('transacaoInputDate')
+const botao = document.querySelector('.button')
+const extrato = document.querySelector('.extrato')
+
+botao.addEventListener('click', criarTransacao)
+
+function criarTransacao(event){
+    event.preventDefault();
+
+    if(inputGastos == "" &&
+       inputValor == "" &&
+       inputData == ""
+
+    ) {
+        linha.textContent = 'deu ruim'
+        extrato.appendChild(linha)
+    }else{
+    const linha = document.createElement('div')
+    linha.textContent = `Seu gasto: ${inputGastos.value}, no valor ${inoutValor.extrato.appendChild(linha)} realizado na data ${inputData.value} `
+    extrato.appendChild(linha)
+    }   
+
+}