Error Message Simulator
About this app
Simulate error messages with different severity levels
Error Message Simulator Error Message Simulator Click the buttons below to simulate error messages with different severity levels: Show Error Show Error with Delay Show Error Multiple Times
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Error Message Simulator</title>
<meta name="description" content="Simulate error messages with different severity levels">
<meta name="keywords" content="error message, simulator, severity">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
const errorLevels = [
{ level: "success", icon: "fa-check-circle" },
{ level: "info", icon: "fa-info-circle" },
{ level: "warning", icon: "fa-exclamation-circle" },
{ level: "danger", icon: "fa-times-circle" }
];
const errorMessages = [
"Success! Your request has been processed.",
"Information: Please note the following details.",
"Warning: This action may have unintended consequences.",
"Error: An unexpected error occurred."
];
const getRandomError = () => {
const randomLevel = errorLevels[Math.floor(Math.random() * errorLevels.length)];
const randomMessage = errorMessages[Math.floor(Math.random() * errorMessages.length)];
return {
level: randomLevel.level,
icon: randomLevel.icon,
message: randomMessage
};
};
const displayError = () => {
const error = getRandomError();
const errorContainer = document.createElement("div");
errorContainer.classList.add("alert", `alert-${error.level}`, "mt-3", "p-3", "d-flex", "align-items-center");
const icon = document.createElement("i");
icon.classList.add("fa", error.icon, "me-3");
const message = document.createElement("span");
message.textContent = error.message;
errorContainer.appendChild(icon);
errorContainer.appendChild(message);
const mainContainer = document.getElementById("main-container");
mainContainer.appendChild(errorContainer);
};
const clearErrors = () => {
const mainContainer = document.getElementById("main-container");
mainContainer.innerHTML = "";
};
const showError = () => {
clearErrors();
displayError();
};
const showErrorWithDelay = () => {
clearErrors();
setTimeout(displayError, 2000);
};
const showErrorMultipleTimes = () => {
clearErrors();
for (let i = 0; i < 5; i++) {
setTimeout(displayError, i * 1000);
}
};
const btnShowError = document.getElementById("btn-show-error");
btnShowError.addEventListener("click", showError);
const btnShowErrorWithDelay = document.getElementById("btn-show-error-with-delay");
btnShowErrorWithDelay.addEventListener("click", showErrorWithDelay);
const btnShowErrorMultipleTimes = document.getElementById("btn-show-error-multiple-times");
btnShowErrorMultipleTimes.addEventListener("click", showErrorMultipleTimes);
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background-color: #f8f9fa;
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.alert {
border-radius: 8px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Error Message Simulator</h1>
<p>Click the buttons below to simulate error messages with different severity levels:</p>
<button id="btn-show-error" class="btn btn-primary">Show Error</button>
<button id="btn-show-error-with-delay" class="btn btn-primary">Show Error with Delay</button>
<button id="btn-show-error-multiple-times" class="btn btn-primary">Show Error Multiple Times</button>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!