JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tapDiv"><input type="submit"  id="search" src="img/heart.png" value=""><div>
    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>

JavaScript

var lastTapSeconds = 0;
						var bpm = 0;
						
						//extra variabelen voor functionaliteit uitbreiding.
						var beats = [];
						var average = 0;
						var count = 0;
						
						var tapDiv = document.getElementById("tapDiv");
						
						$(tapDiv).on('click', function() {
						var tapSeconds = new Date().getTime();
						
						bpm = ((1 / ((tapSeconds - lastTapSeconds) / 1000)) * 60);
						lastTapSeconds = tapSeconds;
						tapDiv.innerHTML = '<h1 style="display:inline;">' + Math.floor(bpm) + '</h1><img style="height:256px;width:256px;" src="img/heart.png"/>';

						//extra functionaliteit
						beats.push(Math.floor(bpm));
						average *= count;  //average = average * count
						average += Math.floor(bpm);  //average = average + count
						count++;
						average /= count;  //average = average / counterIncrement
						
						
						
						//als array entries 10 heeft bereikt geef prompt met gemiddelde bpm.
						if(beats.length >= 10) {
						//alert("Your Average Beats Per Minute: " + average);
					
							if ( average > 60 && average < 100 )
						    alert( "You have a normal resting heart rate. Good Job!" );
							else if ( average < 60 )
						    alert( "You have an efficient heart function and better cardiovascular fitness. Keep it up!" );
							else if ( average > 100 )
						    alert( "Your resting heart has an high average, indicating an unefficient and most likely unhealthy heart." );
							else
						    alert( "Please measure again, your measurements seem unregular..." );
						    
						    if(beats.length >=10){
							  
							   beats.length = 0;
							   bpm = 0;	
						   }						
						  }
						});