var configuration = {“types”:{“NL6210″:”7″,”NL3600″:”7″,”Tultex 241″:”6.5″,”PC55″:”6″,”PC54″:”5″,”DM130″:”8″,”Gildan 8000″:”5.25″,”Gildan 2000″:”6″,”Gildan 980″:”7″,”Gildan 67000″:”7″,”ST380″:”12″,”ST350″:”8″},”pricings”:{“0″:[0,0,0,0,0,0,0,0,0,0,0,0],”24″:[1.79,3.31,4.57,5.96,7.35,8.74,10.13,11.53,12.98,16.23,19.5,22.5],”36″:[1.39,2.32,3.11,4.04,4.97,5.96,6.89,7.82,8.74,10.82,12,14],”72″:[1.06,1.39,1.66,2.05,2.52,2.91,3.38,3.91,4.44,5.64,6,6.4],”144″:[0.86,1.13,1.39,1.59,1.72,1.85,2.19,2.45,2.65,3.08,3.35,3.65],”288″:[0.79,0.99,1.26,1.39,1.52,1.66,1.85,2.12,2.32,2.75,3.05,3.3],”576″:[0.73,0.86,0.98,1.09,1.19,1.3,1.52,1.7,1.85,2.2,2.4,2.6],”1200″:[0.66,0.76,0.85,0.94,1.03,1.13,1.22,1.39,1.55,1.9,2.12,2.32],”3000″:[0.53,0.62,0.72,0.81,0.9,0.99,1.13,1.26,1.39,1.68,1.92,2.12],”6000″:[0.5,0.57,0.64,0.7,0.77,0.83,1.06,1.19,1.32,1.62,1.82,2.02]},”altpricings”:{“0″:[0,0,0,0,0,0,0,0,0,0,0,0],”24″:[1.79,3.31,4.57,5.96,7.35,8.74,10.13,11.53,12.98,16.23,19.5,22.5],”36″:[1.39,2.32,3.11,4.04,4.97,5.96,6.89,7.82,8.74,10.82,12,14],”72″:[1.06,1.39,1.66,2.05,2.52,2.91,3.38,3.91,4.44,5.64,6,6.4],”144″:[0.86,1.13,1.39,1.59,1.72,1.85,2.19,2.45,2.65,3.08,3.35,3.65],”288″:[0.79,0.99,1.26,1.39,1.52,1.66,1.85,2.12,2.32,2.75,3.05,3.3],”576″:[0.73,0.86,0.98,1.09,1.19,1.3,1.52,1.7,1.85,2.2,2.4,2.6],”1200″:[0.66,0.76,0.85,0.94,1.03,1.13,1.22,1.39,1.55,1.9,2.12,2.32],”3000″:[0.53,0.62,0.72,0.81,0.9,0.99,1.13,1.26,1.39,1.68,1.92,2.12],”6000″:[0.5,0.57,0.64,0.7,0.77,0.83,1.06,1.19,1.32,1.62,1.82,2.02]},”colors”:[“1 color”,”2 color”,”3 color”,”4 color”,”5 color”,”6 color”,”7 color”,”8 color”,”9 color”,”10 color”,”11 color”,”12 color”],”quantities”:[0,24,36,72,144,288,576,1200,3000,6000]}

/* for non-mobile devices */
:root {
–title-font-size: 20px; /* Set the font size of the title to 20px on non-mobile devices */
–calculator-box-size: 50%
%; /* Set the size of the calculator box to 50% width on non-mobile devices */
}

