From 4748ebb5fb54aea1297ea9cf550649acb072d23d Mon Sep 17 00:00:00 2001 From: Caroline Soares Date: Sun, 13 Jun 2021 01:45:40 -0300 Subject: [PATCH] listBooks --- .DS_Store | Bin 0 -> 8196 bytes .vscode/settings.json | 36 +++ Exercicios/.vscode/settings.json | 5 + Exercicios/1/index.html | 32 +- Exercicios/1/js/script.js | 28 +- Exercicios/1/js/script2.js | 22 +- Exercicios/2/index.html | 40 +-- Exercicios/2/instrucoes.md | 16 +- Exercicios/2/js/script.js | 34 +- Exercicios/3/css/style.css | 154 +++++----- Exercicios/3/index.html | 70 ++--- Exercicios/3/instrucoes.md | 6 +- Exercicios/3/script/script.js | 22 +- .../Teste-Event-Listener-carol/index.html | 21 ++ .../Teste-Event-Listener-carol/script.js | 8 + Exercicios/Teste-Event-Listener/index.html | 40 +-- Exercicios/Teste-Event-Listener/script.js | 14 +- .../Teste-Exemplo/.vscode/settings.json | 9 + .../carol-teste-exemplo/.vscode/settings.json | 20 ++ .../carol-teste-exemplo/README.md | 262 ++++++++++++++++ .../Teste-Query-Selector/index.html | 22 ++ .../Teste-Query-Selector/script.js | 9 + .../Teste-Query-Selector/style.css | 3 + .../Teste_exemplo/index2.html | 15 + .../Teste_exemplo/script2.js | 4 + Exercicios/Teste-Exemplo/index.html | 29 +- Exercicios/Teste-Exemplo/script.js | 8 +- Exercicios/Teste-Query-Selector/index.html | 40 +-- Exercicios/Teste-Query-Selector/script.js | 12 +- Exercicios/Teste-Query-Selector/style.css | 4 +- "Exerci\314\201cio de Casa/.DS_Store" | Bin 0 -> 8196 bytes .../.vscode/settings.json" | 290 ++++++++++++++++++ .../.vscode/settings.json" | 290 ++++++++++++++++++ .../README.md" | 95 ++++++ .../index(1).docx" | Bin 0 -> 7879 bytes .../index.docx" | Bin 0 -> 7879 bytes .../index.html" | 75 +++++ .../script/books.js" | 90 ++++++ .../script/script.js" | 115 +++++++ .../script/script2.js" | 54 ++++ .../style/style.css" | 0 "Exerci\314\201cio de Casa/README.md" | 95 ++++++ "Exerci\314\201cio de Casa/index.html" | 0 "Exerci\314\201cio de Casa/script/books.js" | 90 ++++++ "Exerci\314\201cio de Casa/script/script.js" | 0 "Exerci\314\201cio de Casa/style/style.css" | 0 .../.vscode/settings.json" | 290 ++++++++++++++++++ .../README.md" | 95 ++++++ .../index.html" | 75 +++++ .../script/books.js" | 90 ++++++ .../script/script.js" | 115 +++++++ .../style/style.css" | 0 52 files changed, 2559 insertions(+), 285 deletions(-) create mode 100644 .DS_Store create mode 100644 .vscode/settings.json create mode 100644 Exercicios/.vscode/settings.json create mode 100644 Exercicios/Teste-Event-Listener/Teste-Event-Listener-carol/index.html create mode 100644 Exercicios/Teste-Event-Listener/Teste-Event-Listener-carol/script.js create mode 100644 Exercicios/Teste-Exemplo/.vscode/settings.json create mode 100644 Exercicios/Teste-Exemplo/carol-teste-exemplo/.vscode/settings.json create mode 100644 Exercicios/Teste-Exemplo/carol-teste-exemplo/README.md create mode 100644 Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste-Query-Selector/index.html create mode 100644 Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste-Query-Selector/script.js create mode 100644 Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste-Query-Selector/style.css create mode 100644 Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste_exemplo/index2.html create mode 100644 Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste_exemplo/script2.js create mode 100644 "Exerci\314\201cio de Casa/.DS_Store" create mode 100644 "Exerci\314\201cio de Casa/.vscode/settings.json" create mode 100644 "Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/.vscode/settings.json" create mode 100644 "Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/README.md" create mode 100644 "Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/index(1).docx" create mode 100644 "Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/index.docx" create mode 100644 "Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/index.html" create mode 100644 "Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/script/books.js" create mode 100644 "Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/script/script.js" create mode 100644 "Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/script/script2.js" create mode 100644 "Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/style/style.css" create mode 100644 "Exerci\314\201cio de Casa/README.md" create mode 100644 "Exerci\314\201cio de Casa/index.html" create mode 100644 "Exerci\314\201cio de Casa/script/books.js" create mode 100644 "Exerci\314\201cio de Casa/script/script.js" create mode 100644 "Exerci\314\201cio de Casa/style/style.css" create mode 100644 "Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/.vscode/settings.json" create mode 100644 "Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/README.md" create mode 100644 "Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/index.html" create mode 100644 "Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/script/books.js" create mode 100644 "Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/script/script.js" create mode 100644 "Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/style/style.css" diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..f02fc3baac9291906bedab2cd29487279783ddf2 GIT binary patch literal 8196 zcmeHMO>7la6h5ad<-UQ^+w#|W3LU9cgrcvd&>$eM@3mqTLPHB}DN^RW8DV5PQ{T+% z14^~(MiY!H`~lsl(HLBr$ikQyH%9Sip;b`B!i5XnxHK9~Jonyt4HTMmrAFo^_kQ>1 zocr_5H+Ono0RS^as}-OD02pO~d=V8lNMc;%>rzG3Q%#8E50D2(W*>sw zeT)dx5l$(Tt~95L9x!snD8xYJPUD6!Crn2;rBJy8DtEwWWsD*el&h1UADlrQ24Y0_`fGn64?wh$%FqU)u9NAyY zjk!(`rc#%%qOxj1^+LuprqyT<_Z{_1eW4i^gN#`i7Oh@0JerH@{j}Un-OTNG?9vEd zmi4{RbUeEtogK?2lY;|}XZfX!U-Ya%&eNv`7)!9k2-hbj+BR-%F@#waQZWX9i?V0i%)#i2jGF@V#c{#YjcvjI> z@nV^-%VoL}+9JK@L2cKdllQ$o=cGNtYXf4dhnl?wdz_dV$op<_)C)#ZPWC9u9>r4ZY7xP z+T5Y(1LNw*{Gq6G>o!dv%=@FGbi|+zTc}&?N$=FNjDNxoiM4l`LAYnk_Qdil8&-5T z>iUrA@3bu2VvIGV*DC%b4GAtjY&xugcGw2JFhuW62~NWqcmZC6^Kbz^fREuz_!_>2 zOK=%}grDJ8_#OU$KjAN|##-c9k4w?OyKo(@#|}(mH}1p-um|_z01n{+97YQtMHffW z!xBD$PvTSfG@iyY_!7R1XYqA>1K-5A@B)5_pW;RQ3_r(j@O%70?X#k+{oSfvF7XQ0 z<}2ms&969gBPl2E->GH(RVjbBSm}4^vgNCr)^2F)*w#7ooM%1Ns|6-?rGz5|RThkV zwAU(>l&&Xl(N@i+^nIj9`#2M#;tQvBQck0hOmZPBCY!f6Q?r7U&%|4!YwMC^X)<0Z zo5_2$Rz~9G3)E=4wmCua=2dERi?)@Kig~pfy-!Og#0$tlPMv8^Y8>fioTbeR)+H)1<(#~s*-8O-7?+>Lv%m$W&I z2k{V&ph?<1Cbc<+C-5Ym!b#HTGx#hi^f`QOcroty3;gmw^q4bac5D - - - - - - Document - - -
- - -
-
- - + + + + + + + Document + + +
+ + +
+
+ + \ No newline at end of file diff --git a/Exercicios/1/js/script.js b/Exercicios/1/js/script.js index 16708f9..94828a7 100644 --- a/Exercicios/1/js/script.js +++ b/Exercicios/1/js/script.js @@ -1,15 +1,15 @@ -document.querySelector('#botaoDeEnviar').addEventListener('click', function armazenarDados(event) { - event.preventDefault(); - - let pegaNome = document.getElementById('nomeDaPessoa'); - let exibeResposta = document.getElementById('resposta'); - - pegaNome.value === '' ? exibeResposta.innerText= 'Por favor, digite o seu nome' : exibeResposta.innerHTML = (`${pegaNome.value}, dados salvos com sucesso!`) - - /* if (pegaNome.value === '') { - exibeResposta.innerText= 'Por favor, digite o seu nome'; - } else { - exibeResposta.innerHTML = (`${pegaNome.value}, dados salvos com sucesso!`); - } */ - +document.querySelector('#botaoDeEnviar').addEventListener('click', function armazenarDados(event) { + event.preventDefault(); + + let pegaNome = document.getElementById('nomeDaPessoa'); + let exibeResposta = document.getElementById('resposta'); + + pegaNome.value === '' ? exibeResposta.innerText= 'Por favor, digite o seu nome' : exibeResposta.innerHTML = (`${pegaNome.value}, dados salvos com sucesso!`) + + /* if (pegaNome.value === '') { + exibeResposta.innerText= 'Por favor, digite o seu nome'; + } else { + exibeResposta.innerHTML = (`${pegaNome.value}, dados salvos com sucesso!`); + } */ + }) \ No newline at end of file diff --git a/Exercicios/1/js/script2.js b/Exercicios/1/js/script2.js index 9c8d6b5..b8e3a5c 100644 --- a/Exercicios/1/js/script2.js +++ b/Exercicios/1/js/script2.js @@ -1,12 +1,12 @@ -function exibirDados(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!`); - } - +function exibirDados(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!`); + } + } \ No newline at end of file diff --git a/Exercicios/2/index.html b/Exercicios/2/index.html index 0419b57..b521a52 100644 --- a/Exercicios/2/index.html +++ b/Exercicios/2/index.html @@ -1,21 +1,21 @@ - - - - DOM - - - - -

