Calculator Tools Calculator Tools
Create

JunyTony Logo Clicker

Sep 21, 2023

About this app

Click the JunyTony logo and see what happens!

JunyTony Logo Clicker

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>JunyTony Logo Clicker</title>
<meta name="description" content="Click the JunyTony logo and see what happens!">
<meta name="keywords" content="logo, clicker, JunyTony">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/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 {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.

// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
// Get the JunyTony logo element
const logo = document.getElementById("logo");

// Add a click event listener to the logo element
logo.addEventListener("click", function() {
// Change the background color of the body to a random color
const randomColor = getRandomColor();
document.body.style.backgroundColor = randomColor;
});
});

// Function to generate a random color
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
/* App CSS Goes Here */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}

#logo {
font-size: 48px;
color: #f1c40f;
cursor: pointer;
transition: transform 0.3s ease;
}

#logo:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div id="main-container" class="container">
<!-- App HTML Goes Here -->
<i id="logo" class="fa fa-star"></i>
</div>
</body>
</html>