Tag: opacity

Client didn’t pay? Make their website go away.

Something I need to test still, but adding it here for later use, maybe. If you find a bug, please let me know! And I’m halfways sure that the author shown in this link does  it less complicated, but it’s fun to learn and play around with code. https://github.com/kleampa/not-paid

GOAL: Let the website fade away, one step per day.

Define the initial opacity as 1 (fully opaque).

<style>
    body {
        opacity: 1; /* Initial opacity */
        transition: opacity 1s ease; /* Smooth transition */
    }
</style>

Modify the function to decrement the opacity by a step (e.g., 0.1).

<script>
    function decreaseOpacity() {
        let body = document.body;
        let currentOpacity = parseFloat(window.getComputedStyle(body).opacity);
        if (currentOpacity > 0) {
            body.style.opacity = (currentOpacity - 0.1).toFixed(1);
        }
    }
</script>

Adjust the local storage logic accordingly.

<script>
    document.addEventListener("DOMContentLoaded", function() {
        let storedOpacity = localStorage.getItem('bodyOpacity');
        if (storedOpacity) {
            document.body.style.opacity = storedOpacity;
        } else {
            localStorage.setItem('bodyOpacity', '1');
        }
    });

    function decreaseOpacity() {
        let body = document.body;
        let currentOpacity = parseFloat(window.getComputedStyle(body).opacity);
        if (currentOpacity > 0) {
            let newOpacity = (currentOpacity - 0.1).toFixed(1);
            body.style.opacity = newOpacity;
            localStorage.setItem('bodyOpacity', newOpacity);
        }
    }
</script>

Modify the date-checking logic to call the decreaseOpacity function.

<script>
    document.addEventListener("DOMContentLoaded", function() {
        let storedOpacity = localStorage.getItem('bodyOpacity');
        let lastIncrementDate = localStorage.getItem('lastIncrementDate');
        let today = new Date().toDateString();

        if (storedOpacity) {
            document.body.style.opacity = storedOpacity;
        } else {
            localStorage.setItem('bodyOpacity', '1');
            localStorage.setItem('lastIncrementDate', today);
        }

        if (lastIncrementDate !== today) {
            decreaseOpacity();
            localStorage.setItem('lastIncrementDate', today);
        }
    });

    function decreaseOpacity() {
        let body = document.body;
        let currentOpacity = parseFloat(window.getComputedStyle(body).opacity);
        if (currentOpacity > 0) {
            let newOpacity = (currentOpacity - 0.1).toFixed(1);
            body.style.opacity = newOpacity;
            localStorage.setItem('bodyOpacity', newOpacity);
        }
    }
</script>

Here is how the complete HTML file might look for the fading away effect:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Decrease Opacity</title>
    <style>
        body {
            opacity: 1; /* Initial opacity */
            transition: opacity 1s ease; /* Smooth transition */
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let storedOpacity = localStorage.getItem('bodyOpacity');
            let lastIncrementDate = localStorage.getItem('lastIncrementDate');
            let today = new Date().toDateString();

            if (storedOpacity) {
                document.body.style.opacity = storedOpacity;
            } else {
                localStorage.setItem('bodyOpacity', '1');
                localStorage.setItem('lastIncrementDate', today);
            }

            if (lastIncrementDate !== today) {
                decreaseOpacity();
                localStorage.setItem('lastIncrementDate', today);
            }
        });

        function decreaseOpacity() {
            let body = document.body;
            let currentOpacity = parseFloat(window.getComputedStyle(body).opacity);
            if (currentOpacity > 0) {
                let newOpacity = (currentOpacity - 0.1).toFixed(1);
                body.style.opacity = newOpacity;
                localStorage.setItem('bodyOpacity', newOpacity);
            }
        }
    </script>
</body>
</html>

So with this setup, the opacity of the body tag will start at 1 (fully opaque) and decrease by 0.1 each day until it reaches 0 (fully transparent). The localStorage ensures that the opacity persists across browser sessions and days.

Have you tried it? Let me know!

Loading