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="background-color: slategray; 
  font-family:  'Courier New', Courier, monospace;
    text-align: center;">

    <h1 style="font-size: 3em;
    color: #DED1A9;">Programació Estructurada</h1>

    <h2 style="font-size: 2em; 
    font-weight: bold; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #1A3651;">
      Sentències condicionals
    </h2>
    <p>Tenim el IF, IF...ELSE, SWITCH i el condicional TERNARI</p>
    <div class="card mb-3" style="width: 18rem; margin-left: auto; margin-right: auto;">
      <p>Ara són les <span class="hora"></span></p>
      <p>Si vols saber com saludar clicar el botó.</p>
      <button class="btn btn-outline-warning btn-sm my-small-btn" type="button" onclick="getSaludo()">Saber saludo</button>
    </div>
    <br>

    <h2 style="font-size: 2em; 
    font-weight: bold; font-family: Arial, Helvetica, sans-serif; 
    color: #1A3651;">
      Sentències Iteracionals
      <span style="color: #425970;">(bucles)</span>
    </h2>
    <p>Tenim el WHILE, DO-WHILE, FOR, FOR EACH, FOR OF, FOR IN</p>
    <p>Farem un exemple amb el FOR OF:</p>
    <p>Tenim un objecte <i>books</i> que conté diferents títols i diferents autors, utilitzem el <b>FOR OF</b> per recorre'l i imprimir la informació.</p>
<div class="card mb-3 p-2" style="width: 35rem; margin-left: auto; margin-right: auto;">
      <p id="books" style="margin:auto"></p>
    </div>
  </body>

</html>

CSS

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

.my-small-btn {
    width:200px;
    padding:5px;
    align-self: end;
    margin-right: 5px;
    margin-bottom: 5px;
}

JavaScript

function updateTime() {
  const hours = new Date().getHours();
  const minutes = new Date().getMinutes().toString().padStart(2, '0');
  document.querySelector(".hora").innerHTML = hours + ":" + minutes;
}

updateTime();
window.setInterval(updateTime, 60000);

function getSaludo() {
  const time = new Date().getHours();
  let saludo;
	console.log(time);
  if (time < 10) {
    saludo = "Bon dia";
  } else if (time >= 12 && time <= 14) {
    saludo = "Bon migdia";
  } else if (time < 16) {
    saludo = "Bona tarda";
  } else if (time < 22) {
    saludo = "Bon vespre";
  } else {
    saludo = "Bona nit";
  }
  alert(saludo);
}

let books = [
  { title: 'On ets, món bonic', author: 'Sally Rooney' },
  { title: 'Catedrales', author: 'Claudia Piñero' },
  { title: 'Todo arde', author: 'Juan Gómez-Jurado' },
  { title: 'El cuento de la criada', author: 'Margaret Atwood' }
];

let content = '';
for (let book of books) {
content += `L'autor/a "${book.title}" és ${book.author}.<br>`;
}

document.getElementById("books").innerHTML = content;