Mes: febrero 2021

<div id="contenedor" class="container ">
		<button id="poner">Pon cookie</button>
		<button id="obtener">Obtener cookie</button>
		<button id="eliminar">Eliminar cookie</button>
		<script src="js/test.js"></script>
	</div>

document.getElementById('poner').addEventListener('click', poner)
document.getElementById('obtener').addEventListener('click', obtener)
document.getElementById('eliminar').addEventListener('click', eliminar)

function poner () {
  setCookie('edad', 50, 10)
}
function obtener () {
  const edad = getCookie('edad')
  alert(edad)
}
function eliminar () {
  setCookie('edad', 50, -10)
}

function setCookie (cname, cvalue, exdays) {
  const d = new Date()
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000))
  const expires = 'expires=' + d.toUTCString()
  document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/'
}

function getCookie (cname) {
  const name = cname + '='
  const decodedCookie = decodeURIComponent(document.cookie)
  const ca = decodedCookie.split(';')
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i]
    while (c.charAt(0) == ' ') {
      c = c.substring(1)
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length)
    }
  }
  return ''
}

Tenemos una web con un h1.
Queremos que cada 5 segundos en el h1 aparezca un número aleatorio del 1 al 6

<div id="contenedor" class="container ">
		<h1 id="dado"></h1>
		<script src="js/test.js"></script>
	</div>

setInterval(aleatorio, 5000)

function aleatorio () {
  const dado = getTirada()
  document.getElementById('dado').innerHTML = dado
}

function getTirada () {
  return Math.floor(Math.random() * 6 + 1)
}

Tenemos 100 botones con los números del 1 al 100 y hay que pulsarlos correlativamente:

https://www.microsiervos.com/archivo/juegos-y-diversion/del-1-al-100-juego-numeros.html

¿Seríamos capaz de hacer algo parecido?

Modificaciones:

1.- Que la cantidad de botones la pueda elegir el usuario mediante un input
Cantidad:[___] [Empezar]

2.- Que para crear el array desordenado tengamos una función que lo haga function arrayDesordenado(cantidad)-> [4,2,6,1,3,5]

3.- Que para crear el botón tengamos otra función crearBoton(texto)–> Nos devuelva el botón con el texto que le pasemos

<div id="contenedor" class="container ">
		<button id="empezar" class="btn btn-primary">Empezar</button>
		<div id="tablero">
		</div>
		<script src="js/test.js"></script>
	</div>

document.getElementById('empezar').addEventListener('click', empezar)

let numeroAPulsar
const maximo = 30

function empezar () {
  numeroAPulsar = 1
  const tablero = document.getElementById('tablero')
  tablero.innerHTML = ''
  // Creo un array de números del 1 al 20
  // Y luego lo desordeno
  const numeros = []
  for (let i = 0; i < maximo; i++) {
    numeros.push(i + 1)
  }
  for (let i = 0; i < 10; i++) {
    numeros.sort(function (a, b) { return 0.5 - Math.random() })
  }
  for (let i = 0; i < maximo; i++) {
  // Crear un botón
    const boton = document.createElement('button')
    boton.innerHTML = numeros[i]
    boton.className = 'btn btn-success m-1'
    boton.addEventListener('click', pulsado)
    tablero.appendChild(boton)
  }
}

function pulsado () {
  const numeroPulsado = parseFloat(this.innerHTML)
  if (numeroAPulsar == numeroPulsado) {
    this.disabled = 'true'
    this.className = 'btn m-1'
    this.style.color = 'red'
    numeroAPulsar++
    if (numeroAPulsar > maximo) {
      alert('Has ganado ¡BRAVO!')
      document.getElementById('tablero').innerHTML = ''
    }
  } else {
    alert('Has perdido ¡JAJAJAJA!')
    document.getElementById('tablero').innerHTML = ''
  }
}

