reprograma · samdrade · Apr 17, 2021
diff --git a/Exercicios/1/index.html b/Exercicios/1/index.html
@@ -7,6 +7,11 @@
     <title>Document</title>
 </head>
 <body>
-
+    <form action="envio_dados">
+        <input type="text" name="nome" id="nomeDaPessoa" placeholder="Digite o seu nome aqui.">
+        <input type="submit" name="enviar" id="botaoDeEnviar" value="Enviar">
+    </form>
+    <div id="resposta"></div>
+    < src="./js/.js"></>
 </body>
 </html>
diff --git a/Exercicios/1/js/script.js b/Exercicios/1/js/script.js
@@ -0,0 +1,30 @@
+// document.querySelector('#botaoDeEnviar').addEventListener('click', function armazenarDados(event) {
+    event.preventDefault();
+
+    let pegaNome = document.getElementById('nomeDaPessoa');
+    let exibeResposta = document.getElementById('resposta');
+
+    pegaNome.value === '' ? exibeResposta.innerText= 'Por favor, digite o seu nome' : exibeResposta.innerHTML = (`${pegaNome.value}, dados salvos com sucesso!`)
+
+    /* if (pegaNome.value === '') {
+        exibeResposta.innerText= 'Por favor, digite o seu nome';
+    } else {
+        exibeResposta.innerHTML = (`${pegaNome.value}, dados salvos com sucesso!`);
+    } */
+
+})
+
+//function exibirDados(event) {
+    event.preventDefault();
+    let pegaNome = document.getElementById('nomeDaPessoa');
+    let exibeResposta = document.getElementById('resposta');
+
+    if (pegaNome.value === '') {
+        exibeResposta.innerText= 'Por favor, digite o seu nome';
+    } else {
+        exibeResposta.innerHTML = (`${pegaNome.value}, dados salvos com sucesso!`);
+    }
+
+}
+
+
diff --git a/Exercicios/2/index.html b/Exercicios/2/index.html
@@ -1,21 +1,18 @@
+
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>DOM</title>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="css/style.css">
-  </head>
-  <body>
-    <h1>Venda de apartamentos</h1>
-    <div>Apartamento de dois dormitórios, clique e veja o preço:</div>
-    <button id="btnAptoDoisDorm">Clique aqui</button>
-    <div id="precoAptoDoisDorm"></div>
-    <br>
-    <hr>
-    <br>
-    <div>Apartamento de três dormitórios, clique e veja o preço:</div>
-    <button id="btnAptoTresDorm">Cliqui aqui</button>
-    <div id="precoAptoTresDorm"></div>
-    <script src="js/script.js"></script>
-  </body>
-</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>Document</title>
+</head>
+<body>
+    <form action="envio_dados" onsubmit="exibirDados(event)">
+        <input type="text" name="nome" id="nomeDaPessoa" placeholder="Digite o seu nome aqui.">
+        <input type="submit" name="enviar" id="botaoDeEnviar" value="Enviar">
+    </form>
+    <div id="resposta"></div>
+    < src="./js/2.js"></>
+</body>
+</html>
diff --git a/Exercicios/3/index.html b/Exercicios/3/index.html
@@ -1,36 +1,21 @@
-<!DOCTYPE html> <!-- versão do 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>Ex 1 - News</title>
-
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>DOM</title>
+    <meta charset="utf-8">
     <link rel="stylesheet" href="css/style.css">
-</head>
-<body>
-    <div class="wrapper">
-        <div class="news">
-            <h1 class="news__title" id="formTitle">Se inscreva para receber mais informações</h1>
+  </head>
+  <body>
+    <h1>Venda de apartamentos</h1>
+
+    <div>Apartamento de dois dormitórios, clique e veja o preço:</div>
+    <button id="btnAptoDoisDorm">Clique aqui</button>
+    <div id="precoAptoDoisDorm"></div>
 
-            <p class="mensagem"> 
-                <!-- textContext insere um TEXTO AQUI! <3 -->
-            </p>
+    <div>Apartamento de três dormitórios, clique e veja o preço:</div>
+    <button onclick="mostraPrecoAptoTresDorm()">Clique aqui</button>
+    <div id="precoAptoTresDorm"></div>
 
