Mes: febrero 2021

Fetch + Json ejemplo bitcoin

	<div id="contenedor" class="container ">
		<h1>Hoy el bitcoin está a <span id="cotizacion"></span></h1>
		Cuantos bitcoins tienes: <input type="number" id="bitcoins" value="0">
		<button id="calcular">Calcular</button>
		<h3>Tienes: <span id="cartera"></span> €</h3>
	</div>
	<script src="js/test.js"></script>

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

function calcular () {
  fetch('https://api.coindesk.com/v1/bpi/currentprice.json')
    .then(function (response) { // Si tengo respuesta
      return response.text() // El html de la página me lo pasas al siguiente then
    })
    .then(function (html) { // Dentro de html yo tengo la respuesta de la página
      console.log(html)
      const objeto = JSON.parse(html)
      console.log(objeto)
      console.log(objeto.bpi.EUR.rate)
      const cantidad = parseFloat(document.getElementById('bitcoins').value)
      document.getElementById('cotizacion').innerHTML = objeto.bpi.EUR.rate
      document.getElementById('cartera').innerHTML = objeto.bpi.EUR.rate_float * cantidad
    })
    .catch(function (err) {
      console.log('Error: ', err)
    })
}

Ejemplo fetch: perritos

	<div id="contenedor" class="container ">
		<img id="imagen" src="" width="300">
		<video id="video" controls src="">
		</video>
	</div>
	<script src="js/test.js"></script>

fetch('https://random.dog/woof.json?ref=apilist.fun')
  .then(function (response) { // Si tengo respuesta
    console.log(response)
    return response.text() // El html de la página me lo pasas al siguiente then
  })
  .then(function (html) { // Dentro de html yo tengo la respuesta de la página
    console.log(html)
    const perrito = JSON.parse(html)
    console.log(perrito)
    // Solo me interesa la url del perrito
    const url = perrito.url
    // Obtengo la extensión del archivo
    const extension = url.split('.').pop()
    // SI es vídeo lo pongo en el vídeo y oculto la imagen y viceversa
    if (extension == 'mp4') {
      const video = document.getElementById('video')
      video.src = url
      document.getElementById('imagen').style.display = 'none'
    } else {
      document.getElementById('imagen').src = url
      document.getElementById('video').style.display = 'none'
    }
  })
  .catch(function (err) {
    console.log('Error: ', err)
  })

Mini ejercicio JSON

Vamos a tener una web con dos cajitas:
Num1:[___] Num2:[___]
[Calcular]

El botón calcular nos calcula la suma y guarda en el localStorage un elemento llamado ‘resultado’ que es un objeto con la siguiente info:
{
num1: (valor del numero1),
num2: (valor del numero2),
suma: (valor de la suma)
}

No hace falta hacer nada más: recuperar, calcular, guardar en localStorage


	Num1: <input type="number" id="numInput1">
	Num2: <input type="number" id="num2">
	<button id="calcular">Calcular</button>
	<script src="js/local.js"></script>

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

function calcular () {
  const numero1 = parseFloat(document.getElementById('numInput1').value)
  const num2 = parseFloat(document.getElementById('num2').value)
  console.log(numero1, num2)
  const suma = numero1 + num2
  // Creo el objeto
  const resultado = {
	  num1: numero1,
	  num2: num2, // Si estás poniendo lo mismo 'num2' ¿Esto no da un error? No, porque en la parte izquierda es el NOMBRE de la propiedad y en la derecha es el VALOR de la variable
	  suma: suma // Yo recomiendo que los nombres sean los mismos en todo el recorrido, nos evita errores
  }
  console.log(resultado)
  // Lo guardo convertido en JSON
  localStorage.setItem('resultado', JSON.stringify(resultado))
}

Ejemplo JSON

 

<div id="contenedor" class="container ">
		Nombre:<input type="text" id="nombre">
		Edad:<input type="text" id="edad">
		Sueldo:<input type="number" id="sueldo">
		<button id="guardar" class="btn btn-success">Guardar datos</button>
	</div>
	<script src="js/test.js"></script>

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

// Recupero el valor del localStorage
const guardado = localStorage.getItem('empleado')
// SI hay datos
if (guardado != null) {
  console.log(guardado)
  // Convierto la cadena en objeto (parse)
  const empleado = JSON.parse(guardado)
  console.log(empleado)
  // Pongo los datos en el HTML
  document.getElementById('nombre').value = empleado.nombre
  document.getElementById('edad').value = empleado.edad
  document.getElementById('sueldo').value = empleado.sueldo
}

function guardar () {
  // Recupero los datos del HTML
  const nombre = document.getElementById('nombre').value
  const edad = document.getElementById('edad').value
  const sueldo = document.getElementById('sueldo').value
  // Creo un objeto con esos datos
  const empleado = {
    nombre: nombre,
    sueldo: sueldo,
    edad: edad
  }
  // Lo convierto a cadena (stringify) y lo guardo en el localStorage
  localStorage.setItem('empleado', JSON.stringify(empleado))
}

See the Pen
qBqjOYz by Juan Pablo Fuentes (@juan-pablo-fuentes)
on CodePen.

Mini ejercicio fechas

Tenemos una web y quiero que me muestre en unos inputs la información del día de hoy:

Día: [___] Mes: [___] Año: [___] Día de la semana: [___]

El mes en letra. Todo dentro de inputs.

<div id="contenedor" class="container ">
		Día:<input type="text" id="dia">
		Mes:<input type="text" id="mes">
		Año:<input type="text" id="anyo">
		Día de la semana:<input type="text" id="diasemana">
	</div>
	<script src="js/test.js"></script>


const hoy = new Date()
const dias = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado']
const mes = ['Enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre']

document.getElementById('dia').value = hoy.getDate()
document.getElementById('mes').value = mes[hoy.getMonth()]
document.getElementById('anyo').value = hoy.getFullYear()
// hoy.getDay()--> 0->Domingo, 1->Lunes, 2->Martes...6->Sábado
document.getElementById('diasemana').value = dias[hoy.getDay()]

Ejemplos fechas JS

Un reloj con el día de la semana:

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

setInterval(reloj, 1000)

function reloj () {
  const dias = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado']
  const hoy = new Date()
  const diaSemana = dias[hoy.getDay()]
  document.getElementById('reloj').innerHTML = hoy.toLocaleTimeString()
  document.getElementById('fecha').innerHTML = hoy.toLocaleDateString() + ' y es ' + diaSemana
}

Calculador día semana:

	<div id="contenedor" class="container ">
		Día:<input type="number" id="dia">
		Mes:<input type="number" id="mes">
		Año:<input type="number" id="anyo">
		<button id="calcular">Calcular</button>
		<h1 id="resultado"></h1>
	</div>
	<script src="js/test.js"></script>


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

function calcular () {
  const dias = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado']

  const dia = document.getElementById('dia').value
  const mes = document.getElementById('mes').value
  const anyo = document.getElementById('anyo').value
  console.log(dia, mes, anyo)
  const fecha = new Date(anyo, mes - 1, dia)
  console.log(fecha)
  const diaSemana = dias[fecha.getDay()]
  document.getElementById('resultado').innerHTML = 'Era un ' + diaSemana
}

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