Untitled
unknown
plain_text
13 days ago
2.3 kB
3
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Illustration Pricing Calculator</title> <style> body { font-family: sans-serif; padding: 20px; max-width: 600px; margin: auto; } label { display: block; margin-top: 10px; } input, select { width: 100%; padding: 6px; margin-top: 4px; } .total { font-size: 24px; margin-top: 20px; font-weight: bold; } </style> </head> <body> <h1>Illustration Pricing Calculator</h1> <label> Illustration Type: <select id="type"> <option value="portrait">Portrait - $50</option> <option value="half">Half Body - $70</option> <option value="full">Full Body - $100</option> </select> </label> <label> Extra Characters ($30 each): <input type="number" id="extras" min="0" value="0"> </label> <label> Detailed Background (+$40): <input type="checkbox" id="background"> </label> <label> Commercial License (+$60): <input type="checkbox" id="commercial"> </label> <label> Rush Delivery (+$50): <input type="checkbox" id="rush"> </label> <div class="total" id="total">Total: $0</div> <script> const type = document.getElementById('type'); const extras = document.getElementById('extras'); const background = document.getElementById('background'); const commercial = document.getElementById('commercial'); const rush = document.getElementById('rush'); const total = document.getElementById('total'); const basePrices = { portrait: 50, half: 70, full: 100 }; function calculateTotal() { let base = basePrices[type.value]; let extraChar = parseInt(extras.value) * 30; let bg = background.checked ? 40 : 0; let com = commercial.checked ? 60 : 0; let rushFee = rush.checked ? 50 : 0; let final = base + extraChar + bg + com + rushFee; total.textContent = `Total: $${final}`; } // Add event listeners type.addEventListener('change', calculateTotal); extras.addEventListener('input', calculateTotal); background.addEventListener('change', calculateTotal); commercial.addEventListener('change', calculateTotal); rush.addEventListener('change', calculateTotal); // Initial calculation calculateTotal(); </script> </body> </html>
Editor is loading...
Leave a Comment