Calculator Tools Calculator Tools
Create

Fun Colorful App

Jan 3, 2024

About this app

A fun and colorful app where you can like and subscribe.

Fun Colorful App Fun Colorful App Click on the blue button to like and on the red button to subscribe. Like Subscribe

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>Fun Colorful App</title>
<meta name="description" content="A fun and colorful app where you can like and subscribe.">
<meta name="keywords" content="fun, colorful, app, like, subscribe">

<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 {
// 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() {
// Function to handle the Like button click event
function likeButtonClick() {
alert("You liked the app!");
}

// Function to handle the Subscribe button click event
function subscribeButtonClick() {
window.location.href = "https://youtube.com/subscribe";
}

// Attach event listeners to the buttons
$("#like-button").on("click", likeButtonClick);
$("#subscribe-button").on("click", subscribeButtonClick);
});

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

<style>
/* App CSS Goes Here */
body {
background-color: #f5f5f5;
font-family: 'Arial', sans-serif;
}

.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
text-align: center;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
color: #333333;
}

.button {
display: inline-block;
padding: 10px 20px;
margin-top: 20px;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #ffffff;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.button-blue {
background-color: #2196f3;
}

.button-red {
background-color: #f44336;
}

.button-blue:hover {
background-color: #1976d2;
}

.button-red:hover {
background-color: #e53935;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Fun Colorful App</h1>
<p>Click on the blue button to like and on the red button to subscribe.</p>
<button id="like-button" class="button button-blue">Like</button>
<button id="subscribe-button" class="button button-red">Subscribe</button>
</div>
</body>
</html>