Trechos de javascript para melhor UX e UI

O JavaScript pode ser usado para melhorar significativamente a experiência do usuário (UX) e a interface do usuário (UI) do seu site. Neste artigo, discutiremos alguns trechos JavaScript que você pode usar para aumentar o UX e a interface do usuário do seu site.

Rolagem suave

A rolagem suave é um recurso UX popular que torna as páginas da web mais suaves e mais fluidas. Com esse recurso, em vez de pular abruptamente para a próxima seção da página, o usuário será transferido sem problemas para a próxima seção.

Para adicionar rolagem suave ao seu site, você pode usar o seguinte 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 criará um efeito de rolagem suave sempre que o usuário clicar em um link que inclui um # símbolo no href atributo. O código tem como alvo todos esses links e adiciona um ouvinte de eventos de cliques a eles. Quando o usuário clica em um link, o código impedirá a ação padrão do link (ou seja, navegar para uma nova página) e, em vez disso, anime a página para rolar sem problemas na seção da página especificada pelo link’s href atributo.

Menus suspensos

Os menus suspensos são um elemento de interface do usuário comum que pode ajudar a organizar o conteúdo e melhorar a navegação do seu site. Com o JavaScript, você pode criar menus suspensos que são fáceis de usar e intuitivos para seus usuários.

Para criar um menu suspenso básico com JavaScript, você pode usar o seguinte 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 criará um menu suspenso simples que pode ser alternado clicando em um botão com a classe dropdown-toggle. Quando o botão for clicado, o código verificará se o menu suspenso tiver a classe show. Se isso acontecer, o código removerá a classe, escondendo o menu suspenso. Caso contrário, o código adicionará a classe, mostrando o menu suspenso.

Janelas modais

As janelas modais são outro elemento popular da interface do usuário que pode ser usado para exibir informações importantes ou solicitar ao usuário a entrada. Com o JavaScript, você pode criar janelas modais que são responsivas, acessíveis e fáceis de usar.

Para criar uma janela modal básica com JavaScript, você pode usar o seguinte 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 criará uma janela modal que pode ser alterada clicando em um botão com a classe modal-toggle. Quando o botão é clicado, o código adicionará a classe show Para a janela modal, exibindo -a na página. Quando o botão fechar com a classe modal-close é clicado, o código removerá o show Classe, escondendo a janela modal.

Sliders

Os controles deslizantes são um elemento popular da interface do usuário que pode ser usado para exibir imagens ou outros tipos de conteúdo de uma maneira visualmente atraente e envolvente. Com o JavaScript, você pode criar controles deslizantes fáceis de usar e personalizáveis ​​para se encaixar no design do seu site.

Para criar um controle deslizante básico com JavaScript, você pode usar o seguinte 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 criará um controle deslizante que pode ser navegado clicando em botões com as classes prev e next. O código usa o showSlide Função para mostrar o slide atual e ocultar o slide anterior sempre que o controle deslizante for navegado.

Validação do formulário

A validação do formulário é um recurso UX essencial que pode ajudar a evitar erros e melhorar a usabilidade dos formulários do seu site. Com o JavaScript, você pode criar validação de formulário que seja responsiva e fácil de usar.

Para criar validação de formulário com JavaScript, você pode usar o seguinte 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á os campos de email e senha de um formulário quando o formulário for enviado. Se um dos campos estiver vazio, o código exibirá uma mensagem de alerta solicitando o usuário a preencher todos os campos. Se o campo de senha tiver menos de 8 caracteres, o código exibirá uma mensagem de alerta solicitando o usuário a inserir uma senha com pelo menos 8 caracteres. Se o formulário passar a validação, o código exibirá uma mensagem de alerta indicando que o formulário foi enviado com sucesso.

Em conclusão, o JavaScript é uma ferramenta poderosa que pode ser usada para aprimorar o UX e a interface do usuário do seu site. Ao usar esses trechos JavaScript, você pode criar uma experiência mais envolvente e fácil de usar para seus usuários. No entanto, é importante usar esses trechos de JavaScript com sabedoria e com moderação para garantir que eles não afetem negativamente o desempenho do seu site.