<countdown-time add="10s"></countdown-time>
<div id="result"></div>
body 
	height: 100vh
	width: 100wv
	display: flex
	justify-content: center
	align-items: center
	flex-direction: column
	
	countdown-time
		time
			font-size: 5rem
	
	#result
		margin-top: 10px
		font-size: 2rem
View Compiled 
const result = document.getElementById('result');
const countdown = document.querySelector('countdown-time')
function ready() {
	result.innerText = "The CountDown is ready!";
	// Start the countdown manually
	countdown.start()
}

function expired() {
	result.innerText = "The CountDown expired!";
}

countdown.addEventListener('ready', ready)
countdown.addEventListener('expire', expired)
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.