“Quanto mais você estuda, mais aprende e se aproxima de realizar seu sonhos!”
Sobre o Exercício | Entrega | Licença
O objetivo desses exercícios é colocar em prática o que você acabou de aprender sobre DOM. Por isso, você deve fazer os exercícios utilizando apenas código JavaScript, o qual deve ser inserido entre as tags "script".
HTML Completo realizado o/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Exercício 5.2</title>
<style>
div {
border-color: black;
border-style: solid;
}
.title {
text-align: center;
}
.main-content {
background-color: yellow;
}
.main-content .center-content {
background-color: red;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.main-content .center-content p {
font-style: italic;
}
.main-content .left-content {
background-color: green;
width: 60%;
margin-left: 0;
margin-right: auto;
}
.main-content .left-content .small-image {
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 100%;
}
.main-content .right-content {
background-color: blue;
width: 60%;
margin-left: auto;
margin-right: 0;
}
.main-content .description {
text-align: center;
}
</style>
</head>
<body>
<script>
// COLOQUE SEU CÓDIGO AQUI
// 1° Adicione a tag h1 com o texto Exercício 5.2 - JavaScript DOM como filho da tag body;
let element = document.createElement("h1");
element.innerText = "Exercício 5.2 - Javascript DOM";
// Bônus 1° Adicione a classe title na tag h1 criada;
element.className = "title";
document.body.appendChild(element);
// 2° Adicione a tag div com a classe main-content como filho da tag body;
element = document.createElement("div");
element.className = "main-content";
document.body.appendChild(element);
// 3° Adicione a tag div com a classe center-content como filho da tag div criada no passo 2;
let divCenterContent = document.createElement("div");
divCenterContent.className = "center-content";
document.querySelector(".main-content").appendChild(divCenterContent);
// 4° Adicione a tag p como filho do div criado no passo 3 e coloque algum texto;
let pElement = document.createElement("p");
pElement.innerText = "Estudar e muito bom";
document.querySelector(".center-content").appendChild(pElement);
// 5° Adicione a tag div com a classe left-content como filho da tag div criada no passo 2;
let divLeftContent = document.createElement("div");
divLeftContent.className = "left-content";
document.querySelector(".main-content").appendChild(divLeftContent);
// 6° Adicione a tag div com a classe right-content como filho da tag div criada no passo 2;
let divRightContent = document.createElement("div");
divRightContent.className = "right-content";
document.querySelector(".main-content").appendChild(divRightContent);
// 7° Adicione uma imagem com src configurado para o valor https://picsum.photos/200 e classe small-image. Esse elemento deve ser filho do div criado no passo 5;
let imgSmallImage = document.createElement("img");
imgSmallImage.className = "small-image";
imgSmallImage.src = "https://picsum.photos/200";
imgSmallImage.alt = "Uma imagem para o exercício";
document.querySelector(".left-content").appendChild(imgSmallImage);
// 8° Adicione uma lista não ordenada com os valores de 1 a 10 por extenso como valores da lista. Essa lista deve ser filha do div criado no passo 6;
let ulList = document.createElement("ul");
for (let i = 1; i <= 10; i += 1) {
let liElement = document.createElement("li");
liElement.innerText = `${i}`;
ulList.appendChild(liElement);
}
document.querySelector(".right-content").appendChild(ulList);
// 9° Adicione 3 tags h3, todas sendo filhas do div criado no passo 2
for (let i = 1; i <= 3; i += 1) {
let h3Element = document.querySelector(".main-content").appendChild(document.createElement("h3"));
// Bônus 2° Adicione a classe description nas 3 tags h3 criadas;
h3Element.className = "description";
}
// Bônus 3° Remova o div criado no passo 5 (aquele que possui a classe left-content). Utilize a função .removeChild();
document.querySelector(".main-content").removeChild(divLeftContent);
// Bônus 4° Centralize o div criado no passo 6 (aquele que possui a classe right-content). Dica: para centralizar, basta configurar o margin-right: auto do div;
divRightContent.style.marginRight = "auto";
// Bônus 5° Troque a cor de fundo do elemento pai da div criada no passo 3 (aquela que possui a classe center-content) para a cor verde;
divCenterContent.style.backgroundColor = "green";
// Bônus 6° Remova os dois últimos elementos (nove e dez) da lista criada no passo 8.
let liLists = document.querySelectorAll("li");
for (let i in liLists) {
if (liLists[i].innerText.includes("9") || liLists[i].innerText.includes("10")) {
document.querySelector("ul").removeChild(liLists[i]);
}
}
</script>
</body>
</html>Para uma melhor organização, faça commits a cada tarefa concluída. Vamos aos exercícios:
-
1. Adicione a tag h1 com o texto Exercício 5.2 - JavaScript DOM como filho da tag body;
-
2. Adicione a tag div com a classe main-content como filho da tag body;
-
3. Adicione a tag div com a classe center-content como filho da tag div criada no passo 2;
-
4. Adicione a tag p como filho do div criado no passo 3 e coloque algum texto;
-
5. Adicione a tag div com a classe left-content como filho da tag div criada no passo 2;
-
6. Adicione a tag div com a classe right-content como filho da tag div criada no passo 2;
-
7. Adicione uma imagem com src configurado para o valor "https://picsum.photos/200" e classe small-image. Esse elemento deve ser filho do div criado no passo 5;
-
8. Adicione uma lista não ordenada com os valores de 1 a 10 por extenso como valores da lista. Essa lista deve ser filha do div criado no passo 6;
-
9. Adicione 3 tags h3, todas sendo filhas do div criado no passo 2.
Agora que você criou muita coisa, vamos fazer algumas alterações e remoções:
-
Bônus 1: Adicione a classe title na tag h1 criada;
-
Bônus 2: Adicione a classe description nas 3 tags h3 criadas;
-
Bônus 3: Remova o div criado no passo 5 (aquele que possui a classe left-content). Utilize a função .removeChild();
-
Bônus 4: Centralize o div criado no passo 6 (aquele que possui a classe right-content). Dica: para centralizar, basta configurar o margin-right: auto do div;
-
Bônus 5: Troque a cor de fundo do elemento pai da div criada no passo 3 (aquela que possui a classe center-content) para a cor verde;
-
Bônus 6: Remova os dois últimos elementos (nove e dez) da lista criada no passo 8.
- Adicione a tag h1 com o texto Exercício 5.2 - JavaScript DOM como filho da tag body;
Código Javascript
let element = document.createElement("h1");
element.innerText = "Exercício 5.2 - Javascript DOM";
document.body.appendChild(element);
- Adicione a tag div com a classe main-content como filho da tag body;
Código Javascript
element = document.createElement("div");
element.className = "main-content";
document.body.appendChild(element);
- Adicione a tag div com a classe center-content como filho da tag div criada no passo 2;
Código Javascript
let divCenterContent = document.createElement("div");
divCenterContent.className = "center-content";
document.querySelector(".main-content").appendChild(divCenterContent);
- Adicione a tag p como filho do div criado no passo 3 e coloque algum texto;
Código Javascript
let pElement = document.createElement("p");
pElement.innerText = "Estudar e muito bom";
document.querySelector(".center-content").appendChild(pElement);
- Adicione a tag div com a classe left-content como filho da tag div criada no passo 2;
Código Javascript
let divLeftContent = document.createElement("div");
divLeftContent.className = "left-content";
document.querySelector(".main-content").appendChild(divLeftContent);
- Adicione a tag div com a classe right-content como filho da tag div criada no passo 2;
Código Javascript
let divRightContent = document.createElement("div");
divRightContent.className = "right-content";
document.querySelector(".main-content").appendChild(divRightContent);
- Adicione uma imagem com "src" configurado para o valor "https://picsum.photos/200" e classe small-image. Esse elemento deve ser filho do "div" criado no passo 5;
Código Javascript
let imgSmallImage = document.createElement("img");
imgSmallImage.className = "small-image";
imgSmallImage.src = "https://picsum.photos/200";
imgSmallImage.alt = "Uma imagem para o exercício";
document.querySelector(".left-content").appendChild(imgSmallImage);
- Adicione uma lista não ordenada com os valores de 1 a 10 por extenso como valores da lista. Essa lista deve ser filha do "div" criado no passo 6;
Código Javascript
let ulList = document.createElement("ul");
for (let i = 1; i <= 10; i += 1) {
let liElement = document.createElement("li");
liElement.innerText = `${i}`;
ulList.appendChild(liElement);
}
document.querySelector(".right-content").appendChild(ulList);
- Adicione 3 tags "h3", todas sendo filhas do div criado no passo 2.
Código Javascript
for (let i = 1; i <= 3; i += 1) {
document.querySelector(".main-content").appendChild(document.createElement("h3"));
}
Agora que você criou muita coisa, vamos fazer algumas alterações e remoções:
- Adicione a classe title na tag h1 criada;
Código Javascript
let element = document.createElement("h1");
element.innerText = "Exercício 5.2 - Javascript DOM";
element.className = "title";
document.body.appendChild(element);
- Adicione a classe description nas 3 tags h3 criadas;
Código Javascript
for (let i = 1; i <= 3; i += 1) {
let h3Element = document.querySelector(".main-content").appendChild(document.createElement("h3"));
h3Element.className = "description";
}
- Remova o div criado no passo 5 "aquele que possui a classe left-content". Utilize a função ".removeChild";
Código Javascript
document.querySelector(".main-content").removeChild(divLeftContent);
- Centralize o div criado no passo 6 (aquele que possui a classe right-content). Dica: para centralizar, basta configurar o margin-right: auto do div;
Código Javascript
divRightContent.style.marginRight = "auto";
- Troque a cor de fundo do elemento pai da div criada no passo 3 (aquela que possui a classe center-content) para a cor verde;
Código Javascript
divCenterContent.style.backgroundColor = "green";
- Remova os dois últimos elementos (nove e dez) da lista criada no passo 8.
Código Javascript
let liLists = document.querySelectorAll("li");
for (let i in liLists) {
if (liLists[i].innerText.includes("9") || liLists[i].innerText.includes("10")) {
document.querySelector("ul").removeChild(liLists[i]);
}
}
Este projeto está licenciado sob a Licença MIT - consulte LICENSE para maiores detalhes.