Crear una alerta descartable con JavaScript (y localStorage)


Desafortunadamente, mostrar siempre una alerta ocupa un espacio de pantalla muy necesario. Podemos resolver esto haciéndolo descartable. Hoy, construiremos uno desde cero usando localStorage y JavaScript.

Lo que estamos creando

El ejemplo en este caso es un sitio web primitivo similar a un portafolio con un pie de página, navegación y área de contenido. En la parte superior de la ventana gráfica, mostramos una alerta que solicita al visitante que se suscriba. En un mundo ficticio, el sitio web que maquetamos podría tener contenido premium solo disponible para suscriptores.

Vea cómo funciona nuestra alerta en el bolígrafo a continuación; aunque una vez que lo haya descartado, ya no podrá verlo en este navegador, por lo que hay una captura de pantalla debajo para recordárselo:

captura de pantalla de nuestra alerta descartablecaptura de pantalla de nuestra alerta descartablecaptura de pantalla de nuestra alerta descartable

1. Agregar el marcado

En la parte superior de la página, agregaré el marcado HTML de alerta. El código se coloca después de la body etiqueta en su documento HTML.

<html>
  <body>
    <div class="alert" role="alert">
      📰 Subscribe to view this entire article
      <button>
        <svg
          xmlns="https://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
        >
          <title>close</title>
          <g fill="none">
            <path
              stroke="#ffffff"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.5"
              d="M17.25 6.75l-10.5 10.5"
            ></path>
            <path
              stroke="#ffffff"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.5"
              d="M6.75 6.75l10.5 10.5"
            ></path>
          </g>
        </svg>
      </button>
    </div>
  </body>
</html>

La alerta es un div con un role="alert" opción que le dice al navegador y a las características de accesibilidad que el contenido está destinado a señalar al usuario final.

Agregamos un button elemento que envuelve un SVG icono que copié de heroicons, una biblioteca de iconos de código abierto. los button El elemento será responsable de activar el rechazo de la alerta cuando se haga clic en él, y agregaremos la lógica para que funcione.

Contenido de demostración

Debajo de la alerta, agregaremos contenido de marcador de posición para imitar el sitio web de la cartera.

<header class="header">
  <nav aria-label="Main">
    <ul>
      <li><a href="https://webdesign.tutsplus.com/tutorials/#">Home</a></li>
      <li><a href="https://webdesign.tutsplus.com/tutorials/#">Blog</a></li>
      <li><a href="https://webdesign.tutsplus.com/tutorials/#">Projects</a></li>
      <li><a href="https://webdesign.tutsplus.com/tutorials/#">Contact</a></li>
    </ul>
  </nav>
</header>

<main class="main">
  <h2>Curabitur blandit tempus porttitor.</h2>
  <p>Lorem ipsum.....</p>

  <div class="callout">
    <a href="https://webdesign.tutsplus.com/tutorials/#">Sign in</a> or <a href="https://webdesign.tutsplus.com/tutorials/#">sign up</a> to view this article.
  </div>
</main>

<footer class="footer">
  <nav aria-label="Main">
    <ul>
      <li><a href="https://webdesign.tutsplus.com/tutorials/#">Home</a></li>
      <li><a href="https://webdesign.tutsplus.com/tutorials/#">Blog</a></li>
      <li><a href="https://webdesign.tutsplus.com/tutorials/#">Projects</a></li>
      <li><a href="https://webdesign.tutsplus.com/tutorials/#">Contact</a></li>
    </ul>
  </nav>
</footer>

Representamos la navegación compartida dentro de ambos header y el footer bloques Cada navegador tiene un aria-label="Main" atributo para indicar que son los mismos controles en dos ubicaciones.

los main El elemento contiene contenido de marcador de posición y un div elemento con la clase de llamada. La llamada es una venta adicional para que los visitantes del sitio web vean el contenido de la página.

2. Estilo de la página

Para mantener las cosas compatibles con el tema, aprovecharé las variables CSS en esta guía para que pueda modificar los colores de su lado.

Los estilos de alerta siguen las variables.

:root {
  --primary: #2563eb;
  --bg-light: #f1f5f9;
  --bg-alert: #1d4ed8;
  --bg-callout: #dbeafe;
  --border-base: #cbd5e1;
  --text-base: #475569;
}

.alert {
  background: var(--bg-alert);
  padding: 1rem;
  text-align: center;
  color: white;
  position: relative;
  transform: scaleY(1);
  transition: all ease-in-out 0.3s;
}

.alert button {
  border: none;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 5px;
}

.alert button:hover {
  background: rgba(255, 255, 255, 0.35);
}

.alert-hidden {
  opacity: 0;
  padding: 0;
  visibility: hidden;
  transform: scaleY(0);
  transform-origin: top;
  transition: all ease-in-out 0.3s;
}

.alert button:focus {
  box-shadow: inset 0 0 0 2px var(--border-base);
}

los .alert el elemento del botón está absolutamente posicionado dentro del .alert división Nuestro botón fija el botón en el lado derecho de la alerta y se desplaza ligeramente desde la parte superior.

Ocultación más ordenada de la alerta

Usted puede notar un transform propiedad en el .alert clase. Y el mismo transform propiedad en el alert-hidden clase. Estaremos alternando el alert-hidden clase con JavaScript acercándose. los transform propiedad combinada con transition nos brinda una forma más eficaz de mostrar y ocultar la alerta con una buena animación. Utilizando el scaleY(0) enfoque, podemos alternar gradualmente la apariencia.

