Skip to content

Commit 44fec59

Browse files
Samuel-AmaroSamuel-Amaro
committed
novos exercicios sobre events no dom
1 parent 1f4071b commit 44fec59

File tree

7 files changed

+546
-0
lines changed

7 files changed

+546
-0
lines changed

‎EXE_API_DOM/add-a-closing-button.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
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"/>
6+
<style type="text/css">
7+
body {
8+
margin: 10px auto;
9+
width: 470px;
10+
}
11+
12+
h3 {
13+
margin: 0;
14+
padding-bottom: .3em;
15+
font-size: 1.1em;
16+
}
17+
18+
p {
19+
margin: 0;
20+
padding: 0 0 .5em;
21+
}
22+
23+
.frame__pane{
24+
background: #edf5e1;
25+
padding: 10px 20px 10px;
26+
border-top: solid 2px #c4df9b;
27+
}
28+
29+
.frame--remove-button {
30+
font-size: 110%;
31+
color: darkred;
32+
right: 10px;
33+
width: 24px;
34+
height: 24px;
35+
border: none;
36+
background: transparent;
37+
cursor: pointer;
38+
}
39+
</style>
40+
</head>
41+
<body>
42+
43+
<article class="frame">
44+
<section class="frame__pane">
45+
<h3>Horse</h3>
46+
<p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.</p>
47+
</section>
48+
<section class="frame__pane">
49+
<h3>Donkey</h3>
50+
<p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years.</p>
51+
</section>
52+
<section class="frame__pane">
53+
<h3>Cat</h3>
54+
<p>The domestic cat (Latin: Felis catus) is a small, typically furry, carnivorous mammal. They are often called house cats when kept as indoor pets or simply cats when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship and for their ability to hunt vermin.</p>
55+
</section>
56+
</article>
57+
58+
<script type="text/javascript">
59+
/**
60+
* Há uma lista de mensagens.
61+
*
62+
* Use JavaScript para adicionar um botão de fechamento no canto superior direito de cada mensagem.
63+
*/
64+
65+
let allPanes = document.querySelectorAll(".frame__pane");
66+
67+
function modifier(elem) {
68+
let header = document.createElement("header");
69+
header.style.cssText = "display: grid; grid-template-columns: repeat(2, 1fr);";
70+
let button = document.createElement("button");
71+
button.style.cssText = "display: block; justify-self: flex-end;";
72+
button.innerHTML = "[x]";
73+
button.addEventListener("click", (event) => {
74+
elem.remove();
75+
});
76+
button.classList.add("frame--remove-button");
77+
button.classList.add("frame__button");
78+
header.append(elem.firstElementChild);
79+
header.append(button);
80+
elem.prepend(header);
81+
}
82+
83+
for(let pane of allPanes) {
84+
modifier(pane);
85+
}
86+
</script>
87+
</body>
88+
</html>

