reprograma · elolourenco · May 1, 2021
diff --git a/Exercício de Casa/index.html b/Exercício de Casa/index.html
@@ -0,0 +1,58 @@
+<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">
+    <link rel="stylesheet" href="./style/style.css">
+    <title>Document</title>
+</head>
+
+<body>
+
+
+    <form onsubmit="criarTabela(event)">
+        <div class="div-formulario">
+        <h1>Relação de Livros</h1>
+        <label for="titulo">Titulo</label>
+        <input type="text" id="titulo">
+        <label for="subtitulo">Subtitulo</label>
+        <input type="text" id="subtitulo">
+        <label for="isbn">ISBN</label>
+        <input type="text" id="isbn">
+        <label for="autor">Autor</label>
+        <input type="text" id="autor">
+        <label for="pages">Páginas</label>
+        <input type="number" id="pages">
+        <label for="data">Data de Publicação</label>
+        <input type="date" id="data">
+        </div>
+
+        <div>
+            <input type="submit">
+        </div>
+    </form>
+    <table>
+        <thead>
+            <tr>
+                <th>Titulo</th>
+                <th>Subtitulo</th>
+                <th>ISBN</th>
+                <th>Autor</th>
+                <th>Páginas</th>
+                <th>Data de publicação</th>
+                <th>Data Inserção</th>
+            </tr>
+        </thead>
+        <tbody id="corpoTabela">
+
+
+
+
+        </tbody>
+    </table>
+    <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
@@ -52,4 +52,78 @@ let books = [
         author: "Glenn Block, et al.",
         published: "2014-04-07T00:00:00.000Z",
     }
-]
+] 
+
+function addLivros() {
+
+    books.map((book) => {
+        const parsePages = !book.pages ? "-" : book.pages;
+        const parseData = new Date(book.published);
+        const data = parseData.setDate(parseData.getDate() + 1);
+        const dataFormatada = parseData.toLocaleDateString('pt-br');
+
+        document.getElementById('corpoTabela').innerHTML +=
+            `
+        <tr >
+        <td> ${book.title} </td>
+        <td> ${book.author}</td>
+        <td> ${book.isbn}</td>
+        <td> ${book.data}</td>
+        <td> ${dataFormatada}</td>
+        <td> ${parsePages}</td>
+        <td><button class="delete"></button></td>
+        </tr>
+        `
+    })
+}
+
+
+addLivros();
+
+
+ function exibirDados(event) {
+    event.preventDefault();
+
+    let pegaTitle = document.getElementById('title').value;
+    let pegaAuthor = document.getElementById('author').value;
+    let pegaIsbn = document.getElementById('isbn').value;
+    let pegaDate = document.getElementById('date').value;
+    let pegaPages = document.getElementById('pages').value;
+
+
+    if (pegaTitle === "" || pegaAuthor === "" || pegaIsbn === "" || pegaDate === "" || pegaPages === "") {
+        alert("Campo obrigatório não preenchido")
+    } else {
+        books.push({
+            title: pegaTitle,
+            author: pegaAuthor,
+            isbn: pegaIsbn,
+            published: pegaDate,
+            pages: pegaPages,
+        });
+        limparCampo();
+        addLivros();
+    }
+
+}
+
+function limparCampo() {
+
+    document.getElementById('titulo').value = "";
+    document.getElementById('subTitulo').value = "";
+    document.getElementById('isbn').value = "";
+    document.getElementById('autor').value = "";
+    document.getElementById('paginas').value = "";
+    document.getElementById('dataDePublicacao').value = "";
+    document.getElementById('dataDeInsercao').value = "";
+
+}
+
+document.getElementById('corpoTabela').addEventListener('click', function removerLinha(event) {
+    if (event.target.className === "delete") {
+        let botao = event.target.parentElement;
+        botao.parentElement.remove();
+    }
+});
+
+
diff --git a/Exercício de Casa/style/style.css b/Exercício de Casa/style/style.css
@@ -0,0 +1,164 @@
+* {
+    margin: 0 auto;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-size: cover;
+    background-attachment: fixed;
+}
+
+form {
+    width: 50%;
+    text-align: start;
+    background: rgba(241, 218, 8, 0.8);
+    padding: 4rem;
+    border-radius: 10%;
+    margin-top: 3rem;
+}
+
+.titulo {
+    width: 100%;
+    text-align: center;
+}
+
+h1 {
+    display:inline-block;
+    font-size: min( 4rem, 8.3vw);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    padding: 0 2rem 0 2rem;
+    font-style: italic;
+    text-align: center;
+    background: linear-gradient(to right, rgb(202, 131, 39) 40%, rgb(221, 129, 43) 0);
+
+}
+
+
+
+label {
+    display: block;
+    color: rgb(255, 254, 246);
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    font-weight: bolder;
+    font-size: 1.2rem;
+    padding-bottom: 0.6rem;
+    font-size: min(1.2rem, 3.3vw);
+}
+
+input {
+    border-radius: 4px;
+    border: none;
+    width: 100%;
+    height: 25px;
+    font-size: min(1.2rem, 3.3vw);
+}
+
+input:hover {
+    background-color: rgb(196, 204, 204);
+}
+
+input:focus {
+    outline: 1px solid rgb(108, 110, 109);
+    border: 1px solid rgb(108, 110, 109);
+    border-radius: 4px;
+}
+
+#enviar {
+    height: 3rem;
+    width: 30%;
+    font-size: min(1.3rem, 3vw);
+    background-color: rgb(58, 219, 106);
+    color: aliceblue;
+    border-radius: 20px;
+    transition: all 0.5s;
+}
+
+#enviar:hover {
+    background: rgb(50, 185, 91);
+    color: rgb(37, 65, 65);
+    transition: all 0.5s;
+    transform: translateY(-06px);
+    box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
+}
+
+.salvar {
+    text-align: center;
+    margin-top: 1rem;
+}
+
+button {
+    background: rgb(172, 41, 41);
+    color: aliceblue;
+    border-radius: 10px;
+    padding: 0.7rem;
+    width: 70%;
+    font-size: min(0.8rem, 1.2vw);
+}
+
+table {
+    border: 2px solid rgb(68, 58, 58);
+    border-collapse: collapse;
+    background: grey;
+    margin-top: 3rem;
+    table-layout: fixed;
+    width: 100%;
+    color: white;
+    margin-bottom: 3rem;
+}
+
+th,
+td {
+    border: 1px solid rgb(100, 94, 94);
+    padding: 0.2rem;
+    word-wrap: break-word;
+    font-size: min(0.9rem, 1.7vw);
+}
+
+#templateTable {
+    width: 80%;
+    text-align: center;
+}
+
+h2 {
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    color: aliceblue;
+    font-size: 2rem;
+    padding-top: 2.5rem;
+    font-size: min(2rem, 4vw);
+}
+
+th {
+    background: rgb(104, 103, 102);
+}
+
+@media screen and (max-width: 1059px) {
+    form {
+        width: 80%;
+        padding: 3rem;
+        margin-top: 3rem;
+    }
+}
+
+@media screen and (max-width: 920px) {
+    #templateTable {
+        width: 95%;
+    }
+}
+
+@media screen and (max-width: 720px) {
+    form {
+        width: 90%;
+        padding: 2rem;
+        margin-top: 2rem;
+    }
+    button {
+        border-radius: 10px;
+        padding: 0.5rem;
+        width: 100%;
+        font-size: min(1rem, 1.2vw);
+    }
+    input {
+        height: 20px;
+    }
+}