18.tip-calculator

<body>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f0f0;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

}

.calculator {

background-color: #ffffff;

border-radius: 10px;

box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

padding: 30px;

width: 400px;

}

h1 {

text-align: center;

color: #333;

margin-bottom: 20px;

}

.input-group {

margin-bottom: 20px;

}

label {

display: block;

margin-bottom: 5px;

color: #666;

}

input[type="number"],

input[type="range"] {

width: 100%;

padding: 10px;

border: 1px solid #ddd;

border-radius: 5px;

font-size: 16px;

}

input[type="range"] {

-webkit-appearance: none;

height: 10px;

background: #ddd;

outline: none;

opacity: 0.7;

transition: opacity 0.2s;

}

input[type="range"]:hover {

opacity: 1;

}

input[type="range"]::-webkit-slider-thumb {

-webkit-appearance: none;

appearance: none;

width: 20px;

height: 20px;

background: #4CAF50;

cursor: pointer;

border-radius: 50%;

}

input[type="range"]::-moz-range-thumb {

width: 20px;

height: 20px;

background: #4CAF50;

cursor: pointer;

border-radius: 50%;

}

.value-display {

text-align: right;

font-weight: bold;

color: #4CAF50;

}

button {

width: 100%;

padding: 10px;

background-color: #4CAF50;

color: white;

border: none;

border-radius: 5px;

font-size: 18px;

cursor: pointer;

transition: background-color 0.3s;

}

button:hover {

background-color: #45a049;

}

.result {

margin-top: 20px;

text-align: center;

font-size: 18px;

font-weight: bold;

color: #333;

}

.loading {

text-align: center;

margin-top: 20px;

}

.loading-spinner {

border: 4px solid #f3f3f3;

border-top: 4px solid #3498db;

border-radius: 50%;

width: 30px;

height: 30px;

animation: spin 1s linear infinite;

margin: 0 auto;

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

</style>

<h1>Tip Calculator</h1>

<label for="bill-amount">Bill Amount ($)</label>

</div>

<label for="discount-percentage">Discount Percentage (%)</label>

</div>

<label for="tip-percentage">Tip Percentage (%)</label>

</div>

<label for="num-people">Number of People</label>

</div>

<button id="calculate-btn">Calculate</button>

</div>

const billAmountInput = document.getElementById('bill-amount');

const discountPercentageInput = document.getElementById('discount-percentage');

const discountValueDisplay = document.getElementById('discount-value');

const tipPercentageInput = document.getElementById('tip-percentage');

const tipValueDisplay = document.getElementById('tip-value');

const numPeopleInput = document.getElementById('num-people');

const calculateBtn = document.getElementById('calculate-btn');

const resultDiv = document.getElementById('result');

const loadingDiv = document.getElementById('loading');

function updateValue(input, display) {

display.textContent = input.value;

}

discountPercentageInput.addEventListener('input', () => updateValue(discountPercentageInput, discountValueDisplay));

tipPercentageInput.addEventListener('input', () => updateValue(tipPercentageInput, tipValueDisplay));

calculateBtn.addEventListener('click', () => {

const billAmount = parseFloat(billAmountInput.value);

const discountPercentage = parseFloat(discountPercentageInput.value);

const tipPercentage = parseFloat(tipPercentageInput.value);

const numPeople = parseInt(numPeopleInput.value);

if (isNaN(billAmount) || isNaN(numPeople) || numPeople < 1) {

resultDiv.textContent = 'Please enter valid values.';

return;

}

loadingDiv.style.display = 'block';

resultDiv.textContent = '';

setTimeout(() => {

const discountAmount = billAmount * (discountPercentage / 100);

const discountedBill = billAmount - discountAmount;

const tipAmount = discountedBill * (tipPercentage / 100);

const totalAmount = discountedBill + tipAmount;

const amountPerPerson = totalAmount / numPeople;

resultDiv.innerHTML = `

Discounted Bill: $${discountedBill.toFixed(2)}<br>

Tip Amount: $${tipAmount.toFixed(2)}<br>

Total Amount: $${totalAmount.toFixed(2)}<br>

Amount per Person: $${amountPerPerson.toFixed(2)}

`;

loadingDiv.style.display = 'none';

}, 1000);

});

</script>

</body></html>