Hola a todos, hoy os dejo una serie de ejercicios de webcomponents para practicar todo aquello que hemos explicado en anteriores posts.
Todos los ejercicios que proponemos están resueltos en este mismo post, intenta hacerlo por ti mismo y si te quedas atascado puedes mirar la solución. Recuerda, que no tiene por que estar igual tu solución con la del post, el objetivo es que aprendas no que me copies la solución.
Si tienes alguna duda, recuerda que puedes consultarnos escribiendo un comentario en este post o enviándonos un e-mail a administrador@discoduroderoer.es
1. Crea un webcomponet que muestre un «Hola mundo» por pantalla y al clicar en él, muestre un alert «Hola mundo»
| Spoiler Inside |
SelectShow> |
— index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="main.js"></script>
</head>
<body>
<hello-world></hello-world>
</body>
</html>
— javascript
class HelloWorld extends HTMLElement {
constructor(){
super();
// Creamos un shadow para añadir contenido
let shadow = this.attachShadow({ mode: 'open'});
// Creamos un span
const span = document.createElement('span');
// Creamos un texto para un span
const spanText = document.createTextNode('Hola mundo');
// Añadimos el texto al span
span.appendChild(spanText);
// Añado el span al shadow
shadow.appendChild(span);
}
connectedCallback(){
// Añado evento de click
this.addEventListener('click', function(){
alert('Hola mundo');
})
}
}
// Crea el webcomponent
customElements.define('hello-world', HelloWorld);
|
2. Crear un contador con webcomponet. Dos botones y un input, al hacer click en los botones, aumentamos el valor en el input
| Spoiler Inside |
SelectShow> |
— index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="main.js"></script>
</head>
<body>
<ddr-counter></ddr-counter>
</body>
</html>
— javascript
class Counter extends HTMLElement {
constructor() {
super();
this.increment = this.increment.bind(this);
this.decrement = this.decrement.bind(this);
this.value = 0;
let shadow = this.attachShadow({ mode: 'open' });
const b1 = document.createElement('button');
const b1Text = document.createTextNode('+');
b1.appendChild(b1Text);
shadow.appendChild(b1);
this.buttonIncrement = b1;
const input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('readonly', 'true');
input.setAttribute('value', this.value);
shadow.appendChild(input);
this.inputText = input;
const b2 = document.createElement('button');
const b2Text = document.createTextNode('-');
b2.appendChild(b2Text);
shadow.appendChild(b2);
this.buttonDecrement = b2;
shadow.appendChild(b2);
}
connectedCallback() {
this.buttonIncrement.addEventListener('click', this.increment);
this.buttonDecrement.addEventListener('click', this.decrement);
}
increment() {
this.value++;
this.inputText.setAttribute('value', this.value);
}
decrement() {
this.value--;
this.inputText.setAttribute('value', this.value);
}
}
customElements.define('ddr-counter', Counter);
|
3. Añadir atributos al contador del ejercicio anterior.
| Spoiler Inside |
SelectShow> |
— index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="main.js"></script>
</head>
<body>
<ddr-counter value="5" step="5" min="0" max="100"></ddr-counter>
</body>
</html>
— javascript
class Counter extends HTMLElement {
constructor() {
super();
this.increment = this.increment.bind(this);
this.decrement = this.decrement.bind(this);
let shadow = this.attachShadow({ mode: 'open' });
const b1 = document.createElement('button');
const b1Text = document.createTextNode('+');
b1.appendChild(b1Text);
shadow.appendChild(b1);
this.buttonIncrement = b1;
const input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('readonly', 'true');
shadow.appendChild(input);
this.inputText = input;
const b2 = document.createElement('button');
const b2Text = document.createTextNode('-');
b2.appendChild(b2Text);
shadow.appendChild(b2);
this.buttonDecrement = b2;
shadow.appendChild(b2);
}
connectedCallback() {
this.buttonIncrement.addEventListener('click', this.increment);
this.buttonDecrement.addEventListener('click', this.decrement);
this.inputText.setAttribute('value', this.value);
}
increment() {
let step = +this.step; // parseInt(this.step)
if (!step) {
step = 1;
}
const nextValue = +this.value + step;
if (this.max && nextValue > +this.max) {
this.value = this.max;
} else {
this.value = nextValue;
}
this.inputText.setAttribute('value', this.value);
}
decrement() {
let step = +this.step; // parseInt(this.step)
if (!step) {
step = 1;
}
const nextValue = +this.value - step;
if (this.min && nextValue < +this.min) {
this.value = this.min;
} else {
this.value = nextValue;
}
this.inputText.setAttribute('value', this.value);
}
get value() {
return this.getAttribute('value');
}
set value(value) {
this.setAttribute('value', value);
}
get step() {
return this.getAttribute('step');
}
set step(value) {
this.setAttribute('step', value);
}
get min() {
return this.getAttribute('min');
}
set min(value) {
this.setAttribute('min', value);
}
get max() {
return this.getAttribute('max');
}
set max(value) {
this.setAttribute('max', value);
}
}
customElements.define('ddr-counter', Counter);
|
Os dejo videos que os pueden ser de ayuda.
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta