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/img/biblioteca-online.png" "b/Izabelle_Exerc\303\255cio de Casa/img/biblioteca-online.png" new file mode 100644 index 0000000..c07e9f4 Binary files /dev/null and "b/Izabelle_Exerc\303\255cio de Casa/img/biblioteca-online.png" differ 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..c060046 --- /dev/null +++ "b/Izabelle_Exerc\303\255cio de Casa/index.html" @@ -0,0 +1,80 @@ + + + + + + + + Biblioteca + + + + +
+
+

Biblioteca Online

+
+ + + + + + + + + + + + + + + + + +
+ + +
+ +
+ +
+ + + + + + + + + + + + + + + +
TítuloAutor(a)ISBNData de Publicação
+ +
+ +
+ + + +
+ + + + + \ 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" new file mode 100644 index 0000000..4069e37 --- /dev/null +++ "b/Izabelle_Exerc\303\255cio de Casa/script/script.js" @@ -0,0 +1,107 @@ +let books = [ + { + isbn: "9781593275846", + title: "Eloquent JavaScript, Second Edition", + author: "Marijn Haverbeke", + published: "2014-12-14T00:00:00.000Z", + }, + { + isbn: "9781449331818", + title: "Learning JavaScript Design Patterns", + author: "Addy Osmani", + published: "2012-07-01T00:00:00.000Z", + }, + { + isbn: "9781449365035", + title: "Speaking JavaScript", + author: "Axel Rauschmayer", + published: "2014-02-01T00:00:00.000Z", + }, + { + isbn: "9781491950296", + title: "Programming JavaScript Applications", + author: "Eric Elliott", + published: "2014-07-01T00:00:00.000Z", + }, + { + isbn: "9781593277574", + title: "Understanding ECMAScript 6", + 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", + } +] + + + + +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" new file mode 100644 index 0000000..1b7250f --- /dev/null +++ "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