Calculator Tools Calculator Tools
Create

Pop It Eletrônico

Jan 4, 2024

About this app

Um Pop It Eletrônico quadrado colorido

Pop It Eletrônico

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>Pop It Eletrônico</title>
<meta name="description" content="Um Pop It Eletrônico quadrado colorido">
<meta name="keywords" content="Pop It, Eletrônico, Quadrado, Colorido">

<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.
document.addEventListener("DOMContentLoaded", function() {
// Get the element
var popIt = document.getElementById("pop-it");

// Add click event listener
popIt.addEventListener("click", function() {
// Change the background color to red
popIt.style.backgroundColor = "red";
});
});

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

<style>
/* App CSS Goes Here */
#pop-it {
width: 200px;
height: 200px;
background-color: blue;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
}

#pop-it:hover {
background-color: purple;
}

#pop-it:active {
transform: scale(0.9);
}

#pop-it.red {
background-color: red;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<!-- App HTML Goes Here -->
<div id="pop-it" class=""></div>
</div>
</body>
</html>