ESTRUCTURES SIMPLES Y COMPLEXES

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;">ESTRUCTURES SIMPLES i COMPLEXES</h1>
    <h2 style="font-size: 2em; 
    font-weight: bold; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #1A3651;">Operadors d'Assignació</h2>
    <div class="card mb-3 p-2 bg-dark" style="width: 25rem; margin-left: auto; margin-right: auto;">
      <button class="btn btn-outline-warning btn-sm my-small-btn" type="button" id="getNumsAssignacio">Set the numbers</button>
      <p id="assignacio" style="margin:auto">Introdueix els números separats per un espai</p>
    </div>
    <br>
    <h2 style="font-size: 2em; 
    font-weight: bold; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #1A3651;">Operadors de Comparació</h2>
    <p></p>
    <div class="card mb-3 p-2 bg-dark" style="width: 25rem; margin-left: auto; margin-right: auto;">
      <button class="btn btn-outline-warning btn-sm my-small-btn" type="button" id="getNumsComparacio">Set the numbers</button>
      <p id="comparacio" style="margin:auto">Introdueix els números separats per un espai</p>
    </div>
    <br>

    <h2 style="font-size: 2em; 
    font-weight: bold; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #1A3651;">Objectes</h2>
    <p>Per aquest exemple, em creat un objecte <i>persona</i> que conté com a dades el nom, l'edat, adreça i hobbies. <br> Conté una funció que ens imprimex el saludo amb la informació...

CSS

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

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

JavaScript

document.getElementById("getNumsAssignacio").addEventListener("click", function() {
  let input = prompt("Enter two numbers separated by a space:");
  if (input === null) {
    return;
  }
  let nums = input.split(" ");
  let num1 = parseFloat(nums[0]);
  let num2 = parseFloat(nums[1]);
  let sum = num1 + num2;
  document.getElementById("assignacio").innerHTML = "SUMA: " + num1 + " + " + num2 + " = " + sum + "<br>";

  let resta = num1 - num2;
  document.getElementById("assignacio").innerHTML += "RESTA: " + num1 + " - " + num2 + " = " + resta + "<br>";

  let multiplicacio = num1 * num2;
  document.getElementById("assignacio").innerHTML += "MULTIPLICACIÓ: " + num1 + " * " + num2 + " = " + multiplicacio + "<br>";

  let divisio = num1 / num2;
  document.getElementById("assignacio").innerHTML += "DIVISIÓ: " + num1 + " / " + num2 + " = " + divisio + "<br>";

  num1 += num2;
  console.log("num1 + num2:", num1);

  num2 *= 2;
  console.log("num2 * 2:", num2);
});


//operadors COMPARACIÓ
document.getElementById("getNumsComparacio").addEventListener("click", function() {
  let input = prompt("Enter two numbers separated by a space:");
  if (input === null) {
    return;
  }
  let nums = input.split(" ");
  let num1 = parseFloat(nums[0]);
  let num2 = parseFloat(nums[1]);
  document.getElementById("comparacio").innerHTML = num1 + " > " + num2 + " = " + (num1 > num2) + "<br>";
   document.getElementById("comparacio").innerHTML += num1 + " < " + num2 + " = " + (num1 < num2) + "<br>";
 document.getElementById("comparacio").innerHTML += num1 + " >= " + num2 + " = " + (num1 >= num2) + "<br>";
 document.getElementById("comparacio").innerHTML += num1 + " <= " + num2 + " = " + (num1 <= num2) + "<br>";
 document.getElementById("comparacio").innerHTML += num1 + " == " + num2 + " = " + (num1 == num2) + "<br>";
 document.getElementById("comparacio").innerHTML += num1 + " != " + num2 + " : " + (num1 != num2) + "<br>";
 
 let x = 5;
let y =...