reprograma · Claudya30 · Oct 9, 2021
diff --git a/1.revisao/script.js b/1.revisao/script.js
@@ -0,0 +1,17 @@
+let name = "Ana";
+
+
+let nomes = ["Ana", "Elen", "Brena"];
+console.log(nomes[0]);
+
+let cancoes = {
+    banda: "Dingo Bell",
+    musicas: ['Eu vim passear', 'Mistério dos 30']
+}
+console.log(cancoes.banda)
+console.log(cancoes.musicas[1]);
+
+function retornaNomes(elemento, indice, arrays) {
+    return console.log(indice, elemento, Array)
+}
+nomes.map(retornaNomes)
diff --git a/2.comecandoDOM/index.html b/2.comecandoDOM/index.html
@@ -0,0 +1,99 @@
+<!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>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%;
+            text-align: center;
+            color: blue;
+        }
+
+        .classseDoMeuJava {
+            margin: 150px;
+        }
+
+        .classseDoMeuJava :hover {
+            cursor: pointer;
+            background-color: green;
+        }
+    </style>
+</head>
+
+<body>
+    <section id=se>
+        <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";
+        document.body.setAttribute
+
+        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/3.createElement-e-forms/index.html b/3.createElement-e-forms/index.html
@@ -0,0 +1,26 @@
+<!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>
+    <script type="text/javascript" src="./script.js"></script>
+</head>
+
+<body>
+    <form onsubmit="submit()">
+        <label for="num1">Numero 1</label>
+        <input type="number" name="num1" id="num1">
+        <label for=""></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,17 @@
+const formulario = document.querySelector("form");
+const inputUm = document.querySelector("#num1");
+const inputDois = document.querySelector("#num2");
+const botaoForm = document.querySelector(" form button");
+const caiaxaResultado = 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');
+    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,16 @@
+<!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>Document</title>
+    <script src="./script.js" defer type=""></script>
+</head>
+
+<body>
+
+</body>
+
+</html>
diff --git a/4.brincando-com-eventos/script.js b/4.brincando-com-eventos/script.js
@@ -0,0 +1,10 @@
+const caixa = document.querySelector("#caixa");
+const botao = document.querySelector("#btn");
+botao.addEventListener('click', function() {
+
+    let imagem = document.createElement('img');
+    imagem.setAttribute('src', 'https://casa.abril.com.br/wp-content/uploads/2020/08/suculentas-quais-sao-os-maiores-cuidados-casacom-1.jpg?quality=95&strip=info');
+    imagem.style.width = "350px";
+    imagem.style.margin = "20px";
+    return caixa.append(imagem);
+})
diff --git a/exercicio-de-aula/exercicio01/index.html b/exercicio-de-aula/exercicio01/index.html
@@ -0,0 +1,41 @@
+<!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>Document</title>
+</head>
+<!-- 
+    Crie um HTML com três divs vazias e um parágrafo com texto. Cada div com um id 
+    Faça uma tag  no fim do body selecione todos os elementos do html e guarde em variáveis
+    mostre o valor de <p> no console
+    mude o valor de <p> 
+    mude o estilo das divs para que cada uma seja uma caixa com uma cor diferente
+    adicione pelo java uma classe para o paragrafo
+-->
+
+<body>
+    <div id="treino1">oi</div>
+    <div id="treino2">ola</div>
+    <div id="treino3">hello</div>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus aperiam quis, corporis eaque repellat reprehenderit alias obcaecati porro voluptatum cupiditate mollitia fuga incidunt qui, quidem quam fugiat asperiores laboriosam minima.</p>
+
+
+    <script>
+        let guardarBody = document.body
+        const treinoUm = document.getElementById('treino1')
+        const treinoDois = document.getElementById('treino2')
+        const treinoTres = document.getElementById('treino')
+        let paragrafo = document.querySelector('p')
+        console.log(paragrafo)
+        paragrafo.innerHTML = "Deu certo?"
+        treinoUm.setAttribute("class", "renome")
+        treinoUm.style.backgroundColor = "salmon"
+        treinoDois.style.backgroundColor = "black"
+        treinoTres.style.backgroundColor = "blue"
+    </script>
+</body>
+
+</html>
diff --git a/exercicios-para-casa/Ana/exercicio-01/index.html b/exercicios-para-casa/Ana/exercicio-01/index.html
@@ -0,0 +1,112 @@
+<!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> Sulentas </title>
+    <style>
+        section {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            background: linear-gradient(rgba(224, 81, 240, 0.5), rgba(162, 14, 236, 0.7));
+        }
+
+        .suculenta--img {
+            width: 300px;
+            margin: 50px;
+        }
+
+        #paragrafo {
+            width: 50%;
+            color: rgb(12, 1, 10);
+            text-align: center;
+        }
+
+        h1 {
+            color: #3d11db;
+        }
+
+        .classseDaMinhaSuculenta {
+            margin: 150px;
+        }
+
+        .classseDaMinhaSuculenta :hover {
+            cursor: pointer;
+            font-size: 30px;
+            color: rgb(18, 230, 10);
+        }
+
+        a {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            color: #ffff;
+        }
+
+        img {
+            width: 300px;
+            margin: 50px;
+            border-radius: 10px;
+            border: solid 3px;
+            color: rgb(230, 49, 85);
+        }
+    </style>
+</head>
+
+<body>
+    <article>
+        <h1>Eu amo <i> Sucuentas </i> , e vocês?</h1>
+        <p id="paragrafo"><i>Suculentas<i> são plantas que acumulam água em um ou mais de um dos seus tecidos e fazem isso por serem nativas de regiões secas, assim, mantêm uma reserva para os períodos sem chuva. Esse armazenamento de água acontece nas raízes, caules, troncos,
+                folhas etc. Muitas vezes elas apresentam folhas, troncos ou o caule “gordinhos”, cheios de água, daí o nome “suculenta”.</p>
+        <img class="suculenta--img" src="https://s2.glbimg.com/RaNhXXVfN8F_fsdFcGlm87iCvgQ=/620x413/smart/e.glbimg.com/og/ed/f/original/2021/04/08/planta-fantasma-2.jpg" alt=" Foto da suculenta fantasma">
+            <a target="_blank" href="https://casa.abril.com.br/jardins-e-hortas/jardins-e-hortas-suculentas-tipos-cuidados-e-dicas/">Visite o site e conheça diversas variedades de Suculentas</a>
+
+    </article>
+
+
+    <script type="text/javascript">
+        const section = document.getElementsByTagName("section")[0];
+        console.log(section)
+        const paragrafo1 = document.getElementById("paragrafo");
+        console.log(paragrafo1)
+        const suculenta = document.getElementsByClassName("suculenta--img");
+        console.log(suculenta)
+        const titulo = window.document.querySelector("h1");
+        console.log(titulo)
+        const a = document.getElementsByClassName("a");
+        console.log(a) 
+
+        const titulo = document.querySelector("h1 ");
+        titulo.style.color = "purple ";
+        document.body.style.backgroundColor = "yellow "
+
+
+        const paragrafo1 = document.getElementById("paragrafo");
+        paragrafo1.classList.add('classseDaMinhaSuculenta');
+
+        const imagem1=document.createElement('img');
+        imagem1.setAttribute('src','https://s2.glbimg.com/Xhuka05_PzEB5ha0MCaACn9AXxo=/e.glbimg.com/og/ed/f/original/2021/01/21/suculentas-pexels-quang-nguyen-vinh.jpg');
+        imagem1.setAttribute('alt','Foto de várias suculentas')
+        console.log(imagem1)
+
+        const novoLink=document.getElementsByClassName('link')[0];
+        novoLink.setAttribute('href','https://www.petz.com.br/blog/dicas/tudo-sobre-suculentas-dicas-incriveis-para-ter-a-sua-plantinha/');
+        console.log(novoLink)
+
+        let titulo=document.createElement("h1");
+        document.body.appendChild(h1);
+
+
+
+    </script>
+
+
+
+</body>
+
+</html>
diff --git a/exercicios-para-casa/Ana/exercicio-01/script.js b/exercicios-para-casa/Ana/exercicio-01/script.js