14. Adornos

Versión para imprimir.

En esta lección se presentan ejemplos de adornos en una página web.

A. Adorno horizontal

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">

<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Adorno Horizontal</title>
 <style>
  .sprite {
   position: fixed;
  }
 </style>
</head>

<body>
 <h1>Adorno Horizontal</h1>
 <script>
  const Y = 0
  const DISTANCIA = 20
  const X_MÁXIMA = innerWidth
  let x = 0
  /**
   * En esta variable se agregael
   * HTML de las figuras que forman
   * el adorno.
   */
  let inner = ""
  while (x < X_MÁXIMA) {
   /* Agrega el HTML de un emoji a
    * inner. */
   inner += /* html */
    `<div class="sprite"
       style="top: ${Y}px;
              left: ${x}px;">
      💕
     </div>`
   x += DISTANCIA
  }
  /* Agrega las figuras al HTML de
   * body. */
  document.body.innerHTML += inner
 </script>
</body>

</html>

B. Recta usando ciclos

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">

<head>
 <meta charset="utf-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Línea</title>
</head>

<body>
 <script>
  for (let x = 0; x < 200
   ; x += 20) {
   let y = 0.45 * x + 30;
   document.body.innerHTML +=
    /* html */
    `<div
       style="position: absolute;
             bottom: ${y}px;
             left: ${x}px;">
      💕
     </div>`
  }
 </script>
</body>

</html>

C. Espiral

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">

<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Adorno con Giro</title>
 <style>
  .sprite {
   position: fixed;
  }
 </style>
</head>

<body>
 <h1>Adorno con Giro</h1>
 <script>
  const INCREMENTO =
   2 * Math.PI / 21
  const X_BASE = innerWidth / 2
  const Y_BASE = innerHeight / 2
  const ANGULO_FINAL = 6 * Math.PI
  const amplitud = Math.min(
   window.innerHeight,
   window.innerWidth) /
   (3 * ANGULO_FINAL)
  let inner = ""
  for (let angulo = 0
   ; angulo < ANGULO_FINAL
   ; angulo += INCREMENTO) {
   const r = amplitud * angulo
   const x =
    X_BASE + r * Math.cos(angulo)
   const y =
    Y_BASE + r * Math.sin(angulo)
   inner += /* html */
    `<div class="sprite"
       style="bottom: ${y}px;
              left: ${x}px;">
      ⌛
     </div>`
  }
  document.body.innerHTML += inner
 </script>
</body>

</html>

D. Resumen