I was inspired by Excuse Goose which you can see below to generate my own version of this, which is a website where you can get an excuse, in this instance is it for not going to work, many of these cannot really be used, but its a bit of fun.
I therefore though I would generate my own, with a different theme based around Skeletor and excuses and this is what I can up with, a simple website with a "Generate Excuses" button where you will get an excuse/insult as below:
You can view my own version on https://excuses.a6n.co.uk
The code for this is very simple, this makes the main HTML page with the logic for the "Generate Excuse" button at the bottom of the script, the image is optional and can be removed if required.
Script : index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skeletor's Excuses</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Skeletor's Excuses</h1>
<div class="skeleton">
<img src="skeleton.png" alt="Skeleton Image">
</div>
<button id="generateExcuse">Generate Excuse</button>
<p id="excuseOutput"></p>
</div>
<script>
const excuses = [
"I'm surrounded by fools!",
"You muscle-bound buffoon!",
"Curse you, He-Man!",
"I’ll get you next time, He-Man!",
"I despise your presence!",
"I don’t have time for this!",
"You’re no match for Skeletor!",
"You miserable excuse for a warrior!",
"You pitiful excuse for a hero!",
"I am not in the mood for your nonsense!",
"It's not my fault that you're incompetent!",
"Why do I have to do everything myself?",
"If only I had better minions!",
"You're lucky I'm in a good mood today!",
"This is not over, He-Man!",
"I am surrounded by imbeciles!",
"You dare challenge Skeletor?",
"I should have known better than to trust you!",
"I'll be back, and stronger than ever!",
"How dare you defy the mighty Skeletor!",
"Silence, you fool!",
"I'll crush you like an insect!",
"This is all your fault, minions!",
"I would have succeeded if it weren’t for you meddling fools!",
"You’re nothing but a pathetic weakling!",
"Another failure because of your incompetence!",
"I’ll turn you into dust, He-Man!",
"You have failed me for the last time!",
"I am surrounded by nothing but incompetence!",
"You think you can defeat me? Think again!",
"I don’t have time for your petty concerns!",
"This is why I despise teamwork!",
"You will rue the day you crossed Skeletor!",
"How hard is it to follow simple orders?",
"I would have won if it weren’t for your stupidity!",
"Incompetence is the bane of my existence!",
"Your failure will not go unpunished!",
"I’ve had enough of your idiocy!",
"You’ll pay for this, He-Man!",
"I would succeed if I weren’t surrounded by fools!",
"Do you think this is over? It’s only the beginning!",
"This is just a minor setback!",
"You’ve only delayed the inevitable, He-Man!",
"My genius is wasted on the likes of you!",
"You’ve tested my patience for the last time!",
"I’ll destroy you and everything you care about!",
"You’re as useful as a broken sword!",
"How could you fail me yet again?",
"You’ll regret the day you defied Skeletor!",
"This is not the end, He-Man!"
];
document.getElementById('generateExcuse').addEventListener('click', function() {
const randomExcuse = excuses[Math.floor(Math.random() * excuses.length)];
document.getElementById('excuseOutput').textContent = randomExcuse;
});
</script>
</body>
</html>
Then you just need the CSS file for the formatting as below:
Script : Styles.css
body {
margin: 0;
padding: 0;
font-family: 'Creepster', cursive;
background-color: #000;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
max-width: 600px;
padding: 20px;
border: 2px solid #444;
background-color: #222;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
border-radius: 10px;
}
h1 {
font-size: 3em;
margin-bottom: 20px;
color: #f7e1a0;
text-shadow: 2px 2px 5px #000;
}
.skeleton img {
width: 200px;
margin-bottom: 20px;
}
button {
padding: 15px 30px;
font-size: 1.5em;
background-color: #f7e1a0;
border: none;
border-radius: 5px;
cursor: pointer;
color: #222;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: background-color 0.3s ease;
}
button:hover {
background-color: #e6d4a0;
}
#excuseOutput {
margin-top: 20px;
font-size: 1.5em;
color: #f7e1a0;
text-shadow: 1px 1px 3px #000;
min-height: 50px;
}