Trifulcas

// 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);

      })

Vamos a crear un script tiradas que nos va a proporcionar diferentes tiradas para juegos.
Tendrá una función dado que nos devuelve un valor entre 1 y 6
Una moneda que nos devuelve ‘cara’ o ‘cruz’
Una ruleta que nos devuelve ‘rojo’,’negro’ o ‘doble cero’

Creamos una página para probarla. En un script importamos todas las funciones y probamos que van bien.

Para nota:
En la página poned un input con un número (por defecto 5) y tres botones: dado, moneda y ruleta. Al pulsar en el botón en un div debajo (y que sea medio bonito) poned los resultados de realizar ese número de tiradas.

Para más nota:
Si alguien se anima estas navidades que pruebe ese método infalible de la ruleta que siempre da ganancias (guiño, guiño)

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?

Posibles mejoras:

– Poder elegir la cantidad de números y/o el tiempo disponible
– Implementar un botón ‘trampa’ que nos permita localizar el número actual por si estamos rayados. Sólo se permite una trampa por juego.
-Implementar un botón pausa que pause el juego poniendo una capa encima que esconda los números (para que no se pueda hacer trampa) y que cerrando esa capa o con otro botón volvamos al juego. El juego original tiene un botón de pausa por si queréis ver el funcionamiento esperado.
– Que pulsando la tecla ‘P’ se consiga el mismo efecto.
– No podemos deshabilitar la búsqueda del navegador, pero sí que cuando pulse CTRL+F no le funcione y le salga un mensaje de tramposo.
– Posibilidad de dos modos de juego: contrarreloj como ahora o sin límite de tiempo a ver cuanto se tarda.

Cread una función que nos diga si una palabra es un anagrama de otra. Por ejemplo ‘rosa’ y ‘raso’ son anagramas una de otra, pero ‘rosa’ y ‘ruso’, no.

Cread una función a la que le pasemos una cadena y nos la devuelva con las palabras ordenadas por longitud y, a igual longitud, por orden alfabético.
«hola que tal estás»->»que tal estás hola»

Cread una función a la que le pasamos una cantidad variable de palabras y nos devuelva la palabra de mayor longitud.

Cread una página que muestre, en grande, un reloj con la hora, minutos y segundos que se vaya actualizando.

Para los dos ejercicios primeros, cread una página que tenga unos inputs para poner las palabras y la frase y que nos las evalue.

let id=setInterval(()=>{console.log("Adios")}, 3000, "Ana");

function hola(){
    console.log("Hola");
    setTimeout(hola,3000);
}

setTimeout(hola,3000);

let now = new Date();
let desde1970 = new Date(1000 * 60 * 60 * 24 * 365 * 10);
let deCadena = new Date("2024-12-01 10:24:30");
let desglosado = new Date(2023, 0, 44, 17, 15, 20);

console.log(now);
console.log(desde1970);
console.log(deCadena);
console.log(desglosado);
console.log(desglosado.toDateString());
console.log(desglosado.toLocaleString());
console.log(desglosado.toLocaleDateString());

// Todas las fechas de 2024
for(let i=1;i<=365;i++){
    console.log(new Date(2024,0,i));
}

console.log(now.getFullYear(),now.getMonth(), now.getDate(), now.getHours(),now.getMinutes(),now.getSeconds(), now.getMilliseconds());

console.log(now.getDay(),now.getTime());

let inicio=new Date().getTime();
console.log(inicio)
for(let i=0;i<100000000;i++){
    let a=2**i;
}
let fin=new Date().getTime();
console.log(fin)

console.log(fin-inicio)

Chuleta fechas en JS

// tenemos un array con un nombre y apellido
let arr = ["John", "Smith"]

// asignación desestructurante
// fija firstName = arr[0]
// y surname = arr[1]
let [firstName, surname] = arr;
/*
let firstName=arr[0];
let surname=arr[1];
*/
console.log(firstName)
console.log(surname)
console.log(arr)

// segundo elemento no es necesario
let [nombre, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
console.log(nombre)
console.log(title)

let aa = 2;
let b = 7;

/*
let c=a;
a=b;
b=c;
*/
// swap de variables usando destructuring
[aa, b] = [b, aa]

console.log(aa);

let user = {
    name: "John",
    age: 30
};

// recorrer claves-y-valores con destructuring
for (let [key, value] of Object.entries(user)) {
    console.log(`${key}:${value}`); // name:John, luego age:30
}

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

console.log(rest);

// valores predeterminados
let [name = "Guest", apellido = "Anonymous"] = ["Julius"];

let options = {
    titulo: "Menu",
    width: 100,
    height: 200
};

let { width, titulo, height } = options;

console.log(titulo)

let prueba = { a: 1, b: 2, c: 3, d: 4 };

let { a, ...resto } = prueba;

console.log(resto)

showMenu(options);

showMenu();

function showMenu({ titulo = "Untitled", width = 200, height = 100, items = [] } = {}) {
    console.log(titulo)
}

https://es.javascript.info/destructuring-assignment

https://dev.to/codingnninja/a-simple-guide-to-javascript-destructuring-3o8o

https://davidwalsh.name/spread-operator

https://codeburst.io/a-simple-guide-to-destructuring-and-es6-spread-operator-e02212af5831

https://gist.github.com/mikaelbr/9900818

1.- Crear una función InternalTrim que elimine espacios de más DENTRO de una cadena.

InternalTrim(“Hola que       tal”)=>”Hola que tal”

2.- Crear una función ToTitleCase que nos ponga la primera letra de cada palabra en mayúsculas

ToTitleCase(“hoLA que TAL”)=>”Hola Que Tal”

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 1, 3, 2, 5, 14, 23];

// Orden numérico con función flecha
let grandes = nums.filter(check);
grandes = nums.filter((item) => item % 2 == 0);
console.log(grandes)

let doble = nums.map(item => item * 2);

console.log(doble)

function check(elemento) {
    return elemento % 2 == 0;
}

let users = [
    { id: 1, name: "Celina" },
    { id: 2, name: "David" },
    { id: 3, name: "Federico" }
];

let user = users.findIndex(item => item.id == 1);
console.log(user);

let conA = users.filter(item => item.name.includes("a"));
console.log(conA);

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 1, 3, 2, 5, 14, 23];

// Orden numérico con función flecha
nums.sort((a, b) => a - b);
nums.sort(function(a, b){return a - b;});
console.log(nums);
nums.reverse();
console.log(nums);


let alumnos=["Pep","Ána","Iu"];
// Orden de cadenas con acentos
alumnos.sort((a,b)=>a.localeCompare(b));
console.log(alumnos);

// Desordenar
nums.sort(()=>0.5-Math.random());
console.log(nums);

// Ordenar creando copia
let nuevo=nums.toSorted((a, b) => a - b);
console.log(nuevo);
// Invertir creando copia
let inverso=nuevo.toReversed();
console.log(inverso);