Criando um arquivo HTML com caixa centralizada e botões de navegação

Neste artigo, iremos mostrar como criar um único arquivo HTML com uma caixa centralizada e dois botões circulares para navegar entre os conteúdos da caixa. Usaremos JavaScript puro, sem bibliotecas externas.

Para começar, crie um arquivo HTML em branco e adicione o seguinte código HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Caixa centralizada com botões de navegação</title>
    <style>
      body {
        background-color: #333;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }
      .box {
        background-color: #ff6f69;
        border: 2px solid #333;
        width: 80%;
        height: 80%;
        max-width: 800px;
        max-height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #333;
        color: #fff;
        font-size: 24px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
      }
      .btn-left {
        left: 0;
      }
      .btn-right {
        right: 0;
      }
      .btn-green {
        background-color: #2ecc71;
      }
      .btn-red {
        background-color: #e74c3c;
      }
      .hidden {
        display: none;
      }
    </style>
  </head>
    <body>
        <div class="box">
            <p>Conteúdo 1</p>
        </div>
        
        <button class="btn btn-left hidden">&lt;</button>
        <button class="btn btn-right">&gt;</button>
        <button class="btn btn-right btn-green hidden">Confirmar</button>
        <button class="btn btn-right btn-red hidden">Cancelar</button>

        <script>
                const box = document.querySelector('.box');
                const contents = ['Conteúdo 1', 'Conteúdo 2', 'Conteúdo 3', 'Conteúdo 4'];
                let index = 0;
                const btnLeft = document.querySelector('.btn-left');
                const btnRight = document.querySelector('.btn-right');
                const btnGreen = document.querySelector('.btn-green');
                const btnRed = document.querySelector('.btn-red');

                function updateButtons() {
                if (index === 0) {
                    btnLeft.classList.add('hidden');
                } else {
                    btnLeft.classList.remove('hidden');
                }
                if (index === contents.length - 1) {
                    btnRight.classList.add('hidden');
                    btnGreen.classList.remove('hidden');
                    btnRed.classList.remove('hidden');
                } else {
                    btnRight.classList.remove('hidden');
                    btnGreen.classList.add('hidden');
                    btnRed.classList.add('hidden');
                }
                }

                function updateContent() {
                box.innerHTML = contents[index];
                updateButtons();
                }

                btnLeft.addEventListener('click', () => {
                index--;
                updateContent();
                });

                btnRight.addEventListener('click', () => {
                index++;
                updateContent();
                });

                btnRed.addEventListener('click', () => {
                index = 0;
                updateContent();
            });
            updateButtons();
        </script>
    </body>
</html>

Explicação do código

  1. Estilizando a página:

Primeiramente, é definido o estilo para o corpo da página. A cor de fundo do corpo é #333, que será a cor complementar da caixa. Também é definido que o corpo terá display: flex e justify-content: center e align-items: center, que centralizará a caixa na tela.

  1. Estilizando a caixa:

A caixa é definida como um elemento com classe .box, tendo uma largura de 80% da tela e uma altura de 80% da tela, com uma largura máxima de 800px e altura máxima de 600px. Além disso, a caixa é centralizada tanto horizontalmente quanto verticalmente.

  1. Estilizando os botões:

Os botões são definidos como elementos com classe .btn. Eles terão uma posição absoluta, estando centralizados verticalmente em relação à caixa. O tamanho dos botões é definido como 50×50 pixels, com um raio de borda de 50%. O plano de fundo inicial é a cor #333 e o texto é branco. O cursor é definido como ponteiro para indicar que é clicável.

  1. Estilizando os botões de navegação:

O botão da esquerda tem uma classe .btn-left, enquanto o botão da direita tem uma classe .btn-right. Os botões de navegação estão inicialmente ocultos até que haja mais de um conteúdo na lista. Para ocultar os botões, adicionamos a classe .hidden a eles.

  1. Estilizando os botões de confirmação e cancelamento:

Quando o último item da lista é exibido, os botões de navegação da esquerda são ocultados e os botões de confirmação e cancelamento são exibidos. O botão de confirmação tem uma classe .btn-green e a cor de fundo é definida como verde. O botão de cancelamento tem uma classe .btn-red e a cor de fundo é definida como vermelha.

  1. Adicionando o script:

Em seguida, adicionamos o script JavaScript que manipula a caixa e os botões.

O script começa definindo algumas variáveis, como a referência para a caixa, a lista de conteúdos e o índice atual, que começa com 0.

Também armazenamos as referências dos botões de navegação e dos botões de confirmação e cancelamento.

Depois, criamos duas funções. A primeira é updateButtons(), que é responsável por verificar o índice atual e atualizar os botões de navegação e os botões de confirmação e cancelamento, se necessário. Se o índice atual for 0, o botão da esquerda será ocultado, senão, será exibido. Se o índice atual for igual ao número máximo de conteúdos, o botão da direita será ocultado e os botões de confirmação e cancelamento serão exibidos, caso contrário, o botão da direita será exibido e os botões de confirmação e cancelamento serão ocultados.

A segunda função é updateContent(), que é responsável por atualizar o conteúdo exibido na caixa com base no índice atual. A função remove a classe .active do conteúdo atual e adiciona a classe .active ao novo conteúdo. Também atualiza o texto do botão de confirmação com base no novo conteúdo.

Em seguida, adicionamos um evento de clique para os botões de navegação. Quando o botão da esquerda é clicado, o índice atual é decrementado e o conteúdo é atualizado. Quando o botão da direita é clicado, o índice atual é incrementado e o conteúdo é atualizado.

Finalmente, adicionamos um evento de clique para os botões de confirmação e cancelamento. Quando o botão de confirmação é clicado, o conteúdo atual é confirmado e o script é reiniciado, ou seja, o índice atual é definido como 0 e o conteúdo é atualizado. Quando o botão de cancelamento é clicado, o script também é reiniciado.

Conclusão

Com este artigo, você aprendeu como criar um único arquivo HTML com algumas características interessantes, como uma caixa centralizada na tela com cor complementar, botões circulares que alternam o conteúdo da caixa, botões de navegação que são exibidos e ocultados de acordo com o índice atual e botões de confirmação e cancelamento que aparecem quando o último item da lista é exibido.

Usando JavaScript puro e sem bibliotecas externas, você pode criar uma experiência interativa interessante para seus usuários. Lembre-se de que este é apenas um exemplo e que você pode personalizar o código para atender às suas necessidades específicas.