Skip to content

exercicios de casa #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RaquelBelmiro wants to merge 1 commit into
base: main
Choose a base branch
from
Open

exercicios de casa #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions 3.createElement-e-forms/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,17 @@
<script defer type="text/javascript" src="./script.js"></script>
</head>
<body>
<form >
<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>
2 changes: 1 addition & 1 deletion 4.brincando-com-eventos/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand Down
50 changes: 39 additions & 11 deletions exercicio-de-aula/exercicio1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<!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">
<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>
<!--
</head>
<!--
Crie um HTML com três divs vazias e um parágrafo com texto. Cada div com um id
Faça uma tag script no fim do body selecione todos os elementos do html e guarde em variáveis

Expand All @@ -15,11 +15,39 @@
mude o estilo das divs para que cada uma seja uma caixa com uma cor diferente
adicione pelo javascript uma classe para o paragrafo
-->
<body>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

<p id="paragrafo"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet pariatur sed libero fugit doloribus velit illum tenetur ea? Libero, ipsa?</p>

<script>


const pegarBodyInteiro = document.body;

const primeiraDiv = document.getElementById("div1");
const segundaDiv = document.getElementById("div2");
const terceiraDiv = document.getElementById("div3");


const textoParagrafo = document.querySelector("p");

console.log(textoParagrafo);

paragrafo.innerHTML = "<p>Flores de outono</p> <i> cores de primavera <i>, luzes de verão";

div1.style.height = "2em";
div2.style.height = "2em";
div3.style.height = "2em";

div1.style.backgroundColor = "pink";
div2.style.backgroundColor = "gray";
div3.style.backgroundColor = "blue";

paragrafo.classList.add('classeParagrafo');

</script>
</body>
</html>
</body>
</html>

44 changes: 44 additions & 0 deletions exercicios-para-casa/raquel-belmiro/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}

h1{
text-align: center;
font-size: 2.1em;
padding: 0.4em;
background-color: rgba(19, 245, 68, 0.582);
color:rgba(52, 53, 47, 0.74);
box-shadow: 0px 10px 10px #88888825;

}


article{
width: 90vw;
margin: 0.5em auto;
padding: 0 5em;
text-align: justify;
background-color: rgba(206, 231, 191, 0.295);
box-shadow: 0px 10px 10px #88888863;

}

img{
height: 25vw;
margin: 1% 27%;
border-radius: 10px;
}

p{
padding-bottom: 1%;
font-size: 20px;
color: rgba(7, 29, 5, 0.582);
}

a{
text-decoration: none;
color: rgba(26, 105, 19, 0.582);
}
35 changes: 35 additions & 0 deletions exercicios-para-casa/raquel-belmiro/exercicio1/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
//Crie uma variável para armazenar cada um dos seus elementos HTML no javascript;


const titulo = document.getElementsByTagName("h1");

const artigo = document.getElementsByTagName("article");

const imagem = document.getElementsByTagName("img");

const paragrafo1 = document.getElementById("p1");

const paragrafo2 = document.getElementById("p2");

const paragrafo3 = document.getElementById("p3");

const paragrafo4 = document.getElementById("p4");


const link = document.getElementsByTagName("a")[0];

//Adicione uma `classe` para o seu elemento de parágrafo usando o DOM;

paragrafo1.classList.add('primeiroParagrafo');
paragrafo2.classList.add('segundoParagrafo');
paragrafo3.classList.add('terceiroParagrafo');

//Crie ou modifique o `estilo` da sua imagem usando o DOM;
imagemNatureza.style.borderRadius="50%";

//Modifique o valor do atributo `href` do seu link utilizando os DOM;
link.setAttribute("href", "https://www.uol.com.br/vivabem/noticias/redacao/2018/09/15/beneficios-do-contato-com-a-natureza-veja-como-inclui-los-no-dia-a-dia.htm");

//Crie um novo elemento HTML utilizando o DOM e o adicione ao seu HTML.

paragrafo4.innerText="Viva a Natureza!";
17 changes: 17 additions & 0 deletions exercicios-para-casa/raquel-belmiro/exercicio2/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
//Quem é o elemento `pai/mãe` do seu artigo?

const pai = document.getElementById("artgo").parentNode;

console.log("Elemento pai do artigo: ", pai);

//Quem são os elementos `filhes` do seu artigo?

const filhos = document.getElementById("artgo").children;

console.log("Elementos filhos do artigo: ", filhos);

//Qual elemento é o `próximo irmão` do elemento parágrafo?

const proxIrmao= document.getElementById("p1").nextElementSibling;

console.log("Proximo irmão do primeiro parágrafo: ", proxIrmao);
Empty file added exercicios-para-casa/raquel-belmiro/exercicio3/script.js
View file
Open in desktop
Empty file.
Binary file added exercicios-para-casa/raquel-belmiro/img/garden.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added exercicios-para-casa/raquel-belmiro/img/mulherMeditandoJardim.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 53 additions & 0 deletions exercicios-para-casa/raquel-belmiro/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!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>Exercicios</title>
<link rel="stylesheet" href="css/style.css" />
<script src="./exercicio1/script.js" defer type="text/javascript"></script>
<script src="./exercicio2/script.js" defer type="text/javascript"></script>
<script src="./exercicio3/script.js" defer type="text/javascript"></script>




</head>
<body>
<h1>Jardinagem Terapêutica</h1>
<article id="artgo">
<img id= "imagemNatureza"
src="img/garden.jpg"
alt="mulher com vestido branco andando por jardim cim cesta de flores"
/>
<p id= "p1">
Também conhecida como Garden Terapy, a jardinagem terapêutica combina
técnicas de cultivo de plantas e contemplação de jardins. Esse tipo de
terapia melhora a qualidade de vida das pessoas que apresentam quadros
de depressão, baixa autoestima, transtornos de ansiedade e outros
problemas psicológicos.
</p>

<p id= "p2">
Cuidar de flores é uma ótima forma de reduzir o estresse e melhorar o
humor. Especialistas afirmam que o encanto proporcionado pela
contemplação de um belo jardim leva a mente a um estado meditativo.
Assim, é possível diminuir os sentimentos negativos, alcançar momentos
de tranquilidade e deixar que os pensamentos otimistas prevaleçam no dia
a dia.
</p>
<p id= "p3">
Quer saber mais sobre beneficios do contato com a natureza?
<a
href="https://zenklub.com.br/blog/saude-bem-estar/beneficios-do-contato-com-a-natureza/"
target="_blank"
>clique aqui.</a
>
</p>
<p id="p4">

</p>
</article>
</body>
</html>