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

working

Browse Source
This commit is contained in:
MLH
2024-12-20 23:47:18 +01:00
parent cfa47c21f2
commit ad38ba12ed
4 changed files with 19 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
add_to_index_html.html
View File

@ -1,3 +1,3 @@
<script src="/seasonals/halloween.js"></script>
<link rel="stylesheet" href="/seasonal/halloween.css">
<div class="halloween-container"></div>
<script src="/seasonals/hearts.js"></script>
<link rel="stylesheet" href="/seasonal/hearts.css">
<div class="hearts-container"></div>

4
hearts.css
View File

@ -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;
}

32
hearts.js
View File

@ -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

8
test-site.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halloween Display</title>
<title>Hearts Display</title>
<style>
body {
@ -14,9 +14,9 @@
</head>
<body>
<link rel="stylesheet" href="halloween.css">
<script src="halloween.js"></script>
<div class="halloween-container" aria-hidden="true"></div>
<link rel="stylesheet" href="hearts.css">
<script src="hearts.js"></script>
<div class="hearts-container" aria-hidden="true"></div>
</body>
</html>