diff --git a/1.revisao/script.js b/1.revisao/script.js new file mode 100644 index 0000000..8bfadc5 --- /dev/null +++ b/1.revisao/script.js @@ -0,0 +1,51 @@ +// const let var + +let nome = "Aida"; +//variavel let , recebe como valor uma string +let nomes = [ + { + pais: "Brasil", + nome: "Aida", + }, + "Quezia", "Fabiula", "Taiane", "Carol", 2, true]; +// valor de lista - array +//console.log(nomes[0].pais); // primeiro item da lista com a propriedade pais +//console.log(nomes); +nomes.push('Nayara'); +//console.log(nomes); + + +nomes.filter(function (elemento){ + //console.log(elemento.pais) +}) +/* +const retornaNome = function( elemento, indice, array) { + return console.log(indice) +} +*/ +/* +const retornaNome = (elemento, indice, array) => { + return console.log(elemento, indice, array) +} +*/ +/* +arrow function +minhaFuncao() => {} +function minhaFuncao() {} + +nomes.map((item, index) => { + if(item == "Quezia"){ + console.log(item, index) + } +}) +*/ + +// map e filter são funções de callback - + +let cancoes = { + banda: "Dingo Bells", + musicas: ['Eu vim passear', 'Mistério dos Trinta'], +} +//console.log(cancoes.musicas[1]); + + diff --git a/2.DOM/index.html b/2.DOM/index.html new file mode 100644 index 0000000..b620e90 --- /dev/null +++ b/2.DOM/index.html @@ -0,0 +1,109 @@ + + + + + + + + DOM + + + + +
+

Eu tou na turma 13 e tou contente

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem suscipit, quaerat nesciunt + exercitationem dicta placeat ea, modi maiores veritatis sequi consectetur similique praesentium sunt quis, + voluptate a fuga quidem iure.

