reprograma · valenthinatemudo · Oct 2, 2021 · Oct 5, 2021 · Oct 5, 2021 · Oct 5, 2021
diff --git a/1.revisao/script.js 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
@@ -0,0 +1,109 @@
+<!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>DOM</title>
+    <style>
+        section {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
+
+        .aurora-img {
+            width: 300px;
+            margin: 50px;
+        }
+
+        #paragrafo {
+            width: 50%;
+            color: #ffffff;
+            text-align: center;
+        }
+
+        .classeDoMeuJavascript {
+            margin: 150px;
+            transition: 0.5s;
+        }
+
+        .classeDoMeuJavascript:hover {
+            cursor: pointer;
+            background-color: #ffffff;
+        }
+    </style>
+</head>
+
+<body>
+    <section>
+        <h1>Eu tou na <i>turma 13</i> e tou contente</h1>
+        <p id="paragrafo">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.</p>
+        <img class="aurora-img" src="./../Northern Lights Papel de Parede HD _ Plano de Fundo _ 1920x1200.jpg"
+            alt="aurora boreal">
+        <label for="input1">Nome: </label>
+        <input type="text" name="input1" 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];
+
+        const paragrafo1 = document.getElementById("paragrafo");
+
+        const aurora = document.getElementsByClassName("aurora-img")[0];
+
+        const titulo = window.document.querySelector("h1");
+
+        const inputNome = document.querySelector("#nome");
+
+        /*modificando valores:
+        .innerText pega o texto sem formatação
+        .textContent pega o texto com formatação
+        .innetHTML me permite modificar ou criar elementos com html (pega formatação) */
+
+        titulo.innerHTML = "Hoje faz sol em <i>Recife</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 = "black";
+
+        //camelCase = letraDeCamelo
+        document.body.style.backgroundColor = "grey";
+
+        //adicionando e removendo classes
+        titulo.classList.add('classeDoMeuJavascript');
+
+        // quando varios elementos são selecionados ao mesmo tempo, podemos iterar por eles
+
+        /*
+        for (let el of aurora) {
+            el.classList.remove("aurora-img")
+        }
+        */
+
+        console.log(aurora.getAttribute('src'));
+        aurora.setAttribute('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQXaod5Aee1eczMCFMoBqPcvoPC5vFGL1RTHg&usqp=CAU');
+        aurora.setAttribute("alt", "por do sol")
+
+
+    </script>
+</body>
+
+</html>
diff --git a/3.createElement-e-forms/index.html b/3.createElement-e-forms/index.html
@@ -0,0 +1,22 @@
+<!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>CreatElement e formulário</title>
+    <script defer type="text/javascript" src="./script.js"></script>
+</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/3.createElement-e-forms/script.js 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)
diff --git a/4.brincando-com-eventos/index.html b/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>Bricando com eventos</title>
+    <script src="./script.js" defer type="text/javascript"></script>
+</head>
+<body>
+    <h1>Brincando com eventos</h1>
+    <button id="btn"> Adiciona o gatinho</button>
+    <div id="caixa"></div>
+</body>
+</html>
diff --git a/4.brincando-com-eventos/script.js 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);
+})
diff --git a/5.parents-e-children/index.html b/5.parents-e-children/index.html
@@ -0,0 +1,34 @@
+<!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, sibling</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>
+
+    <script type="text/javascript">
+        /*children = filhes,
+        sibling = irmã/irmão,
+        parent = pais/mães */
+
+        let sessao = document.querySelector("#section");
+    // console.log(sessao.children) // mostra o objeto com os elementos filhos
+    // console.log(sessao.parentElement) // mostra o pai/ mãe do elemento
+    // console.log(document.body.previousElementSibling) // mostra elemento irmão/irmã anterior
+
+    sessao.style.backgroundColor = "yellow";
+    sessao.parentElement.style.backgroundColor = "pink";
+    </script>
+</body>
+
+</html>
diff --git a/6.revisao-criar-elementosDOM/index.html b/6.revisao-criar-elementosDOM/index.html
@@ -0,0 +1,45 @@
+<!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>Revisando criação com DOM</title>
+</head>
+<style>
+    #comoDeletaEssaDiv {
+        width: 300px; height: 250px; background-color: yellow;
+        display: flex; 
+        align-items: center;
+        justify-content: center;
+    }
+
+    .minhaImagem {
+        width: 200px;
+        border: 3px solid black;
+        border-radius: 50%;
+    }
+</style>
+<body>
+    <div id="comoDeletaEssaDiv">
+
+    </div>
+
+    <script type="text/javascript">
+    const divDeletada = document.querySelector("#comoDeletaEssaDiv"); // selecionando um elemento já existente
+    const body = document.body;
+
+    const umaImagem = document.createElement("img"); // criando um novo elemento
+    umaImagem.setAttribute('src', "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShPbuQWUW83W3XHMUr4zzkvisl0mvx3P6BLg&usqp=CAU"); // adicionando atributo para a variável umaImagem
+    umaImagem.setAttribute('alt', "girassol amarelo");
+    umaImagem.classList.add("minhaImagem")
+
+    body.removeChild(divDeletada); // remove o elemento filhe
+    body.appendChild(divDeletada); // adiciona elemento filhe de volta
+    divDeletada.append(umaImagem); // adicionando a imagem
+
+    //prepend adiciona como primeiro filha; append adiciona como última
+
+    </script>
+</body>
+</html>
diff --git a/7.revisao-eventos/index.html b/7.revisao-eventos/index.html
@@ -0,0 +1,34 @@
+<!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>Revisão eventos</title>
+    <script defer type="text/javascript" src="./script.js"></script>
+</head>
+<style>
+    div {
+        width: 400px;
+        height: 400px;
+        background-color: blue;
+        transition: 0.7s;
+    }
+
+    .aumentei {
+        width: 500px;
+        height: 500px;
+    }
+
+</style>
+<body>
+    <div id="evento">
+
+    </div>
+    <form>
+        <label for="bomDia">Que dia é hoje?</label>
+        <input type="text" id="bomDia" name="bomDia" placeholder="Que dia é hoje?">
+        <button type="submit" id="submit" name="submit">Enviar</button>
+    </form>
+</body>
+</html>
diff --git a/7.revisao-eventos/script.js 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");
+    })
diff --git a/download.jpg b/download.jpg