diff --git a/add_to_index_html.html b/add_to_index_html.html
index 926ced3..300e86b 100644
--- a/add_to_index_html.html
+++ b/add_to_index_html.html
@@ -1,3 +1,3 @@
-
-
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/hearts.css b/hearts.css
index fee7ada..5800054 100644
--- a/hearts.css
+++ b/hearts.css
@@ -15,11 +15,11 @@
user-select: none;
cursor: default;
-webkit-animation-name: heart-fall, heart-shake;
- -webkit-animation-duration: 16s, 5s;
+ -webkit-animation-duration: 14s, 5s;
-webkit-animation-timing-function: linear, ease-in-out;
-webkit-animation-iteration-count: infinite, infinite;
animation-name: heart-fall, heart-shake;
- animation-duration: 10s, 5s;
+ animation-duration: 14s, 5s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
}
diff --git a/hearts.js b/hearts.js
index 59a8323..2310a3c 100644
--- a/hearts.js
+++ b/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
diff --git a/test-site.html b/test-site.html
index 779c8c2..6289c1a 100644
--- a/test-site.html
+++ b/test-site.html
@@ -3,7 +3,7 @@
- Halloween Display
+ Hearts Display