Simple CountDown (from 100 to 0) with JS

So there are many examples here of fancy count down timers which include date and time etc.

However, I need a simple count down meter which will count down from 100 to whatever number I indicate. Just like the countUp.js but counting down. Also, it would be nice to be able to control the speed of the count down.

Thanks for your help!

Greg

https://inorganik.github.io/countUp.js/

it includes everything you asked for :wink:

1 Like

Hi Hans

Yes I found this in a previous post but there is so much code there I don’t know where to start.

A more step-by-step explanation would be helpful.

Greg

create a hypefunction and paste this code:

//fill in below as you need
let startCount = 100;

const	stopCount = 0,	
		duration = 5000,//milliseconds
		countDownElement = hypeDocument.getElementById('exampleElement'),//your element to display the countDown
		//end fill in ...
		
		
		
		intervalTime = duration/Math.abs(startCount - stopCount);
		
		
let countDown = setInterval(

function(){

if(startCount === stopCount)clearInterval(countDown)

countDownElement.innerHTML = startCount;

if(startCount > stopCount)	{
startCount--
}else{
startCount++
}	


},
intervalTime
);

attach the behaviour to run the function to whatever action you want.

not many options, but should work :slight_smile:countDownOrUp.hype.zip (13.0 KB)

1 Like

Thank you Hans! Exactly what I wanted!

Greg

Posting since I was writing it any way.

The simplest up/down counter I can think of.

Is have your timeline fire the Javascript at the end of any animations for the counter.

Put the time line in a loop with a start timeline action at the end.

This should in most cases allow you to adjust the speed of the animation in sync to the javascript changing the counter number.

The script that is run by the counter timeline is this.

The script is first run by the On Prepare For Display

Only the first bit is run because we use an if condition to check whom called the script.

The rest of the script is commented.

	var countNumber_  = hypeDocument.getElementById('countNumber')
	
	let startNumber =  0
	let endNumber =  10
	
	let directionISGoingUp = true  // true = count up, false = count down.
	
	
	//-- set the number in the scene 
	if (event.type == "HypeScenePrepareForDisplay"){ 
	// ------------------   Only run on HypeScene Prepare For Display              ------------------///
	
	countNumber_.innerHTML = startNumber
	
	  return
	  }
	
	
	
	
	
	
	
	var countNumberInner =  parseInt(countNumber_.innerHTML, 10);  /// Parse string into number
	
	
	 //--- COUNT UP
		if ( countNumberInner != ( endNumber - 1) &&  directionISGoingUp ){ //check if we have fully counted up
		//--if not change the nmuber
	 countNumber_.innerHTML =   (countNumberInner + 1)
	 
	 return
	 }
	 
	 
	 //--- COUNT DOWN
  if ( countNumberInner != ( endNumber  + 1) &&  !directionISGoingUp ){ //check if we have fully counted down  
	 	//--if not change the nmuber
	 	countNumber_.innerHTML =   (countNumberInner - 1)
	 	
	 return
	 }
	
	 
	
	//--- stop the counter
	 
	hypeDocument.goToTimeInTimelineNamed(0, 'counter')
	hypeDocument.pauseTimelineNamed('counter')
	
	//set the final number
	countNumber_.innerHTML =   endNumber

simple countdownUP.hype.zip (23.6 KB)

2 Likes

WOW! This is great! Thanks for sharing Mark. It uses vector shapes which is what I want to learn since I upgraded to the newest release lately.

Cool,

Just changed the code a little so we automatically get if the count is up or down.

We simply calculate if start time is less than end time.

	var countNumber_  = hypeDocument.getElementById('countNumber')
	
	let startNumber =  10
	let endNumber =   0
	
	
	// check if start time is less or more than end time to determine if count should go up or down, 
	 if ( startNumber < endNumber ) { hypeDocument.customData.direction =  true } else { hypeDocument.customData.direction = false }   // true = count up, false = count down.
	
	let directionISGoingUp = hypeDocument.customData.direction
	
	//-- set the number in the scene 
	if (event.type == "HypeScenePrepareForDisplay"){ 
	// ------------------   Only run on HypeScene Prepare For Display              ------------------///
	
	countNumber_.innerHTML = startNumber
	
	  return
	  }
	
	
	
	
	
	
	
	var countNumberInner =  parseInt(countNumber_.innerHTML, 10);  /// Parse string into number
	
	
	 //--- COUNT UP
		if ( countNumberInner != ( endNumber - 1) &&  directionISGoingUp ){ //check if we have fully counted up
		//--if not change the nmuber
	 countNumber_.innerHTML =   (countNumberInner + 1)
	 
	 return
	 }
	 
	 
	 //--- COUNT DOWN
  if ( countNumberInner != ( endNumber  + 1) &&  !directionISGoingUp ){ //check if we have fully counted down  
	 	//--if not change the nmuber
	 	countNumber_.innerHTML =   (countNumberInner - 1)
	 	
	 return
	 }
	
	 
	
	//--- stop the counter
	 
	hypeDocument.goToTimeInTimelineNamed(0, 'counter')
	hypeDocument.pauseTimelineNamed('counter')
	
	//set the final number
	countNumber_.innerHTML =   endNumber

