Skip to content

5 - 1 #13

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
Jorge-William wants to merge 3 commits into
base: master
Choose a base branch
from
Open

5 - 1 #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
36d3ece
Exercicio 1
Jorge-William Nov 1, 2020
97337ef
Exercicio 2
Jorge-William Nov 1, 2020
e500d3b
Envio do exercício 3
Jorge-William Nov 2, 2020
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
23 changes: 23 additions & 0 deletions bloco_5/dia_1/exercicio1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<body>
<h2 id="page-title">Título</h2>
<p id="paragraph">Dê uma cor para este parágrafo!</p>
<h4 id="subtitle">Subtítulo</h4>
<p id="second-paragraph">Segundo parágrafo!</p>

<script>
var paragraph = document.getElementById("paragraph");
paragraph.style.color = "red";

// 1 Recupere o elemento que contém o título da página e faça algo com ele, como alterá-lo para o nome do seu filme favorito.
document.getElementById('page-title').innerText = 'O resgate do soldado Ryan.';
// 2 Agora recupere o segundo parágrafo e use sua criatividade para alterá-lo.
document.getElementById('second-paragraph').style.backgroundColor = "yellow";
// 3 Por fim, recupere o subtítulo e altere-o também.
document.getElementById('subtitle').style.textAlign = "end";


</script>
</body>
</html>
32 changes: 32 additions & 0 deletions bloco_5/dia_1/exercicio2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<style>
.paragrafos{
color: yellow;
font-size: 2em;
}
</style>
<html>
<body>
<h2 id="page-title">Título</h2>
<p id="paragraph" class="paragrafos">Dê uma cor para este parágrafo!</p>
<h4 id="subtitle">Subtítulo</h4>
<p id="second-paragraph" class="paragrafos">Segundo parágrafo!</p>

<script>
var paragraph = document.getElementById("paragraph");
paragraph.style.color = "red";

// 1 Adicione ao seu HTML uma classe com alguns estilos para os seus dois parágrafos.

// 2 Recupere os seus parágrafos via código JavaScript, usando a função getElementsByClassName;

// 3 Altere algum estilo do primeiro deles.
document.getElementsByClassName('paragrafos')[0].style.color = "blue";
// 4 Recupere o subtítulo pela tag.
document.writeln(document.getElementsByTagName('h4').innerText);



</script>
</body>
</html>
109 changes: 109 additions & 0 deletions bloco_5/dia_1/exercicio3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="pt-br">
<body>
<!-- creating the squares and columns divs -->
<div id="stack">
<div class="column_left">
<div>
<div>
</div>
</div>
<div>
<div></div>
</div>
</div>
<div class="column_right">
<div>
<div>
</div>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
<style>



#stack{
height:20rem;
width:20rem;
display:flex;
flex-direction:row;
justify-content:space-evenly;
align-items:center;
border: solid black 4px;
}

.column_left, .column_right{

height:18rem;
width:8rem;
margin:auto;
display:flex;
flex-direction:column;
justify-content:space-evenly;
border: solid black 4px;
}
.column_left>div, .column_right>div{
height:5rem;
width:5rem ;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
border: solid black 4px;
}

div>div>div>div{
height:2.5rem;
width:2.5rem;
border: solid black 4px;
}



</style>
<script>

// Styling the big red square by getElementBy
var stack=document.getElementById("stack")
stack.style.backgroundColor="red"

// Styling the columns by getElementsByClassName
function style_column(column_position, color){
var column=document.getElementsByClassName("column_"+column_position)[0]
column.style.backgroundColor=""+color
}

// Styling the violet and purple square by querySelectorAll
function style_big_squares(which_column_class_name, color){
document.querySelectorAll(which_column_class_name+"> div").forEach((e)=>{
e.style.backgroundColor=""+color
})}

// Using functions
style_column("left","blue")
style_column("right","green")

style_big_squares(".column_left", "violet")
style_big_squares(".column_right", "purple")
// stying pink squares inside the violet and purple squares

// Styling all mini divis
document.querySelectorAll("div>div>div>div").forEach((mini)=>{
mini.style.backgroundColor="orange"
})
// Styling only mini divs on the top
document.querySelectorAll("#stack>div").forEach((e)=>{
var mini_top=document.querySelector("."+e.className+">div>div")
mini_top.style.backgroundColor="pink"

})

</script>

</body>
</html>