Skip to content

Commit 8f65fff

Browse files
Douglas1688Douglas1688
committed
[ADD] Clase 20 - Crear e insertar elementos en el DOM
1 parent 33e7dd7 commit 8f65fff

6 files changed

Lines changed: 133 additions & 21 deletions

File tree

‎clase_19/index.html‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,33 @@
44
<meta charset="UTF-8">
55
<title>Objeto Evento</title>
66
<link rel="stylesheet" href="styles.css">
7+
78
</head>
9+
810
<body>
9-
<!-- <form id="form">
11+
<form id="form">
1012
<input id="input" type="text">
13+
1114
<input type="submit" value="enviar">
12-
15+
1316
</form>
14-
<button id="button">Click me</button> -->
15-
.gallery_item{$}*9
17+
<a id="link" href="https://developer.mozilla.org/">Ir a Mozilla</a>
18+
<button id="button">Click me</button>
19+
<!-- <div id="gallery" class="gallery" >
20+
<div class="gallery_item">1</div>
21+
<div class="gallery_item">2</div>
22+
<div class="gallery_item">3</div>
23+
<div class="gallery_item">4</div>
24+
<div class="gallery_item">5</div>
25+
<div class="gallery_item">6</div>
26+
<div class="gallery_item">7</div>
27+
<div class="gallery_item">8</div>
28+
<div class="gallery_item">9</div>
29+
30+
</div> -->
31+
32+
33+
1634

1735
<script src="script.js"></script>
1836
</body>

‎clase_19/script.js‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,31 @@
11
const form = document.getElementById('form');
22
const input = document.getElementById('input');
33
const button = document.getElementById('button');
4-
4+
const gallery = document.getElementById('gallery');
5+
const link = document.getElementById('link');
56
// input.addEventListener('keyup',(e)=>{
67
// console.log(e);
78
// });
89

910
// addEventListener('click',(e)=>{
1011
// console.log(e.clientX,e.clientY);
1112
// })
12-
button.addEventListener('click',(e)=>{
13-
console.log(e.target);
14-
});
13+
// button.addEventListener('click',(e)=>{
14+
// console.log(e.target);
15+
// });
16+
17+
18+
// gallery.addEventListener('click',(e)=>{
19+
// console.log(e.target.textContent);
20+
// });
21+
link.addEventListener('click',(e)=>{
22+
e.preventDefault();
23+
button.click();
24+
});
25+
form.addEventListener('submit',(e)=>{
26+
e.preventDefault();
27+
console.log('El formulario se ha enviado.')
28+
})
29+
button.addEventListener('click',()=>{
30+
input.value = "Clicked";
31+
});

‎clase_19/styles.css‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
a,
2-
button{
3-
display: block;
1+
.gallery{
2+
3+
display: grid;
4+
grid-template-columns: repeat(3,1fr);
5+
grid-gap: 10px;
46
}
5-
.box {
6-
width: 100px;
7-
height: 100px;
8-
background: red;
7+
8+
.gallery_item{
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
border: 1px solid black;
13+
cursor: pointer;
914
}
10-
.red {
11-
background: red;
12-
}
13-
.green {
14-
background: green;
15-
}

‎clase_20/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Objeto Evento</title>
6+
<link rel="stylesheet" href="styles.css">
7+
8+
</head>
9+
10+
<body>
11+
<h1 id="title">DOM - Crear e insertar elementos I</h1>
12+
<ul id="daysList"></ul>
13+
<select id="daysSelect">
14+
<!-- <option value=""></option> -->
15+
</select>
16+
<script src="script.js"></script>
17+
</body>
18+
</html>

‎clase_20/script.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/*DOM - Crear e insertar ELEMENTOS
2+
Crea un elemento: document.createElement(element);
3+
Escribir texto en una elemento: element.textContent = texto
4+
Escribir HTML en un elemento: element.innerHTML = código HTML
5+
6+
Añadir un elemento al DOM: parent.appendChild(element)
7+
8+
Fragmentos de código: document.createDocumentFragment()
9+
10+
*/
11+
12+
const days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
13+
14+
const title = document.getElementById('title');
15+
const daysList = document.getElementById('daysList');
16+
const daysSelect = document.getElementById('daysSelect');
17+
18+
// const itemList = document.createElement('LI');
19+
// itemList.textContent = 'Lunes';
20+
// daysList.appendChild(itemList);
21+
// console.log(itemList);
22+
23+
title.innerHTML = 'DOM - <span>Crear e insertar elementos</span>';
24+
25+
// for (const day of days) {
26+
// daysList.innerHTML += `<li>${day}</li>`
27+
// }
28+
29+
// const fragment = document.createDocumentFragment();
30+
// for (const day of days){
31+
// const itemList = document.createElement('LI');
32+
// itemList.textContent = day
33+
// fragment.appendChild(itemList);
34+
// }
35+
36+
// daysList.appendChild(fragment);
37+
38+
const fragment = document.createDocumentFragment();
39+
for (const day of days){
40+
const selectItem = document.createElement('OPTION');
41+
selectItem.setAttribute('value',day.toLocaleLowerCase());
42+
selectItem.textContent = day;
43+
fragment.appendChild(selectItem);
44+
}
45+
46+
daysSelect.appendChild(fragment);

‎clase_20/styles.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.gallery{
2+
3+
display: grid;
4+
grid-template-columns: repeat(3,1fr);
5+
grid-gap: 10px;
6+
}
7+
8+
.gallery_item{
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
border: 1px solid black;
13+
cursor: pointer;
14+
}

0 commit comments

Comments
 (0)