Autor: Juan Pablo Fuentes

 <button id="boton">Pincha para saber algo más los perros</button>
 <h1 id="frase"></h1>
 <script src="js/ejercicio4.js"></script>

// Enlazar el click del botón a mi código onclick, addeventlistener

document.getElementById("boton").addEventListener("click", function () {
    // En el click: llamar a la url https://dog-api.kinduff.com/api/facts
    // ¿Cómo? con la chuleta
    // Una vez tengo la información:

    fetch("https://dog-api.kinduff.com/api/facts")
        .then(response => response.json())
        .then(resultado => {
            // 1) Recuperar la frase
            // 2) Ponerla en el html
            let frase = resultado.facts[0];
            
            document.getElementById("frase").innerHTML = frase;
        })
})

   <h1 id="name"></h1>
   <h2 id="email"></h2>
   <img src="" id="foto"/>
    <script src="js/usuariorandom.js" ></script>

fetch("https://randomuser.me/api")
    .then(response => response.json())
    .then(resultado => {
        // Aqui 'resultado' tiene ya el  json convertido a variable, la podemos usar
        console.log(resultado);
        // Llamo a una función con el usuario devuelto
        pintaUsuario(resultado.results[0]);
    })

    
function pintaUsuario(usuario) {
    let nombre=document.getElementById("name");
    let email=document.getElementById("email");
    let foto=document.getElementById("foto");
    
    nombre.innerHTML=Object.values(usuario.name).join(" ");
    email.innerHTML=usuario.email;
    foto.src=usuario.picture.large;
}

// Consumir API -> Acceder a una API para recuperar valores
// AJAX: Una manera de acceder a una URL de manera asíncrona

// Ahora como se hace con 'fetch'
// Chuleta para recuperar cualquier cosa de una url que devuelve un JSON
/*
fetch(url_donde_esta_la_informacion)
      .then(response => response.json())
      .then(resultado => {
        // Aqui 'resultado' tiene ya el  json convertido a variable, la podemos usar
      })
*/

// Asíncrono y una promesa (Promise)
fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json()) // Cuando acabes lo que te he pedido ejecuta esto
    .then(json => console.log(json)); // Cuando acabes de convertirlo entra aquí

console.log("Hola");

// Ejemplo voy a usar https://randomuser.me/api que me devuelve un usuario

fetch("https://randomuser.me/api")
      .then(response => response.json())
      .then(resultado => {
        // Aqui 'resultado' tiene ya el  json convertido a variable, la podemos usar
        console.log(resultado);
        console.log("Hola "+resultado.results[0].name.first);
      })

// Ejemplo voy a usar https://rickandmortyapi.com/api/character que me devuelve personajes de rick y morty

fetch("https://rickandmortyapi.com/api/character")
      .then(response => response.json())
      .then(resultado => {
        // Aqui 'resultado' tiene ya el  json convertido a variable, la podemos usar
        console.log(resultado);

      })

// El formato JSON me permite convertir cualquier variable JS en una cadena
// un array es una cadena con corchetes y los elementos "[1,2,3]"
// un objeto es  una cadena con llaves y las propiedades entre comillas
// {"nombre":"Juan","apellidos":Pi}
// cualquier combinación no es más que combinar lo anterior
// {"nombre":"Juan","apellidos":Pi, "notas":[1,2,3]}

// De variable a cadena con JSON.stringify
// De cadena a variable con JSON.parse

let alumnos=["Ana","Eva","Pep"]; // Esto es un array
let alumnosJSON=JSON.stringify(alumnos); // Esto es una cadena

console.log(alumnos);
console.log(alumnosJSON);

// De la cadena puedo volver a obtener el array

let alumnosCopia=JSON.parse(alumnosJSON);
console.log(alumnosCopia); // Es un array

let clase={nombre:"Aula 1",capacidad:30,alumnos:["Ana","Eva","Juan"]};

let claseJSON=JSON.stringify(clase);

console.log(clase); // Esto es un objeto
console.log(claseJSON); // Esto es un string

let claseCopia=JSON.parse(claseJSON);
console.log(claseCopia); // Esto es un objeto de nuevo

https://www.w3schools.com/js/js_json.asp

 <input id="nombre" type="text"/>
  

let nombre = document.getElementById("nombre");
nombre.oninput = function () {
    localStorage.setItem("nombre", this.value);
}
let nombreAlmacenado = localStorage.getItem("nombre");
if (nombreAlmacenado) {
    nombre.value = nombreAlmacenado;
}

// Guardar información que se mantenga aunque actualicemos la página

// cookies es una manera pero están obsoletas
document.cookie="nombre=juan";

// La mejor manera actualmente es con localStorage

// Añado una propiedad 'nombre' con el valor 'juan'
localStorage.setItem("nombre","juan");

// Recupero ese valor
console.log(localStorage.getItem("nombre"));

// Elimino la propiedad (y, por supuesto, su valor)
localStorage.removeItem("nombre")

// Limpio todo el localstorage
localStorage.clear();

document.addEventListener('DOMContentLoaded', () => {
    launch();
});


const launch = () => {
    viewArray('joana');
};

