Or, embed this snippet using GenerateWP WordPress Plugin.

Download

Clone

cound

as

// Add Shortcode
function custom_shortcode() {

	<div id="countdown">
	    <span id="timer">10</span> seconds
	</div>
	<style>
	    #countdown {
	        display: flex;
	        justify-content: center;
	        align-items: center;
	        font-size: 2em;
	        padding: 20px;
	        background: #333;
	        color: #fff;
	        border-radius: 5px;
	        width: 100%;
	        max-width: 200px; /* Adjust as needed */
	        text-align: center;
	        box-sizing: border-box;
	    }
	
	    #timer {
	        font-size: 1.5em; /* Adjust font size within the countdown box */
	    }
	</style>
	<script>
	    document.addEventListener('DOMContentLoaded', () => {
	        const timerElement = document.getElementById('timer');
	        let countdownTime = 10; // Time in seconds
	
	        function updateTimer() {
	            timerElement.textContent = countdownTime;
	        }
	
	        function startCountdown() {
	            countdownTime = 10; // Reset to initial countdown time
	            updateTimer(); // Display initial time
	
	            setInterval(() => {
	                countdownTime--;
	                if (countdownTime <= 0) {
	                    countdownTime = 10; // Reset the countdown
	                }
	                updateTimer();
	            }, 1000); // Update every second
	        }
	
	        startCountdown(); // Start the countdown
	    });
	</script>
	

}
add_shortcode( '', 'custom_shortcode' );