From d3e9a72b6efcf8eaa2eb3cba63f13fc3e5f4fc0b Mon Sep 17 00:00:00 2001 From: gabrielacsalesc Date: Fri, 18 Jun 2021 10:15:12 -0300 Subject: [PATCH] biblioteca --- Exercicios/10. array.map()/script.js | 8 +- Exercicios/10. array.map()/script2.js | 29 ++++ Exercicios/11. array.forEach()/script.js | 8 + Exercicios/2. for/script.js | 32 +++- Exercicios/4. array.push()/script.js | 4 +- Exercicios/5. array.pop()/script.js | 9 +- Exercicios/6. array.shift()/script.js | 13 +- Exercicios/7. array.unshift()/script.js | 10 +- Exercicios/8. array.slice()/script.js | 9 +- Exercicios/9. array.splice()/script.js | 20 ++- "Exerc\303\255cio de Casa/index.html" | 65 +++++++ "Exerc\303\255cio de Casa/script/script.js" | 72 +++++++- "Exerc\303\255cio de Casa/style/style.css" | 182 ++++++++++++++++++++ 13 files changed, 447 insertions(+), 14 deletions(-) create mode 100644 Exercicios/10. array.map()/script2.js diff --git a/Exercicios/10. array.map()/script.js b/Exercicios/10. array.map()/script.js index b6e4227..4db659e 100644 --- a/Exercicios/10. array.map()/script.js +++ b/Exercicios/10. array.map()/script.js @@ -5,4 +5,10 @@ const usuarios = [ {user:237, name: 'Mariana', idade:15 }, {user:238, name: 'Isis', idade:34 }, {user:239, name: 'Pietra', idade:23 } -] \ No newline at end of file +] + +const textoResultado = usuarios.map((participantes) => { + return 'Nome: ${participantes.name}, Idade: ${participantes.idade}' +}); + +console.log(textoResultado); \ No newline at end of file diff --git a/Exercicios/10. array.map()/script2.js b/Exercicios/10. array.map()/script2.js new file mode 100644 index 0000000..553362b --- /dev/null +++ b/Exercicios/10. array.map()/script2.js @@ -0,0 +1,29 @@ +const winners = [ + { + nome: 'Equipe Maravilinda', + pais: 'Canadá', + }, + { + nome: 'Liga da Justiça', + pais: 'EUA', + }, + { + nome:'Mega Grupo', + pais:'Brasil', + }, + +], + +const vencedores = winners.map((equipe) => { + + return equipe.nome; +}); + +const paises = winners.map (function(local) { + return local.pais +}); + + + +console.log(vencedores); +console.log(paises); \ No newline at end of file diff --git a/Exercicios/11. array.forEach()/script.js b/Exercicios/11. array.forEach()/script.js index 9c1e191..31e59a4 100644 --- a/Exercicios/11. array.forEach()/script.js +++ b/Exercicios/11. array.forEach()/script.js @@ -1 +1,9 @@ const numbers = [65, 44, 12, 4, 68]; + +let sum = 0; + +sum.forEach((numero) => { + sum += numero; +}) + +console.log(sum); diff --git a/Exercicios/2. for/script.js b/Exercicios/2. for/script.js index 557d6fc..2a730e4 100644 --- a/Exercicios/2. for/script.js +++ b/Exercicios/2. for/script.js @@ -1 +1,31 @@ -const listagemDeFrutas = ["Uva", "Banana", "Manga", "Cajá", "Pinha", "Maçã", "Melão"]; +//const listagemDeFrutas = ["Uva", "Banana", "Manga", "Cajá", "Pinha", "Maçã", "Melão"]; +// for (let fruta = 0; fruta < listagemDeFrutas.length; fruta++){ + // console.log(listagemDeFrutas[fruta]); + // } +//*FRUTA É UM INDEX +// DEVEMOS SEMPRE NOMEAR O INDEX + +//ECERCICIO DE CASA + +//const usuarios = [ + // {user: 234, name: 'Marcia', idade: 40 }, + // {user: 235, name: 'Lorena', idade: 20 }, + // {user: 236, name: 'Patricia', idade: 24 }, + // {user: 237, name: 'Mariana', idade: 15 }, + // {user: 238, name: 'Isis', idade: 34 }, +//{user: 239, name: 'Pietra', idade: 23 } +//] +//um jeito + //for (let contador = 0; contador < usuarios.length ; contador++) { + // if (usuarios[contador].user === 235) { + // console.log(usuarios[contador].name, usuarios[contador].idade); + // } +//} +// outro jeito +//for (let contador of usuarios) { + + // if(contador.user === 235) { + // console.log(contador.name, contador.idade); + //} + +//} \ No newline at end of file diff --git a/Exercicios/4. array.push()/script.js b/Exercicios/4. array.push()/script.js index db2e01a..6814306 100644 --- a/Exercicios/4. array.push()/script.js +++ b/Exercicios/4. array.push()/script.js @@ -1 +1,3 @@ -const listagemDeFrutas = [ "Uva", "Banana", "Manga", "Cajá", "Pinha", "Maçã", "Melão"]; \ No newline at end of file +const listagemDeFrutas = [ "Uva", "Banana", "Manga", "Cajá", "Pinha", "Maçã", "Melão"]; + listagemDeFrutas.push('Morango'); + console.log(listagemDeFrutas); \ No newline at end of file diff --git a/Exercicios/5. array.pop()/script.js b/Exercicios/5. array.pop()/script.js index b6f649a..dfd4479 100644 --- a/Exercicios/5. array.pop()/script.js +++ b/Exercicios/5. array.pop()/script.js @@ -1,4 +1,8 @@ const listagemDeFrutas = [ "Uva", "Banana", "Manga", "Cajá", "Pinha", "Maçã", "Melão"]; + + const ulitmoElementodaListagem = listagemDeFrutas.pop(); + console.log(listagemDeFrutas); + console.log(ulitmoElementodaListagem); const usuarios = [ {user:234, name: 'Marcia', idade:40 }, @@ -7,4 +11,7 @@ const usuarios = [ {user:237, name: 'Mariana', idade:15 }, {user:238, name: 'Isis', idade:34 }, {user:239, name: 'Pietra', idade:23 } -] \ No newline at end of file +] + const removeUsuario = usuarios.pop(); + console.log(usuarios); + console.log(removeUsuario); \ No newline at end of file diff --git a/Exercicios/6. array.shift()/script.js b/Exercicios/6. array.shift()/script.js index b6f649a..0141f3a 100644 --- a/Exercicios/6. array.shift()/script.js +++ b/Exercicios/6. array.shift()/script.js @@ -1,5 +1,12 @@ const listagemDeFrutas = [ "Uva", "Banana", "Manga", "Cajá", "Pinha", "Maçã", "Melão"]; +const firstElement = listagemDeFrutas.shift(); +console.log(listagemDeFrutas); +console.log(firstElement); + + + + const usuarios = [ {user:234, name: 'Marcia', idade:40 }, {user:235, name: 'Lorena', idade:20 }, @@ -7,4 +14,8 @@ const usuarios = [ {user:237, name: 'Mariana', idade:15 }, {user:238, name: 'Isis', idade:34 }, {user:239, name: 'Pietra', idade:23 } -] \ No newline at end of file +] + + const firstUsuario = usuarios.shift(); + console.log(usuarios); + console.log(firstUsuario); diff --git a/Exercicios/7. array.unshift()/script.js b/Exercicios/7. array.unshift()/script.js index 8421f62..ad34372 100644 --- a/Exercicios/7. array.unshift()/script.js +++ b/Exercicios/7. array.unshift()/script.js @@ -1,4 +1,10 @@ const listagemDeFrutas = [ "Uva", "Banana", "Manga", "Cajá", "Pinha", "Maçã", "Melão"]; + +listagemDeFrutas.unshift('Morango'); +console.log(listagemDeFrutas); + + + const usuarios = [ {user:234, name: 'Marcia', idade:40 }, {user:235, name: 'Lorena', idade:20 }, @@ -6,4 +12,6 @@ const usuarios = [ {user:237, name: 'Mariana', idade:15 }, {user:238, name: 'Isis', idade:34 }, {user:239, name: 'Pietra', idade:23 } -] \ No newline at end of file +] +usuarios.unshift('user:233'); +console.log(usuarios); \ No newline at end of file diff --git a/Exercicios/8. array.slice()/script.js b/Exercicios/8. array.slice()/script.js index 8421f62..59f1345 100644 --- a/Exercicios/8. array.slice()/script.js +++ b/Exercicios/8. array.slice()/script.js @@ -1,4 +1,9 @@ const listagemDeFrutas = [ "Uva", "Banana", "Manga", "Cajá", "Pinha", "Maçã", "Melão"]; + +const selectedItens = listagemDeFrutas.slice(0,3); +console.log(selectedItens); +//retorna os que estão dentro do intervalo + const usuarios = [ {user:234, name: 'Marcia', idade:40 }, {user:235, name: 'Lorena', idade:20 }, @@ -6,4 +11,6 @@ const usuarios = [ {user:237, name: 'Mariana', idade:15 }, {user:238, name: 'Isis', idade:34 }, {user:239, name: 'Pietra', idade:23 } -] \ No newline at end of file +] +const selectedUsuarios = usuarios.slice(0,3); +console.log(selectedUsuarios); \ No newline at end of file diff --git a/Exercicios/9. array.splice()/script.js b/Exercicios/9. array.splice()/script.js index 08107fd..d907b17 100644 --- a/Exercicios/9. array.splice()/script.js +++ b/Exercicios/9. array.splice()/script.js @@ -1,4 +1,11 @@ const countryList = [ "Argentina","Armenia","Australia","Azerbaijan","Bahamas","Brazil","Burkina Faso", "Costa Rica","Mauritania","St Vincent","Uganda","United Arab Emirates","Uruguay","Uzbekistan","Venezuela"]; + +const paisesLista = countryList.splice (0,3, 'Japão'); +console.log(countryList); +console.log(paisesLista); + +//PRINCIPAL USO É A REMOÇÃO DE ITENS + const usuarios = [ {user:234, name: 'Marcia', idade:40 }, {user:235, name: 'Lorena', idade:20 }, @@ -6,4 +13,15 @@ const usuarios = [ {user:237, name: 'Mariana', idade:15 }, {user:238, name: 'Isis', idade:34 }, {user:239, name: 'Pietra', idade:23 } -] \ No newline at end of file +] +const listaUsuarios = usuarios.splice (0,3, 'Yasmim'); +console.log(listaUsuarios); +console.log(usuarios); + +usuarios.splice(0,1,{ + user:233, + name:'Yasmim', + idade:26, +}) + +console.log(usuarios); \ No newline at end of file diff --git "a/Exerc\303\255cio de Casa/index.html" "b/Exerc\303\255cio de Casa/index.html" index e69de29..129ea24 100644 --- "a/Exerc\303\255cio de Casa/index.html" +++ "b/Exerc\303\255cio de Casa/index.html" @@ -0,0 +1,65 @@ + + + + + + + + + My Audible Books + + +
+ Logo do My Audible Books +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+

