From b0562f426982e875d934ff2750dcfaeb1c00940a Mon Sep 17 00:00:00 2001 From: Izabelle Souza Date: Thu, 29 Apr 2021 07:10:31 -0300 Subject: [PATCH 1/2] =?UTF-8?q?primeira=20altera=C3=A7=C3=A3o=20javascript?= =?UTF-8?q?=20II?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "Izabelle_Exerc\303\255cio de Casa/README.md" | 116 ++++++++++++++++++ .../index.html" | 0 .../script/script.js" | 55 +++++++++ .../style/style.css" | 0 4 files changed, 171 insertions(+) create mode 100644 "Izabelle_Exerc\303\255cio de Casa/README.md" create mode 100644 "Izabelle_Exerc\303\255cio de Casa/index.html" create mode 100644 "Izabelle_Exerc\303\255cio de Casa/script/script.js" create mode 100644 "Izabelle_Exerc\303\255cio de Casa/style/style.css" diff --git "a/Izabelle_Exerc\303\255cio de Casa/README.md" "b/Izabelle_Exerc\303\255cio de Casa/README.md" new file mode 100644 index 0000000..aa1bf90 --- /dev/null +++ "b/Izabelle_Exerc\303\255cio de Casa/README.md" @@ -0,0 +1,116 @@ +# Desafio: Biblioteca + +--- +## Instruções para a realização do projeto: + +1. Entre no repositório aqui mencionado (https://github.com/reprograma/On10-TodasEmTech-JavascriptII). + +2. **Forkem o repositório para a conta pessoal de vocês**. + +3. **Clonem no computador de vocês o repositório forkado em suas contas particulares**. + +``` +git clone [nome-do-repositorio-forkado-em-sua-conta-particular-no-GitHub] +``` + +**_ATENÇÃO_: Não modifiquem o conteúdo do projeto original forkado, apenas a que você copiou e renomeou!** + +4. Crie uma `branch` com o seu nome + +``` +git checkout -b "seu-nome"` +``` + +5. Entrem na branch criada e resolva o desafio proposto. Para verificar em qual branch voce está: + +``` +git branch +``` + +Se estiver na master... + +``` +git checkout "seu-nome" +``` + +6. Ao finalizar a resolução do desafio proposto, façam o `commit` e o `push` da branch criada para a master do projeto que vocês forkaram em suas contas particulares. +(Verifique que você está na sua branch) + +``` +git add . +git commit -m "texto do seu commit" +git push origin master +``` + +7. Em *Settings*, desçam a página até o submenu *GitHub Pages*, e clique em *Check it out here*. + + ![settings](../assets/settings-github.png) + + ![github-pages-link](../assets/github-pages-link.png) + +8. Em Github Pages, selecione em *source* a branch `main` e apertem em save. + +![github-pages](../assets/githubpages-source-selection.png) + +9. Enviem o link do GitHub do projeto que vocês forkaram em suas contas particulares. + +--- + +## 1. Introdução + +O nosso cliente - Biblioteca - recebeu o site que criamos, mas pediu algumas alterações na versão que entregamos. São essas: + +1. O cliente forneceu um array - `let books` - que contem alguns títulos que eles deseja ver exibidos na tela; + +2. O cliente deseja que seja retirada da listagem de livros adicionados pelo usuário a informação de "Data da inserção" - que continha a data e horário em que o livro foi adicionado no sistema. + +Assim, vamos produzir uma nova versão do site previamente elaborado. + +## 2. Detalhes Técnicos do Projeto: + +1. A estrutura em HTML e CSS criada anteriormente pode ser mantida. + +2. Contudo, a lógica do JavaScript será alterada, de acordo com o item 4 abaixo. + +## 3. Tecnologias Utilizadas: + +- HTML; +- CSS; +- *Vanilla.js*: não será permitida a utilização de bibliotecas nesse projeto. + +## 4. Critérios Técnicos do Projeto: + +1. O formulário de inserção dos livros continuará contendo os seguintes campos obrigatórios: **Autor, Título, ISBN e Data de Publicação**. Contudo, sintam-se à vontade para inserirem novos campos no formulário caso prefiram. + +2. O tratamento de erros para a adição de livros deve ser mantido - logo, um livro não pode ser adicionado sem as seguintes informações obrigatórias *(Autor, Título, ISBN e Data de Publicação)*. + +3. **No trecho responsável por listar os livros, deverá ser iterado o array `books` de forma a exibir na tela o acervo de livros disponibilizado pelo cliente. Esse array está declarado no arquivo `script.js`**. + +4. Ao clicar no botão responsável por adicionar o livro, **as informações agora devem ser imediatamente inseridas no array `books.js` e visualizadas na listagem localizada abaixo do formulário**. + +5. Na propriedade *published* do array `books.js`, constam as datas e horários em que os livros foram publicados. **Essa propriedade deve ser tratada usando o objeto Date() para que seja exibida na listagem apenas a data**. + +6. O livro adicionado permanecerá podendo ser deletado pelo usuário. + +7. A informação de data de inserção deverá ser removida da listagem de livros.**Na listagem dos livros inseridos, deverá vir uma informação nova, denominada "Data da inserção", contendo a data e o horário em que o livro foi inserido no sistema**. + +8. É preciso seguir a estrutura de repositório contida nessa pasta "Exercício de Casa". + +9. *Estilização*: a estilização da página fica a critério da aluna. O CSS deve ser Responsivo. + +## 5. Itens Adicionais e não Obrigatórios do Projeto: + +1. Permanência dos Dados: encontrar um meio para que as informações permaneçam na tela do usuário mesmo após a atualização da página. + +## 6. Links Úteis: + +**Sobre iteração de array e inserção de dados em um array:** + +https://www.youtube.com/watch?v=vLfqrEP6weo + +**Sobre eventuais erros na inserção de datas:** + +https://www.w3schools.com/js/tryit.asp?filename=tryjs_date_ahead + + + diff --git "a/Izabelle_Exerc\303\255cio de Casa/index.html" "b/Izabelle_Exerc\303\255cio de Casa/index.html" new file mode 100644 index 0000000..e69de29 diff --git "a/Izabelle_Exerc\303\255cio de Casa/script/script.js" "b/Izabelle_Exerc\303\255cio de Casa/script/script.js" new file mode 100644 index 0000000..68f1d0b --- /dev/null +++ "b/Izabelle_Exerc\303\255cio de Casa/script/script.js" @@ -0,0 +1,55 @@ +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", + } +] \ No newline at end of file diff --git "a/Izabelle_Exerc\303\255cio de Casa/style/style.css" "b/Izabelle_Exerc\303\255cio de Casa/style/style.css" new file mode 100644 index 0000000..e69de29 From b926aef48d41759a381360ac8644562b5dd6a8a7 Mon Sep 17 00:00:00 2001 From: Izabelle Souza Date: Fri, 30 Apr 2021 22:29:04 -0300 Subject: [PATCH 2/2] =?UTF-8?q?depois=20de=20muitas=20tentativas,finalment?= =?UTF-8?q?e=20saiu-altera=C3=A7=C3=A3o=20projeto=20Js=20II-?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../img/biblioteca-online.png" | Bin 0 -> 2578 bytes .../index.html" | 80 +++++++++ .../script/script.js" | 64 ++++++- .../style/style.css" | 167 ++++++++++++++++++ 4 files changed, 305 insertions(+), 6 deletions(-) create mode 100644 "Izabelle_Exerc\303\255cio de Casa/img/biblioteca-online.png" diff --git "a/Izabelle_Exerc\303\255cio de Casa/img/biblioteca-online.png" "b/Izabelle_Exerc\303\255cio de Casa/img/biblioteca-online.png" new file mode 100644 index 0000000000000000000000000000000000000000..c07e9f4896c8dc848fb2421f1f83a9d85d480aa1 GIT binary patch literal 2578 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 literal 0 HcmV?d00001 diff --git "a/Izabelle_Exerc\303\255cio de Casa/index.html" "b/Izabelle_Exerc\303\255cio de Casa/index.html" index e69de29..c060046 100644 --- "a/Izabelle_Exerc\303\255cio de Casa/index.html" +++ "b/Izabelle_Exerc\303\255cio de Casa/index.html" @@ -0,0 +1,80 @@ + + + + + + + + Biblioteca + + + + +
+
+

