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:- connection.url property value in hibernate.cfg.xml for mysql - Java
- How to filter null values using Java 8 Stream API - Java
- What is the Default Admin user and Password for Jenkins - Linux
- How to see Storage Information on macOS Ventura - MacOS
- How to install Python 3.9 using brew on Mac - Python
- Simple Login Page using Bootstrap - Bootstrap
- How to change order of fields on new item form for SharePoint Online list - SharePoint
- [Fix] SharePoint: This embed code doesnt seem to work. We only support iframe based embeds - SharePoint