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"><</button> <button class="btn btn-right">></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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.