Biblioteca Online

+
+ + + + + + + + + + + + + + + + + +
+ + +
+ +
+ +
+ + + + + + + + + + + + + + + +
TítuloAutor(a)ISBNData de Publicação
+ +
+ +
+ + + +
+
+ Projeto feito com muito carinho por Izabelle Souza e ©Reprograma. +
+ + + + \ No newline at end of file diff --git "a/Izabelle_Exerc\303\255cio de Casa/script/script.js" "b/Izabelle_Exerc\303\255cio de Casa/script/script.js" index 68f1d0b..4069e37 100644 --- "a/Izabelle_Exerc\303\255cio de Casa/script/script.js" +++ "b/Izabelle_Exerc\303\255cio de Casa/script/script.js" @@ -2,35 +2,30 @@ 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", }, @@ -52,4 +47,61 @@ let books = [ author: "Glenn Block, et al.", published: "2014-04-07T00:00:00.000Z", } -] \ No newline at end of file +] + + + + +function exibirDados (event) { + event.preventDefault(); + + let pegaAutor = document.querySelector('#autor').value; + let pegaTítulo = document.querySelector('#titulo').value; + let pegaISBN = document.querySelector('#isbn').value; + let pegaDataPublicacao = document.querySelector('#dataPublicacao').value; + + + document.getElementById('resposta').innerHTML += ` + + ${pegaTítulo} + ${pegaAutor} + ${pegaISBN} + ${pegaDataPublicacao} + + ` + limpardados() +} + + +let book = books.forEach((books) => { + + const parseDate = new Date(books.published); + const getData = parseDate.toLocaleDateString('pt-br'); + books.published = getData; +}) + +let selectionBooks = books.map(function(books){ + return ` + ${books.title} + ${books.author} + ${books.isbn} + ${books.published} + ` +}); + +document.querySelector("#resposta tbody").innerHTML = selectionBooks.join(""); + + +function limpardados () { + document.querySelector('#titulo').value=""; + document.querySelector('#autor').value=""; + document.querySelector('#isbn').value=""; + document.querySelector('#dataPublicacao').value=""; + +} + +document.querySelector("#botaoDelete").addEventListener('click', function exluirLivro (event) { + event.preventDefault(); + + document.getElementById('tabelaDeLivro').remove(); +}) diff --git "a/Izabelle_Exerc\303\255cio de Casa/style/style.css" "b/Izabelle_Exerc\303\255cio de Casa/style/style.css" index e69de29..1b7250f 100644 --- "a/Izabelle_Exerc\303\255cio de Casa/style/style.css" +++ "b/Izabelle_Exerc\303\255cio de Casa/style/style.css" @@ -0,0 +1,167 @@ +@import url("https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@400;500;600;700&family=Josefin+Slab:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Mulish:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300;1,400&display=swap"); + +* { + box-sizing: border-box; + margin: 0; + border-radius: 10px; + border-style: hidden; + color: white; + +} + +body { + background: #7303c0; + background: -webkit-linear-gradient(to right, #a044ff, #6a3093); + background: linear-gradient(to left, #a044ff, #6a3093); + background: url(../img/biblioteca-online.png); +} + +/* Estilo do Formulario */ +label { + font-size: 1rem; + padding-bottom: 5px; + font-family: "Baloo Da 2", serif; + color: red; +} + +input { + margin-bottom: 20px; + padding: 10px; + border-color: #4baec1; + color: red; +} + +h1 { + color: red; + text-align: center; + font-style: italic; + font-family: "Baloo Da 2", serif; + +} + +.formulario { + padding: 50px 20px 30px 20px; + display: flex; + justify-content: space-around; + text-align: left; + flex-direction: column; + background-color: #dbc2cf; + margin: 0 100px 0 100px; + overflow: hidden; + background-color: rgba(0, 0, 0, 0.8) +} + +.textoformulario { + padding: 15px; + display: flex; + flex-direction: column; +} + +/*TABELA*/ +table { + letter-spacing: normal; + width: 100%; + padding: 5%; + text-align: center; + margin-top: auto; + border-collapse: separate; +} + +th { + border: 1px solid #6d4ba3; + font-family: "Baloo Da 2", serif; + padding: 1%; + border-radius: 5px; + text-align: center; + color: white; + overflow: hidden; + background-color: rgba(0, 0, 0, 0.8) +} + +tr { + background-color: #6d4ba3; + font-family: "Baloo Da 2", serif; + text-align: center; +} + +td { + text-align: center; + height: 4vh; + padding: auto; + color: rgb(255, 255, 255); +} + +.excluirLivro { + color: white; + padding: 15px 32px; + text-align: center; + font-size: 3rem; + margin-top: 20px; +} + +/*RESPONSIVIDADE*/ + +@media screen and (min-width: 768px) { + body { + background-color: red; + } + + h1 { + text-align: center; + width: auto; + + } + + table { + letter-spacing: normal; + width: 100%; + padding: 5%; + text-align: center; + margin-top: auto; + border-collapse: separate; + } + + table { + letter-spacing: normal; + width: 100%; + padding: 5%; + text-align: center; + margin: 0; + margin-top: auto; + border-collapse: separate; + } + + th { + border: 1px solid #6d4ba3; + padding: 1%; + font-size: 1rem; + border-radius: 5px; + text-align: center; + color: red; + + } + + tr { + background-color: #6d4ba3; + text-align: center; + overflow: hidden; + background-color: rgba(0, 0, 0, 0.8) + + } + + td { + text-align: center; + height: 4vh; + padding: auto; + color: rgb(255, 255, 255); + } + + .excluirLivro { + color: white; + padding: 15px 32px; + text-align: center; + font-size: 3rem; + margin-top: 20px; + } + +} \ No newline at end of file