reprograma · EmanoelaSilva · Apr 22, 2021 · Apr 22, 2021 · Apr 22, 2021 · Apr 22, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/Books.html b/Books.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- saved from url=(0101)file:///Users/developer/Documents/On10-TodasEmTech-JavascriptI/Exerci%CC%81cio%20de%20Casa/index.html -->
+<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Books</title>
+    <link rel="stylesheet" href="./Books_files/style.css">
+
+    </head><body><main>
+    <div class="margin"></div>
+
+    <div class="retangulo">
+      <img class="imgGabrielle" src="./Books_files/img_gabi.jpeg" alt="imagem gabrielle">
+      <h1 class="name">Gabrielle Oliveira</h1>
+      <p class="profissao">Developer</p>
+    </div>s
+
+    </main>
+
+
+
+</body></html>
diff --git a/Books_files/img_gabi.jpeg b/Books_files/img_gabi.jpeg
diff --git a/Books_files/style.css b/Books_files/style.css
@@ -0,0 +1,62 @@
+/* header */
+
+.name {
+  position: absolute;
+  width: 193px;
+  height: 44px;
+  left: 464px;
+  top: 319px;
+
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 25px;
+  line-height: 37px;
+}
+.profissao {
+  position: absolute;
+  width: 130px;
+  height: 44px;
+  left: 480px;
+  top: 355px;
+
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 22px;
+  line-height: 33px;
+
+  color: #3a517d;
+}
+.imgGabrielle {
+  position: absolute;
+  width: 151px;
+  height: 154px;
+  left: 462px;
+  top: 148px;
+}
+.margin {
+  position: relative;
+  width: 1920px;
+  height: 1080px;
+
+  background: linear-gradient(252.95deg, #f10ff5 0.34%, #772cbd 99.61%);
+  border-radius: 30px;
+}
+.retangulo {
+  position: absolute;
+  width: 413px;
+  height: 930px;
+  left: 348px;
+  top: 115px;
+
+  background: linear-gradient(
+    116.79deg,
+    rgba(255, 255, 255, 0.48) 0%,
+    rgba(255, 255, 255, 0.12) 99.45%
+  );
+  backdrop-filter: blur(100px);
+  /* Note: backdrop-filter has minimal browser support */
+
+  border-radius: 30px;
+}
diff --git a/Exercicios/.DS_Store b/Exercicios/.DS_Store
diff --git a/Exercicios/1/index.html b/Exercicios/1/index.html
@@ -1,12 +1,36 @@
 <!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>
 </head>
+
 <body>
+    <! //Action determina qual é a ação do formulario!>
+        <form>
+            <div>
+                <label for="name"> Digite seu Nome </label>
+                <input type="text" id="tst" name="nome" />
+                <! //placeholder fica dentro do input ex:!>
+                    <input type="text" id="nomeDapessoa" name="name" placeholder="Digite seu nome" />
+
+                    <! //Type para determina que é do tipo texto.!>
 
+                        <input type="submit" id="botaodeenviar" n" />
+            </div>
+            <div class=" button">
+                <button type="submit"> Envie sua mensagem</button>
+            </div>
+            <div id="resposta">
+
+            </div>
+        </form>
+        <script url="./js/script.js">
+
+        </script>
 </body>
+
 </html>
diff --git a/Exercicios/1/js/script.js b/Exercicios/1/js/script.js
@@ -0,0 +1,24 @@
+document
+  .querySelector("#botaodeenviar")
+  .addEventListener("click", function amazenarDados(event) {
+    event.preventDefault(); // Para que o comportamento padrão do submite não aconteca.
+    let nome = 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 (nome.value === '') {  //consegue identificar valor.
+
+        console.log(nome.value
+        );
+        exibeResposta.innerText = 'Por Favor, digite seu nome';
+    } else {
+        exibeResposta.innerHTML = (`${nomeUsuario}, dados salvos com sucesso.`);
+
+    }
+
+
+*/
+  });
diff --git a/Exercicios/2/index.html b/Exercicios/2/index.html
@@ -2,20 +2,20 @@
 <html>
   <head>
     <title>DOM</title>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="css/style.css">
+    <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>
+    <button onclick="mostraPrecoAptoTresDorm()">Clique aqui</button>
     <div id="precoAptoTresDorm"></div>
-    <script src="js/script.js"></script>
+
+    <script src="script/script.js"></script>
   </body>
-</html>
+</html>
diff --git a/Exercicios/2/js/script.js b/Exercicios/2/js/script.js
@@ -1,12 +1,20 @@
 function mostraPrecoAptoDoisDorm() {
-    //especificar o elemento do DOM que será manipulado. DICA: botão
+  //especificar o elemento do DOM que será manipulado. DICA: botão
 
-    //evento de exibição do valor do imóvel
-  };
-
-  function mostraPrecoAptoTresDorm() {
+  //evento de exibição do valor do imóvel
 
-  };
-
-  mostraPrecoAptoDoisDorm();
-  mostraPrecoAptoTresDorm();
+  let getBotaoApDoisDorm = document.querySelector("#btnAptoDoisDorm");
+
+  getBotaoApDoisDorm.addEventListener("click", function mostraValor() {
+    document.getElementById("precoAptoDoisDorm").innerText =
+      "Preço do imóvel: R$ 500.000,00";
+  });
+}
+
+function mostraPrecoAptoTresDorm() {
+  document.getElementById("precoAptoTresDorm").innerHTML =
+    " Preço do imóvel: R$ 600.000,00";
+}
+
+mostraPrecoAptoDoisDorm();
+mostraPrecoAptoTresDorm();
diff --git a/Exercicios/3/index.html b/Exercicios/3/index.html
@@ -1,5 +1,6 @@
 <!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">
