Categoría: JavaScript

import logo from './logo.svg';
import './App.css';
// Componente importado desde un archivo
import Despedida from './Despedida';

// Componente dentro del componente
const Saludo = (props) => {
  return <h1>Hola, {props.nombre}!</h1>;
}


// Componente Más o menos una función que nos devuelve una mezcla de HTML y JS
function App() {
  // Creo un array de nombres
  const alumnos=["Ana","Juan","Rosa","Eva"];
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Hola ¿Qué tal?
        </p>
        <a
          className="App-link"
          href="https://trifulcas.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          Visita trifulcas
        </a>
        {/* Utilizo una expresión {} para recorrer el array y dibujar un componente por cada elemento*/}
        {alumnos.map((nombre,i)=>(
          <Saludo nombre={nombre} key={i}/>
        ))}
        <Despedida nombre="Juan"/>
      </header>
    </div>
   
  );
}

// Exportamos APP (y lo renderizamos en index.js)
export default App;

Vamos a crear una mesa de póker que tendrá:

2 usuarios personas
1 usuario robot
1 usuario que eres tú.

Para ello vamos a necesitar:

1.- Obtener dos usuarios aleatorios. Los podemos sacar de https://randomuser.me/api/?results=2
2.- Una cara de robot. La podemos sacar de: https://robohash.org/(nombre o valor). Ejemplo: https://robohash.org/7 o https://robohash.org/juanpablo
3.- Obtener una cara para nuestro avatar. Similar al anterior: https://api.adorable.io/avatars/200/juanpablo.png
4.- Obtener las cartas
Las podemos sacar de:
https://deckofcardsapi.com/
La url siguiente nos crea una baraja:
https://deckofcardsapi.com/api/deck/new/shuffle/
que tiene un deck-id

{
«success»: true,
«deck_id»: «3p40paa87x90»,
«shuffled»: true,
«remaining»: 52
}

Para obtener cartas tenemos la url:
https://deckofcardsapi.com/api/deck/<>/draw/?count=2
Nos devuelve las cartas:
{
«success»: true,
«cards»: [
{
«image»: «https://deckofcardsapi.com/static/img/KH.png»,
«value»: «KING»,
«suit»: «HEARTS»,
«code»: «KH»
},
{
«image»: «https://deckofcardsapi.com/static/img/8C.png»,
«value»: «8»,
«suit»: «CLUBS»,
«code»: «8C»
}
],
«deck_id»:»3p40paa87x90″,
«remaining»: 50
}

Tendremos que pedir cinco cartas por jugador.

En la página tendremos un botón que se encargará de vaciar la página, crear los usuarios y repartir las cartas.
Opcional: Averiguar la jugada de cada usuario y decir quién ha ganado.

Modificar el juego del 1 al 100 para que guarde el estado dentro del localstorage.

Fase 1: Guarde solo el número y el tiempo que queda

Fase 2: Que al cargar esté igual que al cerrar. Esto implica tener marcados los números que se han marcado (e incluso el orden).

   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í
            .catch();



        let usuario = ` {
    "id": 1,
    "name": "Ana Pi",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }`;

        fetch('https://jsonplaceholder.typicode.com/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            },
            body: usuario
        })
            .then(response => response.json()) // Cuando acabes lo que te he pedido ejecuta esto
            .then(json => console.log(json)) // Cuando acabes de convertirlo entra aquí
            .catch();
        console.log("fetch1");
        let response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (response.ok) {
            let datos = await response.text();
            console.log(datos);
        } else {
            console.log(response.status);
        }
        console.log("fetch2");

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