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.