I am new to frontend and have a hard time understanding JavaScript.
I am now trying to make a button with confetti when pressed. But I want it to push out the confetti within a certain amount of time (doesnt matter how long time atm I just want the function to work) So what shall I do? I have been trying to understand it via w3schools, how setTime() is working. Maybe you can help me sort it out so that I understand how to work this through?
Thank you! /Lisa
JS :
const colorChange = [
'blue' , 'green', 'lightgreen', 'lightblue', 'purple', 'turquoise'
];
const chooseParticleColor = () => {
return colorChange[Math.floor(Math.random() * colorChange.length)];
}
const bang = (addConfettiParticles) => {
addConfettiParticles({
particleAmount: 500, // Antal konfettipartiklar
xPosition: 50, // Position i procent av skärmens bredd, 0 är längst till vänster och 100 längst till höger
yPosition: 50, // Position i procent av skärmens höjd, 0 är längst ner och 100 högst upp
xVelocity: 0, // Hastighet i sidled, positiva värden åker åt höger och negativa åt vänster
yVelocity: 2, // Hastighet i höjdled, positiva värden åker uppåt och negativa värden nedåt
xSpread: 110, // Slumpmässig spridning på partikelns hastighet i sidled
ySpread: 50, // Slumpmässig spridning på partikelns hastighet i höjdled
})
}
let timeout;
function repeatConfetti() {
timeout = setTimeout(addConfettiParticles, 3000);
}
export {
chooseParticleColor,
bang,
repeatConfetti
}
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Konfetti!</title>
</head>
<body>
<div class="container flex-center">
<div class="wrapper">
<div class="title-row flex-center">
<h1>Konfetti</h1>
</div>
<div class="flex-row flex-center">
<button id="confettiButton" onclick="repeatConfetti()">Skjut konfetti!</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script type="module" src="javascripts/confetti-creator.js"></script>
<script src="./confetti.js"></script>
</body>
</html>