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

init snowflakes via js

Browse Source
This commit is contained in:
MLH
2024-12-07 18:47:08 +01:00
parent bed9c109dc
commit 2f8f956987
2 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
add_to_index_html.html
View File

@ -1,16 +1,3 @@
<script src="seasonal/snowflakes.js"></script> <script src="seasonal/snowflakes.js"></script>
<link rel="stylesheet" href="seasonal/snowflakes.css"> <link rel="stylesheet" href="seasonal/snowflakes.css">
<div class="snowflakes" aria-hidden="true"> <div class="snowflakes"></div>
<div class="snowflake"> ❅ </div>
<div class="snowflake"> ❆ </div>
<div class="snowflake"> ❅ </div>
<div class="snowflake"> ❆ </div>
<div class="snowflake"> ❅ </div>
<div class="snowflake"> ❆ </div>
<div class="snowflake"> ❅ </div>
<div class="snowflake"> ❆ </div>
<div class="snowflake"> ❅ </div>
<div class="snowflake"> ❆ </div>
<div class="snowflake"> ❅ </div>
<div class="snowflake"> ❆ </div>
</div>

25
snowflakes.js
View File

@ -1,5 +1,6 @@
const snowflakes = true; // enable/disable snowflakes const snowflakes = true; // enable/disable snowflakes
const randomSnowflakes = true; // enable random Snowflakes const randomSnowflakes = true; // enable random Snowflakes
const randomSnowflakesMobile = false; // enable random Snowflakes on mobile devices
const enableColoredSnowflakes = true; // enable colored snowflakes on mobile devices const enableColoredSnowflakes = true; // enable colored snowflakes on mobile devices
const snowflakeCount = 25; // count of random extra snowflakes const snowflakeCount = 25; // count of random extra snowflakes
@ -45,7 +46,7 @@ observer.observe(document.body, {
function addRandomSnowflakes(count) { function addRandomSnowflakes(count) {
const snowflakeContainer = document.querySelector('.snowflakes'); // get the snowflake container const snowflakeContainer = document.querySelector('.snowflakes'); // get the snowflake container
if (!snowflakeContainer) return; // exit if snowflake container is not found if (!snowflakeContainer) return; // exit if snowflake container is not found
console.log('Adding random snowflakes'); console.log('Adding random snowflakes');
const snowflakeSymbols = ['❅', '❆']; // some snowflake symbols const snowflakeSymbols = ['❅', '❆']; // some snowflake symbols
@ -80,13 +81,31 @@ function addRandomSnowflakes(count) {
console.log('Random snowflakes added'); console.log('Random snowflakes added');
} }
// initialize standard snowflakes
function initSnowflakes() {
const snowflakesContainer = document.querySelector('.snowflakes');
// Array of snowflake characters
const snowflakeSymbols = ['❅', '❆'];
// create the 12 standard snowflakes
for (let i = 0; i < 12; i++) {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.textContent = snowflakeSymbols[i % 2]; // change between ❅ and ❆
snowflakesContainer.appendChild(snowflake);
}
}
// initialize snowflakes and add random snowflakes after the DOM is loaded // initialize snowflakes and add random snowflakes after the DOM is loaded
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
if (!snowflakes) return; // exit if snowflakes are disabled if (!snowflakes) return; // exit if snowflakes are disabled
initSnowflakes();
toggleSnowflakes(); toggleSnowflakes();
const screenWidth = window.innerWidth; // get the screen width to detect mobile devices const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
if (randomSnowflakes && screenWidth > 768) { // add random snowflakes only on larger screens if (randomSnowflakes && screenWidth > 768 && randomSnowflakesMobile) { // add random snowflakes only on larger screens, unless enabled for mobile devices
addRandomSnowflakes(snowflakeCount); addRandomSnowflakes(snowflakeCount);
} }
}); });