reprograma · AlvesAline · Apr 23, 2021 · Apr 23, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Exercicios/1/index.html b/Exercicios/1/index.html
@@ -7,6 +7,11 @@
     <title>Document</title>
 </head>
 <body>
-
+    <form action="envio_dados">
+        <input type="text" name="nome" id="nomeDaPessoa" placeholder="Digite o seu nome aqui.">
+        <input type="submit" name="enviar" id="botaoDeEnviar" value="Enviar">
+    </form>
+    <div id="resposta"></div>
+    <script src="./js/script.js"></script>
 </body>
 </html>
diff --git a/Exercicios/1/js/script.js b/Exercicios/1/js/script.js
@@ -0,0 +1,13 @@
+document.querySelector('#botaoDeEnviar').addEventListener('click', function armazenarDados(event) {
+    event.preventDefault();
+
+    let pegaNome = document.getElementById('nomeDaPessoa');
+    let exibeResposta = document.getElementById('resposta');
+
+    if (pegaNome.value === '') {
+        exibeResposta.innerText= 'Por favor, digite o seu nome';
+    } else {
+        exibeResposta.innerHTML = (`${pegaNome.value}, dados salvos com sucesso!`);
+    }
+
+})
diff --git a/Exercicios/2/index.html b/Exercicios/2/index.html
@@ -16,6 +16,7 @@ <h1>Venda de apartamentos</h1>
     <div>Apartamento de três dormitórios, clique e veja o preço:</div>
     <button id="btnAptoTresDorm">Cliqui aqui</button>
     <div id="precoAptoTresDorm"></div>
+
     <script src="js/script.js"></script>
   </body>
 </html>
diff --git a/Exercicios/2/js/script.js b/Exercicios/2/js/script.js
@@ -1,12 +1,18 @@
 function mostraPrecoAptoDoisDorm() {
     //especificar o elemento do DOM que será manipulado. DICA: botão
+    let getBotaoApDoisDorm = document.querySelector('#btnAptoDoisDorm');
 
+    getBotaoApDoisDorm.addEventListener('click', function mostraValor() {
+      document.getElementById('precoAptoDoisDorm').innerText="Preço do imóvel: R$: 500.000,00"
+    })
     //evento de exibição do valor do imóvel
   };
 
   function mostraPrecoAptoTresDorm() {
-
+    document.getElementById('precoAptoTresDorm').innerHTML="Preço do imóvel: R$ 6000.00,00"
   };
 
   mostraPrecoAptoDoisDorm();
