reprograma · izabellesouza · Apr 24, 2021
diff --git a/Exercicios/1/index.html b/Exercicios/1/index.html
@@ -7,6 +7,10 @@
     <title>Document</title>
 </head>
 <body>
-
+    <form action="envio_dados">
+        <input type="text" name="nome" id="nomeDaPessoa" placeholder="Digite o seu nome aqui.">
+        <input type="submite" name="enviar" id="botaoDeEnviar" value="Enviar">
+    </form>
+    <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,3 @@
+document.querySelector('#botaoDeEnviar').adcEventListener('click', function armazenarDados() {
+   event.prevent
+})
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 mudaParagrafo = document.querySelector('#meuNome').innerHTML += " E eu tenho 32 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,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>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,4 @@
+* {
+    background-color: lightcoral;
+}
+
diff --git a/Exercício de Casa/img/biblioteca-online.png b/Exercício de Casa/img/biblioteca-online.png
diff --git a/Exercício de Casa/index.html b/Exercício de Casa/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html> 
+<html lang="pt-br">
+<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>Biblioteca Online</title>
+    <link rel="stylesheet" href="./style/style.css">
+</head>
+<body>
+
+    <header class="cabecalho"></header>
+    <div class="biblioteca_titulo">
+        <label for="biblioteca">
+            Biblioteca Online
+        </label>
+    </div>
+
+    <main>
+    <section>
+
+            <form action="" class="form" onsubmit="exibirDados (event)">
+
+                <div class="topicos_form">
+                    <label for="titulo">
+                        Título
+                    </label>
+                    <input type="text" id="titulo" placeholder="Digite o título do Livro" onfocus=this.value='' required>
+                </div>
+
+
+                <div class="topicos_form">
+                    <label for="autor">
+                        Autor
+                    </label>
+                    <input type="autor" id="autor" placeholder="Digite o autor do Livro" onfocus=this.value='' required>
+                </div>
+
+                <div class="topicos_form">
+                    <label for="isbn" >
+                        ISBN
+                    </label>
+                    <input type="text" id="isbn" placeholder="Digite o ISBN do Livro">
+                </div>
+
+                <div class="topicos_form">
+                    <label for="paginas">
+                        Páginas
+                    </label>
+                    <input type="text" id="paginas" placeholder="Número de páginas">
+                </div>
+
+                <div class="topicos_form">
+                    <label for="dataPublicacao">
+                        Data de Publicação
+                    </label>
+                    <input type="date" id="dataPublicacao" onfocus=this.value='' required>
+                </div>
+
+                <div class="topicos_form">
+                    <input type="submit" class="button" name="enviar" id="botaoDeEnviar" value="Adicionar Livro">
+                </div>
+
+            <!--   <div id="resposta" class="resposta__box resposta__list">
+                </div> -->
+            </form>
+        </section>
+
+ <section>
+<table class="tabela" id="resposta">
+<tr>
+    <th>Título</th>
+    <th>Autor</th>
+    <th>ISBN</th>
+    <th>Data de Publicação</th>
+    <th>Páginas</th>
+    <th>Data de Cadastro</th>
+</tr>
+</table>
+
+    <div class="excluirEbook">
+        <input type="button" class="botaoExcluir" id="botaoDelete" name="excluir" value="Deletar Livro">
+    </div>
+
+        </section>
+
+    </main>
+    <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,40 @@
+function exibirDados (event) {
+    event.preventDefault();
+
+    let pegaAutor = document.getElementById('autor').value;
+    let pegaTítulo = document.querySelector('#titulo').value;
+    let pegaISBN = document.querySelector('#isbn').value;
+    let pegaPaginas = document.querySelector('#paginas').value;
+    let pegaDataPublicacao = document.getElementById('dataPublicacao').value;
+    let dataInsercao = new Date().toLocaleDateString('pt-br');
+    let horarioInsercao = new Date().toLocaleTimeString('pt-br');
+
+    document.getElementById('resposta').innerHTML += `
+    <tr id="tabelaDeLivro">
+        <td>${pegaTítulo}</td>
+        <td>${pegaAutor}</td>
+        <td>${pegaISBN}</td>
+        <td>${pegaDataPublicacao}</td>
+        <td>${pegaPaginas}</td>
+        <td>${dataInsercao}, ${horarioInsercao}</td>
+    </tr>
+    `
+    limpardados()
+}
+
+function limpardados () {
+    document.getElementById('titulo').value="";
+    document.getElementById('autor').value="";
+    document.getElementById('isbn').value="";
+    document.getElementById('dataPublicacao').value="";
+    document.getElementById('paginas').value="";
+
+}
+
+document.querySelector("#botaoDelete").addEventListener('click', function exluirLivro (event) {
+    event.preventDefault();
+
+    document.getElementById('tabelaDeLivro').remove();
+})
+
+
diff --git a/Exercício de Casa/style/style.css b/Exercício de Casa/style/style.css
@@ -0,0 +1,156 @@
+body {
+          background: linear-gradient(
+          116.79deg,
+          rgba(55, 168, 40, 0.48) 0%,
+          rgba(207, 206, 209, 0.12) 99.45%
+        );
+  }
+
+.titulo {
+    text-align: center;
+}
+
+.cabecalho {
+    background: url(../img/biblioteca-online.png);
+    height: 20vh;
+    background-size:contain; 
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.biblioteca_titulo {
+    position: absolute;
+    width: 300px;
+    height: 100px;
+    left: 570px;
+    top: 120px;
+
+    font-family: Poppins;
+    font-style: normal;
+    font-weight: 300;
+    font-size: 30px;
+    line-height: 100px;
+
+    color: rgba(15, 3, 15, 0.9);
+
+}
+
+.form {
+    align-items: center;
+    margin-top: 50px;
+    display: flex;
+    flex-direction: column;
+}
+
+.topicos_form {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+}
+
+table {
+    border: 2px solid rgb(99, 97, 97);
+    letter-spacing: 1px;
+    width: 100%;
+    border-radius: 20px;
+    padding: 1%;
+    text-align: center; 
+    margin-top: 60px;
+}
+
+th {
+    border: 1px solid rgb(0, 0, 0);
+    padding: 10%;
+    border-radius: 25px;
+    text-align: center;
+    color: white;
+
+}
+
+tr {
+    background-color: rgb(139, 172, 86);
+    text-align: center;
+}
+
+td {
+    text-align: center;
+    height: 4vh;
+    padding: 1%;
+    color: rgb(255, 255, 255);
+}
+
+.excluirEbook {
+    text-align: center;
+    margin-top: 20px;
+}
+
+body {
+    background-color: rgb(157, 223, 151);
+    transition: .4s;
+  }
+
+.titulo {
+    text-align: center;
+}
+
+.cabecalho {
+    background: url(../img/biblioteca-online.png);
+    height: 20vh;
+    background-size:contain; 
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.form {
+    align-items: center;
+    margin-top: 50px;
+    display: flex;
+    flex-direction: column;
+}
+
+.topicos_form {
+    width: 228px;
+    height: 40px;
+    font-size: 20px;
+    color: rgba(10, 29, 8, 0.9);
+}
+}
+
+table {
+    border: 2px solid rgb(88, 38, 5);
+    letter-spacing: 1px;
+    width: 100%;
+    border-radius: 8px;
+    padding: 1%;
+    text-align: center; 
+    margin-top: 60px;
+}
+
+th {
+    border: 1px solid rgb(0, 0, 0);
+    padding: 1%;
+    border-radius: 5px;
+    text-align: center;
+    color: white;
+
+}
+
+tr {
+    background-color: rgb(185, 102, 34);
+    text-align: center;
+    font-family: Poppins;
+    font-style: normal;
+}
+
+td {
+    text-align: center;
+    height: 4vh;
+    padding: 1%;
+    color: rgb(255, 255, 255);
+}
+
+.excluirEbook {
+    text-align: center;
+    margin-top: 20px;
+}
+