Do Nothing Machine

Esta é a minha versão digital de uma «Do Nothing Machine» — em software.

A ideia

Criar o equivalente a uma «Do Nothing Machine» em software.

A teoria

A «Do Nothing Machine» cumpre fielmente o que o nome promete: é uma máquina cujo único propósito é não ter propósito nenhum. Realiza uma ação totalmente desprovida de utilidade prática.

A prática

Se o mundo já está cheio de «Do Nothing Machines» em hardware, porque não levar o conceito para o software? Segue-se um exemplo — experimente ligá-lo.

O exemplo

O interruptor é ligado por quem o usa e volta a desligar-se sozinho, depois de uma pausa aleatória entre 100 e 1100 milissegundos.

<!DOCTYPE html>
<html>
<head>
    <title>Do Nothing Machine!</title>
    <style>
        /* Centra o conteúdo e define a margem superior */
        .exemplo1 { text-align: center; margin-top: 50px; }
        /* Configura o layout do interruptor */
        .interruptor { width: 60px; height: 34px; display: inline-flex; position: relative; }
        /* Esconde a checkbox nativa */
        .interruptor input { display: none; }
        /* Define o estilo do interruptor */
        .slider { position: absolute; width: 100%; height: 100%; background: #ccc; border-radius: 34px; cursor: pointer; }
        /* Estilo da bolinha do interruptor, com transição suave */
        .slider:before { content: ""; position: absolute; height: 26px; width: 26px; left: 4px; bottom: 4px; background: white; border-radius: 50%; transition: .4s; }
        /* Altera o estado visual do interruptor quando ativado */
        input:checked + .slider { background: #2196F3; }
        /* Anima a posição da bolinha ao ativar */
        input:checked + .slider:before { transform: translateX(26px); }
    </style>
</head>
<body>
    <div class="exemplo1">
        <h1>Do Nothing Machine!</h1>
        <!-- Interruptor com temporizador para voltar a desligar -->
        <label class="interruptor">
            <input type="checkbox" onclick="setTimeout(() => this.checked = 0, Math.random() * 1e3 + 100)">
            <span class="slider"></span>
        </label>
    </div>
</body>
</html>

Ficha técnica

linguagens

HTML · CSS · JavaScript

dependências

nenhuma

utilidade

nenhuma, por definição

Aviso legal. A informação desta página destina-se a fins lúdicos e não deve ser usada em contextos profissionais. Foram tomados todos os cuidados para que os conteúdos sejam rigorosos e atuais; ainda assim, o autor não se responsabiliza por erros ou omissões e pode alterar ou retirar a informação a qualquer momento, sem aviso prévio. Todo o conteúdo é disponibilizado sem qualquer garantia.