Venda de apartamentos

- -
Apartamento de dois dormitórios, clique e veja o preço:
- -
- -
Apartamento de três dormitórios, clique e veja o preço:
- -
- - - + + + + DOM + + + + +

Venda de apartamentos

+ +
Apartamento de dois dormitórios, clique e veja o preço:
+ +
+ +
Apartamento de três dormitórios, clique e veja o preço:
+ +
+ + + \ No newline at end of file diff --git a/Exercicios/2/instrucoes.md b/Exercicios/2/instrucoes.md index 7bcd83d..a029c42 100644 --- a/Exercicios/2/instrucoes.md +++ b/Exercicios/2/instrucoes.md @@ -1,9 +1,9 @@ -### Exercício de manipulação do DOM - - -- Crie um HTML com a seguintes sentenças: - - Título: Venda de apartamentos - - Apartamento de 2 dormitórios, clique [aqui] e veja o preço - - Ao clicar, mostre a seguinte mensagem: Preço do imóvel: R$ 500.000,00 - - Apartamento de 3 dormitórios, clique [aqui] e veja o preço +### Exercício de manipulação do DOM + + +- Crie um HTML com a seguintes sentenças: + - Título: Venda de apartamentos + - Apartamento de 2 dormitórios, clique [aqui] e veja o preço + - Ao clicar, mostre a seguinte mensagem: Preço do imóvel: R$ 500.000,00 + - Apartamento de 3 dormitórios, clique [aqui] e veja o preço - Ao clicar, mostre a seguinte mensagem: Preço do imóvel: R$ 600.000,00 \ No newline at end of file diff --git a/Exercicios/2/js/script.js b/Exercicios/2/js/script.js index a470962..db8a9ae 100644 --- a/Exercicios/2/js/script.js +++ b/Exercicios/2/js/script.js @@ -1,18 +1,18 @@ -function mostraPrecoAptoDoisDorm() { - - //evento de exibição do valor do imóvel - let getBotaoApDoisDorm = document.querySelector('#btnAptoDoisDorm'); - - getBotaoApDoisDorm.addEventListener('click', function mostraValor () { - - document.getElementById('precoAptoDoisDorm').innerText="Preço do imóvel: R$ 500.000,00"; - - }) - - }; - - function mostraPrecoAptoTresDorm() { - document.getElementById('precoAptoTresDorm').innerHTML = " Preço do imóvel: R$ 600.000,00"; - }; - +function mostraPrecoAptoDoisDorm() { + + //evento de exibição do valor do imóvel + let getBotaoApDoisDorm = document.querySelector('#btnAptoDoisDorm'); + + getBotaoApDoisDorm.addEventListener('click', function mostraValor () { + + document.getElementById('precoAptoDoisDorm').innerText="Preço do imóvel: R$ 500.000,00"; + + }) + + }; + + function mostraPrecoAptoTresDorm() { + document.getElementById('precoAptoTresDorm').innerHTML = " Preço do imóvel: R$ 600.000,00"; + }; + mostraPrecoAptoDoisDorm(); \ No newline at end of file diff --git a/Exercicios/3/css/style.css b/Exercicios/3/css/style.css index ef355ea..b1e232d 100644 --- a/Exercicios/3/css/style.css +++ b/Exercicios/3/css/style.css @@ -1,78 +1,78 @@ -/* GERAL */ -* { - box-sizing: border-box; -} - -body { - font-family: 'Open Sans', Arial, Helvetica, sans-serif; - font-size: 16px; - background-color: #462755; -} - -.wrapper{ - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100vh; -} - -/* FORM */ - -.news{ - width: 30%; - margin: 0 auto; - position: relative; -} - -.news__title{ - color: #ECDDF3; - position: absolute; - top: -130px; -} - -.news__form{ - -} - -.news__form-group{ - position: relative; - width: 100%; -} - -.news__label{ - display: block; - color: #ffffff; -} - -.news__input{ - width: 100%; - border-radius: 2px; - border: 1px solid #ffffff; - height: 40px; - padding: 10px; - font-size: 14px; -} - -.news__button { - background-color: #ECDDF3; - color: #000000; - border-radius: 50px; - border: 0; - padding: 10px 20px; - width: 130px; - position: absolute; - bottom: -50px; - font-weight: bold; - left: 50%; - margin-left: -65px; - font-size: 16px; - transition: 0.3s; - cursor: pointer; -} - -.news__button:hover{ - background-color: #7F479B; - color: #ffffff; - transition: 0.3s; +/* GERAL */ +* { + box-sizing: border-box; +} + +body { + font-family: 'Open Sans', Arial, Helvetica, sans-serif; + font-size: 16px; + background-color: #462755; +} + +.wrapper{ + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100vh; +} + +/* FORM */ + +.news{ + width: 30%; + margin: 0 auto; + position: relative; +} + +.news__title{ + color: #ECDDF3; + position: absolute; + top: -130px; +} + +.news__form{ + +} + +.news__form-group{ + position: relative; + width: 100%; +} + +.news__label{ + display: block; + color: #ffffff; +} + +.news__input{ + width: 100%; + border-radius: 2px; + border: 1px solid #ffffff; + height: 40px; + padding: 10px; + font-size: 14px; +} + +.news__button { + background-color: #ECDDF3; + color: #000000; + border-radius: 50px; + border: 0; + padding: 10px 20px; + width: 130px; + position: absolute; + bottom: -50px; + font-weight: bold; + left: 50%; + margin-left: -65px; + font-size: 16px; + transition: 0.3s; + cursor: pointer; +} + +.news__button:hover{ + background-color: #7F479B; + color: #ffffff; + transition: 0.3s; } \ No newline at end of file diff --git a/Exercicios/3/index.html b/Exercicios/3/index.html index 458873b..1782075 100644 --- a/Exercicios/3/index.html +++ b/Exercicios/3/index.html @@ -1,36 +1,36 @@ - - - - - - - Ex 1 - News - - - - - -
-
-