+ aurora boreal + + +
+
+
+ +
+ + +
+ + + + + \ No newline at end of file diff --git a/3.createElement-e-forms/index.html b/3.createElement-e-forms/index.html new file mode 100644 index 0000000..d88d99d --- /dev/null +++ b/3.createElement-e-forms/index.html @@ -0,0 +1,22 @@ + + + + + + + CreatElement e formulário + + + +
+ + + + + +
+
+ +
+ + \ No newline at end of file diff --git a/3.createElement-e-forms/script.js b/3.createElement-e-forms/script.js new file mode 100644 index 0000000..9c77a0e --- /dev/null +++ b/3.createElement-e-forms/script.js @@ -0,0 +1,21 @@ +const formulario = document.querySelector("form"); +const inputUm = document.querySelector("#num1"); +const inputDois = document.querySelector("#num2"); +const botaoForm = document.querySelector("form button"); +const caixaResultado = document.querySelector("#caixaResultado"); + + +function submit(evento) { + evento.preventDefault(); + + const num1Value = Number(inputUm.value); + const num2Value = Number(inputDois.value); + // console.log("numero 1: ", num1Value, "\n numero 2: ", num2Value ) + const total = num1Value + num2Value; + let resultado = document.createElement('p'); + caixaResultado.appendChild(resultado); + resultado.innerText = `o resultado é de ${num1Value} + ${num2Value} é + ${total}`; +} + +formulario.addEventListener("submit", submit) \ No newline at end of file diff --git a/4.brincando-com-eventos/index.html b/4.brincando-com-eventos/index.html new file mode 100644 index 0000000..bac6b59 --- /dev/null +++ b/4.brincando-com-eventos/index.html @@ -0,0 +1,15 @@ + + + + + + + Bricando com eventos + + + +

Brincando com eventos

+ +
+ + \ No newline at end of file diff --git a/4.brincando-com-eventos/script.js b/4.brincando-com-eventos/script.js new file mode 100644 index 0000000..0d4b60d --- /dev/null +++ b/4.brincando-com-eventos/script.js @@ -0,0 +1,13 @@ +const caixa = document.querySelector('#caixa'); +const botao = document.querySelector('#btn'); + + + +botao.addEventListener('click', function (){ + let imagem = document.createElement('img'); + imagem.setAttribute('src', 'https://noticias.buscavoluntaria.com.br/wp-content/uploads/2019/03/kitten-solid-white-cat-motherless-child.jpg'); + imagem.setAttribute('alt', 'gato fofo'); + imagem.style.width = "250px"; + imagem.style.margin = "20px"; + return caixa.append(imagem); +}) \ No newline at end of file diff --git a/5.parents-e-children/index.html b/5.parents-e-children/index.html new file mode 100644 index 0000000..10a281a --- /dev/null +++ b/5.parents-e-children/index.html @@ -0,0 +1,34 @@ + + + + + + + + Parent, child, sibling + + + +
+
+

Olá mundo

+

Tudo legal turma?

+
+
+ + + + + \ No newline at end of file diff --git a/6.revisao-criar-elementosDOM/index.html b/6.revisao-criar-elementosDOM/index.html new file mode 100644 index 0000000..24da59e --- /dev/null +++ b/6.revisao-criar-elementosDOM/index.html @@ -0,0 +1,45 @@ + + + + + + + Revisando criação com DOM + + + +
+ +
+ + + + \ No newline at end of file diff --git a/7.revisao-eventos/index.html b/7.revisao-eventos/index.html new file mode 100644 index 0000000..08b89ee --- /dev/null +++ b/7.revisao-eventos/index.html @@ -0,0 +1,34 @@ + + + + + + + Revisão eventos + + + + +
+ +
+
+ + + +
+ + \ No newline at end of file diff --git a/7.revisao-eventos/script.js b/7.revisao-eventos/script.js new file mode 100644 index 0000000..4245df0 --- /dev/null +++ b/7.revisao-eventos/script.js @@ -0,0 +1,34 @@ + const divEvento = document.querySelector("#evento"); + const formulario = document.querySelector("form"); + const input = document.querySelector("#bomDia"); + + formulario.addEventListener("submit", function(evento){ + evento.preventDefault(); + + const inputValor = input.value; + let printarNaTela = document.createElement("p"); + printarNaTela.textContent = inputValor; + + document.body.append(printarNaTela); + }); + + + + divEvento.addEventListener("click", function () { + // quando eu clicar na minha divEvento, ela fique colorada + return divEvento.style.backgroundColor = "red"; + }); + + //forma com a função fora do addEventListener + function azulzinho() { + divEvento.style.backgroundColor = "blue"; + divEvento.classList.remove("aumentei"); + }; + + divEvento.addEventListener("mouseleave", azulzinho); + + //com a função dentro + divEvento.addEventListener("mouseenter", function(){ + divEvento.style.backgroundColor = "green"; + divEvento.classList.add("aumentei"); + }) \ No newline at end of file diff --git a/download.jpg b/download.jpg new file mode 100644 index 0000000..bb2e882 Binary files /dev/null and b/download.jpg differ diff --git a/exercicio-de-aula/exercicio-01/index.html b/exercicio-de-aula/exercicio-01/index.html new file mode 100644 index 0000000..52ed907 --- /dev/null +++ b/exercicio-de-aula/exercicio-01/index.html @@ -0,0 +1,82 @@ + + + + + + + + Document + + + + + + +
+ +
+ +
+ +
+ +
+ +
+ +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo rem, illum neque expedita atque minima. Quo est adipisci quae voluptate quam ab veritatis qui facere in similique? Illo, alias dignissimos. +

+ + + + + + \ No newline at end of file diff --git a/exercicios-para-casa/valenthina-temudo/exercicios/exercicio-1-2-3/Northern Lights Papel de Parede HD _ Plano de Fundo _ 1920x1200.jpg b/exercicios-para-casa/valenthina-temudo/exercicios/exercicio-1-2-3/Northern Lights Papel de Parede HD _ Plano de Fundo _ 1920x1200.jpg new file mode 100644 index 0000000..bc82f00 Binary files /dev/null and b/exercicios-para-casa/valenthina-temudo/exercicios/exercicio-1-2-3/Northern Lights Papel de Parede HD _ Plano de Fundo _ 1920x1200.jpg differ diff --git a/exercicios-para-casa/valenthina-temudo/exercicios/exercicio-1-2-3/index.html b/exercicios-para-casa/valenthina-temudo/exercicios/exercicio-1-2-3/index.html new file mode 100644 index 0000000..876c43e --- /dev/null +++ b/exercicios-para-casa/valenthina-temudo/exercicios/exercicio-1-2-3/index.html @@ -0,0 +1,95 @@ + + + + + + + + Aurora Boreal> + + + + +
+

A beleza da aurora boreal

+

Aurora boreal é um fenômeno óptico que ocorre a partir do contato de partículas provenientes + do vento solar com a alta atmosfera, que são canalizadas pelo campo magnético da Terra. Ela é observada com + mais frequência em fevereiro, março, abril, setembro e outubro. Além disso, ela acontece apenas nas áreas de + elevada latitude, como o Polo Norte, em razão da força do campo magnético da Terra.

+ aurora boreal +
+ + + + + \ No newline at end of file diff --git a/exercicios-para-casa/valenthina-temudo/exercicios/exercicio-4/index.html b/exercicios-para-casa/valenthina-temudo/exercicios/exercicio-4/index.html new file mode 100644 index 0000000..a2c1af6 --- /dev/null +++ b/exercicios-para-casa/valenthina-temudo/exercicios/exercicio-4/index.html @@ -0,0 +1,19 @@ + + + + + + + Formulário + + + +
+ + + + + +
+ + \ No newline at end of file diff --git a/exercicios-para-casa/valenthina-temudo/exercicios/exercicio-4/script.js b/exercicios-para-casa/valenthina-temudo/exercicios/exercicio-4/script.js new file mode 100644 index 0000000..1102ec7 --- /dev/null +++ b/exercicios-para-casa/valenthina-temudo/exercicios/exercicio-4/script.js @@ -0,0 +1,33 @@ +//ETAPA4: Adicione um evento para que após a usuária clique no botão com o texto `entrar`, o novo elemento tenha o seu texto de `Sem permissão` substituído por: `Olá + o nome da pessoa`; + + +const inputUm = document.querySelector("#nome"); +const inputDois = document.querySelector("#senha"); +const botaoForm = document.querySelector("#entrarBtn"); + +//Criando novo elemento HTML +let novaTag = document.createElement('label'); +novaTag.setAttribute('id', 'msg'); +let texto = document.createTextNode('Sem permissão'); +novaTag.appendChild(texto); +let meuForm = document.querySelector('.formulario'); +meuForm.appendChild(novaTag); + +//Adicionando evento + +// console.log(nomeUsuario); + +entrarBtn.addEventListener('click', function (evento) { + evento.preventDefault(); + + //ação a ser executada no clique do elemento + const nomeUsuario = inputUm.value; + const senhaUsuario = inputDois.value; + console.log("nome: ", nomeUsuario, "\n senha: ", senhaUsuario); + + let mensagem = document.querySelector('#msg'); + if(nomeUsuario && senhaUsuario) { + mensagem.innerText = `Olá, ${nomeUsuario}` + }; + }); + \ No newline at end of file