I've been experimenting with a Udemy project and I'm looking to add a confetti animation when the answer is correct. However, the confetti animation appears at the bottom of my screen. How can I adjust it to cover the entire screen?
Below is a picture of how it currently looks when executed along with the JavaScript code for the confetti animation. Thank you!
Here's the relevant code snippet:
let maxParticleCount = 150; //maximum number of confetti particles
let particleSpeed = 2; //speed of the particle animation
let startConfetti; //function to start the confetti animation
let stopConfetti; //function to stop adding confetti
let toggleConfetti; //function to toggle the confetti animation on or off
let removeConfetti; //function to stop and remove all confetti immediately
//JavaScript code for confetti animation
(function () {
//functions for starting, stopping, toggling, and removing confetti
})();
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');
/* CSS styles for layout and elements */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Guess My Number!</title>
</head>
<body>
<script src="confetti.js"></script>
/* HTML structure for Guess My Number game */
</body>
</html>