Calculator Tools Calculator Tools
Create

V 25 DTF Pricing Calculator

Aug 12, 2026

About this app

A vibrant and interactive DTF pricing calculator app that allows users to calculate pricing with different input parameters and view DTF location pricing. Version 25.

V 25 DTF Pricing Calculator V 25 DTF Pricing Calculator 💵 Name/PO Number: Product Type: T-Shirt - $10.00 Hoodie - $15.00 Mug - $20.00 Cost per Item: $ Quantity: DTF Location: Location 1 - $5.00 Location 2 - $7.50 Location 3 - $10.00 Calculate Pricing DTF Location Price Location 1 $5.00 Location 2 $7.50 Location 3 $10.00

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>V 25 DTF Pricing Calculator</title>
<meta name="description" content="A vibrant and interactive DTF pricing calculator app that allows users to calculate pricing with different input parameters and view DTF location pricing. Version 25.">
<meta name="keywords" content="DTF, pricing calculator, interactive app, colorful app, version 25, pricing, budgeting, DTF location pricing">

<style>
body {
background-color: #b2f2e6; /* Light teal */
color: white;
font-family: 'Poppins', sans-serif;
text-align: left;
padding: 20px;
}
#main-container {
margin-top: 20px;
text-align: left;
}
.form-group {
margin-bottom: 20px;
}
input[type="number"], input[type="text"], select {
width: 150px;
margin-left: 10px;
padding: 5px;
border-radius: 5px;
border: none;
background-color: rgba(255, 255, 255, 0.2);
color: #333;
}
.result {
font-size: 24px;
margin-top: 20px;
border: 2px solid white;
padding: 15px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.1);
}
.btn {
background-color: #337ab7;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: #286090;
}
label {
display: inline-block;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 2px solid white;
padding: 10px;
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
}
th {
background-color: rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>V 25 DTF Pricing Calculator 💵</h1>
<div class="form-group">
<label for="name">Name/PO Number:</label>
<input type="text" id="name" placeholder="Enter Name/PO" />
</div>
<div class="form-group">
<label for="product-type">Product Type:</label>
<select id="product-type">
<option value="10.00">T-Shirt - $10.00</option>
<option value="15.00">Hoodie - $15.00</option>
<option value="20.00">Mug - $20.00</option>
</select>
</div>
<div class="form-group">
<label for="cost">Cost per Item: $</label>
<input type="number" id="cost" placeholder="0" />
</div>
<div class="form-group">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" placeholder="0" />
</div>
<div class="form-group">
<label for="dtf-location">DTF Location:</label>
<select id="dtf-location">
<option value="5.00">Location 1 - $5.00</option>
<option value="7.50">Location 2 - $7.50</option>
<option value="10.00">Location 3 - $10.00</option>
</select>
</div>
<button id="calculate" class="btn">Calculate Pricing</button>
<div class="result" id="result"></div>

<table>
<thead>
<tr>
<th>DTF Location</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Location 1</td>
<td>$5.00</td>
</tr>
<tr>
<td>Location 2</td>
<td>$7.50</td>
</tr>
<tr>
<td>Location 3</td>
<td>$10.00</td>
</tr>
</tbody>
</table>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
const calculateButton = document.getElementById("calculate");
const resultDisplay = document.getElementById("result");

calculateButton.onclick = function() {
const name = document.getElementById("name").value;
const productType = parseFloat(document.getElementById("product-type").value) || 0;
const quantity = parseInt(document.getElementById("quantity").value) || 0;
const dtfLocation = parseFloat(document.getElementById("dtf-location").value) || 0;

const totalProductCost = (productType * quantity).toFixed(2);
const totalDTFCost = (dtfLocation * quantity).toFixed(2);
const totalPrice = (parseFloat(totalProductCost) + parseFloat(totalDTFCost)).toFixed(2);

resultDisplay.innerText = `Customer: ${name} - Total Price: $${totalPrice} (including DTF cost)`;
};
});
</script>
</body>
</html>