/* for mobile devices */
@media (max-width: 575.98px) {
:root {
–title-font-size: 20px; /* Set the font size of the title to 20px on mobile devices */
–calculator-box-size: 100%; /* Set the size of the calculator box to 100% width on mobile devices */
}
}
* {box-sizing: border-box;} .calculator-container{ font-family: ‘Helvetica’, sans-serif; width: var(–calculator-box-size); border: 1px solid black; padding: 20px; display: inline-block; border: #333 1px solid; border-radius: 2px; padding: 5px 5px;} h2.title{ font-size: var(–title-font-size); } .location{ margin-top: 10px} .delete-location{ cursor: pointer; color: red} .card{ border: 1px solid #ccc; border-radius: 5px; padding: 0; margin-bottom: 15px} .card-header{ padding: 5px 15px; border-bottom: 1px solid #ccc; background-color: #000; color: white; font-weight: bold} .card-body{ padding: 15px 15px} .card-two{ display: flex; justify-content: space-between; align-items: start; gap: 1rem} .location-controls{ margin-top: 15px} .btn{ font-size: 1rem; padding: 5px 10px;} .btn-block{ display: block; width: 100%; background-color: #6274b4; border-radius: 5px; border: 1px solid #aaa; color: white; font-weight: bold} .card-controls{ text-align: right} .form-control{ min-height: 25px; font-size: 1rem; width: 100%}

const teeTypeSelector=document.getElementById(‘teeType’); const quantitySlider=document.getElementById(‘quantity’); const quantityInput=document.getElementById(‘quantityValue’); const locationsContainer=document.getElementById(‘locationsContainer’); const priceDisplay=document.getElementById(‘price’); const totalCostDisplay=document.getElementById(‘totalCost’); var colorsMax=6; window.onload=()=>{ typeChildren=[]; teeTypeSelector.replaceChildren(typeChildren); for (let type in configuration.types){ typeChild=document.createElement(‘option’); typeChild.value=configuration.types[type]; typeChildText=document.createTextNode(type); typeChild.appendChild(typeChildText); teeTypeSelector.appendChild(typeChild);} let maxQuantity=Math.max(…configuration.quantities); let minQuantity=Math.min(…configuration.quantities); if (quantitySlider.value >maxQuantity){ quantitySlider.setAttribute(‘value’, maxQuantity); quantitySlider.value=maxQuantity; quantityInput.setAttribute(‘value’, maxQuantity); quantityInput.value=maxQuantity;} quantitySlider.setAttribute(‘max’, maxQuantity); quantitySlider.setAttribute(‘min’, minQuantity); colorsMax=configuration.colors.length; document.querySelectorAll(‘.location’).forEach((location, index)=>{ location.querySelector(‘.colors’).setAttribute(‘max’, colorsMax);}); primaryPricingMatrix=configuration.pricings; additionalLocationPricingMatrix=configuration.altpricings; calculatePrice();};

var primaryPricingMatrix={}; var additionalLocationPricingMatrix={}; function calculatePrice(){ let teeTypeCost=parseFloat(teeTypeSelector.value); let quantity=parseInt(quantityInput.value); let totalCost=0; document.querySelectorAll(‘.location’).forEach((location, index)=>{ let colors=parseInt(location.querySelector(‘.colors’).value); let pricingMatrix=index===0 ? primaryPricingMatrix : additionalLocationPricingMatrix; let closestQuantity=Object.keys(pricingMatrix).reduce((prev, curr)=>{ return (Math.abs(curr – quantity) < Math.abs(prev – quantity) ? curr : prev);}); let locationPrice=pricingMatrix[closestQuantity][colors – 1]; totalCost +=locationPrice * quantity;}); let price=totalCost / quantity + teeTypeCost; priceDisplay.textContent=price.toFixed(2); totalCostDisplay.textContent=totalCost.toFixed(2); quantitySlider.value=quantity;} function addLocation(){ let locationCount=document.querySelectorAll('.location').length + 1; let locationDiv=document.createElement('div'); locationDiv.className='card location'; locationDiv.innerHTML=`

`; locationsContainer.appendChild(locationDiv); locationDiv.querySelector(‘.colors’).addEventListener(‘input’, (event)=>{ locationDiv.querySelector(‘.colorValue’).textContent=event.target.value; calculatePrice();}); calculatePrice();} function deleteLocation(element){ element.closest(‘.card’).remove(); calculatePrice();} teeTypeSelector.addEventListener(‘change’, calculatePrice); quantitySlider.addEventListener(‘input’, ()=>{ quantityInput.value=quantitySlider.value; calculatePrice();}); quantityInput.addEventListener(‘input’, calculatePrice); document.querySelector(‘.location .colors’).addEventListener(‘input’, (event)=>{ document.querySelector(‘.location .colorValue’).textContent=event.target.value; calculatePrice();}); document.getElementById(‘addLocation’).addEventListener(‘click’, addLocation);