reprograma · mirellacruzr · May 1, 2021
diff --git a/Exercício de Casa/img/book.png b/Exercício de Casa/img/book.png
diff --git a/Exercício de Casa/index.html b/Exercício de Casa/index.html
@@ -0,0 +1,74 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="widlabel=device-widlabel, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" type="text/css" href="./style/style.css" media="screen" />
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Orelega+One&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
+</head>
+<body>
+
+    <header>
+
+        <div class="headerCaixa">
+
+        <img class="headerImg" src="./img/book.png">
+        <h1 class="headerTitulo">Biblioteca</h1>
+
+        </div>
+
+    </header>
+
+    <section>
+
+        <form action="livrosAdicionar" class="formCaixa">
+
+            <label  for="isbn" class="formCategorias">ISBN:</label>
+            <input type="number" name="isbn" id="livroISBN" placeholder="Digite o ISBN do livro."/>
+
+            <label for="titulo" class="formCategorias">Título:</label>
+            <input type="text" name="titulo" id="livroTitulo" placeholder="Digite o título do livro."/>
+
+            <label for="subtitulo" class="formCategorias">Subtítulo:</label>
+            <input type="text" name="subtitulo" id="livroSubtitulo" placeholder="Digite o subtítulo do livro."/>
+            </div>
+
+            <label for="autor" class="formCategorias">Autor:</label>
+            <input type="text" name="autor" id="livroAutor" placeholder="Digite o nome do autor do livro."/>
+
+            <label for="data" class="formCategorias">Data de Publicação:</label>
+            <input type="date" name="data" id="livroData" placeholder="DD/MM/AAAA"/>
+
+            <div id="resposta"></div>
+
+            <div class="livrosAdicionar">
+            <input type="submit" name="adicionar" id="botaoAdicionar" value="ADICIONAR"/>
+            </div>
+
+            <section class="tabela">
+                <table class="livrosAdicionados">
+
+                    <thead>
+                        <th>Título</th>
+                        <th>Autor</th>
+                        <th>ISBN</th>
+                        <th>Data de Publicação</th>
+                        <th>Páginas</th>
+                        <th>Inserção na Biblioteca</th>
+                    </thead>
+                    <tbody class="listaLivros" id= "addLivros">
+                        <div class="livrosDefault"></div>
+                    </tbody>
+                </table>
+            </section>
+
+        </form>
+    </section>
+<script src="./script/books.js"></script>
+<script src="./script/script.js"></script>
+</body>
+</html>
diff --git a/Exercício de Casa/script/books.js b/Exercício de Casa/script/books.js
@@ -0,0 +1,56 @@
+let books = [
+    {
+        isbn: "9781593275846",
+        title: "Eloquent JavaScript, Second Edition",
+        subtitle: "A Modern Introduction to Programming",
+        author: "Marijn Haverbeke",
+        published: "2014-12-14T00:00:00.000Z",
+    },
+    {
+        isbn: "9781449331818",
+        title: "Learning JavaScript Design Patterns",
+        subtitle: "A JavaScript and jQuery Developer's Guide",
+        author: "Addy Osmani",
+        published: "2012-07-01T00:00:00.000Z",
+    },
+    {
+        isbn: "9781449365035",
+        title: "Speaking JavaScript",
+        subtitle: "An In-Depth Guide for Programmers",
+        author: "Axel Rauschmayer",
+        published: "2014-02-01T00:00:00.000Z",
+    },
+    {
+        isbn: "9781491950296",
+        title: "Programming JavaScript Applications",
+        subtitle: "Robust Web Architecture with Node, HTML5, and Modern JS Libraries",
+        author: "Eric Elliott",
+        published: "2014-07-01T00:00:00.000Z",
+    },
+    {
+        isbn: "9781593277574",
+        title: "Understanding ECMAScript 6",
+        subtitle: "The Definitive Guide for JavaScript Developers",
+        author: "Nicholas C. Zakas",
+        published: "2016-09-03T00:00:00.000Z",
+    },
+    {
+        isbn: "9781491904244",
+        title: "You Don't Know JS",
+        author: "Kyle Simpson",
+        published: "2015-12-27T00:00:00.000Z",
+    },
+    {
+        isbn: "9781449325862",
+        title: "Git Pocket Guide",
+        author: "Richard E. Silverman",
+        published: "2013-08-02T00:00:00.000Z",
+    },
+    {
+        isbn: "9781449337711",
+        title: "Designing Evolvable Web APIs with ASP.NET",
+        author: "Glenn Block, et al.",
+        published: "2014-04-07T00:00:00.000Z",
+    }
+]
+
diff --git a/Exercício de Casa/script/script.js b/Exercício de Casa/script/script.js
@@ -1,55 +1,40 @@
-let books = [
-    {
-        isbn: "9781593275846",
-        title: "Eloquent JavaScript, Second Edition",
-        subtitle: "A Modern Introduction to Programming",
-        author: "Marijn Haverbeke",
-        published: "2014-12-14T00:00:00.000Z",
-    },
-    {
-        isbn: "9781449331818",
-        title: "Learning JavaScript Design Patterns",
-        subtitle: "A JavaScript and jQuery Developer's Guide",
-        author: "Addy Osmani",
-        published: "2012-07-01T00:00:00.000Z",
-    },
-    {
-        isbn: "9781449365035",
-        title: "Speaking JavaScript",
-        subtitle: "An In-Depth Guide for Programmers",
-        author: "Axel Rauschmayer",
-        published: "2014-02-01T00:00:00.000Z",
-    },
-    {
-        isbn: "9781491950296",
-        title: "Programming JavaScript Applications",
-        subtitle: "Robust Web Architecture with Node, HTML5, and Modern JS Libraries",
-        author: "Eric Elliott",
-        published: "2014-07-01T00:00:00.000Z",
-    },
-    {
-        isbn: "9781593277574",
-        title: "Understanding ECMAScript 6",
-        subtitle: "The Definitive Guide for JavaScript Developers",
-        author: "Nicholas C. Zakas",
-        published: "2016-09-03T00:00:00.000Z",
-    },
-    {
-        isbn: "9781491904244",
-        title: "You Don't Know JS",
-        author: "Kyle Simpson",
-        published: "2015-12-27T00:00:00.000Z",
-    },
-    {
-        isbn: "9781449325862",
-        title: "Git Pocket Guide",
-        author: "Richard E. Silverman",
-        published: "2013-08-02T00:00:00.000Z",
-    },
-    {
-        isbn: "9781449337711",
-        title: "Designing Evolvable Web APIs with ASP.NET",
-        author: "Glenn Block, et al.",
-        published: "2014-04-07T00:00:00.000Z",
-    }
-]
+document.addEventListener("DOMContentLoaded", function(){
+    document.querySelector("#botaoAdicionar").addEventListener("click", function livrosAdicionar(event) {
+        event.preventDefault();
+
+        let bancoLivros = {
+            isbn: document.getElementById("livroISBN"),
+            title: document.getElementById("livroTitulo"),
+            subtitle: document.getElementById("livroSubtitulo"),
+            author: document.getElementById("livroAutor"),
+            published: document.getElementById("livroData"),
+        }
+
+        /* let livroTitulo = document.getElementById("livroTitulo").value;
+        let livroAutor = document.getElementById("livroAutor").value;
+        let livroISBN = document.getElementById("livroISBN").value;
+        let livroData = document.getElementById("livroData").value;
+        let livroPaginas = document.getElementById("livroPaginas").value;
+        let dataInsercao = new Date().toLocaleDateString("pt-br");
+        let horaInsercao = new Date ().toLocaleTimeString("pt-br"); */
+
+        let exibeResposta = document.getElementById("resposta");
+        let exibeLista = document.getElementById("addLivros");
+
+
+        if (bancoLivros.isbn === "" || bancoLivros.title === "" || bancoLivros.author === "" || bancoLivros.published === "") {
+            exibeResposta.innerHTML = "Por favor, preencha todos os campos."
+        } else {
+            exibeResposta.innerHTML = (`O livro "${livroTitulo}" do autor ${livroAutor} foi adicionado à Biblioteca às ${horaInsercao} do dia ${dataInsercao}.`)
+            exibeLista.push("bancoLivros") = `<tr>
+                <td>${livroTitulo}</td>
+                <td>${livroAutor}</td>
+                <td>${livroISBN}</td>
+                <td>${livroData}</td>
+                <td>${livroPaginas}</td>
+                <td>${dataInsercao} às ${horaInsercao}</td>
+            </tr>`
+
+        }
+
+})})
diff --git a/Exercício de Casa/style/style.css b/Exercício de Casa/style/style.css
@@ -0,0 +1,137 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-size: 10px;
+    font-family: 'Montserrat', sans-serif;
+}
+
+body {
+    background-color: #EEFAFC;
+}
+
+@media only screen and (min-width: 360px) {
+
+/* HEADER */
+
+header {
+    box-sizing: border-box;
+    background-color: #2292A4;
+    padding: 2rem;
+    width: 100%;
+}
+
+.headerCaixa {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.headerTitulo {
+    font-family: 'Orelega One', cursive;
+    font-size: 2.5rem;
+    color: white;
+    margin-left: 1rem;
+}
+
+.headerImg {
+    object-fit: cover;
+    width: 25px;
+    height: 25px;
+}
+
+/* FORMULARIO*/
+
+.formCaixa {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 1rem;
+    padding: 1rem 0rem 3rem 0rem;
+    background-color: white;
+    text-align: center;
+    max-width: 100%;
+    border-radius: 1rem;
+}
+
+label {
+    font-weight: bold;
+    font-size: 1.6rem;
+}
+
+form > input {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    width: 30rem;
+    padding: 1.4rem;
+    font-size: 1.4rem;
+    border-radius: 1rem;
+    border: #2292A4 solid 0.1rem;
+}
+
+#botaoAdicionar {
+    background-color: #2292A4;
+    font-size: 1.6rem;
+    color: white;
+    width: 25rem;
+    padding: 1.4rem;
+    margin-top: 2rem;
+    text-decoration: none;
+    border:white;
+    border-radius: 1rem;
+}
+
+#botaoAdicionar:hover {
+    font-weight: bolder;
+}
+
+:placeholder-shown{
+    text-align: center;
+}
+
+.tabela {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    margin: 1rem;
+    padding: 1rem 0rem 3rem 0rem;
+    background-color: white;
+    text-align: center;
+    max-width: 100%;
+    border-radius: 1rem;
+}
+
+th {
+    font-weight: bold;
+    font-size: 1.2rem;
+}
+
+}
+
+@media only screen and (min-width: 700px) {
+    form > input {
+        width: 50rem;
+    }
+
+    th {
+        padding: 1rem;
+        border-radius: 0.5rem;
+        margin: 0 3rem 0 3rem;
+        border-style: solid;
+        border-width: 0.1rem;
+        border-color: white;
+        color: white;
+        background-color: #2292A4;
+    }
+
+    .listaLivros {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+    }
+}