<!DOCTYPE html>
<html>
	<head>
		<title>click</title>
        <link rel="stylesheet" type="text/css" href="graduation.css">

        <body>			
                                
        <span id = "parentbutton"><button onclick = "addbutton1()">click</button></span>
		
		
        		
		<!-- script to create new button -->
		<script>		
			
			var countclicks = 0;
			function addbutton1() {
				
				var myspan = document.getElementById("parentbutton");
				
				// creating button element
				var newbutton = document.createElement('BUTTON');
				
				// creating text to be
				//displayed on button
				var text = document.createTextNode("click");
				
				// appending text to button
				newbutton.appendChild(text);
				
				// appending button to div
				myspan.appendChild(newbutton); 

				// giving the button a click attribute
				newbutton.setAttribute("onclick","addbutton1()");

				// add click sound to buttons
				const audio = new Audio("https://www.fesliyanstudios.com/play-mp3/387");				
    			audio.play();
  					
				

				// total sum of clicks and cleaning of the screen frim buttons
				countclicks = countclicks + 1;
				console.log("countclicks", countclicks);
				
				if (countclicks >= 406){
						
						document.body.innerHTML = "";	

						alert("Congratulations buddy! You clicked 406 times and you built an entire wall out of clicks. What a productive day!");							

				}
			}

		</script>


		
        </body>
	</head>
	

</html>