-            <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="email@exemplo.com.br">
-                </div>
-                <div class="news__form-group">
-                    <button class="button news__button">Enviar</button>
-                </div>
-            </form>
-        </div>
-    </div>
-    <script src="script/script.js"></script>
-</body>
+    <  src="js/.js"></>
+  </body>
 </html>
diff --git a/Exercicios/3/script/script.js b/Exercicios/3/script/script.js
@@ -1,11 +1,18 @@
-/*Sequência lógica
+function mostraPrecoAptoDoisDorm() {
 
-1 - armazenar valores e-mail e botão
+    //evento de exibição do valor do imóvel
+    let getBotaoApDoisDorm = document.querySelector('#btnAptoDoisDorm');
+
+    getBotaoApDoisDorm.addEventListener('click', function mostraValor () {
+
+      document.getElementById('precoAptoDoisDorm').innerText="Preço do imóvel: R$ 500.000,00";
 
-*/ 
+    })
 
-botao.addEventListener("click", function(){
-
-    //evento para a exibição do texto na tela principal
-
-})
+  };
+
+  function mostraPrecoAptoTresDorm() {
+    document.getElementById('precoAptoTresDorm').innerHTML = " Preço do imóvel: R$ 600.000,00";
+  };
+
+  mostraPrecoAptoDoisDorm();
diff --git a/Exercicios/Teste-Event-Listener/index.html b/Exercicios/Teste-Event-Listener/index.html
@@ -0,0 +1,21 @@
+<!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>Document</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <h1 class="meu-titulo">Olá a todos!</h1>
+
+    <p id="meuNome">Meu nome é Vivian.</p>
+
+    <span>Clique para mudar o background dessa página.</span>
+
+    <button id="acoesBotao">Clique aqui</button>
+
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/Exercicios/Teste-Event-Listener/script.js b/Exercicios/Teste-Event-Listener/script.js
@@ -0,0 +1,7 @@
+document.getElementById('acoesBotao').addEventListener('click', function acionarBotao() {
+    const mudaCorTitulo = document.querySelector('.meu-titulo').style.color = "blue";
+
+    const mudaTextoParagrafo = document.querySelector('#meuNome').innerHTML += " E eu tenho 32 anos."
+
+    const mudaEstiloSpan = document.querySelector('span').style.textDecoration = "underline";
+});
diff --git a/Exercicios/Teste-Exemplo/index.html b/Exercicios/Teste-Exemplo/index.html
@@ -0,0 +1,14 @@
+<!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>Minha primeira página.</title>
+</head>
+<body>
+   <p id="mudanca-texto">Clique nesse botão para mudar o texto desse parágrafo!</p>
+   <button onclick="alterarTexto()">Clicar</button>
+   <script src="./script.js"></script>
+</body>
+</html>
diff --git a/Exercicios/Teste-Exemplo/script.js b/Exercicios/Teste-Exemplo/script.js
@@ -0,0 +1,4 @@
+function alterarTexto() {
+    const textoAAlterar = document.getElementById("mudanca-texto").innerHTML = " Hello Word";
+    return textoAAlterar;
+}
diff --git a/Exercicios/Teste-Query-Selector/index.html b/Exercicios/Teste-Query-Selector/index.html
@@ -0,0 +1,21 @@
+<!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>Document</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <h1 class="meu-titulo">Olá a todos!</h1>
+
+    <p id="meuNome">Meu nome é Vivian.</p>
+
+    <span>Clique para mudar o background dessa página.</span>
+
+    <button onclick="mudarCor()">Clique aqui</button>
+
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/Exercicios/Teste-Query-Selector/script.js b/Exercicios/Teste-Query-Selector/script.js
@@ -0,0 +1,7 @@
+function mudarCor() {
+    const mudaCorTitulo = document.querySelector('.meu-titulo').style.color = "blue";
+
+    const mudaParagrafo = document.querySelector('#meuNome').innerHTML += " E eu tenho 32 anos."
+
+    const mudaSpan = document.querySelector('span').style.textDecoration = "underline";
+}
diff --git a/Exercicios/Teste-Query-Selector/style.css b/Exercicios/Teste-Query-Selector/style.css
@@ -0,0 +1,3 @@
+* {
+    background-color: lightcoral;
+}