Send words into The Void


by Jeremy Caudle
code

Today’s post is a bit silly, but it was therapeutic to make. I think Dave Rupert mentioned something like this on one of the episodes of ShopTalk Show. I haven’t worked with the textarea element in a while, so this helped refresh my memory of the various attribute of the element. The animation could be improved, but I think it had a strong enough effect for a basic version of this.

The Void Reveals Nothing

Enter in whatever words you wish and press the button to send it off into the nothingness of the void
to never be seen again.
The words you've written cannot be retrieved, but if you wish to say anything else, refresh this page.

You may only send 240 characters into the void. 240 available

View the code:

HTML and JS
<div class="code-block mod-lea-verou-starry-night-bg">
            <h1>The Void Reveals Nothing</h1>
            <p><span id="void-instructions">Enter in whatever words you wish and press the button to send it off into the nothingness of the void<br /> to never be seen again.</span> <span id="cast-message">The words you've written cannot be retrieved, but if you wish to say anything else, refresh this page.</span></p>
            
            <div class="void-form">
                <label for="void-text" id="void-text-label">Enter what you wish to send into the void:</label>
                <textarea id="void-text" maxlength="240" rows="4" cols="60" autocomplete="off" wrap="soft" spellcheck="false"></textarea>
                <button id="button-cast">Cast it into the Void</button>
                <p id="char-limit">You may only send 240 characters into the void. <span id="char-count">240 available</span></p>
            </div>

        </div>
        
        <script>

            // ---------        
            // Variables
            // ---------
            const buttonCast = document.getElementById('button-cast');
            const textVoidInstructions = document.getElementById('void-instructions');
            const textCastMessage = document.getElementById('cast-message');
            const textVoidInput = document.getElementById('void-text');
            const textVoidTextLabel = document.getElementById('void-text-label');
            const textVoidCharLimit = document.getElementById('char-limit');
            let textCharCount = document.getElementById('char-count');
            let textVoid = '';


            // ---------
            // Functions
            // ---------
        
            function castOff() {
                if (textVoidInput.value !== '') {
                console.log('Let these words be cast into the void...');
                textVoidInstructions.setAttribute('style', 'color: transparent;');
                textVoidTextLabel.setAttribute('style', 'color: transparent;');
                textVoidCharLimit.setAttribute('style', 'color: transparent;');
                textCharCount.setAttribute('style', 'color: transparent;');
                textCastMessage.setAttribute('class','words-sent');
                textVoidInput.setAttribute('disabled','');
                textVoidInput.setAttribute('class','into-the-void');
                buttonCast.remove();

            } else {
                alert("The Void senses no words. Please enter in some text before pressing the button.")
            }
            };

            // ---------        
            // Events
            // ---------

            textVoidInput.addEventListener('input', () => {
                textCharCount.innerHTML = `<strong>${(textVoidInput.getAttribute('maxlength') - textVoidInput.value.length)}</strong> available`;
            });

            buttonCast.addEventListener('click', castOff); 
         
        </script>
CSS
.code-block {
                min-height: 100vh;
                background-color: black;
                padding: 1rem;
                width: 100%;
                margin: 2rem 0;
                color: white;
                font-family: monospace;
                font-size: 20px;
            }

            @keyframes void {
                0% {
                    background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
                }
                50% {
                    background-position: 50px -50px, -40px -60px, -270px -130px, 100px -70px;
                }
                100% {
                    background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
                }
            }

            .mod-lea-verou-starry-night-bg {
                /* This class is based on the fantastic Starry Night CSS3 pattern available at https://projects.verou.me/css3patterns/ */
                background-color:black;
                background-image:
                radial-gradient(white, rgba(255,255,255,.0125) .5px, transparent 40px),
                radial-gradient(white, rgba(255,255,255,.005) 1.5px, transparent 30px),
                radial-gradient(white, rgba(255,255,255,.0125) .5px, transparent 40px),
                radial-gradient(rgba(255,255,255,.0125), rgba(255,255,255,.005) 1px, transparent 30px);
                background-size: 20vw 20vh, 33vw 33vh, 25vw 25vh, 50vw 50vh;
                background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
                animation: void 300s ease-out 0s infinite alternate-reverse forwards;
            }

            .code-block h1 {
                color: yellow;
                text-align: center;
            }
            
            .code-block p {
                max-width: 60ch;
                margin: auto;
                line-height: 1.5;
                transition: color .25s ease-out;
                text-align: center;
            }

            .code-block p span {
                transition: color .25s ease-out;

            }

            .code-block p span#cast-message {
                display: block;
                text-align: center;
                color: transparent;
                transition: color .5s ease-out;
            }

            .words-sent {
                color: yellow !important;
            }

            .void-form {
                display: block;
                max-width: 60ch;
                margin: 10rem auto;
                text-align: center;
            }

            .void-form label { 
                display: block;
                margin: 0 auto;
            }

            textarea {
                background-color: transparent;
                color: #cdcdcd;
                resize: none;
                margin: 1rem auto;
                font-size: 20px;
                width: 100%;
                max-width: 60em;
                border-radius: .25rem;
                padding: 1rem;
                transition: all .25s ease-out;
            }

            #char-count {
                display: block;
                color: yellow;
            }

           .code-block button {
                display: block;
                margin: 1rem auto;
                padding: .5rem 1rem;
                background-color: yellow;
                border: transparent solid 5px;
                border-radius: .25rem;
                font-size: 20px;
                cursor: pointer;
                transition: transform .125s ease-out, background-color .125s ease-out, border .125s ease-out;
            }

            .code-block button:focus, .code-block button:hover, .code-block button:active {
                color: yellow;
                background-color: black;
                border: yellow solid 5px;
                transform: translate3d(0, -1px, 0);
            }

            @keyframes intothevoid {
                0% {
                   transform: scale3d(1,1,1) translate(0, 0); 
                }

                33% {
                    transform: scale3d(2.5,2.5,2) translate(0, -20%);
                }

                100% {
                    transform: scale3d(0,0,0) translate(0, 0%);
                }
            }

            textarea.into-the-void {
                border: none;
                outline: none;
                color: yellow;
                animation-name: intothevoid;
                animation-timing-function: cubic-bezier(1,0,0,1);
                animation-delay: .125s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                animation-duration: 3s;
                text-align: center;
            }