Mejorándolo un poco y comentando:

	<div id="contenedor" class="container ">
		<label for="cantidad">Introduzca la cantidad de botones</label>
		<input id="cantidad" type="number">
		<button id="empezar" class="btn btn-primary">Empezar</button>
		<div id="tablero">
		</div>
		<script src="js/test.js"></script>
	</div>

document.getElementById('empezar').addEventListener('click', empezar)

let numeroAPulsar
let maximo = 30

function empezar () {
  // El máximo nos lo pone el usuario en el input cantidad
  maximo = parseFloat(document.getElementById('cantidad').value)
  // Primero hay que pulsar el 1. Como aquí comenzamos empezamos por el principio
  numeroAPulsar = 1
  // Me guardo el tablero para no tener que estar repitiendo el documeng.getElementById
  const tablero = document.getElementById('tablero')
  // Vacío el tablero porque estoy empezando
  tablero.innerHTML = ''
  // LLamo a la función arrayDesordenado para obtener un array desordenado
  // ¿Cuántos elementos? Los que me ha dado el usuario y que los he guardado en maximo
  const numeros = arrayDesordenado(maximo)
  // Añado tantos botones como me haya dicho el usuario (maximo)
  for (let i = 0; i < maximo; i++) {
  // Crear un botón llamando a la función y le paso el texto que quiero que tenga
  // En este caso el elemento del array para que los botones salgan desordenados
    const boton = crearBoton(numeros[i])
    // Y lo añado al tablero
    tablero.appendChild(boton)
  }
}

function crearBoton (texto) {
  // Creo el elemento
  const boton = document.createElement('button')
  // Le pongo como texto lo que me pasen como parámetro
  boton.innerHTML = texto
  // Le añado una clase para hacer bonito
  boton.className = 'btn btn-success m-1'
  // Capturo el evento click para que cuando pulsen el botón comprobemos
  // SI el usuario va bien o ha perdido
  boton.addEventListener('click', pulsado)
  // Devuelvo el botón
  return boton
}

function arrayDesordenado (cantidad) {
  // Creo un array de números del 1 a cantidad
  const numeros = []
  for (let i = 0; i < cantidad; i++) {
    numeros.push(i + 1)
  }
  // Desordeno el array
  for (let i = 0; i < 10; i++) {
    numeros.sort(function (a, b) { return 0.5 - Math.random() })
  }
  // Devuelvo el array
  return numeros
}

function pulsado () {
  // Miro cual es el número que me han pulsado (el texto del botón)
  const numeroPulsado = parseFloat(this.innerHTML)
  if (numeroAPulsar == numeroPulsado) {
  // Si el número pulsado es el que se tenía que pulsar
    // Deshabilito el botón
    this.disabled = 'true'
    // Le cambio la clase
    this.className = 'btn m-1'
    // Le pongo color rojo
    this.style.color = 'red'
    // El número a pulsar es uno más
    numeroAPulsar++
    // SI ya hemos pulsado todos los números el usuario ha ganado
    if (numeroAPulsar > maximo) {
      alert('Has ganado ¡BRAVO!')
      document.getElementById('tablero').innerHTML = ''
    }
  } else {
    // Si el número no es el que se tenía que pulsar el usuario ha perdido
    alert('Has perdido ¡JAJAJAJA!')
    document.getElementById('tablero').innerHTML = ''
  }
}

Vamos a crear una web que nos pida dos números y nos muestre en un h1 la suma entre el primero y el último.

Numero1: [___] NUmero2: [____]
[Calcular]
La suma es…

Hacedlo con el evento click del botón pero podéis probar a hacerlo con el change de los inputs.

	<div id="contenedor" class="container ">
		<div class="form-group">
			<label for="num1">Número 1:</label>
			<input type="text" class="form-control" maxlength="10" id="num1" placeholder="Introduce un número">
			<p id="mensaje"></p>
			<label for="num2">Número 2:</label>
			<input type="text" class="form-control" id="num2" placeholder="Introduce un número">
		</div>

		<button id="sumar">Sumar</button>
		<div id="resultados">
		</div>
		<script src="js/test.js"></script>
	</div>

