diff --git "a/Exerc\303\255cio de Casa/index.html" "b/Exerc\303\255cio de Casa/index.html" index e69de29..cf58e70 100644 --- "a/Exerc\303\255cio de Casa/index.html" +++ "b/Exerc\303\255cio de Casa/index.html" @@ -0,0 +1,58 @@ + + + + + + + + Document + + + + + +
+
+

Relação de Livros

+ + + + + + + + + + + + +
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + +
TituloSubtituloISBNAutorPáginasData de publicaçãoData Inserção
+ + + + + diff --git "a/Exerc\303\255cio de Casa/script/script.js" "b/Exerc\303\255cio de Casa/script/script.js" index 68f1d0b..94a3fc3 100644 --- "a/Exerc\303\255cio de Casa/script/script.js" +++ "b/Exerc\303\255cio de Casa/script/script.js" @@ -52,4 +52,78 @@ let books = [ author: "Glenn Block, et al.", published: "2014-04-07T00:00:00.000Z", } -] \ No newline at end of file +] + +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 += + ` + + ${book.title} + ${book.author} + ${book.isbn} + ${book.data} + ${dataFormatada} + ${parsePages} + + + ` + }) +} + + +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(); + } +}); + + \ No newline at end of file diff --git "a/Exerc\303\255cio de Casa/style/style.css" "b/Exerc\303\255cio de Casa/style/style.css" index e69de29..b7c2baf 100644 --- "a/Exerc\303\255cio de Casa/style/style.css" +++ "b/Exerc\303\255cio 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; + } +} \ No newline at end of file