viewArray = (name) => {
    const arrayName = ['pere', 'marti', 'joana', 'ricard', 'ramon', 'judit'];
    let key = 0;

    const arrayView = setInterval(() => {
        if (key === arrayName.length) {
            clearInterval(arrayView);
            console.log(`No s'ha trobat l'usuari`);
        } else {
            console.log(arrayName[key]);

            if (arrayName[key] === name) {
                clearInterval(arrayView);
                console.log(`S'ha trobat l'usuari: ${name}`);
            }

            key++;
        }
    }, 3000); 
};

// Dentro de JS pueden suceder errores

// Hay una manera de gestioner errores
// try{...}catch(err){...}
let producto = {
    nombre: "Tuerca",
    precio: {
        PVP: 50,
        reducido: 20
    }
}
let producto2 = {
    nombre: "Tuerca"
}
// Intenta ejecutar el código siguiente
try {
    console.log(producto.nombre)
    console.log(producto.pecio.PVP)
    // Si hay algún error no petes, entra en el catch
} catch (err) {
    // Dentro del catch tenemos el parámetro 'err' con la información del error
    console.log(err.message);
    console.log(err);
} finally {
    console.log("Esto se ejecuta siempre");
}

console.log("Hola")
console.log(sumaPreciosOk([producto, producto2]));

// Esto lanza un error porque accedemos a una propiedad que no existe
function sumaPrecios(productos) {
    let suma = 0;
    for (let producto of productos) {
        suma += producto.precio.PVP;
    }
    return suma;
}
// Aquí lo hacemos bien: esto no interrumpe el programa
function sumaPreciosOk(productos) {
    try {
        let suma = 0;
        for (let producto of productos) {
            suma += producto.precio.PVP;
        }
        return suma;
    } catch {
        return 0; // podría devolver undefined
    }
}
console.log(suma(8));
try{
   console.log(suma(-8)); 
}catch(err){
    console.log(err.message)
}

// lanzar errores propios
function suma(numero) {
    if(numero<0 || numero>10000){
        throw new Error("Número fuera de margen");
    }
    let suma = 0;
    for (let i = 0; i < numero; i++) {
        suma += i;
    }
    return suma;
}

// operador ternario

// evaluar una condición (como un if) pero en vez de tener líneas de código
// Nos devuelve una expresión. Es un if sin código

let edad = 20;

if (edad >= 18) {
    console.log("Puedes entrar");
} else {
    console.log("No puedes entrar");
}

// Sintaxis condicion ? valor si cierto : valor si falso
let mensaje = edad >= 18 ? "Puedes entrar" : "No puedes entrar";
console.log(mensaje);

function mayor(a, b) {
    return a > b ? a : b;
}

// Temporizadores

// Poder ejecutar una función en algún intervalo de tiempo, bien después de que pase
// un determinado momento o a intervalos regulares

// Ejecuta algo cuando pasa la cantidad de tiempo estipulada UNA VEZ
setTimeout(saludo,3000); // La unidad es milisegundos

function saludo(){
    console.log("Hola que tal");
}

setTimeout(function(){
    console.log("Yo muy bien");
},5000);

let alegro=setTimeout(()=>{console.log("Pues me alegro")},7000);
clearTimeout(alegro); // Cancelo el timeout anterior

// Ejecuta lo que le ponemos cada X tiempo
setInterval(saludo,5000); // Cada 5 segundos llama a saludo
let cucu=setInterval(()=>{console.log("cucu")},2000); // Cada 2 segundos escribe cucu

setTimeout(function(){
    clearInterval(cucu); // Desactivar o parar el intervalo
},20000);

// Un contador en el div
let cont=0;
setInterval(function(){
    cont++;
    document.getElementById("resultado").innerHTML=`<h1>${cont}</h1>`;
},1000)

setTimeout(alterarDiv,2000);

// Settimeout anidado. Es lo mismo que el intervalo pero es más resistente a imprevistos
function alterarDiv(){
    document.getElementById("resultado").innerHTML+=` ### `;
    setTimeout(alterarDiv,2000);
}

let preguntas = [{
    pregunta: "¿Con qué propiedad se pone el color de fondo en CSS?",
    correcta: "backgroundColor",
    incorrecta1: "color",
    incorrecta2: "bckColor",
    incorrecta3: "setColor"
},
{
    pregunta: "¿tipo de letra en CSS?",
    correcta: "font-family",
    incorrecta1: "fontaine",
    incorrecta2: "letter",
    incorrecta3: "pp"
},
{
    pregunta: "¿ocultar elemento en CSS?",
    correcta: "display:none",
    incorrecta1: "display:hide",
    incorrecta2: "shadow",
    incorrecta3: "esconding"
}];

// Al pulsar un botón se desencadena la acción
// ¿Se capturar el click de un botón?

// Dentro del programa
// puntos que valdrán 0
// Recorrer el array de las preguntas
// Para cada pregunta
// Mostrar un prompt con el texto de la pregunta y las respuestas desordenadas
// La pregunta-> Acceder a la propiedad del objeto
// respuestas-> saber como desordenar una serie de respuestas
// Guardar las respuestas en un array y desordenarlo
// De un array sacar una cadena es muy fácil: recorrerlo y añadir la posición +1
// Cuando el usuario me de la respuesta
// Comprobar si es correcta: coger la posición del usuario -1 y ver el valor
// Si ese valor==correcta muy bien y puntos++ else muy mal
// Al acabar de recorrer le mostramos los puntos