JSFiddle - React, Tailwind, and code Playground

by merygarriga

HTML

<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>OBJECTES del SISTEMA</h1>
    <h2>ARRAYS</h2>
    <h3>sort() and map()</h3>
    <p id='people'>Primer imprimim el contingut inicial de l'array de persones:<br></p>

    <p id='ordered'>A continuació veiem l'array ordenat amb la funció sort que utilitza la funció: <br><i>function(a, b) { return a.edat - b.edat}</i>.<br> Aquesta consisteix en el fet que si el resultat és positiu, manté l'ordre i si és negatiu el canvia.<br>Així quedaria l'array ordenat de menor a major:<br></p>
    <p id='orderedInverse'>En aquest cas l'únic que canvia és que la funció canvia la a per la b i viceversa. I queda així: <br><i>function(a, b) { return b.edat - a.edat}</i>.<br>A continuació veiem l'array ordenat de major a menor:<br></p>
    <p>La funció <b>map()</b> crea un nou array amb els resultats de la crida a la funció indicada aplicada a cadascun dels elements.</p>
    <p><br><i>PD: Encara que també podriem utilitzar la funció <b>reverse()</b> per canviar l'ordre.<br>Això si, quan ja tens l'array ordenat perquè aquesta funció només ens mostra l'array al revés.</i></p>
  </body>

</html>

CSS

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

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

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

#explain {
  color: #BABFB0;
}

JavaScript

//EXEMPLE strings


//EXEMPLE d'un array de objectes
const people = [
{nom: 'Sergi', edat: 38},
{nom: "Josep", edat: 26},
{nom: "Carla", edat: 42},
{nom: "Paula", edat: 14}
];

document.querySelector('#people').innerHTML += people.map(getPeople).join('');

const orderedPeople = people.sort(function(a, b) { return a.edat - b.edat});

document.querySelector('#ordered').innerHTML += orderedPeople.map(getPeople).join('');

const orderedPeopleI = people.sort(function(a, b) { return b.edat - a.edat});
//const orderedI = orderedPeople.reverse(); tmbé ho podriem utilitzar.
document.querySelector('#orderedInverse').innerHTML += orderedPeopleI.map(getPeople).join('');

function getPeople(person) {
  return `Nom: ${person.nom} Edat: ${person.edat}<br>`;
}