// Capturo el evento click del botón
document.getElementById('sumar').addEventListener('click', sumar)

// Capturo el evento change de los inputs
document.getElementById('num1').addEventListener('change', sumar)
document.getElementById('num2').addEventListener('change', sumar)

// Capturo el evento keyup
document.getElementById('num1').addEventListener('keyup', comprobar)

function sumar () {
  // Recupero los valores de los números
  const num1 = parseFloat(document.getElementById('num1').value)
  const num2 = parseFloat(document.getElementById('num2').value)
  // Los sumo
  const suma = num1 + num2
  // Si el resultado es un número, o lo que es lo mismo 'no es cierto que no es un número'
  if (!isNaN(suma)) {
    // Creo un párrafo
    const parrafo = document.createElement('p')
    // Le pongo un texto
    parrafo.innerHTML = 'El resultado es: ' + suma
    // Lo añado al div 'resultados'
    document.getElementById('resultados').appendChild(parrafo)
  }
}

function comprobar () {
  const cadena = document.getElementById('num1').value
  if (cadena.length == 10) {
    document.getElementById('mensaje').innerHTML = 'No puedes escribir más'
  } else {
    document.getElementById('mensaje').innerHTML = ''
  }
}

Vamos a tener una web que nos va a preguntar cuantos nombres queremos introducir. Al darle al botón generar nos creará tantos inputs como nos haya dicho el usario.
Pista: document.createElement(‘input’)

	<div id="contenedor" class="container ">
		<div class="form-group">
			<label for="cadena">¿Cuántos nombres vas a introducir?:</label>
			<input type="text" class="form-control" id="cantidad" placeholder="Introduce un número">
		</div>
		<button id="normalizar">Normalizar</button>
		<script src="js/test.js"></script>
	</div>

document.getElementById('normalizar').addEventListener('click', procesar)

function procesar () {
  // Recupero la cantidad introducida
  const cantidad = parseFloat(document.getElementById('cantidad').value)
  // Recupero el contenedor
  const contenedor = document.getElementById('contenedor')
  // Hago un bucle por el número de veces introducido
  for (let i = 0; i < cantidad; i++) {
    // Creo un div para agrupar los dos elementos
    const elemento = document.createElement('div')
    // Un párrafo como etiqueta
    const parrafo = document.createElement('p')
    parrafo.innerHTML = 'Nombre ' + (i + 1) + ':'
    // Y el input
    const miInput = document.createElement('input')
    // Añado un evento para que veáis que se puede hacer
    miInput.addEventListener('change', mostrar)
    // Añado el párrafo y el input al div
    elemento.appendChild(parrafo)
    elemento.appendChild(miInput)
    // Añado el div al contenedor
    contenedor.appendChild(elemento)
  }
}

function mostrar () {
  console.log(this.value)
}

// Selecciono el contenedor
const contenedor = document.querySelector('.container')
console.log('Contenedor')
console.log(contenedor)
// El primer hijo que es un elemento (no texto)
const primer_hijo = contenedor.firstElementChild
console.log('Primer hijo')
console.log(primer_hijo)

// El úlitmo hijo que es un elemento (no texto)
const ultimo_hijo = contenedor.lastElementChild
console.log('Último  hijo')
console.log(ultimo_hijo)

// Los hijos
const hijos = contenedor.children

// Recorriendo los hijos
for (let i = 0; i < hijos.length; i++) {
  console.log('Hijo en posición ' + i)
  console.log(hijos[i])
}

// Cogemos el segundo hijo
const boton = hijos[1]

// El hermano de después
const hermano_despues = boton.nextElementSibling
console.log('Hermano después')
console.log(hermano_despues)
// El hermano de antes
const hermano_antes = boton.previousElementSibling
console.log('Hermano anterior')
console.log(hermano_antes)