Se inscreva para receber mais informações

- -

- -

- -
-
- - -
-
- -
-
-
-
- - + + + + + + + Ex 1 - News + + + + + +
+
+

Se inscreva para receber mais informações

+ +

+ +

+ +
+
+ + +
+
+ +
+
+
+
+ + \ No newline at end of file diff --git a/Exercicios/3/instrucoes.md b/Exercicios/3/instrucoes.md index e872ed9..ac250c9 100644 --- a/Exercicios/3/instrucoes.md +++ b/Exercicios/3/instrucoes.md @@ -1,4 +1,4 @@ -# **Instruções** - -- Habilitar o botão de Enviar para que seja exibido o e-mail inserido no input no html. +# **Instruções** + +- Habilitar o botão de Enviar para que seja exibido o e-mail inserido no input no html. - Opcional: adicionar uma mensagem de erro, na cor vermelha, caso o e-mail não seja inserido: "Preencha o campo de email" \ No newline at end of file diff --git a/Exercicios/3/script/script.js b/Exercicios/3/script/script.js index 5bc108a..791d39b 100644 --- a/Exercicios/3/script/script.js +++ b/Exercicios/3/script/script.js @@ -1,11 +1,11 @@ -/*Sequência lógica - -1 - armazenar valores e-mail e botão - -*/ - -botao.addEventListener("click", function(){ - - //evento para a exibição do texto na tela principal - -}) +/*Sequência lógica + +1 - armazenar valores e-mail e botão + +*/ + +botao.addEventListener("click", function(){ + + //evento para a exibição do texto na tela principal + +}) diff --git a/Exercicios/Teste-Event-Listener/Teste-Event-Listener-carol/index.html b/Exercicios/Teste-Event-Listener/Teste-Event-Listener-carol/index.html new file mode 100644 index 0000000..220af48 --- /dev/null +++ b/Exercicios/Teste-Event-Listener/Teste-Event-Listener-carol/index.html @@ -0,0 +1,21 @@ + + + + + + + Document + + + +

Olá a todes!

+ +

Meu nome é Carol.

+ + Clique para mudar o background dessa página. + + + + + + \ No newline at end of file diff --git a/Exercicios/Teste-Event-Listener/Teste-Event-Listener-carol/script.js b/Exercicios/Teste-Event-Listener/Teste-Event-Listener-carol/script.js new file mode 100644 index 0000000..11a1464 --- /dev/null +++ b/Exercicios/Teste-Event-Listener/Teste-Event-Listener-carol/script.js @@ -0,0 +1,8 @@ +document.getElementById('acoesBotao').addEventListener('click', function acionarBotao(event) + + const mudaCorTitulo = document.querySelector('.meu-titulo').style.color = "LightCyan"; + + const mudaTextoParagrafo = document.querySelector('#meuNome').innerHTML += " E eu tenho 33 anos." + + const mudaEstiloSpan = document.querySelector('span').style.textDecoration = "underline"; +}); \ No newline at end of file diff --git a/Exercicios/Teste-Event-Listener/index.html b/Exercicios/Teste-Event-Listener/index.html index 5ac38e3..2775320 100644 --- a/Exercicios/Teste-Event-Listener/index.html +++ b/Exercicios/Teste-Event-Listener/index.html @@ -1,21 +1,21 @@ - - - - - - - Document - - - -

Olá a todos!

- -

Meu nome é Vivian.

- - Clique para mudar o background dessa página. - - - - - + + + + + + + Document + + + +

Olá a todas!

+ +

Meu nome é Vivian.

