Omar_Devs

Mudança de Cor de Fundo através de um Botão com JavaScript

Olá! Neste tutorial, veremos uma mudança na cor do texto com base na cor de fundo usando javascript. Às vezes, temos requisitos para alterar a cor do texto ou da fonte dependendo da cor de fundo e, nesse momento, se você estiver alterando a cor do texto manualmente, este post definitivamente o ajudará.

Passo 1: Estrutura Básica HTML

Crie um arquivo HTML chamado index.html e adicione a estrutura básica:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Background Color</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            transition: background-color 0.5s;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button id="changeColorButton">Change Background Color</button>
    <script src="script.js"></script>
</body>
</html>

Passo 2: Adicionar o JavaScript

Crie um arquivo JavaScript chamado script.js na mesma pasta do arquivo HTML e adicione o seguinte código:


document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('changeColorButton');
    
    button.addEventListener('click', function() {
        changeBackgroundColor();
    });
});

function changeBackgroundColor() {
    const colors = ['#FF5733', '#33FF57', '#3357FF', '#F0F', '#FF0', '#0FF'];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    document.body.style.backgroundColor = randomColor;
}

Explicação do Código

HTML:
- Um botão com o ID changeColorButton é criado.
- O arquivo JavaScript script.js é incluído no final do corpo do documento para garantir que o DOM esteja totalmente carregado antes de o script ser executado.
JavaScript:
- document.addEventListener('DOMContentLoaded', ...): Garante que o código dentro da função seja executado somente depois que todo o DOM tiver sido carregado.
- button.addEventListener('click', ...): Adiciona um evento de clique ao botão, que chama a função changeBackgroundColor quando o botão é clicado.
- changeBackgroundColor(): Esta função define um array de cores e escolhe uma cor aleatória do array para definir como a nova cor de fundo do corpo do documento.

Passo 3: Testar a Página

Abra o arquivo index.html no seu navegador e clique no botão para ver a cor de fundo mudar aleatoriamente.

Conclusão

Este tutorial mostrou como criar uma página web simples onde um botão pode mudar a cor de fundo usando JavaScript. Este é um exemplo básico, mas você pode expandir e modificar conforme necessário para atender às suas necessidades específicas.
Até a proxima!