reprograma · Giselz · Oct 2, 2021 · Oct 9, 2021
diff --git a/exercicio-de-sala/1.revisao/script.js b/exercicio-de-sala/1.revisao/script.js
@@ -0,0 +1,49 @@
+//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/exercicio-de-sala/2.dom/index.html b/exercicio-de-sala/2.dom/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Eu tenho um DOM, e vc?</title>
+    <style>
+        section {
+            display: flex; 
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
+        .beyonce--img {
+            width: 300px;
+            margin: 50px;       
+        }
+        #paragrafo {
+            width: 50%;
+            color: blue; 
+            text-align: center;
+        }
+        .classeDoMeuJavascript {
+            margin: 150px; 
+            transition: 0.5s;
+        }
+        .classeDoMeuJavascript:hover {
+            cursor: pointer; 
+            background-color: #fff; 
+        }
+    </style>
+</head>
+<body>
+    <section>
+        <h1>Eu tô na <i> turma 13 </i> , e tô contente</h1>
+        <p id="paragrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi officiis, vitae totam, nam nulla eum culpa voluptate quasi quibusdam rerum sapiente ex aliquid perspiciatis consectetur ea. Exercitationem autem nobis veniam?</p>
+        <img class="beyonce--img" src="https://media.hugogloss.uol.com.br/uploads/2021/09/fotojet-2-14.jpg" alt="Beyonce sorrindo">
+        <label for="nome">Nome: </label>
+        <input type="text" name="nome" id="nome">
+    </section>
+    <section>
+        <div>
+        <div>
+
+    </section>
+
+
+
+    <script type="text/javascript">
+
+    //para saber se selecionou teste com o console.log ou console.dir
+    // selecionando o nosso elemento usando o DOM.
+    const section = window.document.getElementsByTagName("section")[0];
+      //  getElementS = [{}]
+      //  querySelectorAll = [{}]
+      //  getElement = elemento; 
+      //  querySelector = elemento;
+    const paragrafo1 = document.getElementById("paragrafo");
+    const diva = document.getElementsByClassName("beyonce--img")[0];
+    const inputNome = document.querySelector("#nome");
+    const titulo = window.document.querySelector("h1");
+
+    // modificando valores: 
+    // .innerText pega o texto sem formatação.  .textContent pega o texto com formatação.  .innerHTML me permite modificar ou criar elementos com o html
+    titulo.innerHTML = "<p>Hoje faz sol</p> em <i> porto alegre <i>, ontem choveu";
+    // .value captura o valor do que foi escrito dentro da minha caixa de texto - input
+    inputNome.value = "Reprograma é show";
+
+    //modificando estilo:
+    titulo.style.color = "red";
+    //camelCase = letraDeCamelo
+    document.body.style.backgroundColor = "yellow";
+
+   //adicionando e removendo classes 
+    titulo.classList.add('classeDoMeuJavascript');
+    // titulo.classList.remove('classeDoMeuJavascript')
+    /*
+    Quando varios elementos são selecionados ao mesmo tempo, podemos iterar por eles.
+    for (let el of diva){
+        el.classList.remove('beyonce--img')
+    }
+    */ 
+
+    //pegando e modificando atributos
+    //console.log(diva.getAttribute('src'));
+    diva.setAttribute('src' , 'https://www.correio24horas.com.br/fileadmin/_processed_/0/b/csm_VF0720_Viola_Davis_Tout_3d988654d0.jpg');
+    diva.setAttribute("alt", "Viola Davis");
+    titulo.setAttribute("id","bananinha" );
+    </script>
+</body>
+</html>
diff --git a/exercicio-de-sala/3.create/index.html b/exercicio-de-sala/3.create/index.html
@@ -0,0 +1,24 @@
+<!--CreateElement e Formulários-->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CreateElement e formulário</title>
+    < defer type="text/java" src="./.js"></>
+</head>
+<body>
+    <form >
+        <label for="num1">Número 1</label>
+        <input type="number" name="num1" id="num1" >
+        <label for="num2">Número 2</label>
+        <input type="number" name="num2" id="num2">
+        <button type="submit" > Somar </button>
+    </form>
+    <div id="caixaResultado">
+
+    </div>
+</body>
+</html>
diff --git a/exercicio-de-sala/3.create/script.js b/exercicio-de-sala/3.create/script.js
@@ -0,0 +1,20 @@
+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 resutado de ${num1Value} + ${num2Value} é = ${total}`
+}
+
+formulario.addEventListener("submit", submit);
diff --git a/exercicio-de-sala/4.brincando-com-eventos/index.html b/exercicio-de-sala/4.brincando-com-eventos/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Brincando com eventos</title>
+    <script src="./script.js" defer type="text/javascript"></script>
+</head>
+<body>
+    <h1>Brincando com eventos</h1>
+    <button id="btn">Adiciona a gatinhe</button>
+    <div id="caixa"></div>
+</body>
+</html>
diff --git a/exercicio-de-sala/4.brincando-com-eventos/script.js b/exercicio-de-sala/4.brincando-com-eventos/script.js
@@ -0,0 +1,31 @@
+const caixa = document.querySelector('#caixa');
+//const botao = document.getElementById('btn');
+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 escalando');
+    imagem.style.width = "250px";
+    imagem.style.margin = "20px";
+    return caixa.append(imagem);
+})
+
+
+//const poke = copia y cola  https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json
+
+function mapeandoPokemon (elemento) {
+    let imagemPoke = document.createElement("img");
+    let nomePoke = document.createElement("span");
+
+    imagemPoke.setAttribute("src", elemento.img);
+    imagemPoke.setAttribute("alt", elemento.name);
+
+    nomePoke.textContent = elemento.name;
+
+    caixa.appendChild(imagemPoke);
+    caixa.appendChild(nomePoke);
+}
+
+poke.pokemon.map(mapeandoPokemon)
diff --git a/exercicio-de-sala/exercicio-1/index.html b/exercicio-de-sala/exercicio-1/index.html
@@ -0,0 +1,42 @@
+<!-- 
+    1. Crie um HTML com três divs vazias e um parágrafo com texto. Cada div com um id 
+    2. Faça uma tag script no fim do body selecione todos os elementos do html e guarde em variáveis
+    3. mostre o valor de <p> no console
+    4. mude o valor de <p> 
+    5. mude o estilo das divs para que cada uma seja uma caixa com uma cor diferente
+    6. adicione pelo javascript uma classe para o paragrafo
+-->
+
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exercício 1</title>
+</head>
+<body>
+    <div id="div1"></div>
+
+    <div id="div2"></div>
+
+    <div id="div3"></div>
+
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere corporis animi ratione, tempore repellendus vero distinctio aut quisquam omnis nostrum minus eaque perspiciatis dignissimos corrupti repudiandae sapiente optio fugiat eius.</p>
+
+<script type="text/javascript">
+    let guardarBody= document.body;
+    const div1= document.getElementById("div1");
+    const div2= document.getElementById("div2");
+    const div3= document.getElementById("div3");
+    let paragrafo= document.querySelector('p');
+    console.log(paragrafo);
+    paragrafo.innerHTML="deu certo?"
+    div1.setAttribute("class", "renome");
+    div1.style.backgroundColor= "red";
+    div2.style.backgroundColor= "black";
+    div3.style.backgroundColor= "green";
+    div1.style.fontSize= "80px";
+</script>
+</body>
+</html>
diff --git a/exercicio-de-sala/exercicio_2/2.html b/exercicio-de-sala/exercicio_2/2.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Atividade 2</title>
+    </head>  
+    <body style="margin: 0">
+        <div style="padding: 20px"></div>
+            <section id="section">
+                <p class="paragrafo"><strong>Olá</strong> mundo</p>
+            <p>Tudo beleza?</p>
+        </section>
+        <script type="text/javascript">
+let sessao= document.querySelector("#section")
+//console.log(sessao.childen) // mostra objeto com os elementos filhos
+//console.log(sessao.parentChilden) //mostra o pai/mae do elemento
+//console.log(document.body.previousElementSibling) //mostra elemento irmão/irmã anterior 
+        </script>
+    </body>
+</html>
+
+
+<!--
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Parent, child, sibiling</title>
+    </head>
+        <body style="margin: 0">
+            <div style="padding: 20px">
+
+                <section id="section">
+                    <p class="paragrafo"><strong>Olá </strong> mundo</p>
+                    <p class="paragrafo">Tudo legal turma?</p>
+                </section>
+
+            </div>
+
+
+    <type="text/java">
+//children = filhes, sibiling = irmã/irmão , parent = pais/mães
+let sessao = document.querySelector("#section")
+// console.log(sessao.children) // mostra objeto com os elementos filhos
+// console.log(sessao.parentElement) // mosta o pai/mae do elemento
+// console.log(document.body.previousElementSibling) // mostra elemento irmão/irmã anterior
+
+sessao.style.backgroundColor = "yellow";        
+sessao.parentElement.style.backgroundColor = "pink";
+
+
+
+            </body>
+</html>
+-->
diff --git a/exercicios-para-casa/exercicio_1_2_3/Logo_Reprograma.jpg b/exercicios-para-casa/exercicio_1_2_3/Logo_Reprograma.jpg