JSFiddle - React, Tailwind, and code Playground

by merygarriga

HTML

<head>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>

  <body style="font-family:  'Courier New', Courier, monospace;
    text-align: center;
    background-color: slategray;">
    <h1>Programació modular</h1>

    <h2>Funció callback <b>anònima</b></h2>
    <p>Per fer que la funció callback sigui anònima la definim al mateix temps que la cridem, d'aquesta manera no ens cal definir-la abans.</p>
<div class="mb-3">
      <button class="btn btn-outline-warning btn-sm my-small-btn" type="button" onclick="introduirNumeros()">Introduïr números</button>
      <p id="suma"></p>
</div>
<br>

    <h2>Funció callback <b>amb nom i paràmetre</b></h2>
    <p>En aquest cas tenim la funció definida amb un paràmetre, mostrar paraules, tot seguit la cridem després de ordenar-les i les mostrem.</p>
<div class="mb-3">
      <button class="btn btn-outline-warning btn-sm my-small-btn" type="button" onclick="introduirParaules()">Introduïr paraules</button>
      <p id="paraules"></p>
</div>
<br>

    <h2>Funció callback <b>sense paràmetres</b></h2>
    <p>Tenim la funció carregar música, que té com a paràmetre la funció callback i quan a dins d'aquesta cridem la funció callback s'ejecuta. <br>En aquest cas la funció callback és la funció reproduir música i el que em fet és esperar uns segons a cridar-la per fer com si estiguessim <i>carregant la música</i>.</p>
<div id="music"></div>
</body>

CSS

h1 {
  font-size: 3em;
  color: #DED1A9;
}

h2 {
  font-size: 2em;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #1A3651;
}

p, li {
  font-family: Arial, Helvetica, sans-serif;
  color: #B0B8BF;
}

#music {
  color: #BABFB0;
}

JavaScript

//----------------------------anònima----------------------------
function sumarArray(numeros, callback) {
  let suma = 0;

  for (let i = 0; i < numeros.length; i++) {
    suma += numeros[i];
  }

  let resultado = suma;
  callback(resultado);

  function multiplicarPorDos(comptador) {
    if (comptador < 5) {
      suma *= 2;
      callback(suma);
      setTimeout(function() {
        multiplicarPorDos(comptador + 1);
      }, 2000);
    }
  }

  setTimeout(function() {
    multiplicarPorDos(0);
  }, 7000);
}

function mostrarSuma(resultado) {
  document.getElementById("suma").innerHTML = "La suma es: " + resultado;
}

function introduirNumeros() {
  let numeros = [];
  let numero;
  while (numero = prompt("Introdueix un número (o prem Cancel·lar per acabar):")) {
    numeros.push(parseInt(numero));
  }
  sumarArray(numeros, function(resultado) {
    document.getElementById("suma").innerHTML = "La suma es: " + resultado;
  });
}

//----------------------------amb nom----------------------------
function ordenarParaules(paraules, callback) {
  paraules.sort();
  callback(paraules);
}

function mostrarParaules(paraules) {
  document.getElementById("paraules").innerHTML = "Les paraules ordenades són: " + paraules.join(", ");
}

function introduirParaules() {
  let paraules = [];
  let paraula;
  while (paraula = prompt("Introdueix una paraula (o prem Cancel·lar per acabar):")) {
    paraules.push(paraula);
  }
  ordenarParaules(paraules, mostrarParaules);
}

//----------------------------sense parametres----------------------------
function reproduirMusica() {
  document.getElementById("music").innerHTML = 'Reproduint música...<br><iframe src="https://giphy.com/embed/9xv3J9UqezthkEhQQS" width="480" height="204" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>';
}

function carregarMusica(callback) {
  document.getElementById("music").innerHTML = 'Carregant música...<br><iframe src="https://giphy.com/embed/xTkcEQACH24SMPxIQg" width="480" height="204"...