#05losowanieilosowezdjecie

Opis Losowanie liczb robi się przez Math.random(). Najczęściej trzeba jeszcze użyć Math.floor(), żeby dostać liczbę całkowitą.

REACTcopyimport { useState } from "react";

function App() {
  const [liczba, setLiczba] = useState(null);

  function losuj() {
    const wynik = Math.floor(Math.random() * 100) + 1;
    setLiczba(wynik);
  }

  return (
    <div>
      <h1>Losowanie liczby</h1>

      <button onClick={losuj}>Losuj od 1 do 100</button>

      {liczba && <p>Wylosowano: {liczba}</p>}
    </div>
  );
}

export default App;

#Losowanie z zakresu od min do max

REACTcopyimport { useState } from "react";

function App() {
  const [min, setMin] = useState(1);
  const [max, setMax] = useState(10);
  const [wynik, setWynik] = useState(null);

  function losuj() {
    const liczba = Math.floor(Math.random() * (max - min + 1)) + min;
    setWynik(liczba);
  }

  return (
    <div>
      <h1>Losowanie z zakresu</h1>

      <input
        type="number"
        value={min}
        onChange={(e) => setMin(Number(e.target.value))}
      />

      <input
        type="number"
        value={max}
        onChange={(e) => setMax(Number(e.target.value))}
      />

      <button onClick={losuj}>Losuj</button>

      <p>Wynik: {wynik}</p>
    </div>
  );
}

export default App;

#Wyświetlanie losowego zdjęcia

REACTcopyimport { useState } from "react";

function App() {
  const zdjecia = [
    "https://picsum.photos/id/10/300/200",
    "https://picsum.photos/id/20/300/200",
    "https://picsum.photos/id/30/300/200",
    "https://picsum.photos/id/40/300/200"
  ];

  const [zdjecie, setZdjecie] = useState(zdjecia[0]);

  function losujZdjecie() {
    const index = Math.floor(Math.random() * zdjecia.length);
    setZdjecie(zdjecia[index]);
  }

  return (
    <div>
      <h1>Losowe zdjęcie</h1>

      <button onClick={losujZdjecie}>Losuj zdjęcie</button>

      <br />
      <img src={zdjecie} alt="Losowe" width="300" />
    </div>
  );
}

export default App;