reprograma · izabellesouza · Apr 29, 2021 · May 1, 2021
diff --git a/Izabelle_Exercício de Casa/README.md b/Izabelle_Exercício 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ício de Casa/img/biblioteca-online.png b/Izabelle_Exercício de Casa/img/biblioteca-online.png
diff --git a/Izabelle_Exercício de Casa/index.html b/Izabelle_Exercício de Casa/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Biblioteca</title>
+    <link rel="stylesheet" href="style/style.css">
+</head>
+
+<body>
+    <main>
+        <form class="formulario" onsubmit="exibirDados (event)">
+            <h1>Biblioteca Online</h1>
+            <div class="textoformulario">
+                <label for="titulo">
+                    Título*
+                </label>
+                <input type="text" id="titulo" placeholder="Digite o título do Livro" onfocus=this.value='' required>
+
+                <label for="autor">
+                    Autor(a)*
+                </label>
+                <input type="autor" id="autor" placeholder="Digite o autor do Livro" onfocus=this.value='' required>
+
+                <label for="isbn">
+                    ISBN*
+                </label>
+                <input type="number" id="isbn" placeholder="Digite o ISBN do Livro">
+
+                <label for="paginas">
+                    Páginas*
+                </label>
+                <input type="number" id="paginas" placeholder="Número de páginas">
+
+
+
+                <label for="dataPublicacao" class = 'news_label' >Data de Publicação* </label>
+
+                <input type="date"  class = 'news_imput' id="dataPublicacao" onfocus=this.value = '' required>
+            </div>
+
+
+         <div class="textoformulario">
+                <input type="submit" class="button" name="enviar" id="botaoDeEnviar" value="ENVIAR">
+            </div> 
+
+        </form>
+
+        <!--seção tabela começa aqui-->
+        <table class="tabela" id="resposta">
+            <thead class="cabecalhotabela">
+                <tr>
+                    <th>Título</th>
+                    <th>Autor(a)</th>
+                    <th>ISBN</th>
+                    <th>Data de Publicação</th>
+                </tr>
+            </thead>
+           <tbody> 
+
+           </tbody>
+
+        </table>
+
+        <div class="excluirLivro">
+            <input type="button" class="botaoExcluir" id="botaoDelete" name="excluir" value="EXCLUIR">
+        </div>
+
+
+        </section>
+    </main>
+    <footer style="color:white; text-align:center">
+        Projeto feito com muito carinho por Izabelle Souza e ©Reprograma.
+    </footer>
+    <script src="script/script.js"></script>
+</body>
+
+</html>
diff --git a/Izabelle_Exercício de Casa/script/script.js b/Izabelle_Exercício 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 += `
+    <tr id="tabelaDeLivro">
+        <td>${pegaTítulo}</td>
+        <td>${pegaAutor}</td>
+        <td>${pegaISBN}</td>
+        <td>${pegaDataPublicacao}</td>
+    </tr>
+    `
+    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 `<tr>
+    <td>${books.title}</td>
+    <td>${books.author}</td>
+    <td>${books.isbn}</td>
+    <td>${books.published}</td>
+        </tr>`
+});
+
+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();
+})