‎EXE_API_DOM/carrousel.html‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
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"/>
6+
<style type="text/css">
7+
8+
body{
9+
display: flex;
10+
min-height: 100vh;
11+
justify-content: center;
12+
align-items: center;
13+
}
14+
15+
.block__prev, .block__next {
16+
padding: 0;
17+
background: #ddd;
18+
border-radius: 15px;
19+
border: 1px solid gray;
20+
font-size: 24px;
21+
line-height: 24px;
22+
color: #444;
23+
display: block;
24+
}
25+
26+
.block__prev:focus, .block__next:focus {
27+
outline: none;
28+
}
29+
30+
.block__prev:hover, .block__next:hover {
31+
background: #ccc;
32+
cursor: pointer;
33+
}
34+
35+
.block__carousel {
36+
height: 130px;
37+
width: 1300px; /*9999px or 1600px or 1300px*/
38+
margin: 0;
39+
padding: 0;
40+
list-style: none;
41+
font-size: 0;
42+
}
43+
44+
.block__img{
45+
width: 130px;
46+
height: 130px;
47+
display: block; /*remove espaço extra perto das imagens*/
48+
}
49+
50+
.block__item-carousel{
51+
display: inline-block; /*remove espaço extra entre os itens da lista*/
52+
/*position: relative;*/
53+
/*margin: 0 15px 0 15px;*/
54+
}
55+
56+
.block__label{
57+
position: absolute;
58+
left: 0;
59+
top: 0;
60+
}
61+
62+
.block{
63+
width: 480px;
64+
/*overflow: hidden;*/
65+
display: grid;
66+
grid-template-columns: 1fr 2fr 1fr;
67+
justify-content: center;
68+
align-items: center;
69+
padding: 0 10px 0 10px;
70+
background-color: lightgray;
71+
border-radius: 7px;
72+
}
73+
74+
.block__content{
75+
width: 390px;
76+
overflow: hidden;
77+
}
78+
</style>
79+
</head>
80+
<body>
81+
82+
<div class="block">
83+
<button class="block__prev">⇦</button>
84+
<div class="block__content">
85+
<ul class="block__carousel">
86+
<li class="block__item-carousel">
87+
<img class="block__img" src="https://en.js.cx/carousel/1.png" alt="image emoj"/>
88+
</li>
89+
<li class="block__item-carousel">
90+
<img class="block__img" src="https://en.js.cx/carousel/2.png" alt="image emoj"/>
91+
</li>
92+
<li class="block__item-carousel">
93+
<img class="block__img" src="https://en.js.cx/carousel/3.png" alt="image emoj"/>
94+
</li>
95+
<li class="block__item-carousel">
96+
<img class="block__img" src="https://en.js.cx/carousel/4.png" alt="image emoj"/>
97+
</li>
98+
<li class="block__item-carousel">
99+
<img class="block__img" src="https://en.js.cx/carousel/5.png" alt="image emoj"/>
100+
</li>
101+
<li class="block__item-carousel">
102+
<img class="block__img" src="https://en.js.cx/carousel/6.png" alt="image emoj"/>
103+
</li>
104+
<li class="block__item-carousel">
105+
<img class="block__img" src="https://en.js.cx/carousel/7.png" alt="image emoj"/>
106+
</li>
107+
<li class="block__item-carousel">
108+
<img class="block__img" src="https://en.js.cx/carousel/8.png" alt="image emoj"/>
109+
</li>
110+
<li class="block__item-carousel">
111+
<img class="block__img" src="https://en.js.cx/carousel/9.png" alt="image emoj"/>
112+
</li>
113+
<li class="block__item-carousel">
114+
<img class="block__img" src="https://en.js.cx/carousel/10.png" alt="imag emoj"/>
115+
</li>
116+
</ul>
117+
</div>
118+
<button class="block__next">⇨</button>
119+
</div>
120+
121+
<script type="text/javascript">
122+
/**
123+
* Crie um “carrossel” – uma faixa de imagens que pode ser rolada clicando nas setas.
124+
*
125+
* Mais tarde, podemos adicionar mais recursos a ele: rolagem infinita, carregamento dinâmico etc.
126+
*
127+
* PS Para esta tarefa, a estrutura HTML/CSS é na verdade 90% da solução.
128+
*/
129+
130+
//rotule as imagens para rastreá-las visualmente, apenas por conveniência,
131+
// este código pode ser removido
132+
let i = 1;
133+
let carousel = document.querySelector(".block__carousel");
134+
let blockContent = document.querySelector(".block__content");
135+
for(let li of carousel.querySelectorAll('li')) {
136+
li.insertAdjacentHTML('beforeend', `<span class="block__label">${i}</span>`);
137+
i++;
138+
}
139+
140+
//...seu código para dar vida ao carrossel!
141+
let arrowNext = document.querySelector(".block__next");
142+
let arrowPrev = document.querySelector(".block__prev");
143+
let itensCarousel = carousel.children, currentIndex = 0;
144+
itensCarousel = Array.from(itensCarousel);
145+
blockContent.scrollLeft = 0;
146+
147+
function countInterIndex(currentIndex, lastIndex) {
148+
let count = 1;
149+
for(let i = currentIndex; i < lastIndex; i++) {
150+
count++;
151+
}
152+
return count;
153+
}
154+
155+
function widthAll(index, deslocamento, sentido) {
156+
//conta deslocamente para frente
157+
let itens = [], w = 0;
158+
if(sentido === "positivo") {
159+
itens = itensCarousel.slice(index, index + deslocamento);
160+
for(let i = 0; i < itens.length; i++) {
161+
w = w + itens[i].clientWidth;
162+
}
163+
return w;
164+
}else{
165+
//conta deslocamento para tras
166+
itens = itensCarousel.slice(index - deslocamento, index);
167+
for(let i = itens.length - 1; i >= 0; i--) {
168+
w = w + itens[i].clientWidth;
169+
}
170+
return w;
171+
}
172+
}
173+
174+
arrowNext.addEventListener("click", (event) => {
175+
if(currentIndex < itensCarousel.length - 1) {
176+
if(currentIndex % 3 === 0) {
177+
//posso mostrar 3
178+
if(countInterIndex(currentIndex, itensCarousel.length) >= 3) {
179+
blockContent.scrollLeft = blockContent.scrollLeft + widthAll(currentIndex, 3, "positivo");
180+
//atualiza para posição atual
181+
currentIndex += 3;
182+
}else{
183+
//não posso mostrar 3
184+
//quanto posso andar ?
185+
blockContent.scrollLeft = blockContent.scrollLeft + widthAll(currentIndex, countInterIndex(currentIndex, itensCarousel.length), "positivo");
186+
currentIndex += countInterIndex(currentIndex, itensCarousel.length);
187+
}
188+
}else{
189+
console.log('Não divisivel por três');
190+
}
191+
}else{
192+
blockContent.scrollLeft = blockContent.scrollLeft + itensCarousel[currentIndex].clientWidth;
193+
}
194+
});
195+
196+
arrowPrev.addEventListener("click", (event) => {
197+
if(currentIndex > 0) {
198+
if(currentIndex % 3 === 0) {
199+
//posso mostrar 3 ?
200+
if(countInterIndex(0, currentIndex) >= 3) {
201+
blockContent.scrollLeft = blockContent.scrollLeft - widthAll(currentIndex, 3, "negativo");
202+
//atualiza para posição atual
203+
currentIndex -= 3;
204+
}else{
205+
//não posso mostrar 3
206+
//quanto posso andar ?
207+
blockContent.scrollLeft = blockContent.scrollLeft - widthAll(currentIndex, countInterIndex(0, currentIndex), "negativo");
208+
currentIndex -= countInterIndex(0, currentIndex);
209+
}
210+
}else{
211+
console.log('Não divivel por três');
212+
}
213+
}else{
214+
blockContent.scrollLeft = blockContent.scrollLeft - itensCarousel[currentIndex].clientWidth;
215+
}
216+
});
217+
</script>
218+
</body>
219+
</html>

