CodeDevMLH/Seasonals-Halloween
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix order

Browse Source
This commit is contained in:
MLH
2024-12-21 01:57:17 +01:00
parent 07d3351ebd
commit f325a86dfb
1 changed files with 35 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
halloween.js
View File

@@ -53,6 +53,41 @@ const images = [
"./images/pumpkin_20x20.png",
];
function addRandomSymbols(count) {
const halloweenContainer = document.querySelector('.halloween-container'); // get the halloween container
if (!halloweenContainer) return; // exit if halloween container is not found
console.log('Adding random halloween symbols');
for (let i = 0; i < count; i++) {
// create a new halloween elements
const halloweenDiv = document.createElement("div");
halloweenDiv.className = "halloween";
// pick a random halloween symbol
const imageSrc = images[Math.floor(Math.random() * images.length)];
const img = document.createElement("img");
img.src = imageSrc;
halloweenDiv.appendChild(img);
// set random horizontal position, animation delay and size(uncomment lines to enable)
const randomLeft = Math.random() * 100; // position (0% to 100%)
const randomAnimationDelay = Math.random() * 10; // delay (0s to 10s)
const randomAnimationDelay2 = Math.random() * 3; // delay (0s to 3s)
// apply styles
halloweenDiv.style.left = `${randomLeft}%`;
halloweenDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
// add the halloween to the container
halloweenContainer.appendChild(halloweenDiv);
}
console.log('Random halloween symbols added');
}
// create halloween objects
function createHalloween() {
const container = document.querySelector('.halloween-container') || document.createElement("div");
@@ -77,44 +112,6 @@ function createHalloween() {
}
}
function addRandomSymbols(count) {
const halloweenContainer = document.querySelector('.halloween-container'); // get the halloween container
if (!halloweenContainer) return; // exit if halloween container is not found
console.log('Adding random halloween symbols');
for (let i = 0; i < count; i++) {
// create a new halloween elements
const halloweenDiv = document.createElement("div");
halloweenDiv.className = "halloween";
// pick a random halloween symbol
const imageSrc = images[Math.floor(Math.random() * images.length)];
const img = document.createElement("img");
img.src = imageSrc;
halloweenDiv.appendChild(img);
// set random horizontal position, animation delay and size(uncomment lines to enable)
const randomLeft = Math.random() * 100; // position (0% to 100%)
//const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size
const randomAnimationDelay = Math.random() * 10; // delay (0s to 10s)
const randomAnimationDelay2 = Math.random() * 3; // delay (0s to 3s)
// apply styles
halloweenDiv.style.left = `${randomLeft}%`;
halloweenDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
// add the halloween to the container
halloweenContainer.appendChild(halloweenDiv);
}
console.log('Random halloween symbols added');
}
// initialize halloween after the DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
if (!halloween) return; // exit if halloween is disabled