If you’re a fan of How I Met Your Mother (HIMYM), then you’re no stranger to the iconic “Slap Bet.” It’s one of the show’s funniest and longest-running gags, delivering both suspense and slapstick hilarity. Inspired by this legendary moment, I decided to create a clone of the Slap Countdown Timer using JavaScript, so now you can create your own personalized countdowns!
In Season 2 of HIMYM, the gang’s lovable antics led to a wager between Marshall and Barney. With Lily as the “Slap Bet Commissioner,” the stakes were set: the winner could slap the loser as hard as they wanted. But the twist? Barney’s hubris led to an unforgettable punishment: Marshall earned the right to five slaps delivered at any time, for eternity.
Cue the creation of SlapCountdown.com within the show, a website used by Marshall to count down to his next epic slap. This fictional site encapsulated the HIMYM spirit, blending humor with quirky traditions.
As a developer and a HIMYM fan, I wanted to pay tribute to the Slap Bet by recreating the countdown timer functionality. Using JavaScript, I built a custom Slap Countdown Timer clone that you can now use to set your own countdowns. It’s simple, customizable, and captures the suspense and fun of the original idea.
Here’s what makes it great:
HTML / JS Code
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slap Countdown</title>
<meta name="description" content="Slap Countdown">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="header">
<p>Slap Bet Countdown. Inspired by How I Met Your Mother.</p>
</div>
<table>
<tbody>
<tr>
<td class="digit">55</td>
<td></td>
<td class="digit">23</td>
<td>:</td>
<td class="digit">59</td>
<td>:</td>
<td class="digit" id="seconds">48</td>
</tr>
<tr>
<td class="text">DAYS</td>
<td></td>
<td class="text">HOURS</td>
<td></td>
<td class="text">MINUTES</td>
<td></td>
<td class="text">SECONDS</td>
</tr>
</tbody>
</table>
<script>
// Set an interval to call the `update_seconds` function every 1000 milliseconds (1 second)
setInterval(update_seconds, 1000);
// Function to update the seconds displayed in an element with ID "seconds"
function update_seconds() {
// Get the current value of the "seconds" element and convert it to an integer
var int_seconds = parseInt(document.getElementById("seconds").innerHTML, 10);
// Reset seconds to 60 if the current value is 0 or less
if (int_seconds <= 0) {
int_seconds = 60;
}
// Decrement the seconds value by 1
int_seconds = int_seconds - 1;
// Add a leading zero if the seconds value is less than 10 (to maintain a two-digit format)
if (int_seconds <= 9) {
var txt_seconds = "0" + int_seconds.toString();
} else {
// Convert the seconds value to a string for display
var txt_seconds = int_seconds.toString();
}
// Update the inner HTML of the "seconds" element with the formatted seconds value
document.getElementById("seconds").innerHTML = txt_seconds;
}
</script>
</body>
</html>CSS
@font-face {
font-family: "bebasneue_regular";
src: url(bebasneue_regular.woff) format("woff");
}
/**************************************** reset ****************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/****************************************** end reset *******************************************/
body, html {
background: #000;
color: red;
/*font-family: ds_digi, Arial, Sans Serif;*/
font-family: bebasneue_regular, Arial, Sans Serif;
font-size: 80px;
font-weight: normal;
text-align: center;
margin:0;
padding:0;
}
.header {
background-color: #222;
color: #666;
text-align: center;
width: 100%;
font-size: 17px;
margin: 0 auto;
padding: 0;
font-family: Arial;
}
table {
padding-top: 15%;
margin: 0 auto;
border-spacing: 30px 0px;
}
td {
line-height: 0.9em;
}
.digit {
font-family: Arial;
}
.text {
color: #fff;
font-size:0.6em;
}
@media screen and (max-width: 1000px) {
body, html {
font-size: 60px;
}
table {
padding-top: 20%;
}
}
@media screen and (max-width: 700px) {
body, html {
font-size: 40px;
}
table {
padding-top: 25%;
}
}Whether it’s for playful slap bets, event planning, or just for fun, this clone brings a slice of HIMYM magic into write a your life.
Example
| 55 | 23 | : | 59 | : | 48 | |
| DAYS | HOURS | MINUTES | SECONDS |
Beyond the laughs, the Slap Bet captures HIMYM’s magic: ordinary moments turned extraordinary. The suspense of each slap, coupled with Barney’s dramatic reactions, kept fans engaged across seasons. From Marshall’s gleeful delivery to the musical masterpiece “You Just Got Slapped,” the Slap Bet brought endless joy to viewers.
Now, thanks to this JavaScript-powered clone, you can relive HIMYM’s most iconic gag. Whether you’re recreating the Slap Bet or using the timer for another creative purpose, it’s a tool that combines nostalgia with practicality.
To try it out or use the code for your own projects.
How I Met Your Mother gave us countless laughs and unforgettable moments. The Slap Bet—and now this JavaScript countdown timer clone—reminds us of the joy in creating shared traditions with friends.
Here is the video of all slaps - Hope you enjoy it as much as i do!
Details on the slaps occurred in the following episodes on this page:
https://how-i-met-your-mother.fandom.com/wiki/The_Eight_Slaps
At Mossawir.com, we are committed to protecting the privacy of our clients and website visitors. This Privacy Policy outlines how I collect, use, and protect your personal information when you visit our website or engage with our services.
I collect the following types of information to provide better services to our clients:
I use the collected information to:
I do not sell or rent your personal information to third parties. Your information will only be shared when necessary to fulfill your project requirements or comply with legal obligations.
My website uses cookies to enhance your browsing experience. Cookies help us understand how you use our website and allow me to offer personalized content or services. You can control or disable cookies through your browser settings, but please note that some features of our website may not function properly if cookies are disabled.
I implement a variety of security measures to safeguard your personal and project-related information. While I strive to use commercially acceptable means to protect your data, no method of transmission over the internet is 100% secure. Therefore, we cannot guarantee its absolute security but work diligently to prevent unauthorized access.
I may use third-party tools or services to improve our website or deliver our services. These third parties may collect information about your interaction with my website. However, I ensure that any third-party services we use adhere to strict privacy and security standards.
You have the right to:
To exercise these rights, please contact me using the information provided below.
I may update this Privacy Policy from time to time to reflect changes in our practices or legal obligations. The updated policy will be posted on this page, and the effective date will be revised accordingly.
If you have any questions or concerns regarding this Privacy Policy or how we handle your data, please contact us at:
By using my website and services, you agree to the terms of this Privacy Policy.
I take client confidentiality very seriously and am committed to maintaining the privacy and security of all information shared during our project. Below are the key principles I adhere to:
Confidential Information
Any information you provide, including business details, design specifications, proprietary data, or any other sensitive material, will be treated as strictly confidential.
Non-Disclosure
I will not disclose, share, or use any confidential information for any purpose outside the scope of your project. Information shared will be used solely for the purpose of delivering the services you've hired me for.
Data Security
All files, assets, and credentials will be stored securely, ensuring that no unauthorized third parties can access your information. Upon project completion, sensitive data will be properly stored or destroyed, as per our agreement.
Third-Party Involvement
If third-party collaboration is required, I will ensure that any partners or subcontractors adhere to the same confidentiality standards.
Ownership of Work
All project-related files, code, and design materials developed during the project remain your intellectual property, and no elements will be reused or shared without your consent.
Post-Project Confidentiality
Even after the project is completed, all confidential information shared will continue to be protected.