<section class="code-block">
                <div>
            <p>Today is a Palindrome Day</p>
            <h1 class="palindrome">
						<span>1</span><span>2</span><span>0</span><span>2</span><span>2</span><span>0</span><span>2</span><span>1</span>
            </h1>
                </div>
                <button id="flipBtn">Flip the date</button>
        </section>
        <script>
            // Variables
            const palindrome = document.querySelector('.palindrome');
            const palindromeComp = document.querySelectorAll('h1 span');
            const flipper = document.querySelector('#flipBtn');
            console.log(palindromeComp);

            // Functions
            function flipEm () {
                if(palindrome.getAttribute('class') === 'palindrome') {
                    palindrome.setAttribute('class', 'palindrome flip');
                } else {
                    palindrome.setAttribute('class', 'palindrome');
                }
                for(let i = 0; i < palindromeComp.length; i++) {
                    if(palindromeComp[i].getAttribute('class')) {
                        palindromeComp[i].removeAttribute('class');
                } else {
                    palindromeComp[i].setAttribute('class', 'flip-reverse');
                }   
                }
            }

            // Events
            flipper.addEventListener('click', () => {
                flipEm();
            });
        </script>

/* Variables */
            :root {
                --bg-color: linear-gradient(90deg, red, rgb(212, 0, 0));
                --bg-secondary: white;
                --text-color: #232323;
                --radius-main: 1rem;
            }
            
            html { box-sizing: border-box; z-index: 0; }
            html * { box-sizing: inherit; }
            .code-block { 
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                background: var(--bg-color, linear-gradient(90deg, red, rgb(212, 0, 0)));
                z-index: 1;
                padding: 3rem 1rem;
            }
            .code-block h1, .code-block p {
                text-align: center;
								margin: 1rem auto;
								color: white;
            }

            .code-block h1 {
                font-size: 3rem;
                transition: all 1s ease-in-out;
            }

            .code-block h1 span {
                display: inline-block;
                transition: all 1s ease-in-out;
            }

            .code-block button {
                display: block;
								background: white;
                margin: 0 auto;
                padding: 1rem;
                font-weight: 900;
                font-size: 1.5rem;
                border-radius: var(--radius-main, 1rem);
                border:none;
                transition: transform .125s ease-out;
                box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.125);
            }

            .code-block button:active {
                background-color: #eee;
                transform: scale(.95);
                box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.125);
            }

            .flip {
                transform: rotateY(180deg);
            }

            .flip-reverse {
                transform: rotateY(-180deg);
                color: rgb(255, 217, 0);
            }