Calculator Tools Calculator Tools
Create

Monster Truck Upgrader

Sep 8, 2023

About this app

Upgrade your monster truck to go faster in this fun 2D mobile game.

Monster Truck Upgrader Monster Truck Upgrader Monster Truck Stats Speed: 0 mph Upgrades: 0 Upgrade Speed

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>Monster Truck Upgrader</title>
<meta name="description" content="Upgrade your monster truck to go faster in this fun 2D mobile game.">
<meta name="keywords" content="monster truck, game, upgrade, mobile, 2D">

<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() {
// Game variables
let speed = 0;
let upgrades = 0;

// Function to upgrade the monster truck speed
function upgradeSpeed() {
speed += 10;
upgrades++;

// Update the display
$("#speed").text(speed);
$("#upgrades").text(upgrades);
}

// Event listener for the upgrade button
$("#upgrade-btn").on("click", function() {
upgradeSpeed();
});
});

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

<style>
/* App CSS Goes Here */

body {
background-color: #f0f0f0;
font-family: 'Roboto', sans-serif;
}

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

h1 {
text-align: center;
margin-bottom: 20px;
}

.card {
padding: 20px;
margin-bottom: 20px;
background-color: #f9f9f9;
border-radius: 5px;
}

.card-title {
margin-bottom: 10px;
}

.btn {
display: block;
width: 100%;
padding: 10px;
text-align: center;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

.btn:hover {
background-color: #2980b9;
}
</style>
</head>

<body>
<div id="main-container" class="container">
<h1>Monster Truck Upgrader</h1>

<div class="card">
<h2 class="card-title">Monster Truck Stats</h2>
<p><strong>Speed:</strong> <span id="speed">0</span> mph</p>
<p><strong>Upgrades:</strong> <span id="upgrades">0</span></p>
</div>

<button id="upgrade-btn" class="btn">Upgrade Speed</button>
</div>
</body>

</html>