Funciones que llaman a otra funciones


function esPar (numero) {
  if (numero % 2 == 0) {
    return true
  } else {
    return false
  }
}

function mismaParidad (num1, num2) {
  if (esPar(num1) == esPar(num2)) {
    return true
  } else {
    return false
  }
}

function filtrarPares (array) {
  const resultado = []
  for (let i = 0; i < array.length; i++) {
    if (esPar(array[i])) {
      resultado.push(array[i])
    }
  }
  return resultado
}

function sumaPares (array) {
  const pares = filtrarPares(array)
  let suma = 0
  for (let i = 0; i < pares.length; i++) {
    suma += pares[i]
  }
  return suma
}
function padNumero (numero) {
  if (!esPar(numero.length)) {
    numero = '0' + numero
  }
  return numero
}

Ejercicio

En el ejemplo anterior de los usuarios muestro el nombre. Quiero que, al lado del nombre, salga el correo electrónico y la ciudad.

Cambiar la siguiente línea:

usuario.innerHTML = resultado[i].name + ‘, ‘ + resultado[i].email + ‘, ‘ + resultado[i].address.city

Fetch + JSON + API + BD typicode

<div id="contenedor" class="container ">
		<button id="recuperar" class="btn btn-success">Recuperar</button>
		<div id="usuarios"></div>
	</div>
	<script src="js/test.js"></script>

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

function recuperar () {
  fetch('https://jsonplaceholder.typicode.com/users')
    .then(function (response) {
      return response.text()
    })
    .then(function (html) {
      console.log(html)
      const resultado = JSON.parse(html)
      console.log(resultado)
      for (let i = 0; i < resultado.length; i++) {
        const usuario = document.createElement('p')
        usuario.innerHTML = resultado[i].name
        document.getElementById('usuarios').appendChild(usuario)
      }
    })
    .catch(function (err) {
      console.log('Error: ', err)
    })
}

fetch + JSON + API: Cartas

<div id="contenedor" class="container ">
		<button id="empezar" class="btn btn-success">Empezar</button>
		<p id="mensaje"></p>
		<button id="carta" class="btn btn-success">Sacar una carta</button>
		<button id="carta5" class="btn btn-success">Sacar cinco cartas</button>

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

document.getElementById('empezar').addEventListener('click', empezar)
document.getElementById('carta').addEventListener('click', carta)
document.getElementById('carta5').addEventListener('click', cartas)

let baraja

function carta () {
  fetch('https://deckofcardsapi.com/api/deck/' + baraja + '/draw/?count=1')
    .then(function (response) {
      return response.text()
    })
    .then(function (html) {
      console.log(html)
      const resultado = JSON.parse(html)
      console.log(resultado)
      const imagen = document.createElement('img')
      imagen.src = resultado.cards[0].image
      document.getElementById('cartas').appendChild(imagen)
    })
    .catch(function (err) {
      console.log('Error: ', err)
    })
}
function empezar () {
  fetch('https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1')
    .then(function (response) {
      return response.text()
    })
    .then(function (html) {
      console.log(html)
      const resultado = JSON.parse(html)
      console.log(resultado)
      baraja = resultado.deck_id
      document.getElementById('mensaje').innerHTML = 'Tienes la baraja: ' + baraja
    })
    .catch(function (err) {
      console.log('Error: ', err)
    })
}
function cartas () {
  fetch('https://deckofcardsapi.com/api/deck/' + baraja + '/draw/?count=5')
    .then(function (response) {
      return response.text()
    })
    .then(function (html) {
      const resultado = JSON.parse(html)
      for (let i = 0; i < resultado.cards.length; i++) {
        const imagen = document.createElement('img')
        imagen.src = resultado.cards[i].image
        document.getElementById('cartas').appendChild(imagen)
      }
    })
    .catch(function (err) {
      console.log('Error: ', err)
    })
}

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()]