reprograma · jumara-pimenta · Apr 22, 2021 · Apr 24, 2021 · Apr 27, 2021 · May 3, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
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 seu nome aqui.">
+        <input type="submit" name="enviar" id="botaoDeEnviar" value="Enviar">
+    </form>
+    <div id="resposta"></div>
+    <script src="./js/script.js"></script>
 </body>
 </html>
diff --git a/Exercicios/1/js/script.js b/Exercicios/1/js/script.js
@@ -0,0 +1,15 @@
+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 seu nome';
+    } else {
+        exibeResposta.innerHTML = (`${pegaNome.value}, dados salvos com sucesso.`);
+    }
+
+})
diff --git a/Exercicios/2/index.html b/Exercicios/2/index.html
@@ -7,15 +7,15 @@
   </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>
   </body>
 </html>
diff --git a/Exercicios/2/js/script.js b/Exercicios/2/js/script.js
@@ -1,12 +1,18 @@
 function mostraPrecoAptoDoisDorm() {
-    //especificar o elemento do DOM que será manipulado. DICA: botão
 
-    //evento de exibição do valor do imóvel
-  };
+  //evento de exibição do valor do imóvel
+  let getBotaoApDoisDorm = document.querySelector('#btnAptoDoisDorm');
 
-  function mostraPrecoAptoTresDorm() {
+  getBotaoApDoisDorm.addEventListener('click', function mostraValor () {
+
+    document.getElementById('precoAptoDoisDorm').innerText="Preço do imóvel: R$ 500.000,00";
 
-  };
-
-  mostraPrecoAptoDoisDorm();
-  mostraPrecoAptoTresDorm();
+  })
+
+};
+
+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,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 todes!</h1>
+
+    <p id="meuNome">Meu nome é Jumara.</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,9 @@
+document.getElementById('acoesBotao').addEventListener('click', function acionarBotao(event){
+    event.preventDefault();
+
+    const mudaCorTitulo = document.querySelector('.meu-titulo').style.color = "blue";
+
+    const mudaParagrafo = document.querySelector('#meuNome').innerHTML += " E eu tenho 26 anos."
+
+    const mudaSpan = document.querySelector('span').style.textDecoration = "underline";
+});
diff --git a/Exercicios/Teste-Query-Selector/index.html b/Exercicios/Teste-Query-Selector/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 todes!</h1>
+
+    <p id="meuNome">Meu nome é Jumara.</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,5 @@
+function mudarCor() {
+    const mudaCorTitulo = document.querySelector('.meu-titulo').style.color = "blue";
+    const mudaParagrafo = document.querySelector('#meuNome').innerHTML += " E eu tenho 26 anos."
+    const mudaSpan = 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 http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aula JavaScript</title>
+</head>
+<body>
+    <p id="mudanca-texto">Clique no 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/Exercício de Casa/img/biblioteca.jpg b/Exercício de Casa/img/biblioteca.jpg
diff --git a/Exercício de Casa/img/botao-lixeira.png b/Exercício de Casa/img/botao-lixeira.png
diff --git a/Exercício de Casa/img/leitores.jpg b/Exercício de Casa/img/leitores.jpg
diff --git a/Exercício de Casa/img/livros.jpg b/Exercício de Casa/img/livros.jpg
diff --git a/Exercício de Casa/index.html b/Exercício de Casa/index.html
@@ -0,0 +1,47 @@
+<!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 href="style/style.css" rel="stylesheet" />
+</head>
+<body>
+    <form class="formulario" onsubmit="exibirDados(event)">
+        <h1 class="titulo--formulario">Livros</h1>
+        <div class="texto--formulario">
+            <label for="titulo">Título*</label>
+            <input type="text" name="titulo" id="tituloLivro" placeholder="Digite o título do livro aqui">       
+            <label for="autor">Autor (a)*</label>
+            <input type="text" name="autor" id="nomeAutor" placeholder="Digite o nome do autor aqui">
+            <label for="isbn">ISBN*</label>
+            <input type="text" name="isbn" id="isbnLivro" placeholder="Digite o ISBN do livro aqui">
+            <label for="data">Data de publicação*</label>
+            <input type="date" name="data" id="dataPublicacao" placeholder="Digite a data de publicação aqui">
+            <label for="paginas">Páginas*</label>
+            <input type="number" name="paginas" id="paginasLivro" placeholder="Digite a quantidade de páginas aqui">
+        </div>
+        <div class="texto--formulario">
+            <input type="submit" name="adicionar" id="botaoDeAdicionar" value="Adicionar Livro">
+        </div>
+    </form>
+    <section class="section-tabela">
+        <table class="tabela">
+            <thead class="cabecalho--tabela">
+                <tr>
+                    <th>Título</th>
+                    <th>Autor(a)</th>
+                    <th>ISBN</th>
+                    <th>Data de publicação</th>
+                    <th>Páginas</th>
+                    <th>Data de Inserção</th>
+                </tr>
+            </thead>
+            <tbody id="corpoTabela" class="corpo--tabela">
+            </tbody>
+        </table>
+    </section>
+    <script src="script/script.js"></script>
+</body>
+</html>
diff --git a/Exercício de Casa/script/script.js b/Exercício de Casa/script/script.js
@@ -0,0 +1,47 @@
+function exibirDados(event) {
+    event.preventDefault();
+
+    let pegaTitulo = document.getElementById('tituloLivro').value;
+    let pegaAutor = document.getElementById('nomeAutor').value;
+    let pegaIsbn = document.getElementById('isbnLivro').value;
+    let pegaData = document.getElementById('dataPublicacao').value;
+    let pegaPaginas = document.getElementById('paginasLivro').value;
+    let dataInsercao = new Date().toLocaleDateString('pt-br');
+    let horarioInsercao = new Date().toLocaleTimeString('pt-br');
+
+    if (pegaTitulo === "" || pegaAutor === "" || pegaIsbn === "" || pegaData === "" || pegaPaginas === "") {
+        alert("Campo obrigatório não preenchido")
+    } else {
+        document.getElementById('corpoTabela').innerHTML += `
+        <tr >
+            <td> ${pegaTitulo}</td>
+            <td> ${pegaAutor}</td>
+            <td> ${pegaIsbn}</td>
+            <td> ${pegaData}</td>
+            <td> ${pegaPaginas}</td>
+            <td> ${dataInsercao}, ${horarioInsercao}</td>
+            <td> <button class="delete"></button></td>
+        </tr>
+        `
+        limparCampo();
+    }
+
+}
+
+function limparCampo() {
+
+    document.getElementById('tituloLivro').value = "";
+    document.getElementById('nomeAutor').value = "";
+    document.getElementById('isbnLivro').value = "";
+    document.getElementById('dataPublicacao').value = "";
+    document.getElementById('paginasLivro').value = "";
+
+}
+
+document.getElementById('corpoTabela').addEventListener('click', function removerLinha(event) {
+    if (event.target.className === "delete") {
+        let botao = event.target.parentElement;
+        botao.parentElement.remove();
+    }
+})  
+