Pampers Swaddlers - Protect Against Blowouts
About this app
Pampers Swaddlers with ultra-protective blowout barrier guarantees your little one stays dry and happy. Never fear blowouts again!
Bugs Encountered - Debugging Fun Application Bug Encounter Simulation Press the Button for Bugs! Reveal Bugs!
Related apps
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>Bugs Encountered - Debugging Fun Application</title>
<meta name="description" content="A fun way to encounter bugs when the button is pressed. Let's debug together. Have fun with coding!">
<meta name="keywords" content="bugs, debugging, fun, errors, coding, programming, JavaScript, web app">
<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('new-message').innerHTML = "Experience the bugs when you press the button!";
setTimeout(() => {
const bounce = () => {
$("#info-box").fadeIn().slideDown().animate({top: '20px'}, 200).animate({top: '0px'}, 200, bounce);
};
bounce();
}, 1000);
});
// Creating a bug function to add simulation errors
function simulateError(message) {
throw new Error(message);
}
// function to reveal bugs
window.showBugs = function() {
document.getElementById('info-box').style.display = 'block';
// Simulate a bug
simulateError("Bug Encountered: Unexpected error!");
simulateError("Bug Encountered: Another bug just popped up!");
};
} catch (error) {
alert(error.message);
}
</script>
<style>
body {
background: linear-gradient(to right, #ffcccb, #add8e6);
font-family: 'Comic Sans MS', cursive, sans-serif;
color: #333;
}
h1, h2 {
text-align: center;
color: #ff4500;
}
#main-container {
padding: 30px;
margin-top: 50px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
}
#info-box {
display: none;
text-align: center;
padding: 20px;
margin-top: 20px;
border: 1px solid #ff4500;
border-radius: 10px;
background-color: #ffebcc;
}
.icon {
font-size: 50px;
color: #ff4500;
margin-top: 20px;
animation: shake 0.5s infinite;
display: flex;
justify-content: center;
}
@keyframes shake {
0% { transform: translate(0); }
25% { transform: translate(-2px, 0); }
50% { transform: translate(2px, 0); }
75% { transform: translate(-2px, 0); }
100% { transform: translate(0); }
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Bug Encounter Simulation</h1>
<h2>Press the Button for Bugs!</h2>
<div class="icon">
<i class="fas fa-bug"></i>
</div>
<div id="info-box">
<p id="new-message"></p>
</div>
<button class="btn btn-danger btn-lg" onclick="showBugs()">Reveal Bugs!</button>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!