Simple CountDown (from 100 to 0) with JS

Using JavaScript with Hype
8

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