+ + Clique para mudar o background dessa página. + + + + + \ No newline at end of file diff --git a/Exercicios/Teste-Event-Listener/script.js b/Exercicios/Teste-Event-Listener/script.js index 7a35f45..e8adda4 100644 --- a/Exercicios/Teste-Event-Listener/script.js +++ b/Exercicios/Teste-Event-Listener/script.js @@ -1,8 +1,8 @@ -document.getElementById('acoesBotao').addEventListener('click', function acionarBotao(event) { - - const mudaCorTitulo = document.querySelector('.meu-titulo').style.color = "blue"; - - const mudaTextoParagrafo = document.querySelector('#meuNome').innerHTML += " E eu tenho 32 anos." - - const mudaEstiloSpan = document.querySelector('span').style.textDecoration = "underline"; +document.getElementById('acoesBotao').addEventListener('click', function acionarBotao(event) { + + const mudaCorTitulo = document.querySelector('.meu-titulo').style.color = "blue"; + + const mudaTextoParagrafo = document.querySelector('#meuNome').innerHTML += " E eu tenho 32 anos." + + const mudaEstiloSpan = document.querySelector('span').style.textDecoration = "underline"; }); \ No newline at end of file diff --git a/Exercicios/Teste-Exemplo/.vscode/settings.json b/Exercicios/Teste-Exemplo/.vscode/settings.json new file mode 100644 index 0000000..d425590 --- /dev/null +++ b/Exercicios/Teste-Exemplo/.vscode/settings.json @@ -0,0 +1,9 @@ +{ + "cSpell.words": [ + "aqui", + "cique", + "introdu", + "introdução", + "o" + ] +} \ No newline at end of file diff --git a/Exercicios/Teste-Exemplo/carol-teste-exemplo/.vscode/settings.json b/Exercicios/Teste-Exemplo/carol-teste-exemplo/.vscode/settings.json new file mode 100644 index 0000000..342afb2 --- /dev/null +++ b/Exercicios/Teste-Exemplo/carol-teste-exemplo/.vscode/settings.json @@ -0,0 +1,20 @@ +{ + "cSpell.words": [ + "alterar", + "aqui", + "cique", + "co", + "eles", + "existentes", + "inserir", + "interagir", + "o", + "para", + "reagir", + "s", + "setar", + "são", + "usados", + "usar" + ] +} \ No newline at end of file diff --git a/Exercicios/Teste-Exemplo/carol-teste-exemplo/README.md b/Exercicios/Teste-Exemplo/carol-teste-exemplo/README.md new file mode 100644 index 0000000..bdf2509 --- /dev/null +++ b/Exercicios/Teste-Exemplo/carol-teste-exemplo/README.md @@ -0,0 +1,262 @@ +// Indrodução ao DOM + +é uma interface (API) para documentos HTML e XML. Quando o navegador lê (analisa) +nosso documento HTML pela primeira vez, ele cria um objeto grande, +um objeto realmente grande com base no documento HTML que é o DOM. + +É uma estrutura de árvore que é modelada a partir do documento HTML. +O DOM é usado para interagir e modificar a estrutura do DOM +ou elementos ou nós específicos. +DOM é o modelo de padrão e interface que define propriedades, métodos e eventos de elementos + +Com o modelo de objeto, o JavaScript obtém todo o poder necessário para criar um HTML dinâmico: + +JavaScript pode mudar todos os elementos HTML da página +JavaScript pode alterar todos os atributos HTML na página +JavaScript pode mudar todos os estilos CSS na página +JavaScript pode remover elementos e atributos HTML existentes +JavaScript pode adicionar novos elementos e atributos HTML +JavaScript pode reagir a todos os eventos HTML existentes na página +JavaScript pode criar novos eventos HTML na página + +> > > > > > O que é o DOM?<<<<<<<< + +> > > > > > O DOM é um padrão do W3C (World Wide Web Consortium). + +O DOM define um padrão para acessar documentos: + +"O Modelo de Objeto de Documento (DOM) do W3C é uma plataforma +e interface de linguagem neutra que permite que programas +e scripts acessem e atualizem dinamicamente o conteúdo, +a estrutura e o estilo de um documento." + +O padrão DOM do W3C é separado em 3 partes diferentes: + +DOM principal - modelo padrão para todos os tipos de documentos + +XML DOM - modelo padrão para documentos XML +HTML DOM - modelo padrão para documentos HTML + +O que é o HTML DOM? +O HTML DOM é um modelo de objeto padrão e uma interface de programação para HTML. Define: + +Os elementos HTML como objetos +As propriedades de todos os elementos HTML +Os métodos para acessar todos os elementos HTML +Os eventos para todos os elementos HTML +Em outras palavras: O HTML DOM é um padrão para obter, alterar, adicionar ou excluir elementos HTML. +DOM é o modelo de padrão e interface que define propriedades, métodos e eventos de elementos. + + +//Teste-Query-Selector + + + + + + + +DOMHTML + +O equivalente DOM seria assim. + +DOMSchema + +O documentobjeto em JavaScript representa o DOM. Ele nos fornece muitos métodos que podemos +usar para selecionar elementos para atualizar o conteúdo dos elementos e muito mais. + +exemplo 1 + +function alterarTexto() { +const textoAAlterar = document.getElementById("mudanca-texto").innerHTML = "Hello mundo"; +return textoAAlterar; +} + +--- + +HTML + +
+ +
+ +Javascript +let getImput = document.getElementId('textInput'); + +--- + +------------>>>> getElementByTagName() <--------------- + +// metodo não recomendado para utilizar + +Esse método retorna uma coleção de todos os elementos que +contenham o nome da tag informada. + + + +------------>>>> getElementById <--------------- + +//utilizar document.id para referenciar o primeiro elemento da arvore do DOM + +## getElementById ---> +tem função no caso do Id, para alterar o texto +//Ele modifica apenas o que for indicado com ID + +Ele retorna o conteúdo do elemento html que estiver com nome informado. + +Como, em principio, os "ids" +devem ser nomes únicos, ele é muito utilizado para pegar apenas o método desejado + +// No html + +//
+// +
+ + + +## A diferença entre querySelector Vs querySelector +//## ID //Ele modifica ou manipula elementos do html o que for indicado com ID +// ## Selector // Eleretorna qualquer elemento do Dom, é preciso deixar explicito + que vc está chamando uma "class" um "ID" ou uma "tag", + + + +--------------------------------------------------------------- + +## querySelector() +Esse método retorna elementos DOM, como classes, tags e ID´s. +É preciso apenas deixar explicito se está chamando uma classe, um ID ou uma tag. + +>>Exemplo / Html/ +
+ +
+ +>> Exemplo /java Script/ + +let getImputId = querySelector('#textInput'); //#indentificação do ID +let getImputClass = document.querySelector('.text-input'); // . +let getImputTag = document.querySelector('input'); // + + + + +no caso acima o InnerHtml +pode usar = ou += +ele adiciona + + +>>Inner html + +>>InneText + +>>InnerContent + +eles são usados para setar, inserir, alterar o conteúdo de um nó determinado +do html, e todos seus nós filhos. + +Retorna o conteúdo de um texto dentro de um nó e dentro dos seus filhos + + +>>IMPORTANTE - Atenção +//Lembrar que o + + + \ No newline at end of file diff --git a/Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste-Query-Selector/script.js b/Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste-Query-Selector/script.js new file mode 100644 index 0000000..537df3c --- /dev/null +++ b/Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste-Query-Selector/script.js @@ -0,0 +1,9 @@ +function mudarCor() { + const mudaCorTitulo = document.querySelector('.meu-titulo').style.color = "LightCyan"; + + const mudaTextoParagrafo = document.querySelector('#meuNome').innerHTML += " E eu tenho 33 anos." + + const mudaEstiloSpan = document.querySelector('span').style.textDecoration = "underline"; +} + +//Podemos alterar tanto texto contido no html, quanto regras de estilização \ No newline at end of file diff --git a/Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste-Query-Selector/style.css b/Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste-Query-Selector/style.css new file mode 100644 index 0000000..43d594c --- /dev/null +++ b/Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste-Query-Selector/style.css @@ -0,0 +1,3 @@ +* { + background-color: #f08080; +} \ No newline at end of file diff --git a/Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste_exemplo/index2.html b/Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste_exemplo/index2.html new file mode 100644 index 0000000..6fb87be --- /dev/null +++ b/Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste_exemplo/index2.html @@ -0,0 +1,15 @@ + + + + + + + Introdução ao DOM + + +

Clique nesse botão para mudar o texto desse parágrafo!

+ + + + + diff --git a/Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste_exemplo/script2.js b/Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste_exemplo/script2.js new file mode 100644 index 0000000..0fcaa0b --- /dev/null +++ b/Exercicios/Teste-Exemplo/carol-teste-exemplo/Teste_exemplo/script2.js @@ -0,0 +1,4 @@ +function alterarTexto(){ + const textoAAlterar = document.getElementById("mudança de texto").innerHTML+="Hello" + return textoAAlterar; +} \ No newline at end of file diff --git a/Exercicios/Teste-Exemplo/index.html b/Exercicios/Teste-Exemplo/index.html index 715fcc2..7135748 100644 --- a/Exercicios/Teste-Exemplo/index.html +++ b/Exercicios/Teste-Exemplo/index.html @@ -1,14 +1,15 @@ - - - - - - - Minha primeira página - - -

Clique nesse botão para mudar o texto desse parágrafo!

- - - - \ No newline at end of file + + + + + + + Minha primeira página + + +

Clique nesse botão para mudar o texto desse parágrafo!

+ + + + + diff --git a/Exercicios/Teste-Exemplo/script.js b/Exercicios/Teste-Exemplo/script.js index 9c5d101..f4c4654 100644 --- a/Exercicios/Teste-Exemplo/script.js +++ b/Exercicios/Teste-Exemplo/script.js @@ -1,5 +1,5 @@ -function alterarTexto() { - const textoAAlterar = document.getElementById("mudanca-texto").innerHTML += " Hello Word"; - - return textoAAlterar; +function alterarTexto() { + const textoAAlterar = document.getElementById("mudanca-texto").innerHTML += " Hello Word"; + + return textoAAlterar; } \ No newline at end of file diff --git a/Exercicios/Teste-Query-Selector/index.html b/Exercicios/Teste-Query-Selector/index.html index 80e5adf..28737b3 100644 --- a/Exercicios/Teste-Query-Selector/index.html +++ b/Exercicios/Teste-Query-Selector/index.html @@ -1,21 +1,21 @@ - - - - - - - Document - - - -

Olá a todos!

- -

Meu nome é Vivian.

- - Clique para mudar o background dessa página. - - - - - + + + + + + + Document + + + +

Olá a todos!

+ +

Meu nome é Vivian.

+ + Clique para mudar o background dessa página. + + + + + \ No newline at end of file diff --git a/Exercicios/Teste-Query-Selector/script.js b/Exercicios/Teste-Query-Selector/script.js index cb0974e..b8da3eb 100644 --- a/Exercicios/Teste-Query-Selector/script.js +++ b/Exercicios/Teste-Query-Selector/script.js @@ -1,7 +1,7 @@ -function mudarCor() { - const mudaCorTitulo = document.querySelector('.meu-titulo').style.color = "blue"; - - const mudaTextoParagrafo = document.querySelector('#meuNome').innerHTML += " E eu tenho 32 anos." - - const mudaEstiloSpan = document.querySelector('span').style.textDecoration = "underline"; +function mudarCor() { + const mudaCorTitulo = document.querySelector('.meu-titulo').style.color = "blue"; + + const mudaTextoParagrafo = document.querySelector('#meuNome').innerHTML += " E eu tenho 32 anos." + + const mudaEstiloSpan = document.querySelector('span').style.textDecoration = "underline"; } \ No newline at end of file diff --git a/Exercicios/Teste-Query-Selector/style.css b/Exercicios/Teste-Query-Selector/style.css index 71d7c03..bb863b1 100644 --- a/Exercicios/Teste-Query-Selector/style.css +++ b/Exercicios/Teste-Query-Selector/style.css @@ -1,3 +1,3 @@ -* { - background-color: lightcoral; +* { + background-color: lightcoral; } \ No newline at end of file diff --git "a/Exerci\314\201cio de Casa/.DS_Store" "b/Exerci\314\201cio de Casa/.DS_Store" new file mode 100644 index 0000000000000000000000000000000000000000..f703a378f5ef7c5fee3f04a6f07c6c73582184d5 GIT binary patch literal 8196 zcmeHMO>h)N6n-y1WEu#WU`Td=g_RV)CJ-PYiSo0_CNUu(l$($rg30X8K&G6`gq_)4 zAjXOodJ-%-DPFWZSU{C0Ja|DpXem~ShggDD9`xeT($XqVman^KQ<4xbsZtB4tGd7L ze*Lo;7v@L;ygc%u!uI#RC$z^SmGx1wEyNNd5q6u!@nF;4T;)c7zOs z41^4X41^4X4Ez@upgWr%_*Y?3|uh?F;KdbJ;sL<#si#@DBS_2J7BOf1`!I1)yXd=h6BbW zhGob=$iPAdc=NcG9|FdV{`s&gZpZ&&~J=F>uf#U*0#WuIB#7CVk6wyc1@|BV_Ex$~DnV zTOMm@di-EwwtQ8ETDh9BVR{vgZ=JTxOn=@o{P7{(OPh{iIcElPmS?4Gv(M2d%u1|d zY__^4Qm(Dl))!3kT@{dG=h04NPd(ekRFCyNOF9xg+8)-Zs0Qn|^^|GLu4dM%sJ(0; zC$}p*SF-~O8%(;+}36o{DG9( z_%uFF22cZjw>9jeJhgaYdT!yRg4!j39;TC)fU%;1e2fl)P@ICwp zKf^EZEBpq3U>R0nHP&DRAH{myiMy}`Tk#3pk8OAud+{hfg-IO2Q#guacp6=t#0+{k zg%|N9d>LQG*YRDvhS%{1-o#t@A%27(<88cycjfaH6^_Ue*)Ej$E!CE$?cl3XH1r^C zM?1ToO#Ca_zPC~e`jM(N8)~=J?`hs2pL^}|-u7QLCqyPyB-B+f6x%t8`90;|H9~5O)BQ-^1(M<|zOAVTvqgxeHzgi^b+P)*o)M664I91xtT`a1W zlBN}5-P_2RT0)|i)|OVXE+cu%sn|Mpi0mMiVVk1~rl`1>SQnM*+i)E|fKT8yN%U*@ z4t{{2;CGT|39ce}MsOXj$0%;Wt+*X`U>!E$zCfrQ*oEELLt;&0KMvp^4q*xnlIj^8 z$Fn5WEaoteGx!3&NTR)jmr1m*;T3!n-;!dSlW2EAoD%UG;Swa8OJ*F~bf)!KrDP%{|AIW>qRku*O>C z(nZ(m#@V@CZ^lmx*iA@Be<)CoqbHDA_4w+j%$>r|Roz_O|0g}KlU!9wy=(lY>>ls6 zx1W?n3SC0n7;k)FrYW`71aqsyUIcGO)(}f60#2v6DJ}{mQ*k#4dmq0zYxBJezO+mb z-xfMDHNJn)d>R$vTCHKj%_&mq%AD+*7KYABe*WN|oCBx|rl3+mg~6OF@QnC&GpY(` z=D>OYyBfuEb>oYP^#s5S&d<^Mc1d6Nd8i|&kuPmWM&ekT(r^=&L=XvUo{OFz+(FL8 ze()Q~D0l*MqjiYn>{!Y)W#{Sv^Jb*S>+PsS$O_0`s}?ClWJt6mE^7zM2~`xD|8O^H zI~mnzC|t&|iNe$$S9%g()oXmPYg9vTQO@d88gwV+C6PaXe{sWG5rKyhBMVf=HSoK0O^9(Kw3_cnbPw3}l^>HcJRfWDc2`B{b= z-_=vQbgv|ROb|fXTZQf|8n?Q>N86n+nJuzxmM85KCp?CtAS`r?^VTt|i=A2y@>R7W z0~6F{qMs%FO*mm`q>V2YSQA(A(%fove81mVOM5%@q6}FnwhF!GWt4NBG-d=5LrXCv zcZ>*R3gq$Oa;0c_uG`olYvHil!sEO_r8Le&$X59B>-)}7ZKU9+vO*_s>CD1#Bfh&p z1PgbNLHxa4|h&eZ8}6Yh?p*8^VNba zKC@O%6%7YCQkZQ;!kvfGgB20K^NLeLC#JIAI?Vg#&VxRA+04S?kW!tu9rFgE(>D9N5skuxD*5yAHI(}AX8#}#!+A%b@D8XHUC*C zPxiUmy-mVmWPcNs0_E2`;aR26uZX+7z0vjti4tvv;Co;UH?+tyaVq8;+l&q%uU$G3 ze_{I!szFYF8ufRMzne~MWtk)Mfsp-5ajrx+z|L$e;Iet==-s!*K>OlGD749UN_>F=&{5YlX81 zrGWOn$H(`Au63j=oVW;+y%_UpT%9s3cJ9dKU} zM-gVvV>&JCX?qLcdaY0pu(iNsX+>Ht=b3*GgR}G;ASW=-So9)kn9KD392|vG?qDTP z**zBVi!9^zfZ4E3KxHkQxJ}%(P#A5h?wEe$*1XgXVmhXPfAEUU3=P zzpQU{0tw`J)K|{?^n9Qm_peyEblUeJ2e|yl9Dw$(9N^+%WBNM->}l`Vt?*#K^Y?~_ z+}lbc$p-~T^Qm*xkJ*@W?FsqDKM&RDuCfV%2;I(xr4cFTK&-ehf5{B(@t+@U7_ST) zq;s&(`o<=X2I1*NH)4z=QYRMUEjGt2F&8(!R}ZBLWko`^M;^OzI_cg3GfyV?KHqX@ z*wAS>RL!}Zzc5V|3tppM6{&RWd>IVE?VKHsb?>{97+{aaj%IDO+6h@b8YpMASzh-a zV(O3xHg2WTrN?47FT#m#719gDkE=$iHFivg(lC`Y0E`+Ns^=!kg(MJ1u6~BO((R;=v<>Tat0)^49p`Q6$P~ zH>w*|5}?fFFwV+YlO7R38bPDE-2?lbj21Z^7gF9|7EQzgtJP+CdHOG$$G$Y zo>PcjKBu1o^EOybyK-~!5qt?LxJW) zZ>h}NEJHXxxT_B74Zh)3+gj{RDhf!g<#YadvCpxbE`*hyH7t+nWajj9K+4H%c8_Cx z{36MrEQBK-%fZYumSdd5{GI&}(Cb>>AzX-qzb9!XiG#E!sYqwTrfkKMw|wJX{;>F- zBSw46zAEiosp^elnE=$`O+rLkn#%o%#CyS8MZtg)wc*~g(leXw3(MhyB z{y36P;RGk9PN!*QHF-@GubH2P9QOze$a zZB6Z59&`Dg-k{woH~KsOrhp7%zbKOpw>DlNDTU^1@ ziM*bO57_j*PG2T=I1%d&Q89Y2$azl&QH=WT4v&Po7g5-w=?JbH(?%}H!Yuuzxler> z8{OU3yz~HZ0C~jc*T_A$G2O!6iD;OFO3u=Ov|Q*yJ*%0*7+Ls0s2EyS__rarvC?2! z9n`?xGR7XL`V`y)a5A1q27(b4uBb2y+S|{;sJHZ#FrQcSqrsBA3PG3zBb*X!oH4Tg zw(Q?s4Q%w`bi3sNi$f`o$GH21k*%Z)AK*pgQz}w61e-fSx z^o#UsfTF)=9zJiwshO7-fg-Yl{xuPgEJ0LPv7e@*ZQ4gI0w~Qo$D`z@OyA$8ZQLr~PQ^=Kh4ru-pLxw40YwqMPaPVe=5g&sx-a*+XwkOlh1FSc(dz=}MPyfm$bTz;d9(>a;+v#KCjDM0Rje0goi7->5u9F2criqc*Qla7ZgsaOd zH%th?L%XX5r>m622=^o~T-S-38DoPe3l!gSaabdL|5gB2rFh+Hh&1Esk(JtN-7~6X zagHaTN^GRAC#_XDm|xWm#~PE78m>s9Mb z{${Wpn7Ld+I41XVF60g%<&W&~y-K*)C+~_9>-`t>OK!Zr#@W^pOYplVK~MP6ZLztw ze6b-bhY7Kv!5We_eIj zo~xFDDkvm(o|ofeF*-xf6B(i6HA;BgN=ksZX}mv=f1dUYr5uufF~^s0Z^@-i^b<5nv% zi8k!Cur0K)f^=TryRUMxtQfSY4(ck%yYg|&WXHeWh)|4Xpmbpc%2_8>zIK9uiU{PN z`OKYk1o21CzQb?aYdAzsrgJPkUMU?z*8eh10#aIxsdw<0bl9qOC>7M}vo^q^wXMbt zn`{yia%in)BS9&|v`;D&_?;jsJg22wFF2)lN|+zMEA>fBX3ZyA=7l=4F=zxXeAGUF z+4P= zaxmF@T@W1>3R(FzMf`eKQ3K1&1!px-dwle~z_aV6h8wh~s;+QOg-fSVGqlYcu0ea# zC^bbqUwYBlc|j}%hNK* z{P>^7zch?5Gg!1xNQK)j0kL%w%K$re8O9aT8MT*oF_VP~3?D)zI-JtE4!qMxZK{^) z%nddJ$|OY+vRg*ft2A?Q4po{KngPgE3QS(s$}PT7RhXjeLcDY1V#?i9L>7@>^pbX!)$9^KX zoGir?eq7bCo;Oq|4?PAa@IS38^24hB*Mk0D#He9@)HYTWxF1*!AwB#G{l4f{W3c3| z66*k!m0XNLaT)j1a}z^AM~lVHg?a5B$s3v%k-hHS83k5ko7q}jmT()(HH%O(Iy}^7 z2eGaGhiICB66^^G+&e^6wL@v>Q$* z{NP{m;qQNO2QC(-wx%q<-`RfCI2}3rIqv7pXwz&2*Q2XPKkMP?NLZs(W`%zlj9x^DTWe%upMX@Al_*&S0F6;6`)k&Y9;zy4rC+ zVEUv*)f{SWw>otQk_Xop646l4RXz1(h3hT~_Lo)OxT6;6vI}KNucg`wG#KRxyOg@T zAaTo2w6HG=doXkeLcYAqnfzde^T|(4aaaio!X>hhKsTR_Hc?5%8X98zc^J$ zv)_rS?V@HAh76fmlT*?vE*9e)@Vzq<6;=WE2bX^(?NuBtUV^HQw5LB!p{;kSVSXsV z+Il&ufsmJf^uDlQ-F^RP0KC+N54W;@yJLo00A}r$;CDLiZ;jA#j($E#kyN85r+3X?R8W1)$qepnH^4qrm9kLN%KX zzYaD`Ie$pFPtDZaW>5fKm&;+&JWy;FYQ62xjO}n z3&^WHtjKuA#MJ>uO)_uXn420Mp=;$880*Ok@@ogl)_BO+ROr0BE)dva7ji0AzB6qj zGG9q&)?>S}a@CoLg!IX~L`kB543iNJb?bbg>!uvSfpw!$W*{M^VQ2=H(e8}WI?`V5 z$!CjBjBfDLuuye!qi6_k&+(Ur4|JS334_oi>w;BPF8C@?ou{j(sR}8Avb<>4o(n6LDFlq9l5NG8vVH(A zPkN@7V9+>@E`u8RvW^_1`2CxrhU*>0i{9SteZE)eUj)!5TA4Meu(S_WZ!qHtdEeBZ z(2#V`0g+a`o!>2`E_MEF_>w-{Og&sz@|CoLgL`yL?IM)Ds)#0XK33;G!7zO(q|+u2 z<3q?Vsz4+1Vt-`dP?xmB8KTCrT__g%stG2vP6;ZNY)xQMP$k6ejc|^kbJb5pmJhyN zRuMN>PU6ir2{vUqWUiu7kXFkeF6PE`R$BOU)#TOWoZ4>LaxQzZ1+vs8SqIJSS_^6H zfzVIag66Ex`iW59tBr%P!JqIGxNcIrh>mi-XsCy}dn;jS=OQLMR<==yE52$}@4xD4 zmzg7MwL}b7f&OJOYsredQng+%-x6=_IJBbStjWvemeh)a5f*EO)z6yON1|Ym)4_4O zW5;pUeuZynL6bM0HR^OH&a`_q5;q#^Zq?go^GaaVSfayjlQe^zD1sQp^To;TaY3M> z!6!xF+M9Ce2CHSFQLNEBj%w~#m0waSEdba`VMdSNqX zGodiC`O=VJ$>$17PJm{L`b#8vk>NsWg`oIfZqnz7MA?(|akKWB4zmhKQYJN588f-t zgmAajmp{hd=0us(3*so2Ls_qEn?>yGkENNvD^mE8;5Wu%F|Y1! z^G1O9kT_I`;lcwL=ANkmF{tGMrs*a-(ii#cU{AclJU9{Hw;HlzbUZ&=dA%@G-1>e0 zsJIGGZenVme8y%uhEAvfzU;-aCx_WpxV&KkT9t&^VeCyjxW{A>(@9ERmoLJt2SMfD zfpCg92KW9Hl5(ZUOjg-QWs@qe{lh#(T1HPesU|yd@kn-M7uOuzVixE8mSnw5A|V}o zv{SQ--It7Wd$-m z5T-fe|5dqpQt;UR4+U@OvEZSNH-}TEa096E1@v$Arg*72p?+7q$4O0%`scz0`ouO&J4m1Z|% zi+w0dlbzZ?2khH~_t?uRlAte*v#&_#g}uLspCYNPd^c1`iVaoDn|Kj=3Y}nUx(_k0 z6!>cT9LR_N9D1`tWtHgsRqN~zQ~%c_IBm9jgp{9H#7~d&(Hp^{_5Ebt{lZS@KC>|W z2idF6Z=xX!_eMvskGns-<1oSZKy?g$6FVqqY`|ZmzNf>bNBRHn_TLA8%5s0lKOHPQ zDo%e{{=*f2Se*&M<$Va;R zmt8*qe?R_{SpH33|8(&*HT>Ph+lOHM?cz`N`KODgq5XFkI|TpzE`Dc}KV3XMqK`S? eFS8^3|7HYbIoOAM1^^&Gym}r6TU$hr-~J!^oQbCZ literal 0 HcmV?d00001 diff --git "a/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/index.docx" "b/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/index.docx" new file mode 100644 index 0000000000000000000000000000000000000000..4854da682313b6be3db8c51b03c919eaf22ec981 GIT binary patch literal 7879 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 literal 0 HcmV?d00001 diff --git "a/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/index.html" "b/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/index.html" new file mode 100644 index 0000000..1a56ecd --- /dev/null +++ "b/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/index.html" @@ -0,0 +1,75 @@ + + + + + + + + + Listagem de Livros + + + + +
+
+ Imagem de Livro +

ListBooks

+ Menina lendo +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+
+

Listagem de Livros Inseridos

+ + + + + + + + + + + + + + + + + +
TítuloSubtítuloAutorPáginasData de PublicaçãoISBN
+
+ + + + + diff --git "a/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/script/books.js" "b/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/script/books.js" new file mode 100644 index 0000000..f1fec90 --- /dev/null +++ "b/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/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" + } +] \ No newline at end of file diff --git "a/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/script/script.js" "b/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/script/script.js" new file mode 100644 index 0000000..b7d1b14 --- /dev/null +++ "b/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/script/script.js" @@ -0,0 +1,115 @@ +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", + } +] +/*Função que exibe os livros do array books na tabela/ +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(); + +/*Função que exibe os livros que forem sendo adicionados, por meio do formulário, na tabela/ +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 array 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(); + } +}) diff --git "a/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/script/script2.js" "b/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/script/script2.js" new file mode 100644 index 0000000..bbcf745 --- /dev/null +++ "b/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/script/script2.js" @@ -0,0 +1,54 @@ +const tituloDoLivro = document.querySelector('#title'); +const subtituloDoLivro = document.querySelector('#subtitle'); +const autorDoLivro = document.querySelector('#author'); +const paginaDoLivro = document.querySelector('#pages'); +const dataDePublicacao = document.querySelector('#date'); +const isbnDoLivro = document.querySelector('#isbn'); +const corpoTabela = document.querySelector('#texto') + +const enviarLivro = document.querySelector('#enviar'); + +enviarLivro.addEventListener('click', (event)=>{ + event.preventDefault() + if (tituloDoLivro.value == ""||autorDoLivro.value == ""||isbnDoLivro.value == ""||dataDePublicacao.value == ""){ + alert("preencher campo obrigatório") + }else{ + corpoTabela.innerHTML += ` + + ${tituloDoLivro.value} + ${subtituloDoLivro.value} + ${autorDoLivro.value} + ${paginaDoLivro.value} + ${dataDePublicacao.value} + ${isbnDoLivro.value} + + + + ` + limparFormulario(); + //excluirLivro(); +} +}) + +const limparFormulario = ()=>{ +tituloDoLivro.value= "" +subtituloDoLivro.value= "" +autorDoLivro.value= "" +paginaDoLivro.value= "" +dataDePublicacao.value= "" +isbnDoLivro.value = "" +} + + +corpoTabela.addEventListener('click', (event)=>{ + console.log(event.target) + if (event.target.className=="btnExcluir"){ + const botaoExcluirNovamente=event.target.parentElement + botaoExcluirNovamente.parentElement.remove() + + + } + + +}) + diff --git "a/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/style/style.css" "b/Exerci\314\201cio de Casa/Exerci\314\201cios-casa-carol-soares/style/style.css" new file mode 100644 index 0000000..e69de29 diff --git "a/Exerci\314\201cio de Casa/README.md" "b/Exerci\314\201cio de Casa/README.md" new file mode 100644 index 0000000..03f0bec --- /dev/null +++ "b/Exerci\314\201cio de Casa/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/Exerci\314\201cio de Casa/index.html" "b/Exerci\314\201cio de Casa/index.html" new file mode 100644 index 0000000..e69de29 diff --git "a/Exerci\314\201cio de Casa/script/books.js" "b/Exerci\314\201cio de Casa/script/books.js" new file mode 100644 index 0000000..f1fec90 --- /dev/null +++ "b/Exerci\314\201cio de Casa/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" + } +] \ No newline at end of file diff --git "a/Exerci\314\201cio de Casa/script/script.js" "b/Exerci\314\201cio de Casa/script/script.js" new file mode 100644 index 0000000..e69de29 diff --git "a/Exerci\314\201cio de Casa/style/style.css" "b/Exerci\314\201cio de Casa/style/style.css" new file mode 100644 index 0000000..e69de29 diff --git "a/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/.vscode/settings.json" "b/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/.vscode/settings.json" new file mode 100644 index 0000000..d1df85e --- /dev/null +++ "b/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/.vscode/settings.json" @@ -0,0 +1,290 @@ +{ + "cSpell.words": [ + "a", + "abaixo", + "acima", + "add", + "adicionado", + "adicionados", + "adicionais", + "adicionar", + "adquiridos", + "aluna", + "am", + "anteriormente", + "ao", + "ap", + "apenas", + "após", + "aqui", + "arquivo", + "as", + "assets", + "aten", + "atenção", + "atualiza", + "atualização", + "atuando", + "autor", + "b", + "biblioteca", + "bibliotecas", + "bot", + "botão", + "branch", + "c", + "campos", + "casa", + "caso", + "checkout", + "cio", + "clicar", + "cliente", + "clone", + "clonem", + "cnicos", + "colocados", + "com", + "commit", + "como", + "computador", + "conta", + "contas", + "conte", + "contendo", + "conter", + "conteúdo", + "contida", + "contudo", + "copiou", + "criada", + "crie", + "crit", + "critério", + "critérios", + "css", + "código", + "da", + "dados", + "das", + "data", + "de", + "deletado", + "denominada", + "desafio", + "desenvolvessem", + "detalhes", + "deve", + "devem", + "dever", + "deverá", + "digo", + "disponibilizado", + "do", + "dos", + "duas", + "e", + "em", + "encontrar", + "entre", + "entrem", + "enviem", + "erro", + "es", + "essenciais", + "est", + "estiliza", + "estilização", + "estilo", + "estiver", + "estrutura", + "está", + "estão", + "exerc", + "exercício", + "fa", + "faltantes", + "façam", + "fica", + "finalizar", + "foi", + "foram", + "forem", + "forkado", + "forkaram", + "forkem", + "formul", + "formulário", + "freelancers", + "gina", + "git", + "github", + "hor", + "horário", + "html", + "https", + "hub", + "i", + "ideia", + "ii", + "imediatamente", + "informa", + "informando", + "informação", + "informações", + "inicial", + "inser", + "inseridas", + "inserido", + "inseridos", + "inserir", + "inserirem", + "inserção", + "instru", + "instruções", + "introdu", + "introdução", + "isbn", + "itens", + "javascript", + "js", + "json", + "link", + "listagem", + "listagemlivros", + "livro", + "livros", + "localizada", + "logo", + "m", + "master", + "meio", + "mencionadas", + "mencionado", + "mesmo", + "modifiquem", + "n", + "na", + "ncia", + "necessidade", + "nessa", + "nesse", + "no", + "nome", + "nova", + "novos", + "não", + "o", + "obrigat", + "obrigatórias", + "obrigatórios", + "on", + "onde", + "origin", + "original", + "os", + "p", + "para", + "partes", + "particular", + "particulares", + "pasta", + "pediu", + "pela", + "pelo", + "perman", + "permane", + "permaneçam", + "permanência", + "permitida", + "pessoal", + "png", + "pode", + "poder", + "poderá", + "por", + "poss", + "possível", + "preciso", + "preencher", + "prefiram", + "prever", + "prints", + "project", + "projeto", + "proposto", + "publica", + "publicação", + "push", + "página", + "qual", + "que", + "realiza", + "realização", + "relevantes", + "renomeou", + "reposit", + "repositorio", + "repositório", + "reprograma", + "resolu", + "resolução", + "resolva", + "respons", + "responsivo", + "responsável", + "rias", + "rio", + "rios", + "s", + "screenshotproject", + "se", + "seguintes", + "seguir", + "sem", + "sendo", + "ser", + "será", + "seu", + "sintam", + "sistema", + "sobre", + "sua", + "suas", + "sugest", + "sugestões", + "são", + "t", + "tech", + "tecnologias", + "tela", + "terem", + "texto", + "todas", + "tratamento", + "tulo", + "técnicos", + "título", + "um", + "uma", + "usu", + "usuário", + "utiliza", + "utilizadas", + "utilização", + "vanilla", + "vel", + "verificar", + "verifique", + "vir", + "visualizadas", + "visualizar", + "voc", + "voce", + "você", + "vocês", + "vontade", + "à", + "é" + ] +} \ No newline at end of file diff --git "a/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/README.md" "b/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/README.md" new file mode 100644 index 0000000..03f0bec --- /dev/null +++ "b/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/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\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/index.html" "b/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/index.html" new file mode 100644 index 0000000..1a56ecd --- /dev/null +++ "b/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/index.html" @@ -0,0 +1,75 @@ + + + + + + + + + Listagem de Livros + + + + +
+
+ Imagem de Livro +

ListBooks

+ Menina lendo +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+
+

Listagem de Livros Inseridos

+ + + + + + + + + + + + + + + + + +
TítuloSubtítuloAutorPáginasData de PublicaçãoISBN
+
+ + + + + diff --git "a/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/script/books.js" "b/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/script/books.js" new file mode 100644 index 0000000..f1fec90 --- /dev/null +++ "b/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/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" + } +] \ No newline at end of file diff --git "a/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/script/script.js" "b/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/script/script.js" new file mode 100644 index 0000000..b7d1b14 --- /dev/null +++ "b/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/script/script.js" @@ -0,0 +1,115 @@ +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", + } +] +/*Função que exibe os livros do array books na tabela/ +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(); + +/*Função que exibe os livros que forem sendo adicionados, por meio do formulário, na tabela/ +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 array 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(); + } +}) diff --git "a/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/style/style.css" "b/Exerc\303\255cio de Casa/Exerc\303\255cios-casa-carol-soares/style/style.css" new file mode 100644 index 0000000..e69de29