body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f4f4f4; } .calculator-container { background-color: #ffffff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; width: 400px; /* Slightly wider to accommodate labels */ max-width: 95%; } h1 { color: #333; margin-bottom: 25px; font-size: 1.8em; } .item-list { margin-bottom: 25px; } .item-group { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 8px; background-color: #f9f9f9; border-radius: 4px; border: 1px solid #eee; } .item-group label { font-weight: bold; color: #555; flex-grow: 1; /* Allows label to take available space */ text-align: left; margin-right: 15px; /* Space between label and input */ } .item-group input[type="number"] { width: 80px; /* Fixed width for quantity input */ padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; text-align: center; /* Center numbers */ } /* Specific styling for the checkbox group */ .checkbox-group { justify-content: flex-start; /* Align checkbox to the left */ gap: 10px; /* Space between checkbox and label */ } .checkbox-group input[type="checkbox"] { width: auto; /* Override general input width */ transform: scale(1.3); /* Make checkbox a bit larger */ margin-right: 5px; } button { background-color: #007bff; /* Blue for the button */ color: white; padding: 12px 25px; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; transition: background-color 0.3s ease; margin-top: 15px; width: 100%; /* Make button full width */ box-sizing: border-box; /* Include padding/border in width */ } button:hover { background-color: #0056b3; } .result-display { margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; } .result-display h2 { color: #333; font-size: 24px; margin: 0; } .result-display #totalCost { color: #28a745; /* Green for total cost */ font-weight: bold; font-size: 28px; } document.addEventListener('DOMContentLoaded', function() { // Define the prices for each item const itemPrices = { chicken: 8, goat: 27, pig: 50, vetSupplies: 20 }; // Get references to the HTML elements const chickenInput = document.getElementById('chickens'); const goatInput = document.getElementById('goats'); const pigInput = document.getElementById('pigs'); const vetSuppliesCheckbox = document.getElementById('vetSupplies'); const calculateButton = document.getElementById('calculateButton'); const totalCostSpan = document.getElementById('totalCost'); // Function to calculate the total cost function calculateTotal() { let currentTotal = 0; // Get quantities and add to total const numChickens = parseInt(chickenInput.value) || 0; currentTotal += numChickens * itemPrices.chicken; const numGoats = parseInt(goatInput.value) || 0; currentTotal += numGoats * itemPrices.goat; const numPigs = parseInt(pigInput.value) || 0; currentTotal += numPigs * itemPrices.pig; // Check if vet supplies are selected if (vetSuppliesCheckbox.checked) { currentTotal += itemPrices.vetSupplies; } // Display the total, formatted as currency totalCostSpan.textContent = `$${currentTotal.toFixed(2)}`; } // Add event listeners calculateButton.addEventListener('click', calculateTotal); // Make it dynamic: calculate on input change for each item chickenInput.addEventListener('input', calculateTotal); goatInput.addEventListener('input', calculateTotal); pigInput.addEventListener('input', calculateTotal); vetSuppliesCheckbox.addEventListener('change', calculateTotal); // 'change' event for checkboxes // Initial calculation when the page loads calculateTotal(); });