Time starts reading in minus, while the end message still shows

My countdown timer I want to put on a site is having some issues. Countdown is normal, everything is fine, but at the end of the timer, instead of it to clear the timer and display the end message or a call back, it will rather display the end message by the side while time continues to read in the negative.

Can anyone show me what went wrong?

This is my code:

 
    // Set the date we're counting down to
    var countDownDate = new Date("March 31, 2017 09:35:00 PM").getTime();
    // Update the count down every 1 second
    
    var x = setInterval(function() {
    
        // Get todays date and time
        var now = new Date().getTime();
             
        // Find the distance between now an the count down date
        var distance = countDownDate - now;
        
        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
             
       
       // Output the result in an element with id="demo"
      
        document.getElementById("days").innerHTML = days; 
        document.getElementById("hours").innerHTML = hours;
        document.getElementById("minutes").innerHTML = minutes;
        document.getElementById("seconds").innerHTML = seconds;
    	
    	
    	 
        
        // If the count down is over, write some text 
    	if (distance < 0) {
            clearInterval(x);
            document.getElementById("endmessage").innerHTML = "EXPIRED";
    		
        }
       
    }, 1000);

body {
    			background: #f6f6f6;
    		}
    
    		.countdownContainer{
    			position: absolute;;
    			top: 50%;
    			left: 50%;
    			transform : translateX(-50%) translateY(-50%);
    			text-align: center;
    			background: #ddd;
    			border: 1px solid #999;
    			padding: 10px;
    			box-shadow: 0 0 5px 3px #ccc;
    		}
    
    		.info {
    			font-size: 80px;
    		}

<!DOCTYPE HTML>
    <html>
    <head>

    </head>
    <body>
    <table class="countdownContainer">
    			<tr class="info">
    				<td colspan="4">Countdown to April fool</td>
    			</tr>
    			<tr class="info">
    				<td id="days">00</td>
    				<td id="hours">00</td>
    				<td id="minutes">00</td>
    				<td id="seconds">00</td>
    				
    				<td id="endmessage"></td>
    			</tr>
    			<tr>
    				<td>Days</td>
    				<td>Hours</td>
    				<td>Minutes</td>
    				<td>Seconds</td>
    			</tr>
    		</table>
    		
    <p id="demo"></p>
    
    <script>
     
    </script>
    
    </body>
    
       
    </html>

Solution

I have made some changes to your code. Please find it below,

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
        body {
            background: #f6f6f6;
        }

        .countdownContainer{
            position: absolute;;
            top: 50%;
            left: 50%;
            transform : translateX(-50%) translateY(-50%);
            text-align: center;
            background: #ddd;
            border: 1px solid #999;
            padding: 10px;
            box-shadow: 0 0 5px 3px #ccc;
        }

        .info {
            font-size: 80px;
        }
        </style>
</head>
<body>
<table class="countdownContainer">
            <tr class="info">
                <td colspan="4">Countdown to April fool</td>
            </tr>
            <tr class="info">
                <td id="days">00</td>
                <td id="hours">00</td>
                <td id="minutes">00</td>
                <td id="seconds">00</td>

                <td id="endmessage"></td>
            </tr>
            <tr>
                <td>Days</td>
                <td>Hours</td>
                <td>Minutes</td>
                <td>Seconds</td>
            </tr>
        </table>

<p id="demo"></p>

<script>

// Set the date we're counting down to
var countDownDate = new Date("April 01, 2017 12:00:30 PM").getTime();
// Update the count down every 1 second

var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);







    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("endmessage").innerHTML = "EXPIRED";

    }
    else{
   // Output the result in an element with id="demo"

    document.getElementById("days").innerHTML = days; 
    document.getElementById("hours").innerHTML = hours;
    document.getElementById("minutes").innerHTML = minutes;
    document.getElementById("seconds").innerHTML = seconds;
    }

}, 1000);

</script>

</body>


</html>

Each time the countdown is printed, it should be done only if the difference is greater than 0. So moved that part inside the else condition of your IF. Adjust the date accordingly to test your countdown.