Printing Price Calculator Printing Price Calculator body { font-family: Arial, sans-serif; margin: 20px; } .calculator { max-width: 600px; padding: 20px; border: 1px solid #ccc; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .result { margin-top: 20px; font-weight: bold; color: #333; }

Printing Price Calculator

DTF Screen Printing





Front
Back
High Center Back
Left Sleeve
Right Sleeve
Left Chest
Total Price: $0.00
const methodSelect = document.getElementById('method'); const quantityInput = document.getElementById('quantity'); const sizeSelect = document.getElementById('size'); const colorsSelect = document.getElementById('colors'); const dtfOptions = document.getElementById('dtfOptions'); const screenOptions = document.getElementById('screenOptions'); const totalPriceElement = document.getElementById('totalPrice'); // Location checkboxes const frontCheckbox = document.getElementById('front'); const backCheckbox = document.getElementById('back'); const leftSleeveCheckbox = document.getElementById('leftSleeve'); const rightSleeveCheckbox = document.getElementById('rightSleeve'); const leftChestCheckbox = document.getElementById('leftChest'); const rightChestCheckbox = document.getElementById('rightChest'); // DTF Pricing Table const dtfPricing = { small: [ { max: 14, price: 4.00 }, { max: 29, price: 3.50 }, { max: 44, price: 3.25 }, { max: 59, price: 3.00 }, { max: 99, price: 2.80 }, { max: 149, price: 2.60 }, { max: 200, price: 2.40 }, { max: 287, price: 2.20 }, { max: Infinity, price: 2.00 }, ], large: [ { max: 14, price: 7.00 }, { max: 29, price: 6.00 }, { max: 44, price: 5.50 }, { max: 59, price: 6.25 }, { max: 99, price: 6.00 }, { max: 149, price: 5.75 }, { max: 200, price: 5.50 }, { max: 287, price: 5.25 }, { max: Infinity, price: 5.00 }, ] }; // Screen Printing Pricing Table const screenPricing = { 1: [ { max: 27, price: 2.00 }, { max: 71, price: 1.50 }, { max: 143, price: 1.25 }, { max: 287, price: 1.00 }, { max: Infinity, price: 0.75 }, ], 2: [ { max: 27, price: 2.50 }, { max: 71, price: 2.00 }, { max: 143, price: 1.59 }, { max: 287, price: 1.25 }, { max: Infinity, price: 1.00 }, ], 3: [ { max: 27, price: 3.00 }, { max: 71, price: 2.50 }, { max: 143, price: 1.75 }, { max: 287, price: 1.50 }, { max: Infinity, price: 1.25 }, ], 4: [ { max: 27, price: 3.50 }, { max: 71, price: 3.00 }, { max: 143, price: 2.00 }, { max: 287, price: 1.75 }, { max: Infinity, price: 1.50 }, ] }; // Update visibility of options methodSelect.addEventListener('change', () => { dtfOptions.style.display = methodSelect.value === 'dtf' ? 'block' : 'none'; screenOptions.style.display = methodSelect.value === 'screen' ? 'block' : 'none'; updatePrice(); }); // Calculate price function calculatePrice(pricingTable, quantity) { for (const range of pricingTable) { if (quantity <= range.max) return range.price * quantity; } return 0; } // Count the selected locations function countSelectedLocations() { let count = 0; if (frontCheckbox.checked) count++; if (backCheckbox.checked) count++; if (leftSleeveCheckbox.checked) count++; if (rightSleeveCheckbox.checked) count++; if (leftChestCheckbox.checked) count++; if (rightChestCheckbox.checked) count++; return count; } // Update total price function updatePrice() { const method = methodSelect.value; const quantity = parseInt(quantityInput.value) || 0; const locationsMultiplier = countSelectedLocations(); // Multiply by number of selected locations let totalPrice = 0; if (method === 'dtf') { const size = sizeSelect.value; totalPrice = calculatePrice(dtfPricing[size], quantity); } else if (method === 'screen') { const colors = colorsSelect.value; totalPrice = calculatePrice(screenPricing[colors], quantity); } // Apply locations multiplier totalPrice *= locationsMultiplier; totalPriceElement.textContent = totalPrice.toFixed(2); } // Event listeners quantityInput.addEventListener('input', updatePrice); sizeSelect.addEventListener('change', updatePrice); colorsSelect.addEventListener('change', updatePrice); frontCheckbox.addEventListener('change', updatePrice); backCheckbox.addEventListener('change', updatePrice); leftSleeveCheckbox.addEventListener('change', updatePrice); rightSleeveCheckbox.addEventListener('change', updatePrice); leftChestCheckbox.addEventListener('change', updatePrice); rightChestCheckbox.addEventListener('change', updatePrice);

Long Sleeves

Scroll to Top