Colorful DTF Pricing Calculator
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.
Colorful DTF Pricing Calculator 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
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
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>Colorful 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.">
<meta name="keywords" content="DTF, pricing calculator, interactive app, colorful app, pricing, budgeting, DTF location pricing">
<style>
body {
background: linear-gradient(135deg, #80cbc4, #ffccbc);
color: #333;
font-family: 'Lobster', cursive;
text-align: left;
padding: 20px;
}
#main-container {
margin: auto;
max-width: 600px;
padding: 20px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(5px);
}
.form-group {
margin-bottom: 20px;
}
input[type="number"], input[type="text"], select {
width: calc(100% - 20px);
margin: 10px 0;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #ffffff;
color: #333;
}
.result {
font-size: 20px;
font-weight: bold;
margin-top: 20px;
border: 2px dashed #009688;
padding: 15px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.9);
animation: fadeIn 0.5s;
}
.btn {
background-color: #ff6f61;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
color: white;
font-weight: bold;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #c55a47;
}
label {
display: block;
margin: 10px 0 5px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 2px solid #009688;
padding: 10px;
text-align: center;
background-color: rgba(255, 255, 255, 0.7);
}
th {
background-color: #b2dfdb;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
</head>
<body>
<div id="main-container" class="container">
<h1>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 || "Customer";
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 = `${name}, your Total Price: $${totalPrice} (including DTF cost)`;
};
saveLocal = function() {
const name = document.getElementById("name").value;
const productType = document.getElementById("product-type").value;
const quantity = document.getElementById("quantity").value;
const dtfLocation = document.getElementById("dtf-location").value;
const data = { name, productType, quantity, dtfLocation };
localStorage.setItem("dtfData", JSON.stringify(data));
alert("Data saved!");
}
loadLocal = function() {
const data = JSON.parse(localStorage.getItem("dtfData"));
if (data) {
document.getElementById("name").value = data.name || '';
document.getElementById("product-type").value = data.productType || '10.00';
document.getElementById("quantity").value = data.quantity || '';
document.getElementById("dtf-location").value = data.dtfLocation || '5.00';
} else {
alert("No data found.");
}
}
loadLocal(); // Auto-load storage data on start
});
</script>
</body>
</html>
NEW APPS
These are apps made by the community!