Acervo de livros da biblioteca:

+ + + +
+
+ +
+
+ +
+
+ +
+
+ + + + + +
TítuloAutorISBNData de Publicação
+
+
+ + + \ No newline at end of file diff --git "a/Exerc\303\255cio de Casa/script/script.js" "b/Exerc\303\255cio de Casa/script/script.js" index 68f1d0b..6300b86 100644 --- "a/Exerc\303\255cio de Casa/script/script.js" +++ "b/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,69 @@ let books = [ author: "Glenn Block, et al.", published: "2014-04-07T00:00:00.000Z", } -] \ No newline at end of file +] +/*Exibindo na tabela, assim que carrega a página, os dados do array books*/ +function exibirArrayBooks(){ + for (let book of books) { + /*Tratando as datas de publicação vindas no array books*/ + let data = new Date(book.published); + let dia = data.setDate(data.getDate()+1); + let dataFormatada = data.toLocaleDateString("pt-br"); + /*Exibindo no HTML os elementos do array books, inclusive a data já formatada*/ + document.getElementById("corpo-tabela").innerHTML += ` + + ${book.title} + ${book.author} + ${book.isbn} + ${dataFormatada} + + + ` + } +} +exibirArrayBooks(); + +/*Exibindo os livros que forem sendo adicionados por meio do formulário*/ +function exibirDadosTabela(event){ + event.preventDefault(); + + /*Adiciona os dados do formulário, dentro de um único objeto, no último elemento do array books*/ + books.push({ + isbn: document.getElementById('isbnDoLivro').value, + title: document.getElementById('tituloDoLivro').value, + author: document.getElementById('autorDoLivro').value, + published: document.getElementById('dataDePublicacaoDoLivro').value, + }) + + /*Verifica esse último elemento, cujo índice é length-1, do array books*/ + for(let book = books.length-1; book <= books.length-1; book++){ + if(books[book].isbn === "" || books[book].title === "" || books[book].author ==="" || books[book].published ==="") { + alert("Os dados não foram inseridos corretamente. Tente novamente!") + books.pop(); /*Se os dados desse último elemento forem vazios, ele é retirado do arrey books*/ + }else{ + /*Se os dados desse último elemento não forem vazios, ele continua sendo o último elemento do arrey books*/ + /*Antes de ser exibido no html, a data desse último elemento passa por um tratamento*/ + let dataPublicacao = new Date(books[book].published); + let dia = dataPublicacao.setDate(dataPublicacao.getDate()+1); + let dataPublicacaoFormatada = dataPublicacao.toLocaleDateString("pt-br"); + + /*Depois da data ser tratada, os valores desse último elemento do array, que foram os inseridos no formulário, são, finalmente, exibidos no html*/ + document.getElementById("corpo-tabela").innerHTML += ` + + ${books[book].title} + ${books[book].author} + ${books[book].isbn} + ${dataPublicacaoFormatada} + + + ` + } + } +} +/*Função que permite a remoção dos elementos por meio do botão*/ +document.getElementById('corpo-tabela').addEventListener('click', function removerLinhaLivro(event) { + if (event.target.className === "botao-tabela") { + 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..bed1c82 100644 --- "a/Exerc\303\255cio de Casa/style/style.css" +++ "b/Exerc\303\255cio de Casa/style/style.css" @@ -0,0 +1,182 @@ +* { + box-sizing: border-box; + font-family: 'Montserrat', Arial, Helvetica, sans-serif; + margin: 0; + text-decoration: none; + color: inherit; +} + +body{ + background-color: #d3d3d3; +} + +/*-Mobile First-*/ +/*header*/ +.header{ + width: 100%; + height: 80px; + text-align: center; +} +.img-header{ + width: 80%; + padding: 20px; +} +/*section formulário*/ +.section-formulario{ + width: 100%; + padding: 12px; +} +.legenda-formulario{ + width: 100%; + margin-top: 10px; + margin-bottom: 10px; + font-size: 13px; + padding: 7px; + color: #757575; +} +.caixaDeTexto-formulario{ + width: 100%; + margin-top: 10px; + margin-bottom: 10px; + padding: 7px; + border-style:none ; +} +.botaoFormulario{ + width: 100%; + margin-top: 10px; + margin-bottom: 10px; + padding: 7px; + color: white; + background-color: #009cba; + border-style:none; +} +/*section tabela de exibição*/ +.section-tabela{ + margin-top: 20px; + margin-bottom: 80px; + margin-left: 10px; + margin-right: 10px; +} +.titulo-section-tabela{ + display: block; + color: #757575; + padding: 20px; + font-size: 18px; + text-align: center; +} +table{ + background-color: gray; + border-radius: 3px; + padding-top: 15px; + padding-bottom: 10px; + margin-left: 3px; + margin-right: 3px; +} +th{ + font-size: 8px; + padding: 4px; +} + +td{ + font-size: 9px; + text-align: center; + word-break: break-word; +} +.botao-tabela{ + width: 15px; + height: 15px; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-image: url(../img/icone-lixeira.png); + border-style: none; + border-radius: 2px; + background-color: gray; +} + +@media (min-width: 768px) { + .header{ + height: 100px; + } + .img-header{ + width: 60%; + padding: 35px; + } + .section-formulario{ + padding-left: 60px; + padding-right: 60px; + } + .section-tabela{ + margin-left: 60px; + margin-right: 60px; + } + .titulo-section-tabela{ + padding: 50px; + font-size: 30px; + padding-bottom: 30px; + } + table{ + width: 100%; + margin: 0; + } + th{ + font-size: 12px; + padding: 15px; + } + + td{ + font-size: 12px; + } + .botao-tabela{ + width: 25px; + height: 25px; + } +} + +@media (min-width: 1281px) { + .header{ + height: 200px; + } + .img-header { + padding-left: 180px; + padding-right: 180px; + padding-top: 80px; + } + .section-formulario{ + padding-left: 180px; + padding-right: 180px; + } + .section-tabela{ + margin-left: 180px; + margin-right: 180px; + } + .legenda-formulario{ + font-size: 20px; + } + .caixaDeTexto-formulario{ + padding: 15px; + } + .botaoFormulario{ + font-size: 20px; + padding: 10px; + } + .titulo-section-tabela{ + padding: 90px; + font-size: 30px; + padding-bottom: 60px; + } + th { + font-size: 20px; + padding: 10px; + } + td { + font-size: 20px; + padding: 5px; + } + + .botao-tabela{ + width: 35px; + height: 35px; + } + +} \ No newline at end of file