working

hearts.js

@@ -41,13 +41,9 @@ observer.observe(document.body, {
   attributes: true    // observe changes to attributes (e.g. class changes)
 });
 
-/*
-const images = [
-    "/web/seasonal/ghost_20x20.png",
-];*/
-const images = [
-  "./images/heart_20x20.png",
-];
+
+ // Array of hearts characters
+ const heartSymbols = ['❤️', '💕', '💞', '💓', '💗', '💖'];
 
 // create hearts objects
 function createHearts() {
@@ -59,15 +55,11 @@ function createHearts() {
     document.body.appendChild(container);
   }
 
-  // Array of snowflake characters
-  const snowflakeSymbols = ['❤️', '💕', '💞', '💓', '💗', '💖'];
-
   for (let i = 0; i < 12; i++) {
     const heartsDiv = document.createElement("div");
-    heartsDiv.className = "hearts";
+    heartsDiv.className = "heart";
+    heartsDiv.textContent = heartSymbols[i % heartSymbols.length];
 
-
-    heartsDiv.appendChild(img);
     container.appendChild(heartsDiv);
   }
 }
@@ -77,30 +69,26 @@ function addRandomSymbols(count) {
   const heartsContainer = document.querySelector('.hearts-container'); // get the hearts container
   if (!heartsContainer) return; // exit if hearts container is not found
 
-  console.log('Adding random hearts symbols');
-
+  console.log('Adding random heart symbols');
 
   for (let i = 0; i < count; i++) {
     // create a new hearts elements
     const heartsDiv = document.createElement("div");
-    heartsDiv.className = "hearts";
+    heartsDiv.className = "heart";
 
     // pick a random hearts symbol
-    const imageSrc = images[Math.floor(Math.random() * images.length)];
-    const img = document.createElement("img");
-    img.src = imageSrc;
-
-    heartsDiv.appendChild(img);
+    heartsDiv.textContent = heartSymbols[Math.floor(Math.random() * heartSymbols.length)];
 
 
     // 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() * 16; // delay (0s to 16s)
+    const randomAnimationDelay = Math.random() * 14; // delay (0s to 14s)
     const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
 
     // apply styles
     heartsDiv.style.left = `${randomLeft}%`;
+    //snowflake.style.fontSize = `${randomSize}em`; //uncomment to enable random size
     heartsDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
 
     // add the hearts to the container