Skip to content

Commit 7593802

Browse files
Samuel-AmaroSamuel-Amaro
committed
novos exercicios sobre metodos de modificação de documento
1 parent 36f067c commit 7593802

10 files changed

+645
-0
lines changed

‎EXE_API_DOM/clear-the-element.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
</head>
7+
<body>
8+
9+
<ol id="elem">
10+
<li>Hello</li>
11+
<li>Word</li>
12+
<li>Break</li>
13+
<li>Line</li>
14+
</ol>
15+
16+
<script type="text/javascript">
17+
18+
/**
19+
*
20+
* Crie uma função clear(elem) que remova tudo do elemento.
21+
*/
22+
23+
function clear(elem) {
24+
let allChilds = elem.childNodes;
25+
console.log(allChilds);
26+
allChilds = Array.from(allChilds);
27+
for(let index = 0; index < allChilds.length; index++) {
28+
allChilds[index].remove();
29+
}
30+
}
31+
32+
clear(elem);
33+
34+
</script>
35+
36+
</body>
37+
</html>

‎EXE_API_DOM/colored-clock-with-setInterval.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<style>
7+
.relogio{
8+
display: flex;
9+
}
10+
11+
.hour{
12+
color: red;
13+
}
14+
15+
.minutes{
16+
color: green;
17+
}
18+
19+
.seconds{
20+
color: blue;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
26+
<div class="relogio">
27+
<div class="hour"></div>
28+
<div class="minutes"></div>
29+
<div class="seconds"></div>
30+
</div>
31+
32+
<!-- click on this button calls clockStart() -->
33+
<input type="button" onclick="clockStart()" value="Start"/>
34+
35+
<!-- click on this button calls clockStop() -->
36+
<input type="button" onclick="clockStop()" value="Stop"/>
37+
38+
<script type="text/javascript">
39+
40+
/**
41+
* Crie um relógio colorido como aqui:
42+
*
43+
* Use HTML/CSS para o estilo, JavaScript apenas atualiza o tempo nos elementos.
44+
*/
45+
46+
let intervalID;
47+
48+
function clockStart() {
49+
intervalID = setInterval(() => {
50+
let now = new Date();
51+
document.body.querySelector('.hour').textContent = now.getHours() < 10 ? '0' + now.getHours() + ':' : now.getHours() + ':';
52+
document.body.querySelector('.minutes').textContent = now.getMinutes() < 10 ? '0' + now.getMinutes() + ':' : now.getHours() + ':';
53+
document.body.querySelector('.seconds').textContent = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds();
54+
}, 1000);
55+
}
56+
57+
function clockStop() {
58+
clearInterval(intervalID);
59+
intervalID = null;
60+
}
61+
62+
</script>
63+
64+
</body>
65+
</html>

‎EXE_API_DOM/create-a-calendar.html‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<style>
7+
table {
8+
border-collapse: collapse;
9+
}
10+
11+
td,
12+
th {
13+
border: 1px solid black;
14+
padding: 3px;
15+
text-align: center;
16+
}
17+
18+
th {
19+
font-weight: bold;
20+
background-color: #E6E6E6;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
26+
<div id="calendar">
27+
28+
</div>
29+
30+
<script type="text/javascript">
31+
32+
/**
33+
* Escreva uma função createCalendar(elem, year, month).
34+
*
35+
* A chamada deve criar um calendário para um determinado ano/mês e colocá-lo dentro de elem
36+
*
37+
* O calendário deve ser uma tabela, onde uma semana é <tr> e um dia é <td>. O tampo da mesa deve ser <th> com nomes de dias da semana: o primeiro dia deve ser segunda-feira e assim por diante até domingo.
38+
*
39+
* Por exemplo, createCalendar(cal, 2012, 9) deve gerar no elemento cal o seguinte calendário:
40+
*
41+
* PS Para esta tarefa basta gerar o calendário, ainda não deve ser clicável.
42+
*/
43+
44+
function drawCalendar(qtdDaysMonth) {
45+
let table = document.createElement('table');
46+
let thead = document.createElement('thead');
47+
let tbody = document.createElement('tbody');
48+
table.prepend(thead);
49+
//NOME DOS DIAS DA SEMANA
50+
let nameDays = ["MO", "TU", "WE", "TH", "FR", "SA", "SU"];
51+
let trDays = document.createElement('tr');
52+
for(let i = 0; i < nameDays.length; i++) {
53+
let th = document.createElement('th');
54+
th.textContent = nameDays[i];
55+
trDays.append(th);
56+
}
57+
thead.append(trDays);
58+
//QUANTIDADE DE SEMANAS NO MÊS
59+
let qtdSemanas = 0;
60+
if(qtdDaysMonth > 28) {
61+
qtdSemanas = 5;
62+
}else{
63+
qtdSemanas = 4;
64+
}
65+
for(let j = 0; j < qtdSemanas; j++) {
66+
let tr = document.createElement("tr");
67+
for(let k = 0; k < 7; k++) {
68+
let td = document.createElement("td");
69+
tr.append(td);
70+
}
71+
tbody.append(tr);
72+
}
73+
table.append(tbody);
74+
document.body.prepend(table);
75+
return table;
76+
}
77+
78+
function anoEBissexto(year) {
79+
//etapa 1
80+
if((year % 4 == 0)) {
81+
//etapa 2
82+
if(year % 100 == 0) {
83+
//etapa 3
84+
if(year % 400 == 0) {
85+
//ano e bissexto
86+
return true;
87+
}else{
88+
//ano não e bissexto
89+
return false
90+
}
91+
}
92+
else{
93+
//etapa 4
94+
//ano e bissexto
95+
return true;
96+
}
97+
}else{
98+
//etapa 5
99+
//ano não e bissexto
100+
return false;
101+
}
102+
}
103+
104+
function createCalendar(elem, year, month) {
105+
if((year >= 1900 && year <= 2022) && (month >= 1 && month <= 12)) {
106+
//key: numberMonth -> value: qtdDaysMonth, firstDayMonth
107+
let daysMonths = new Map([
108+
[1, [31, 'SU']], [2, [28, 'WE']], [3, [31, 'WE']], [4, [30, 'SA']], [5, [31, 'MO']], [6, [30, 'TH']], [7, [31, 'SA']], [8, [31, 'TU']], [9, [30, 'FR']], [10, [31, 'WE']], [11, [30, 'WE']], [12, [31, 'FR']]
109+
]);
110+
if(anoEBissexto) {
111+
daysMonths = new Map([
112+
[1, [31, 'SU']], [2, [29, 'SA']], [3, [31, 'WE']], [4, [30, 'SA']], [5, [31, 'MO']], [6, [30, 'TH']], [7, [31, 'SA']], [8, [31, 'TU']], [9, [30, 'FR']], [10, [31, 'WE']], [11, [30, 'WE']], [12, [31, 'FR']]
113+
]);
114+
}
115+
let table = drawCalendar(year);
116+
let tds = table.querySelectorAll('td');
117+
let ths = table.querySelectorAll("th");
118+
let cellStartMonth = 0;
119+
for (let index = 0; index < ths.length; index++) {
120+
if(ths[index].textContent == daysMonths.get(month)[1]) {
121+
//console.log(daysMonths.get(month)[1]);
122+
cellStartMonth = index;
123+
//console.log(cellStartMonth);
124+
}
125+
}
126+
//obtendo quantidade de celulas para preenchimento
127+
let subCells = Array.from(tds).slice(cellStartMonth);
128+
//quantidade dias no mês
129+
for(let j = 0; j < daysMonths.get(month)[0]; j++){
130+
subCells[j].textContent = j + 1;
131+
}
132+
}else{
133+
alert('Ano informado invalido!');
134+
}
135+
}
136+
137+
createCalendar(calendar, 2010, 3);
138+
139+
</script>
140+
141+
</body>
142+
</html>

‎EXE_API_DOM/create-a-list.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
</head>
7+
<body>
8+
9+
<h1>Create List</h1>
10+
<ul></ul>
11+
12+
<script type="text/javascript">
13+
14+
/**
15+
* Escreva uma interface para criar uma lista a partir da entrada do usuário.
16+
*
17+
* Para cada item da lista:
18+
19+
1. Pergunte a um usuário sobre seu conteúdo usando prompt.
20+
21+
2. Crie o <li> com ele e adicione-o ao <ul>.
22+
23+
3. Continue até que o usuário cancele a entrada (pressionando Esc ou por meio de uma entrada vazia).
24+
25+
* Todos os elementos devem ser criados dinamicamente.
26+
*
27+
* Se um usuário digitar tags HTML, elas devem ser tratadas como um texto.
28+
*/
29+
30+
let ul = document.body.querySelector("ul"), li;
31+
let text = prompt('Digite o texto para o item da lista');
32+
33+
while(text != null && text != '') {
34+
li = document.createElement('li');
35+
li.textContent = text;
36+
ul.append(li);
37+
text = prompt('Digite o texto para o item da lista');
38+
}
39+
40+
</script>
41+
42+
</body>
43+
</html>

0 commit comments

Comments
 (0)