Calculator Tools Calculator Tools
Create

Machine Rental Price Calculator

Dec 31, 2023

About this app

Calculate the price of renting machines for different durations

Machine Rental Price Calculator Machine Rental Price Calculator Machine Monthly Price: Rental Duration: 1 Month 1 Year 2 Years Calculate

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>Machine Rental Price Calculator</title>
<meta name="description" content="Calculate the price of renting machines for different durations">
<meta name="keywords" content="machine rental, price calculator">

<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 machine price input
var machinePriceInput = document.getElementById("machine-price");

// Add event listener to calculate button
var calculateButton = document.getElementById("calculate-button");
calculateButton.addEventListener("click", function() {
// Get the selected duration
var durationSelect = document.getElementById("duration-select");
var duration = durationSelect.value;

// Calculate the rental price based on the duration
var machinePrice = parseInt(machinePriceInput.value);
var rentalPrice = 0;

if (duration === "1-month") {
rentalPrice = machinePrice;
} else if (duration === "1-year") {
rentalPrice = machinePrice * 12;
} else if (duration === "2-years") {
rentalPrice = machinePrice * 24;
}

// Display the rental price
var rentalPriceOutput = document.getElementById("rental-price");
rentalPriceOutput.textContent = "Rental Price: $" + rentalPrice;

// Calculate and display 10% of the machine price
var tenPercentPrice = machinePrice * 0.1;
var tenPercentOutput = document.getElementById("ten-percent-price");
tenPercentOutput.textContent = "10% of Machine Price: $" + tenPercentPrice;
});
});

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

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

.container {
margin-top: 50px;
text-align: center;
}

h1 {
color: #17a2b8;
font-weight: bold;
font-size: 30px;
}

.form-group {
margin-bottom: 20px;
}

label {
margin-right: 10px;
font-weight: bold;
}

#calculate-button {
background-color: #17a2b8;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}

#rental-price,
#ten-percent-price {
font-size: 20px;
font-weight: bold;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Machine Rental Price Calculator</h1>
<div class="form-group">
<label for="machine-price">Machine Monthly Price:</label>
<input type="number" id="machine-price" min="0" step="1000" value="10000">
</div>
<div class="form-group">
<label for="duration-select">Rental Duration:</label>
<select id="duration-select">
<option value="1-month">1 Month</option>
<option value="1-year">1 Year</option>
<option value="2-years">2 Years</option>
</select>
</div>
<button id="calculate-button">Calculate</button>
<div id="rental-price"></div>
<div id="ten-percent-price"></div>
</div>
</body>
</html>