simple countdownUP_v2.hypetemplate.zip (15.7 KB)


Fancy version.

Two vector timelines, the new one reverses the animation to match the count direction.
The button runs the same counter() function but only its part. Doing this gives us a simple reset and also guard on multiple clicks.

	 if(element.id == "startButton"){
	 // ------------------   Only run on  button click  ------------------///
	if (countNumber_.innerHTML ==  endNumber){
	countNumber_.innerHTML = startNumber
	}
	
	hypeDocument.startTimelineNamed(hypeDocument.customData.timeLine)
	return
	}

we can also change the vector colour depending on up or down. Run in the “Prepare For Display” section of the code.

	if (event.type == "HypeScenePrepareForDisplay"){ 
	// ------------------   Only run on HypeScene Prepare For Display     ------------------///
	
	countNumber_.innerHTML =startNumber
	
hypeDocument.customData.timeLine =  (directionISGoingUp ? "counterUp"  :  "counterDown");

//-- Change the vectors color depending on up or down

if (directionISGoingUp){
 hypeDocument.getElementById("countVector").querySelector("path").style.stroke  = upColor
 	} else{
  		hypeDocument.getElementById("countVector").querySelector("path").style.stroke  = downColor
 	}
 	
	  return
	  
 }

simple countdownUPFancyPants-1.hypetemplate.zip (23.5 KB)

1 Like

Legend! Thanks :grin:

Hi Hans

I have one more question. Would it be possible to tweak the code so that the startCount and StopCount values are taken from the form or some other form? In other words, we could type the start and end values ourselves in some kind of a form.

Thanks for your help.

Greg

what formelement do you mean/prefer?

you may serve a example-hypefile which includes the formelements you’d prefer :slight_smile:

Hi Hans

See the attached example. However, if you have any other ideas on how to do this feel free to change it. Basically, I would like the user to decide what value the counter starts and ends at by typing numbers into the forms.

However, this approach presents another problem with the speed. Currently your code sets the speed to 5000ms to count from 100 to 0. That’s good speed. However, would it be also possible to tweak the code so that the speed is calculated based on the inputs from the forms (in 50ms increments)? For example it takes 5000ms to count down from 100-0, 4950ms to count down from 100-1, 4900 to count from 100-2 etc. and 50ms to count from 100-99.

Looking forward to your reply.

Simple CountDown:Up timer.hype.zip (82.0 KB)

countDownUpWithInput.hype.zip (81.7 KB)
not well tested …

2 Likes

This is perfect! Thank you Hans!

Hi Hans

I have one last question. I’m trying to write an if/else statement based on the number value a user inputs into the “stopCountdownInput” which stops the counter at that value so the statement looks like that:

if ( the number is 10 ) {
// run this timeline
} else if ( the number is 20 ) {
// run this timeline
} else {
// run this timeline
}

but I don’t know how to write the condition which will check the number in the “stopCountdownInput” box. I tried the following:
hypeDocument.getElementById(‘stopCountdownInput’).value === 10
hypeDocument.getElementById(‘stopCountdownInput’).input === 10
hypeDocument.getElementById(‘stopCountdownInput’).innerHTML === 10

but nothing works.

Thanks for your help!

hypeDocument.getElementById(‘stopCountdownInput’).value
will be a string, not a number

if you want to convert it to a number run parseInt(yourValue)

within my script i used valueAsNumber which should always return a number

the input field is of type number anyway

please also consider at which time you want to run a timeline:
-> input is finished <- this would involve a further event handling
-> when countdown has started
-> when the countdown has finished

???

if you’ve questions of how to run if-else-statements then https://www.w3schools.com/jsref/jsref_if.asp is a good starting point

I think this is a little too difficult for me. I wrote the following if/else statement but it’s not working.

 if (hypeDocument.getElementById('stopCountdownInput').valueAsNumber === 10) {
hypeDocument.goToTimeInTimelineNamed(0, 'stop10')
hypeDocument.continueTimelineNamed('stop10', hypeDocument.kDirectionForward, false);

} else if (hypeDocument.getElementById('stopCountdownInput').valueAsNumber === 50) {
hypeDocument.goToTimeInTimelineNamed(0, 'stop50')
hypeDocument.continueTimelineNamed('stop50', hypeDocument.kDirectionForward, false);

} else {
  hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
}
}

Something is probably missing.

Also your are using strict comparisons. Read up on the difference between === and ==

1 Like

quotes have to be straight

Edit:
@Daniel corrected the quotes in your post.
so there is just one curly bracket at the end that is not needed … then it should be correct.

problem that remains:

1 Like

Got it! Thanks a lot for that!