@@ -9,28 +10,30 @@
     <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">Se inscreva para receber mais informações</h1>
 
-            <p class="mensagem"> 
-                <!-- textContext insere um TEXTO AQUI! <3 -->
-            </p>
+<body>
+    <h1>Venda de apartamentos</h1>
 
-            <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>Apartamento de dois dormitórios, clique e veja o preço:</div>
+    <button id="btnAptoDoisDorm">Clique aqui</button>
+    <div id="precoAptoDoisDorm"></div>
+    <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>
+
 </html>
diff --git a/Exercicios/3/script/script.js b/Exercicios/3/script/script.js
@@ -1,11 +1,26 @@
-/*Sequência lógica
+// /*Sequência lógica
 
-1 - armazenar valores e-mail e botão
+// 1 - armazenar valores e-mail e botão
 
-*/ 
+// */
 
-botao.addEventListener("click", function(){
+// botao.addEventListener("click", function(){
 
-    //evento para a exibição do texto na tela principal
+//     //evento para a exibição do texto na tela principal
 
-})
+// })
+function mostraPrecoAptoDoisDorm() {
+  //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";
+  });
+}
+function mostraPrecoAptoTresDorm() {
+  document.getElementById("precoAptoTresDorm").innerHTML =
+    " Preço do imóvel: R$ 600.000,00";
+}
+
+mostraPrecoAptoDoisDorm();
diff --git a/Exercicios/Event-Listener/index.html b/Exercicios/Event-Listener/index.html
@@ -0,0 +1,23 @@
+------------------------------- Terceiro Exemplo -----------------------------------------------
+
+<!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 é Gabrielle.</p>
+
+    <span>Clique para mudar o background dessa página.</span>
+
+    <button id="acoesBotao">Clique aqui</button>
+
+    < src="./.js"></>
+</body>
+</html>
diff --git a/Exercicios/Event-Listener/script.js b/Exercicios/Event-Listener/script.js
@@ -0,0 +1,13 @@
+/*Const textAlterar = document.getElementById ("mudanca-texto");*/
+//Quero acessar meu dom, pra isso utilizar a primeiro elemento do meu DOM document, depois chamei o getElementById.
+
+//Para testar se esta tudo ok:
+
+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 21 anos."
+
+    const mudaEstiloSpan = document.querySelector('span').style.textDecoration = "underline";
+});
+
diff --git a/Exercicios/Event-Query/index.html b/Exercicios/Event-Query/index.html
@@ -0,0 +1,20 @@
+<!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>
+</head>
+
+<body>
+    <h1 class="meu-titulo"> Olá a Todos</h1>
+    <p id="meuNome">Meu nome é Gabrielle</p>
+    <span> Clique para mudar de backgroud dessa página</span>
+    <button onclick = "mudarCor()">  Clicar </button>
+
+    <script src="./script.js"> </script>
+</body>
+
+</html>
diff --git a/Exercicios/Event-Query/script.js b/Exercicios/Event-Query/script.js
@@ -0,0 +1,8 @@
+function mudarCor() {
+    const mudarCorTitle = document.querySelector(
+        '.meu-titulo ').style.color = "red";
+    const mudarParagrafo = document.querySelector('#meuNome').innerHTML += " lalala ";
+
+    const mudaSpan = document.querySelector('span').style.textDecoration = "underline";
+
+}
diff --git a/Exercicios/Ex4/index.html b/Exercicios/Ex4/index.html
@@ -0,0 +1,15 @@
+<!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>My page</title>
+</head>
+<body>
+    <p id ="mudanca-texto"> Clique nesse botão para  mudar o texto desse paragrafo</p>
+    <button onclick="alterarTexto()"> Clicar </button>
+<script src ="./script.js"></script>
+
+</body>
+</html>