Vale la pena señalar que podríamos alternar la apariencia con un display property, pero hacerlo con JavaScript no deja espacio para ninguna animación si desea tenerlas.

Estilos adicionales

Aquí hay algunos estilos adicionales para abordar los otros componentes de la página. En su mayor parte, son fundamentales. El contenedor de llamada tiene algunas propiedades establecidas para que se destaque más que el resto del contenido de la página.

.header {
  border-bottom: 1px solid var(--border-base);
}

.header,
.footer {
  padding: 1rem;
}

.footer {
  background: var(--bg-light);
  padding: 1rem;
}

.header ul li,
.footer ul li {
  display: inline;
  padding: 0 5px;
}

.main {
  max-width: 767px;
  padding: 1rem;
  margin-left: 2.75rem;
  margin-bottom: 2rem;
}

.callout {
  background: var(--bg-callout);
  padding: 2rem;
  border-radius: 6px;
}

p {
  color: var(--text-base);
  line-height: 1.4;
}

ul {
  list-style: none;
}

a {
  color: var(--primary);
  text-decoration: none;
}

3. Descartar la alerta

Con JavaScript, podemos conectarnos a la API de eventos del navegador para escuchar los cambios. Un evento típico utilizado es el evento “clic”.

Antes de que podamos escuchar el evento, debemos decirle a JavaScript qué elemento debe buscar en el DOM.

  1. Un alert variable: responsable de dirigir la alerta en sí.

  2. A dismissAlertButton variable: responsable de apuntar a la button elemento dentro del .alert división

const alert = document.querySelector(".alert")
const dismissAlertButton = document.querySelector(".alert button")

A continuación, debemos escuchar el evento de “clic” mencionado anteriormente, para saber cuándo descartar la alerta. Podemos hacer eso usando el addEventListener() método en el botón.

dismissAlertButton.addEventListener("click", (event) => {
  console.log("Clicked!")
})

Podemos usar el práctico console.log() utilidad para probar cosas. El botón debe iniciar sesión ¡Hiciste clic! a la consola de su navegador.

4. Prevención de la lógica predeterminada

Para cualquier uso de la addEventListener método, obtenemos una instancia gratuita del propio objeto de evento para usar dentro del método. Esto es importante para los casos en los que es posible que deba sobrescribir los valores predeterminados del navegador. Por lo general, es una buena idea evitar la lógica predeterminada de un elemento al que se dirige con JavaScript.

dismissAlertButton.addEventListener("click", (event) => {
  event.preventDefault()
})

A continuación, debemos alternar la visibilidad de la alerta. Podemos hacer esto de varias maneras, pero como se mencionó en la sección CSS, aprovecharemos un enfoque más animado.

if (dismissAlertButton) {
  dismissAlertButton.addEventListener("click", (event) => {
    event.preventDefault()
    alert.classList.add("alert-hidden")
  })
}

Aquí añadimos el alert-hidden clase, que efectivamente desvanece la alerta fuera de la vista al hacer clic en el botón. ¡Funciona!

Puede notar que agregué algo de lógica condicional para verificar que el dismissAlertButton no es null. Si hubiera una página sin el botón, nuestro JavaScript generaría un error. Para solucionar este problema, puede agregar una verificación condicional para asegurarse de que el elemento esté en la página. Un simple if declaración debe hacer el trabajo.

5. Guardar estado local

Desafortunadamente, la alerta vuelve a mostrarse cuando vuelve a cargar la página después de hacer clic en el botón de descartar. Podemos abordar esto con algo llamado localStorageintegrado en los navegadores modernos.

localStorage le permite guardar un poco de datos del navegador temporalmente. No pretende ser un verdadero almacén de datos como una base de datos, pero funciona de manera similar.

aprovecharemos localStorage para establecer un nuevo par de clave y valor en el navegador. Luego podemos verificar si ese valor está configurado antes de mostrar la alerta.

La API es relativamente sencilla. Al final, aquí está el código final.

const alert = document.querySelector(".alert")
const dismissAlertButton = document.querySelector(".alert button")

if (localStorage.getItem("hideAlert")) {
  alert.style.display = "none"
}

if (dismissAlertButton) {
  dismissAlertButton.addEventListener("click", (event) => {
    event.preventDefault()
    alert.classList.add("alert-hidden")
    localStorage.setItem("hideAlert", true)
  })
}

Esto es lo que está pasando:

  1. Verificaremos si el botón de descartar está presente y, de ser así, escucharemos un evento de clic en él.

  2. Si se activa el evento de clic, agregamos el alert-hidden clase a la alerta.

  3. Con localStoragellamamos al setItem y pasar un par clave-valor de hideAlert y true.

  4. Si la página volviera a cargarse, inmediatamente nos conectamos a “localStorage” nuevamente para llamar al getItem método dirigido al mismo par de clave y valor establecido anteriormente y ocultar la alerta con CSS a través de JavaScript.

Algunas limitaciones

localStorage es una excelente solución para las cosas simples. A medida que trabaja en mi ejemplo, puede notar un ligero parpadeo cuando el navegador se carga nuevamente, y localStorage se establecen los valores.

Este es un inconveniente del enfoque, ya que HTML y CSS a menudo se cargan antes de ejecutar JavaScript. La única forma de evitar esto es una solución renderizada del lado del servidor donde el código es dinámico en relación con un valor real respaldado por la base de datos.

Pensamientos finales

Los elementos descartables son una excelente manera de captar la atención y limpiar el espacio de pantalla que tanto se necesita. Los visitantes de su sitio web aprecian la capacidad de descartar algo, incluso si es útil saberlo.

Deja una respuesta