Ready to unleash your inner tech magician and celebrate the arrival of 2024 in style? Buckle up, fellow code enthusiasts, because this blog’s about to show you how to build a breathtaking “Happy New Year 2024” webpage with the power of HTML, CSS, and JavaScript!
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
Demo
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Happy New Year 2024 using HTML CSS and JavaScript - Coding Torque</title>
</head>
<body>
<!-- Further code here -->
<script src="script.js"></script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Happy New Year 2024 using HTML CSS and JavaScript - Coding Torque</title>
</head>
<body>
<!-- Further code here -->
<script src="script.js"></script>
</body>
</html>
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS --> <link rel="stylesheet" href="style.css"> <title>Happy New Year 2024 using HTML CSS and JavaScript - Coding Torque</title> </head> <body> <!-- Further code here --> <script src="script.js"></script> </body> </html>
Paste the below code in your <body>
tag.
<div class="bg"></div>
<main class="new-year-body">
<h1 class="new-year">Happy New Year</h1>
<p class="year">2024</p>
<button class="btn">Click Here!</button>
</main>
<div class="bg"></div>
<main class="new-year-body">
<h1 class="new-year">Happy New Year</h1>
<p class="year">2024</p>
<button class="btn">Click Here!</button>
</main>
<div class="bg"></div> <main class="new-year-body"> <h1 class="new-year">Happy New Year</h1> <p class="year">2024</p> <button class="btn">Click Here!</button> </main>
CSS Code
Create a file style.css and paste the code below.
@import url("https://fonts.googleapis.com/css2?family=Neonderthaw&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Megrim&display=swap");
body {
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: url("https://images.unsplash.com/photo-1524334228333-0f6db392f8a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80")
no-repeat center center;
background-size: cover;
overflow: hidden;
}
.new-year-body {
text-align: center;
color: white;
text-transform: uppercase;
}
.new-year {
font-size: 5rem;
letter-spacing: 5px;
margin-bottom: 0;
text-shadow: 0 0 25px white, 0 0 50px white, 0 0 100px white;
font-family: "Megrim", cursive, sans-serif;
}
.year {
margin: 0;
font-size: 8rem;
letter-spacing: 10px;
font-family: "Neonderthaw", "Poiret One", cursive;
text-shadow: 0 0 25px white, 0 0 50px white, 0 0 100px white;
}
.btn {
margin-top: 4rem;
width: 8rem;
height: 8rem;
border-radius: 50%;
font-size: 1.5rem;
color: #0c0f0a;
padding: 1rem;
font-family: "Allerta Stencil", sans-serif;
border: none;
box-shadow: 0 0 25px white, 0 0 50px white, 0 0 100px white;
outline: 4px solid white;
outline-offset: 10px;
}
.btn:hover {
outline-offset: 4px;
}
.snow {
position: absolute;
top: -10%;
border-radius: 50%;
background-color: white;
box-shadow: 0 0 0px #fff, 0 0 50px #fff;
}
.snowAnimation1 {
animation: snowFall1 linear infinite;
}
.snowAnimation2 {
animation: snowFall2 linear infinite;
}
.snowAnimation3 {
animation: snowFall3 linear infinite;
}
.snowAnimation4 {
animation: snowFall4 linear infinite;
}
@keyframes snowFall1 {
0% {
transform: translate(0vw, 0vh);
}
100% {
transform: translate(50vw, 150vh);
}
}
@keyframes snowFall2 {
0% {
transform: translate(-10vw, -10vh);
}
100% {
transform: translate(60vw, 150vh);
}
}
@keyframes snowFall3 {
0% {
transform: translate(10vw, 0vh);
}
100% {
transform: translate(40vw, 150vh);
}
}
@keyframes snowFall4 {
0% {
transform: translate(0vw, 0vh);
}
100% {
transform: translate(40vw, 150vh);
}
}
.white {
text-shadow: 0 0 25px #fff, 0 0 50px #fff, 0 0 100px #fff;
}
.btn-white {
box-shadow: 0 0 25px #fff, 0 0 50px #fff, 0 0 100px #fff;
}
.snow-white {
box-shadow: 0 0 0px #fff, 0 0 50px #fff;
}
.green {
text-shadow: 0 0 5px #1fd224, 0 0 25px #1fd224, 0 0 50px #1fd224,
0 0 100px #1fd224, 0 0 200px #1fd224;
}
.btn-green {
box-shadow: 0 0 5px #1fd224, 0 0 25px #1fd224, 0 0 50px #1fd224,
0 0 100px #1fd224, 0 0 200px #1fd224;
}
.snow-green {
box-shadow: 0 0 20px #1fd224, 0 0 50px #1fd224;
}
.orange {
text-shadow: 0 0 5px #ffaa01, 0 0 25px #ffaa01, 0 0 50px #ffaa01,
0 0 100px #ffaa01, 0 0 200px #ffaa01;
}
.btn-orange {
box-shadow: 0 0 5px #ffaa01, 0 0 25px #ffaa01, 0 0 50px #ffaa01,
0 0 100px #ffaa01, 0 0 200px #ffaa01;
}
.snow-orange {
box-shadow: 0 0 20px #ffaa01, 0 0 50px #ffaa01;
}
.pink {
text-shadow: 0 0 5px #ff00aa, 0 0 25px #ff00aa, 0 0 50px #ff00aa,
0 0 100px #ff00aa, 0 0 200px #ff00aa;
}
.btn-pink {
box-shadow: 0 0 5px #ff00aa, 0 0 25px #ff00aa, 0 0 50px #ff00aa,
0 0 100px #ff00aa, 0 0 200px #ff00aa;
}
.snow-pink {
box-shadow: 0 0 20px #ff00aa, 0 0 50px #ff00aa;
}
.violet {
text-shadow: 0 0 5px #aa00ff, 0 0 25px #aa00ff, 0 0 50px #aa00ff,
0 0 100px #aa00ff, 0 0 200px #aa00ff;
}
.btn-violet {
box-shadow: 0 0 5px #aa00ff, 0 0 25px #aa00ff, 0 0 50px #aa00ff,
0 0 100px #aa00ff, 0 0 200px #aa00ff;
}
.snow-violet {
box-shadow: 0 0 20px #aa00ff, 0 0 50px #aa00ff;
}
.blue {
text-shadow: 0 0 5px #00aaff, 0 0 25px #00aaff, 0 0 50px #00aaff,
0 0 100px #00aaff, 0 0 200px #00aaff;
}
.btn-blue {
box-shadow: 0 0 5px #00aaff, 0 0 25px #00aaff, 0 0 50px #00aaff,
0 0 100px #00aaff, 0 0 200px #00aaff;
}
.snow-blue {
box-shadow: 0 0 20px #00aaff, 0 0 50px #00aaff;
}
.red {
text-shadow: 0 0 5px #f00, 0 0 25px #f00, 0 0 50px #f00, 0 0 100px #f00,
0 0 200px #f00;
}
.btn-red {
box-shadow: 0 0 5px #f00, 0 0 25px #f00, 0 0 50px #f00, 0 0 100px #f00,
0 0 200px #f00;
}
.snow-red {
box-shadow: 0 0 20px #f00, 0 0 50px #f00;
}
.yellow {
text-shadow: 0 0 5px #ffea00, 0 0 25px #ffea00, 0 0 50px #ffea00,
0 0 100px #ffea00, 0 0 200px #ffea00;
}
.btn-yellow {
box-shadow: 0 0 5px #ffea00, 0 0 25px #ffea00, 0 0 50px #ffea00,
0 0 100px #ffea00, 0 0 200px #ffea00;
}
.snow-yellow {
box-shadow: 0 0 20px #ffea00, 0 0 50px #ffea00;
}
@import url("https://fonts.googleapis.com/css2?family=Neonderthaw&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Megrim&display=swap");
body {
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: url("https://images.unsplash.com/photo-1524334228333-0f6db392f8a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80")
no-repeat center center;
background-size: cover;
overflow: hidden;
}
.new-year-body {
text-align: center;
color: white;
text-transform: uppercase;
}
.new-year {
font-size: 5rem;
letter-spacing: 5px;
margin-bottom: 0;
text-shadow: 0 0 25px white, 0 0 50px white, 0 0 100px white;
font-family: "Megrim", cursive, sans-serif;
}
.year {
margin: 0;
font-size: 8rem;
letter-spacing: 10px;
font-family: "Neonderthaw", "Poiret One", cursive;
text-shadow: 0 0 25px white, 0 0 50px white, 0 0 100px white;
}
.btn {
margin-top: 4rem;
width: 8rem;
height: 8rem;
border-radius: 50%;
font-size: 1.5rem;
color: #0c0f0a;
padding: 1rem;
font-family: "Allerta Stencil", sans-serif;
border: none;
box-shadow: 0 0 25px white, 0 0 50px white, 0 0 100px white;
outline: 4px solid white;
outline-offset: 10px;
}
.btn:hover {
outline-offset: 4px;
}
.snow {
position: absolute;
top: -10%;
border-radius: 50%;
background-color: white;
box-shadow: 0 0 0px #fff, 0 0 50px #fff;
}
.snowAnimation1 {
animation: snowFall1 linear infinite;
}
.snowAnimation2 {
animation: snowFall2 linear infinite;
}
.snowAnimation3 {
animation: snowFall3 linear infinite;
}
.snowAnimation4 {
animation: snowFall4 linear infinite;
}
@keyframes snowFall1 {
0% {
transform: translate(0vw, 0vh);
}
100% {
transform: translate(50vw, 150vh);
}
}
@keyframes snowFall2 {
0% {
transform: translate(-10vw, -10vh);
}
100% {
transform: translate(60vw, 150vh);
}
}
@keyframes snowFall3 {
0% {
transform: translate(10vw, 0vh);
}
100% {
transform: translate(40vw, 150vh);
}
}
@keyframes snowFall4 {
0% {
transform: translate(0vw, 0vh);
}
100% {
transform: translate(40vw, 150vh);
}
}
.white {
text-shadow: 0 0 25px #fff, 0 0 50px #fff, 0 0 100px #fff;
}
.btn-white {
box-shadow: 0 0 25px #fff, 0 0 50px #fff, 0 0 100px #fff;
}
.snow-white {
box-shadow: 0 0 0px #fff, 0 0 50px #fff;
}
.green {
text-shadow: 0 0 5px #1fd224, 0 0 25px #1fd224, 0 0 50px #1fd224,
0 0 100px #1fd224, 0 0 200px #1fd224;
}
.btn-green {
box-shadow: 0 0 5px #1fd224, 0 0 25px #1fd224, 0 0 50px #1fd224,
0 0 100px #1fd224, 0 0 200px #1fd224;
}
.snow-green {
box-shadow: 0 0 20px #1fd224, 0 0 50px #1fd224;
}
.orange {
text-shadow: 0 0 5px #ffaa01, 0 0 25px #ffaa01, 0 0 50px #ffaa01,
0 0 100px #ffaa01, 0 0 200px #ffaa01;
}
.btn-orange {
box-shadow: 0 0 5px #ffaa01, 0 0 25px #ffaa01, 0 0 50px #ffaa01,
0 0 100px #ffaa01, 0 0 200px #ffaa01;
}
.snow-orange {
box-shadow: 0 0 20px #ffaa01, 0 0 50px #ffaa01;
}
.pink {
text-shadow: 0 0 5px #ff00aa, 0 0 25px #ff00aa, 0 0 50px #ff00aa,
0 0 100px #ff00aa, 0 0 200px #ff00aa;
}
.btn-pink {
box-shadow: 0 0 5px #ff00aa, 0 0 25px #ff00aa, 0 0 50px #ff00aa,
0 0 100px #ff00aa, 0 0 200px #ff00aa;
}
.snow-pink {
box-shadow: 0 0 20px #ff00aa, 0 0 50px #ff00aa;
}
.violet {
text-shadow: 0 0 5px #aa00ff, 0 0 25px #aa00ff, 0 0 50px #aa00ff,
0 0 100px #aa00ff, 0 0 200px #aa00ff;
}
.btn-violet {
box-shadow: 0 0 5px #aa00ff, 0 0 25px #aa00ff, 0 0 50px #aa00ff,
0 0 100px #aa00ff, 0 0 200px #aa00ff;
}
.snow-violet {
box-shadow: 0 0 20px #aa00ff, 0 0 50px #aa00ff;
}
.blue {
text-shadow: 0 0 5px #00aaff, 0 0 25px #00aaff, 0 0 50px #00aaff,
0 0 100px #00aaff, 0 0 200px #00aaff;
}
.btn-blue {
box-shadow: 0 0 5px #00aaff, 0 0 25px #00aaff, 0 0 50px #00aaff,
0 0 100px #00aaff, 0 0 200px #00aaff;
}
.snow-blue {
box-shadow: 0 0 20px #00aaff, 0 0 50px #00aaff;
}
.red {
text-shadow: 0 0 5px #f00, 0 0 25px #f00, 0 0 50px #f00, 0 0 100px #f00,
0 0 200px #f00;
}
.btn-red {
box-shadow: 0 0 5px #f00, 0 0 25px #f00, 0 0 50px #f00, 0 0 100px #f00,
0 0 200px #f00;
}
.snow-red {
box-shadow: 0 0 20px #f00, 0 0 50px #f00;
}
.yellow {
text-shadow: 0 0 5px #ffea00, 0 0 25px #ffea00, 0 0 50px #ffea00,
0 0 100px #ffea00, 0 0 200px #ffea00;
}
.btn-yellow {
box-shadow: 0 0 5px #ffea00, 0 0 25px #ffea00, 0 0 50px #ffea00,
0 0 100px #ffea00, 0 0 200px #ffea00;
}
.snow-yellow {
box-shadow: 0 0 20px #ffea00, 0 0 50px #ffea00;
}
@import url("https://fonts.googleapis.com/css2?family=Neonderthaw&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Megrim&display=swap"); body { height: 100vh; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; background: url("https://images.unsplash.com/photo-1524334228333-0f6db392f8a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80") no-repeat center center; background-size: cover; overflow: hidden; } .new-year-body { text-align: center; color: white; text-transform: uppercase; } .new-year { font-size: 5rem; letter-spacing: 5px; margin-bottom: 0; text-shadow: 0 0 25px white, 0 0 50px white, 0 0 100px white; font-family: "Megrim", cursive, sans-serif; } .year { margin: 0; font-size: 8rem; letter-spacing: 10px; font-family: "Neonderthaw", "Poiret One", cursive; text-shadow: 0 0 25px white, 0 0 50px white, 0 0 100px white; } .btn { margin-top: 4rem; width: 8rem; height: 8rem; border-radius: 50%; font-size: 1.5rem; color: #0c0f0a; padding: 1rem; font-family: "Allerta Stencil", sans-serif; border: none; box-shadow: 0 0 25px white, 0 0 50px white, 0 0 100px white; outline: 4px solid white; outline-offset: 10px; } .btn:hover { outline-offset: 4px; } .snow { position: absolute; top: -10%; border-radius: 50%; background-color: white; box-shadow: 0 0 0px #fff, 0 0 50px #fff; } .snowAnimation1 { animation: snowFall1 linear infinite; } .snowAnimation2 { animation: snowFall2 linear infinite; } .snowAnimation3 { animation: snowFall3 linear infinite; } .snowAnimation4 { animation: snowFall4 linear infinite; } @keyframes snowFall1 { 0% { transform: translate(0vw, 0vh); } 100% { transform: translate(50vw, 150vh); } } @keyframes snowFall2 { 0% { transform: translate(-10vw, -10vh); } 100% { transform: translate(60vw, 150vh); } } @keyframes snowFall3 { 0% { transform: translate(10vw, 0vh); } 100% { transform: translate(40vw, 150vh); } } @keyframes snowFall4 { 0% { transform: translate(0vw, 0vh); } 100% { transform: translate(40vw, 150vh); } } .white { text-shadow: 0 0 25px #fff, 0 0 50px #fff, 0 0 100px #fff; } .btn-white { box-shadow: 0 0 25px #fff, 0 0 50px #fff, 0 0 100px #fff; } .snow-white { box-shadow: 0 0 0px #fff, 0 0 50px #fff; } .green { text-shadow: 0 0 5px #1fd224, 0 0 25px #1fd224, 0 0 50px #1fd224, 0 0 100px #1fd224, 0 0 200px #1fd224; } .btn-green { box-shadow: 0 0 5px #1fd224, 0 0 25px #1fd224, 0 0 50px #1fd224, 0 0 100px #1fd224, 0 0 200px #1fd224; } .snow-green { box-shadow: 0 0 20px #1fd224, 0 0 50px #1fd224; } .orange { text-shadow: 0 0 5px #ffaa01, 0 0 25px #ffaa01, 0 0 50px #ffaa01, 0 0 100px #ffaa01, 0 0 200px #ffaa01; } .btn-orange { box-shadow: 0 0 5px #ffaa01, 0 0 25px #ffaa01, 0 0 50px #ffaa01, 0 0 100px #ffaa01, 0 0 200px #ffaa01; } .snow-orange { box-shadow: 0 0 20px #ffaa01, 0 0 50px #ffaa01; } .pink { text-shadow: 0 0 5px #ff00aa, 0 0 25px #ff00aa, 0 0 50px #ff00aa, 0 0 100px #ff00aa, 0 0 200px #ff00aa; } .btn-pink { box-shadow: 0 0 5px #ff00aa, 0 0 25px #ff00aa, 0 0 50px #ff00aa, 0 0 100px #ff00aa, 0 0 200px #ff00aa; } .snow-pink { box-shadow: 0 0 20px #ff00aa, 0 0 50px #ff00aa; } .violet { text-shadow: 0 0 5px #aa00ff, 0 0 25px #aa00ff, 0 0 50px #aa00ff, 0 0 100px #aa00ff, 0 0 200px #aa00ff; } .btn-violet { box-shadow: 0 0 5px #aa00ff, 0 0 25px #aa00ff, 0 0 50px #aa00ff, 0 0 100px #aa00ff, 0 0 200px #aa00ff; } .snow-violet { box-shadow: 0 0 20px #aa00ff, 0 0 50px #aa00ff; } .blue { text-shadow: 0 0 5px #00aaff, 0 0 25px #00aaff, 0 0 50px #00aaff, 0 0 100px #00aaff, 0 0 200px #00aaff; } .btn-blue { box-shadow: 0 0 5px #00aaff, 0 0 25px #00aaff, 0 0 50px #00aaff, 0 0 100px #00aaff, 0 0 200px #00aaff; } .snow-blue { box-shadow: 0 0 20px #00aaff, 0 0 50px #00aaff; } .red { text-shadow: 0 0 5px #f00, 0 0 25px #f00, 0 0 50px #f00, 0 0 100px #f00, 0 0 200px #f00; } .btn-red { box-shadow: 0 0 5px #f00, 0 0 25px #f00, 0 0 50px #f00, 0 0 100px #f00, 0 0 200px #f00; } .snow-red { box-shadow: 0 0 20px #f00, 0 0 50px #f00; } .yellow { text-shadow: 0 0 5px #ffea00, 0 0 25px #ffea00, 0 0 50px #ffea00, 0 0 100px #ffea00, 0 0 200px #ffea00; } .btn-yellow { box-shadow: 0 0 5px #ffea00, 0 0 25px #ffea00, 0 0 50px #ffea00, 0 0 100px #ffea00, 0 0 200px #ffea00; } .snow-yellow { box-shadow: 0 0 20px #ffea00, 0 0 50px #ffea00; }
JavaScript Code
Create a file script.js and paste the code below.
const snowFall = () => {
const bg = document.querySelector(".bg");
for (let i = 0; i < 300; i++) {
const snow = document.createElement("span");
snow.classList.add("snow");
if (i % 4 === 0) {
snow.classList.add("snowAnimation1");
} else if (i % 4 === 1) {
snow.classList.add("snowAnimation2");
} else if (i % 4 === 2) {
snow.classList.add("snowAnimation3");
} else {
snow.classList.add("snowAnimation4");
}
const aNumber = -50 + randomNumber(150);
const timeDelay = randomNumber(10);
const animDuration = 5 + randomNumber(10) + Math.random() + 0.2;
const snowOpacity = randomNumber(10) * 0.1;
const heightWidth = randomNumber(11) + 5;
snow.style.width = `${heightWidth}px`;
snow.style.height = `${heightWidth}px`;
snow.style.left = `${aNumber}%`;
snow.style.animationDelay = `${timeDelay}s`;
snow.style.animationDuration = `${animDuration}s`;
snow.style.opacity = `${snowOpacity}`;
bg.appendChild(snow);
}
};
const randomNumber = (limit) => {
return Math.floor(Math.random() * limit);
};
snowFall();
const textShadowColor = [
"white",
"green",
"orange",
"pink",
"violet",
"blue",
"red",
"yellow",
];
const color = [
"#0c0f0a",
"#1fd224",
"#ffaa01",
"#ff00aa",
"#aa00ff",
"#00aaff",
"#f00",
"#ffea00",
];
let count = 1;
const glowingText = (count) => {
const btn = document.querySelector(".btn");
const newYear = document.querySelector(".new-year");
const year = document.querySelector(".year");
const snow = document.querySelectorAll(".snow");
btn.addEventListener("click", () => {
if (count !== 0) {
newYear.classList.remove(textShadowColor[count - 1]);
year.classList.remove(textShadowColor[count - 1]);
btn.classList.remove(`btn-${textShadowColor[count - 1]}`);
snow.forEach((e) => {
e.classList.remove(`snow-${textShadowColor[count - 1]}`);
});
}
if (count === textShadowColor.length) {
count = 0;
}
newYear.classList.add(textShadowColor[count]);
year.classList.add(textShadowColor[count]);
btn.classList.add(`btn-${textShadowColor[count]}`);
snow.forEach((e) => {
e.classList.add(`snow-${textShadowColor[count]}`);
});
btn.innerHTML = "Click Again!";
btn.style.color = `${color[count]}`;
count++;
});
};
glowingText(count);
const snowFall = () => {
const bg = document.querySelector(".bg");
for (let i = 0; i < 300; i++) {
const snow = document.createElement("span");
snow.classList.add("snow");
if (i % 4 === 0) {
snow.classList.add("snowAnimation1");
} else if (i % 4 === 1) {
snow.classList.add("snowAnimation2");
} else if (i % 4 === 2) {
snow.classList.add("snowAnimation3");
} else {
snow.classList.add("snowAnimation4");
}
const aNumber = -50 + randomNumber(150);
const timeDelay = randomNumber(10);
const animDuration = 5 + randomNumber(10) + Math.random() + 0.2;
const snowOpacity = randomNumber(10) * 0.1;
const heightWidth = randomNumber(11) + 5;
snow.style.width = `${heightWidth}px`;
snow.style.height = `${heightWidth}px`;
snow.style.left = `${aNumber}%`;
snow.style.animationDelay = `${timeDelay}s`;
snow.style.animationDuration = `${animDuration}s`;
snow.style.opacity = `${snowOpacity}`;
bg.appendChild(snow);
}
};
const randomNumber = (limit) => {
return Math.floor(Math.random() * limit);
};
snowFall();
const textShadowColor = [
"white",
"green",
"orange",
"pink",
"violet",
"blue",
"red",
"yellow",
];
const color = [
"#0c0f0a",
"#1fd224",
"#ffaa01",
"#ff00aa",
"#aa00ff",
"#00aaff",
"#f00",
"#ffea00",
];
let count = 1;
const glowingText = (count) => {
const btn = document.querySelector(".btn");
const newYear = document.querySelector(".new-year");
const year = document.querySelector(".year");
const snow = document.querySelectorAll(".snow");
btn.addEventListener("click", () => {
if (count !== 0) {
newYear.classList.remove(textShadowColor[count - 1]);
year.classList.remove(textShadowColor[count - 1]);
btn.classList.remove(`btn-${textShadowColor[count - 1]}`);
snow.forEach((e) => {
e.classList.remove(`snow-${textShadowColor[count - 1]}`);
});
}
if (count === textShadowColor.length) {
count = 0;
}
newYear.classList.add(textShadowColor[count]);
year.classList.add(textShadowColor[count]);
btn.classList.add(`btn-${textShadowColor[count]}`);
snow.forEach((e) => {
e.classList.add(`snow-${textShadowColor[count]}`);
});
btn.innerHTML = "Click Again!";
btn.style.color = `${color[count]}`;
count++;
});
};
glowingText(count);
const snowFall = () => { const bg = document.querySelector(".bg"); for (let i = 0; i < 300; i++) { const snow = document.createElement("span"); snow.classList.add("snow"); if (i % 4 === 0) { snow.classList.add("snowAnimation1"); } else if (i % 4 === 1) { snow.classList.add("snowAnimation2"); } else if (i % 4 === 2) { snow.classList.add("snowAnimation3"); } else { snow.classList.add("snowAnimation4"); } const aNumber = -50 + randomNumber(150); const timeDelay = randomNumber(10); const animDuration = 5 + randomNumber(10) + Math.random() + 0.2; const snowOpacity = randomNumber(10) * 0.1; const heightWidth = randomNumber(11) + 5; snow.style.width = `${heightWidth}px`; snow.style.height = `${heightWidth}px`; snow.style.left = `${aNumber}%`; snow.style.animationDelay = `${timeDelay}s`; snow.style.animationDuration = `${animDuration}s`; snow.style.opacity = `${snowOpacity}`; bg.appendChild(snow); } }; const randomNumber = (limit) => { return Math.floor(Math.random() * limit); }; snowFall(); const textShadowColor = [ "white", "green", "orange", "pink", "violet", "blue", "red", "yellow", ]; const color = [ "#0c0f0a", "#1fd224", "#ffaa01", "#ff00aa", "#aa00ff", "#00aaff", "#f00", "#ffea00", ]; let count = 1; const glowingText = (count) => { const btn = document.querySelector(".btn"); const newYear = document.querySelector(".new-year"); const year = document.querySelector(".year"); const snow = document.querySelectorAll(".snow"); btn.addEventListener("click", () => { if (count !== 0) { newYear.classList.remove(textShadowColor[count - 1]); year.classList.remove(textShadowColor[count - 1]); btn.classList.remove(`btn-${textShadowColor[count - 1]}`); snow.forEach((e) => { e.classList.remove(`snow-${textShadowColor[count - 1]}`); }); } if (count === textShadowColor.length) { count = 0; } newYear.classList.add(textShadowColor[count]); year.classList.add(textShadowColor[count]); btn.classList.add(`btn-${textShadowColor[count]}`); snow.forEach((e) => { e.classList.add(`snow-${textShadowColor[count]}`); }); btn.innerHTML = "Click Again!"; btn.style.color = `${color[count]}`; count++; }); }; glowingText(count);
Final Output

Written by: Piyush Patil
Code Credits: https://codepen.io/tin-fung-hk/pen/rNpEPpM
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