T-Shirt Color Selector

T-Shirt Color Selection

Select T-Shirt Color

Selected color: Red

Base Price:	$19.99
TPS (5%):	$1.00
TVQ (9.9975%):	$2.00
Total:	$22.99

.color-selector { display: flex; flex-wrap: wrap; gap: 10px; } .color-radio { display: none; } .color-label { display: inline-block; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid #ddd; transition: all 0.2s ease; } .color-radio:checked + .color-label { transform: scale(1.2); border: 2px solid #000; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } .red { background-color: #e74c3c; } .blue { background-color: #3498db; } .green { background-color: #2ecc71; } .yellow { background-color: #f1c40f; } .black { background-color: #000; } .white { background-color: #fff; border: 2px solid #ccc; } .purple { background-color: #9b59b6; } .price-breakdown { background-color: #f8f9fa; padding: 15px; border-radius: 5px; } document.addEventListener('DOMContentLoaded', function() { // Constants for tax rates const TPS_RATE = 0.05; const TVQ_RATE = 0.09975; // Get all color radio buttons const colorRadios = document.querySelectorAll('.color-radio'); // Get elements for displaying information const selectedColorText = document.getElementById('selected-color-text'); const basePrice = document.getElementById('base-price'); const tpsAmount = document.getElementById('tps-amount'); const tvqAmount = document.getElementById('tvq-amount'); const totalPrice = document.getElementById('total-price'); const tshirtImage = document.getElementById('tshirt-image'); // Function to calculate taxes and update display function calculateTaxes(price) { // Calculate tax amounts const tpsValue = price * TPS_RATE; const tvqValue = price * TVQ_RATE; const total = price + tpsValue + tvqValue; // Update the display basePrice.textContent = `$${price.toFixed(2)}`; tpsAmount.textContent = `$${tpsValue.toFixed(2)}`; tvqAmount.textContent = `$${tvqValue.toFixed(2)}`; totalPrice.textContent = `$${total.toFixed(2)}`; } // Function to update the t-shirt image based on color function updateTshirtImage(color) { // In a real application, you would change the image source to show the correct color // For this example, we'll just update the placeholder text tshirtImage.src = `https://via.placeholder.com/300x300?text=${color}+T-Shirt`; } // Add event listeners to all color radio buttons colorRadios.forEach(radio => { radio.addEventListener('change', function() { if (this.checked) { // Get the color value and price const selectedColor = this.value; const price = parseFloat(this.dataset.price); // Update the selected color text (capitalize first letter) selectedColorText.textContent = selectedColor.charAt(0).toUpperCase() + selectedColor.slice(1); // Calculate taxes based on the price calculateTaxes(price); // Update the t-shirt image updateTshirtImage(selectedColor); } }); }); // Initialize with the default selected color const defaultSelected = document.querySelector('.color-radio:checked'); if (defaultSelected) { const price = parseFloat(defaultSelected.dataset.price); calculateTaxes(price); updateTshirtImage(defaultSelected.value); } });