Fragmentos de JavaScript para una mejor UX y UI

JavaScript se puede utilizar para mejorar significativamente la experiencia del usuario (UX) y la interfaz de usuario (UI) de su sitio web. En este artículo, discutiremos algunos fragmentos de JavaScript que puede usar para aumentar la UX y la UI de su sitio web.

Desplazamiento suave

El desplazamiento suave es una característica popular de UX que hace que el desplazamiento a través de las páginas web sea más suave y más fluida. Con esta característica, en lugar de saltar abruptamente a la siguiente sección de la página, el usuario será transición sin problemas a la siguiente sección.

Para agregar un desplazamiento sin problemas a su sitio web, puede usar el siguiente código JavaScript:

$('a(href*="#")').on('click', function(e) {
  e.preventDefault()

  $('html, body').animate(
    {
      scrollTop: $($(this).attr('href')).offset().top,
    },
    500,
    'linear'
  )
})

Este código creará un efecto de desplazamiento sin problemas siempre que el usuario haga clic en un enlace que incluye un # símbolo en el href atributo. El código se dirige a todos estos enlaces y agrega un escucha de eventos de clic a ellos. Cuando el usuario hace clic en un enlace, el código evitará la acción predeterminada del enlace (es decir, navegar a una nueva página) y en su lugar animará la página para desplazarse sin problemas a la sección de la página especificada por el enlace href atributo.

Menús desplegables

Los menús desplegables son un elemento de interfaz de usuario común que puede ayudar a organizar contenido y mejorar la navegación de su sitio web. Con JavaScript, puede crear menús desplegables que sean fáciles de usar e intuitivos para sus usuarios.

Para crear un menú desplegable básico con JavaScript, puede usar el siguiente código:

var dropdown = document.querySelector('.dropdown')
var dropdownToggle = dropdown.querySelector('.dropdown-toggle')
var dropdownMenu = dropdown.querySelector('.dropdown-menu')

dropdownToggle.addEventListener('click', function() {
  if (dropdownMenu.classList.contains('show')) {
    dropdownMenu.classList.remove('show')
  } else {
    dropdownMenu.classList.add('show')
  }
})

Este código creará un menú desplegable simple que se puede alternar haciendo clic en un botón con la clase dropdown-toggle. Cuando se hace clic en el botón, el código verificará si el menú desplegable tiene la clase show. Si lo hace, el código eliminará la clase, ocultando el menú desplegable. Si no es así, el código agregará la clase, mostrando el menú desplegable.

Ventanas modales

Las ventanas modales son otro elemento de interfaz de usuario popular que se puede usar para mostrar información importante o para pedirle que la entrada del usuario. Con JavaScript, puede crear ventanas modales que sean receptivas, accesibles y fáciles de usar.

Para crear una ventana modal básica con JavaScript, puede usar el siguiente código:

var modal = document.querySelector('.modal')
var modalToggle = document.querySelector('.modal-toggle')
var modalClose = modal.querySelector('.modal-close')

modalToggle.addEventListener('click', function() {
  modal.classList.add('show')
})

modalClose.addEventListener('click', function() {
  modal.classList.remove('show')
})

Este código creará una ventana modal que se puede alternar haciendo clic en un botón con la clase modal-toggle. Cuando se hace clic en el botón, el código agregará la clase show a la ventana modal, mostrándola en la página. Cuando el botón de cierre con la clase modal-close se hace clic, el código eliminará el show clase, ocultando la ventana modal.

Controles deslizantes

Los controles deslizantes son un elemento de interfaz de usuario popular que se puede usar para mostrar imágenes u otros tipos de contenido de una manera visualmente atractiva y atractiva. Con JavaScript, puede crear controles deslizantes que sean fáciles de usar y personalizables para adaptarse al diseño de su sitio web.

Para crear un control deslizante básico con JavaScript, puede usar el siguiente código:

var slider = document.querySelector('.slider')
var slides = slider.querySelectorAll('.slide')
var prevButton = slider.querySelector('.prev')
var nextButton = slider.querySelector('.next')
var currentSlide = 0

function showSlide(n) {
  slides(currentSlide).classList.remove('active')
  slides(n).classList.add('active')
  currentSlide = n
}

prevButton.addEventListener('click', function() {
  var prevSlide = currentSlide - 1
  if (prevSlide < 0) {
    prevSlide = slides.length - 1
  }
  showSlide(prevSlide)
})

nextButton.addEventListener('click', function() {
  var nextSlide = currentSlide + 1
  if (nextSlide >= slides.length) {
    nextSlide = 0
  }
  showSlide(nextSlide)
})

Este código creará un control deslizante que se puede navegar haciendo clic en los botones con las clases prev y next. El código usa el showSlide Funciona para mostrar la diapositiva actual y ocultar la diapositiva anterior cada vez que se navega por el control deslizante.

Validación de formulario

La validación de formulario es una característica esencial de UX que puede ayudar a prevenir errores y mejorar la usabilidad de los formularios de su sitio web. Con JavaScript, puede crear una validación de formulario que responda y sea fácil de usar.

Para crear validación de formulario con JavaScript, puede usar el siguiente código:

var form = document.querySelector('form')

form.addEventListener('submit', function(e) {
  e.preventDefault()
  var email = form.querySelector('(type="email")').value
  var password = form.querySelector('(type="password")').value

  if (!email || !password) {
    alert('Please fill in all fields.')
  } else if (password.length < 8) {
    alert('Your password must be at least 8 characters long.')
  } else {
    alert('Form submitted successfully!')
  }
})

Este código validará los campos de correo electrónico y contraseña de un formulario cuando se envíe el formulario. Si cualquiera de los campos está vacío, el código mostrará un mensaje de alerta que le pedirá al usuario que complete todos los campos. Si el campo de contraseña tiene menos de 8 caracteres, el código mostrará un mensaje de alerta que le pedirá al usuario que ingrese una contraseña que tenga al menos 8 caracteres. Si el formulario pasa la validación, el código mostrará un mensaje de alerta que indica que el formulario se envió correctamente.

En conclusión, JavaScript es una herramienta poderosa que se puede utilizar para mejorar la UX y la UI de su sitio web. Al usar estos fragmentos de JavaScript, puede crear una experiencia más atractiva y fácil de usar para sus usuarios. Sin embargo, es importante usar estos fragmentos de JavaScript sabiamente y con moderación para garantizar que no afecten negativamente el rendimiento de su sitio web.