Ejercicio local Storage

Tenemos una web con un input para poner una cantidad y un botón que pone sumar.
Cada vez que le demos al botón nos suma la cantidad en una variable almacenada en el localStorage y nos la muestra en un h1.

Cuando carguemos la página, si ya hay valores en el localStorage mostramos ese valor en el h1

<div id="contenedor" class="container ">
		Cantidad: <input type="number" id="cantidad">
		<button class="btn btn-success" id="sumar">Sumar</button>
		<button class="btn btn-success" id="borrar">Borrar</button>
		<h1 id="resultado"></h1>
	</div>
	<script src="js/test.js"></script>

document.getElementById('sumar').addEventListener('click', sumar)
document.getElementById('borrar').addEventListener('click', borrar)
document.addEventListener('DOMContentLoaded', function (event) {
  if (localStorage.getItem('cantidad') != null) {
    document.getElementById('resultado').innerHTML = localStorage.getItem('cantidad')
  }
})

function sumar () {
  // Recupero el valor del input
  let cantidad = parseFloat(document.getElementById('cantidad').value)
  if (isNaN(cantidad)) {
    cantidad = 0
  }
  // Recupero el valor de localStorage
  let cantidadAlmacenada = parseFloat(localStorage.getItem('cantidad'))
  // Si en el localStorage no hay número, bien porque no existe la variable
  // Bien porque existe pero no es un número
  // La pongo a 0
  if (isNaN(cantidadAlmacenada)) {
    cantidadAlmacenada = 0
  }
  // Calculo la suma
  const suma = cantidad + cantidadAlmacenada
  // La muestro en el H1 porque me lo piden
  document.getElementById('resultado').innerHTML = suma
  // ALmaceno el resultado en el localStorage para que quede registrado
  // En setItem tengo 'nombre de la variable', valor de la variable
  localStorage.setItem('cantidad', suma)
}

function borrar () {
  // Funcionaría localStorage.removeItem('cantidad')
  // Lo más lógico según mi estructura sería lo siguiente
  localStorage.setItem('cantidad', 0)
}

Ejercicio timeout

Una página web con un h1 que cada 5 segundos cambie de color

Opción 1: Aleatorio
OPción 2: de negro a rojo y viceversa

Una página web con un contador de 100 a 0 cada segundo.
En los múltiplos de 5 que esté en negrita.

<div id="contenedor" class="container ">
		<h1 id="cambiante">Texto que cambia de color</h1>

		<script src="js/test.js"></script>
	</div>

setInterval(cambiar, 1000)

let negro = true

function cambiar () {
  // opcion 1
  // document.getElementById('cambiante').style.color = getRandomColor()
  // opcion 2 sin semáforo
  /*
  if (document.getElementById('cambiante').style.color == '') {
    document.getElementById('cambiante').style.color = 'red'
  } else {
    document.getElementById('cambiante').style.color = ''
  }

  */
  // opcion 2 con semáforo
  if (negro) {
    document.getElementById('cambiante').style.color = 'red'
  } else {
    document.getElementById('cambiante').style.color = ''
  }
  negro = !negro
}

function colorAleatorio () {
  const colores = ['red', 'blue', 'green', 'yellow', 'orange', 'olive', 'violet']
  const numero = Math.floor(Math.random() * colores.length)
  return colores[numero]
}

function colorAleatorioTotal () {
  const rojo = Math.floor(Math.random() * 256)
  const verde = Math.floor(Math.random() * 256)
  const azul = Math.floor(Math.random() * 256)
  return 'rgb(' + rojo + ',' + verde + ',' + azul + ')'
}

function getRandomColor () {
  const letters = '0123456789ABCDEF'
  let color = '#'
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)]
  }
  return color
}


const temporizador = setInterval(contar, 1000)
let contador = 10
function contar () {
  document.getElementById('cambiante').innerHTML = contador
  if (contador % 5 == 0) {
    document.getElementById('cambiante').style.color = 'red'
    document.getElementById('cambiante').style.fontWeight = 'bold'
  } else {
    document.getElementById('cambiante').style.color = 'black'
    document.getElementById('cambiante').style.fontWeight = 'normal'
  }
  contador--
  if (contador < 0) {
    clearInterval(temporizador)
  }
}

Ejemplo de uso de localStorage

	<button id="poner">Pon Storage</button>
		<button id="obtener">Obtener Storage</button>
		<button id="eliminar">Eliminar Storage</button>
		<script src="js/test.js"></script>

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

localStorage.clear()

function poner () {
  localStorage.setItem('edad', 50)
}
function obtener () {
  const edad = localStorage.getItem('edad')
  alert(edad)
}
function eliminar () {
  localStorage.removeItem('edad')
}

Funciones para cookies

function getCookie(name) {
    var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return v ? v[2] : null;
}
function setCookie(name, value, days) {
    var d = new Date;
    d.setTime(d.getTime() + 24*60*60*1000*days);
    document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
}
function deleteCookie(name) { setCookie(name, '', -1); }

Ejemplos de uso de cookies

<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 ''
}

Mini ejercicio Timeout

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)
}

Ejemplo timeout

<div id="contenedor" class="container ">
		<button id="parar" class="btn btn-primary">Parar</button>
		<h1 id="contador"></h1>
		<script src="js/test.js"></script>
	</div>

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

let contador = 20
let temporizador = setTimeout(saludo, 1000)

function parar () {
  clearInterval(temporizador)
}

function saludo () {
  document.getElementById('contador').innerHTML = contador
  contador--
  if (contador < 0) {
    alert('RINGRING!!!')
  } else {
    temporizador = setTimeout(saludo, 1000)
  }
}

Juego del 1 al 100

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 = ''
  }
}

Ejercicio

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 = ''
  }
}