We are just a week away from Halloween! and I am sure that the celebrations have already begun at your school or the workplace. If you run a website and want to quickly add some Halloween widgets to it, we are offering some of them for free!
Feel free to edit the code and customize it as per your needs.
Halloween Widget 1:
HTML:
<div id="countdown-widget">
<img id="h-img" width=160 height=160 src="https://code2care.org/c2c-img/shared/halloween.png?y=2023"
alt="Halloween Countdown!!">
<div id="heading">Halloween Countdown!</div>
<div id="countdown"></div>
</div>
CSS:
@import url('https://fonts.googleapis.com/css?family=Creepster');
#countdown-widget {
text-align: center;
padding: 20px;
text-align: center;
padding: 20px;
border: 5px solid #ff6600;
background: black;
border-radius: 12px;
width: 340px;
}
#h-img {
max-width: 180px;
height: auto;
}
#heading {
font-family: 'Creepster', cursive;
color: orange;
font-size: 34px;
}
#countdown {
font-family: 'Creepster', cursive;
color: orange;
margin-top:15px;
font-size: 26px;
}
JavaScript:
const d = new Date("October 31, 2023 00:00:00").getTime();
const i = setInterval(() => {
const c = new Date().getTime();
const r = d - c;
const [a, h, m, s] = [
r / (1000 * 60 * 60 * 24),
(r % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
(r % (1000 * 60 * 60)) / (1000 * 60),
(r % (1000 * 60)) / 1000
].map(Math.floor);
const e = document.getElementById("countdown");
e.innerHTML = `${a}d ${h}h ${m}m ${s}s`;
if (r < 0) {
clearInterval(i);
e.innerHTML = "Happy Halloween!";
}
}, 1000);
Demo:
Halloween Widget 2:
You can try the image "https://code2care.org/c2c-img/shared/trick-or-treat.png"
Demo:
Halloween Widget 3:
You can try the image "https://code2care.org/c2c-img/shared/happy-halloween.png"
Demo:
Facing issues? Have Questions? Post them here! I am happy to answer!
Rakesh (He/Him) has over 14+ years of experience in Web and Application development. He is the author of insightful How-To articles for Code2care.
Follow him on: X
You can also reach out to him via e-mail: rakesh@code2care.org
- How to create a circular Image using pure CSS Code
- Horizontally Center Align tag in HTML using CSS
- Add scroll to div element in HTML Css
- Change CSS Background Opacity with Examples
- How to make text bold using CSS
- How to place two div elements next to each other
- Vertically Center Text in a DIV Element
- align image at middle of div element
- Tailwind CSS Hello World Example
- How to make div or text in html unselectable using CSS
- Only Chessboard using HTML and CSS Code Example
- Simple CSS Grid Example
- How to set CSS background-Image Property
- CSS Background Opacity with Examples
- reCAPTCHA Implementation Tutorial
- List of 32 CSS cursors web developers must know about
- How to Vertically Center Align Text in a Div using CSS Code Example
- 10 Must Know CSS Border Styles with Examples
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- CSS: Apply opacity only for div background and not text
- Set Falling Show on Website for Christmas using Pure CSS Code
- How to make jsfiddle bootstrap ready
- Elegant CSS Box Shadows Ideas
- Responsive Web Design with CSS Media Queries: A Beginner's Tutorial [Updated for 2023]
- How to Center Align Image in Bootstrap
More Posts:- How to find Integer MAX and MIN Value in Java - Java
- Add Line Break (New Line) in Jupyter Notebook Markup Cell - Python
- How to Transpose a Square Matrix - Java Program - Java
- See actual SharePoint error exception modify web.config - SharePoint
- Mac: Sign in Required We cant upload or download your changes because your cached credentials have expired [Word Excel] - Windows
- 10 Beginners Commands for macOS Terminal Usage - MacOS
- Sort ls command by last modified date and time - Linux
- FileZilla Connection time out Failed to retrieve directory listing - FTP