‎EXE_API_DOM/create-a-sliding-menu.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
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"/>
6+
<style>
7+
.menu--open .menu__title::before{
8+
content: "▼";
9+
color: green;
10+
}
11+
12+
.menu--close .menu__title::before{
13+
content: "▶";
14+
color: green;
15+
font-size: 80%;
16+
}
17+
18+
.menu__list{
19+
list-style-type: none;
20+
list-style: none;
21+
margin: 0;
22+
padding-left: 20px;
23+
}
24+
25+
.menu:hover{
26+
cursor: pointer;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
32+
<nav class="menu menu--close">
33+
<span class="menu__title">Sweeties (click me)!</span>
34+
<ul class="menu__list" style="display: none;">
35+
<li class="menu__item">Cake</li>
36+
<li class="menu__item">Donut</li>
37+
<li class="menu__item">Honey</li>
38+
</ul>
39+
</nav>
40+
41+
<script type="text/javascript">
42+
/**
43+
* Crie um menu que abra/reduza ao clicar:
44+
*
45+
* PS HTML/CSS do documento de origem deve ser modificado.
46+
*/
47+
48+
let menu = document.querySelector(".menu");
49+
50+
function showHideMenu(event) {
51+
let listMenu = document.querySelector(".menu__list");
52+
if(listMenu.style.display == "none" && menu.classList.contains("menu--close")) {
53+
listMenu.style.display = "block";
54+
menu.classList.remove("menu--close");
55+
menu.classList.add("menu--open");
56+
}else{
57+
listMenu.style.display = "none";
58+
menu.classList.remove("menu--open");
59+
menu.classList.add("menu--close");
60+
}
61+
}
62+
63+
menu.addEventListener("click", showHideMenu);
64+
65+
</script>
66+
</body>
67+
</html>

0 commit comments

Comments
 (0)