-  mostraPrecoAptoTresDorm();
+  mostraPrecoAptoTresDorm();
+
+\
diff --git a/Exercicios/teste-event-listener/index.html b/Exercicios/teste-event-listener/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<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">
+    <title>Document</title>
+</head>
+<body>
+    <h1 class="meu-titulo">Olá a todos!</h1>
+    <p id="meuNome">Meu nome é Aline</p>
+    <span>Clique para mudar o background dessa página</span>
+    <button id=acoesBotao">Clique aqui</button>
+
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/Exercicios/teste-event-listener/script.js b/Exercicios/teste-event-listener/script.js
@@ -0,0 +1,8 @@
+document.getElementsById('acoesBotao').addEventListener('click', function acionarBotao(){
+    const mudaCorTitulo = document.querySelector('.meu-titulo').style.color ="blue";
+
+    const mudaParagrafo = document.querySelector('#meuNome').innerHTML += " e eu tenho 32 anos";
+
+    const mudaEstiloSpan = document.querySelector('span').style.textDecoration = "underline";
+});
+
diff --git a/Exercicios/teste-exemplo/index.html b/Exercicios/teste-exemplo/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=p, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <p id="mudanca-texto">Clique nesse botão para mudar o texto desse parágrafo!</p>
+    <button onclick="alterarTexto()">clicar</button>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/Exercicios/teste-exemplo/script.js b/Exercicios/teste-exemplo/script.js
@@ -0,0 +1,6 @@
+
+
+function alterarTexto(){
+    const textoAAlterar = document.getElementById("mudanca-texto").innerHTML = "Hello World";
+    return textoAAlterar;
+}
diff --git a/Exercicios/teste-query-selector/index.html b/Exercicios/teste-query-selector/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<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">
+    <title>Document</title>
+</head>
+<body>
+    <h1 class="meu-titulo">Olá a todos!</h1>
+    <p id="meuNome">Meu nome é Aline</p>
+    <span>Clique para mudar o background dessa página</span>
+    <button onclick="mudarCor()">Clique aqui</button>
+
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/Exercicios/teste-query-selector/script.js b/Exercicios/teste-query-selector/script.js
@@ -0,0 +1,7 @@
+function mudarCor() {
+    const mudaCorTitulo = document.querySelector('.meu-titulo').style.color ="blue";
+
+    const mudaParagrafo = document.querySelector('#meuNome').innerHTML += " e eu tenho 32 anos";
+
+    const mudaSpan = document.querySelector('span').style.textDecoration = "underline";
+}
diff --git a/Exercicios/teste-query-selector/style.css b/Exercicios/teste-query-selector/style.css
@@ -0,0 +1,3 @@
+*{
+    background-color: lightcoral;
+}
diff --git a/Exercício de Casa/.DS_Store b/Exercício de Casa/.DS_Store
diff --git a/Exercício de Casa/style/.DS_Store b/Exercício de Casa/style/.DS_Store
diff --git a/Exercício-aline/.DS_Store b/Exercício-aline/.DS_Store
diff --git a/Exercício-aline/README.md b/Exercício-aline/README.md
@@ -0,0 +1,95 @@
+# Desafio: Biblioteca
+
+---
+## Instruções para a realização do projeto:
+
+1. Entre no repositório aqui mencionado (https://github.com/reprograma/On10-TodasEmTech-JavascriptI).
+
+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. Enviem o link do GitHub do projeto que vocês forkaram em suas contas particulares.
+
+
+---
+
+## 1. Introdução
+
+Vocês estão atuando como *freelancers* em um projeto para uma biblioteca. 
+
+O cliente pediu para que vocês desenvolvessem uma página onde é possível **(i)** inserir informações relevantes sobre novos livros adquiridos pela biblioteca, e **(ii)** visualizar as informações dos livros que foram inseridos anteriormente no sistema.
+
+## 2. Detalhes Técnicos do Projeto:
+
+A tela inicial deve conter duas partes essenciais: 
+
+- um formulário para inserção das informações dos livros:
+
+![project](./../assets/screenshotproject.png)
+
+- uma listagem dos livros que forem adicionados pelo usuário.
+
+![listagem](./../assets/listagemlivros.png)
+
+## 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 deve conter campos para 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. Um livro não pode ser adicionado sem as informações obrigatórias acima mencionadas *(Autor, Título, ISBN e Data de Publicação)*. Logo, o seu código deve prever um tratamento de erro, informando ao usuário a necessidade de preencher as informações obrigatórias faltantes.
+
+3. Está sendo disponibilizado um arquivo .json para que vocês terem uma ideia dos dados relevantes na inserção de dados sobre livros para uma biblioteca.
+
+4. Ao clicar no botão responsável por adicionar o livro, as informações devem ser imediatamente inseridas e visualizadas na listagem localizada abaixo do formulário. 
+
+5. O livro adicionado poderá ser deletado pelo usuário.
+
+6. **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**.
+
+7. É preciso seguir a estrutura de repositório contida nessa pasta "Exercício de Casa".
+
+8. *Estilização*: o estilo dos prints colocados acima são apenas sugestões; 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.
+
diff --git a/Exercício-aline/img/livro.jpeg b/Exercício-aline/img/livro.jpeg
diff --git a/Exercício-aline/index.html b/Exercício-aline/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<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>Biblioteca</title>
+</head>
+<body>
+    <div class="formulario">
+        <h1>MyAudibleBooks</h1>
+        <form action="" class="adicionadoFormulario" onsubmit="dadosFormulario(event)" >
+            <div>
+                <label for="livro" class="tituloFormulario">Livro</label><br>
+                <input class="caixasFormulario" type="text" name="titulo" id="titulo"><br><br>
+                <label for="autor">Autor</label><br>
+                <input class="caixasFormulario" type="text" name="autor" id="autor"><br><br>
+                <label for="isbn">ISBN</label><br>
+                <input class="caixasFormulario" type="text" name="isbn" id="isbn"><br><br>
+                <label for="data">Data de publicação</label><br>
+                <input class="caixasFormulario" type="date" name="data" id="data"><br><br>
+                <label for="paginas">Páginas</label><br>
+                <input class="caixasFormulario" type="number" name="paginas" id="paginas">
+            </div><br>
+            <div>
+                <input type="submit" class="caixasFormulario botaoAdd" name="adicionar" id="botaoDeEnviar" value="Adicionar Livro">       
+            </div>
+                <div id="resposta" class="listaResposta">
+                </div>
+        </form>
+    </div>  
+    <div class="listaInicio">
+    <table class="adicionandoNaTabela">
+        <thead>
+            <tr>
+                <div class="lista">
+                    <th scope="col">Titulo</th>
+                    <th scope="col">Autor</th>
+                    <th scope="col">ISBN</th>
+                    <th scope="col">Data de Publicação</th>
+                    <th scope="col">Páginas</th>
+                    <th scope="col">Data de inserção</th>  
+                    <th scope="col">Ação</th>  
+                </div>     
+            </tr>
+            </thead>  
+        <tbody id="respostasFormulario">
+
+        </tbody>
+    </table>
+</div>
+    <script src="./script/script.js"></script>
+</body>
+</html>
+
diff --git a/Exercício-aline/script/books.js b/Exercício-aline/script/books.js
@@ -0,0 +1,90 @@
+const books = [
+    {
+        "isbn": "9781593275846",
+        "title": "Eloquent JavaScript, Second Edition",
+        "subtitle": "A Modern Introduction to Programming",
+        "author": "Marijn Haverbeke",
+        "published": "2014-12-14T00:00:00.000Z",
+        "publisher": "No Starch Press",
+        "pages": 472,
+        "description": "JavaScript lies at the heart of almost every modern web application, from social apps to the newest browser-based games. Though simple for beginners to pick up and play with, JavaScript is a flexible, complex language that you can use to build full-scale applications.",
+        "website": "http://eloquentjavascript.net/"
+    },
+    {
+        "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",
+        "publisher": "O'Reilly Media",
+        "pages": 254,
+        "description": "With Learning JavaScript Design Patterns, you'll learn how to write beautiful, structured, and maintainable JavaScript by applying classical and modern design patterns to the language. If you want to keep your code efficient, more manageable, and up-to-date with the latest best practices, this book is for you.",
+        "website": "http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/"
+    },
+    {
+        "isbn": "9781449365035",
+        "title": "Speaking JavaScript",
+        "subtitle": "An In-Depth Guide for Programmers",
+        "author": "Axel Rauschmayer",
+        "published": "2014-02-01T00:00:00.000Z",
+        "publisher": "O'Reilly Media",
+        "pages": 460,
+        "description": "Like it or not, JavaScript is everywhere these days-from browser to server to mobile-and now you, too, need to learn the language or dive deeper than you have. This concise book guides you into and through JavaScript, written by a veteran programmer who once found himself in the same position.",
+        "website": "http://speakingjs.com/"
+    },
+    {
+        "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",
+        "publisher": "O'Reilly Media",
+        "pages": 254,
+        "description": "Take advantage of JavaScript's power to build robust web-scale or enterprise applications that are easy to extend and maintain. By applying the design patterns outlined in this practical book, experienced JavaScript developers will learn how to write flexible and resilient code that's easier-yes, easier-to work with as your code base grows.",
+        "website": "http://chimera.labs.oreilly.com/books/1234000000262/index.html"
+    },
+    {
+        "isbn": "9781593277574",
+        "title": "Understanding ECMAScript 6",
+        "subtitle": "The Definitive Guide for JavaScript Developers",
+        "author": "Nicholas C. Zakas",
+        "published": "2016-09-03T00:00:00.000Z",
+        "publisher": "No Starch Press",
+        "pages": 352,
+        "description": "ECMAScript 6 represents the biggest update to the core of JavaScript in the history of the language. In Understanding ECMAScript 6, expert developer Nicholas C. Zakas provides a complete guide to the object types, syntax, and other exciting changes that ECMAScript 6 brings to JavaScript.",
+        "website": "https://leanpub.com/understandinges6/read"
+    },
+    {
+        "isbn": "9781491904244",
+        "title": "You Don't Know JS",
+        "subtitle": "ES6 & Beyond",
+        "author": "Kyle Simpson",
+        "published": "2015-12-27T00:00:00.000Z",
+        "publisher": "O'Reilly Media",
+        "pages": 278,
+        "description": "No matter how much experience you have with JavaScript, odds are you don’t fully understand the language. As part of the \"You Don’t Know JS\" series, this compact guide focuses on new features available in ECMAScript 6 (ES6), the latest version of the standard upon which JavaScript is built.",
+        "website": "https://github.com/getify/You-Dont-Know-JS/tree/master/es6%20&%20beyond"
+    },
+    {
+        "isbn": "9781449325862",
+        "title": "Git Pocket Guide",
+        "subtitle": "A Working Introduction",
+        "author": "Richard E. Silverman",
+        "published": "2013-08-02T00:00:00.000Z",
+        "publisher": "O'Reilly Media",
+        "pages": 234,
+        "description": "This pocket guide is the perfect on-the-job companion to Git, the distributed version control system. It provides a compact, readable introduction to Git for new users, as well as a reference to common commands and procedures for those of you with Git experience.",
+        "website": "http://chimera.labs.oreilly.com/books/1230000000561/index.html"
+    },
+    {
+        "isbn": "9781449337711",
+        "title": "Designing Evolvable Web APIs with ASP.NET",
+        "subtitle": "Harnessing the Power of the Web",
+        "author": "Glenn Block, et al.",
+        "published": "2014-04-07T00:00:00.000Z",
+        "publisher": "O'Reilly Media",
+        "pages": 538,
+        "description": "Design and build Web APIs for a broad range of clients—including browsers and mobile devices—that can adapt to change over time. This practical, hands-on guide takes you through the theory and tools you need to build evolvable HTTP services with Microsoft’s ASP.NET Web API framework. In the process, you’ll learn how design and implement a real-world Web API.",
+        "website": "http://chimera.labs.oreilly.com/books/1234000001708/index.html"
+    }
+]