<div class="calculator-container"> <div class="header"> <h1>Barbell Calculator</h1> <p>Calculate plates needed for your target weight</p> </div> <div class="input-group"> <label for="targetWeight">Target Weight</label> <div class="input-wrapper"> <input type="number" id="targetWeight" placeholder="Enter weight" min="0" step="0.5"> <span class="unit" id="weightUnit">kg</span> </div> <div class="unit-toggle"> <button class="unit-btn active" data-unit="kg">Kilograms (kg)</button> <button class="unit-btn" data-unit="lbs">Pounds (lbs)</button> </div> </div> <div class="input-group"> <label for="barWeight">Barbell Weight</label> <div class="input-wrapper"> <input type="number" id="barWeight" value="20" min="0" step="0.5"> <span class="unit" id="barUnit">kg</span> </div> </div> <button class="calculate-btn" id="calculateBtn">Calculate Plates</button> <div class="result" id="result"> <div class="result-title">Plates Needed (per side):</div> <div class="plate-list" id="plateList"></div> <div class="barbell-visual"> <div class="barbell-bar"></div> </div> <div class="note" id="totalWeight"></div> </div> </div>
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #6a040f 0%, #3d0208 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .calculator-container { background: white; border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); max-width: 500px; width: 100%; padding: 40px; } .header { text-align: center; margin-bottom: 30px; } .header h1 { color: #6a040f; font-size: 2rem; font-weight: 600; margin-bottom: 10px; } .header p { color: #666; font-size: 0.95rem; } .input-group { margin-bottom: 25px; } .input-group label { display: block; color: #333; font-weight: 500; margin-bottom: 8px; font-size: 0.95rem; } .input-wrapper { position: relative; display: flex; align-items: center; } input[type="number"] { width: 100%; padding: 15px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 1.1rem; transition: all 0.3s ease; outline: none; } input[type="number"]:focus { border-color: #6a040f; box-shadow: 0 0 0 3px rgba(106, 4, 15, 0.1); } .unit { position: absolute; right: 15px; color: #6a040f; font-weight: 600; font-size: 0.9rem; } .unit-toggle { display: flex; gap: 10px; margin-top: 10px; } .unit-btn { flex: 1; padding: 10px; border: 2px solid #e0e0e0; background: white; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; font-weight: 500; color: #666; } .unit-btn.active { background: #6a040f; color: white; border-color: #6a040f; } .calculate-btn { width: 100%; padding: 18px; background: linear-gradient(135deg, #6a040f 0%, #3d0208 100%); color: white; border: none; border-radius: 10px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 10px; } .calculate-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(106, 4, 15, 0.3); } .calculate-btn:active { transform: translateY(0); } .result { margin-top: 30px; padding: 25px; background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%); border-radius: 15px; border-left: 5px solid #6a040f; display: none; } .result.show { display: block; animation: slideIn 0.4s ease; } @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .result-title { color: #6a040f; font-weight: 600; margin-bottom: 15px; font-size: 1.1rem; } .plate-list { display: flex; flex-direction: column; gap: 12px; } .plate-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .plate-weight { font-weight: 600; color: #6a040f; font-size: 1rem; } .plate-count { color: #666; font-size: 0.9rem; } .barbell-visual { margin-top: 20px; text-align: center; padding: 20px; background: white; border-radius: 10px; } .barbell-bar { height: 12px; background: #6a040f; margin: 10px auto; border-radius: 6px; width: 80%; position: relative; } .note { margin-top: 15px; padding: 15px; background: rgba(106, 4, 15, 0.05); border-radius: 8px; font-size: 0.85rem; color: #666; text-align: center; } @media (max-width: 600px) { .calculator-container { padding: 25px; } .header h1 { font-size: 1.6rem; } }
let currentUnit = 'kg'; const unitBtns = document.querySelectorAll('.unit-btn'); const weightUnit = document.getElementById('weightUnit'); const barUnit = document.getElementById('barUnit'); const targetWeight = document.getElementById('targetWeight'); const barWeight = document.getElementById('barWeight'); const calculateBtn = document.getElementById('calculateBtn'); const result = document.getElementById('result'); const plateList = document.getElementById('plateList'); const totalWeight = document.getElementById('totalWeight'); // Available plates const platesKg = [25, 20, 15, 10, 5, 2.5, 1.25, 0.5]; const platesLbs = [45, 35, 25, 10, 5, 2.5]; // Unit toggle unitBtns.forEach(btn => { btn.addEventListener('click', () => { unitBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); currentUnit = btn.dataset.unit; weightUnit.textContent = currentUnit; barUnit.textContent = currentUnit; // Update bar weight default if (currentUnit === 'kg') { barWeight.value = '20'; } else { barWeight.value = '45'; } }); }); // Calculate plates calculateBtn.addEventListener('click', () => { const target = parseFloat(targetWeight.value); const bar = parseFloat(barWeight.value); if (!target || target <= 0) { alert('Please enter a valid target weight'); return; } if (target <= bar) { alert('Target weight must be greater than barbell weight'); return; } const weightPerSide = (target - bar) / 2; const plates = currentUnit === 'kg' ? platesKg : platesLbs; const plateCount = calculatePlates(weightPerSide, plates); displayResult(plateCount, target, currentUnit); }); function calculatePlates(weight, availablePlates) { const plates = {}; let remaining = weight; for (const plate of availablePlates) { const count = Math.floor(remaining / plate); if (count > 0) { plates[plate] = count; remaining -= count * plate; } } return plates; } function displayResult(plates, total, unit) { plateList.innerHTML = ''; if (Object.keys(plates).length === 0) { plateList.innerHTML = '<div class="plate-item"><span>No plates needed</span></div>'; } else { for (const [weight, count] of Object.entries(plates)) { const item = document.createElement('div'); item.className = 'plate-item'; item.innerHTML = ` <span class="plate-weight">${weight} ${unit}</span> <span class="plate-count">× ${count} plate${count > 1 ? 's' : ''}</span> `; plateList.appendChild(item); } } totalWeight.textContent = `Total weight: ${total} ${unit}`; result.classList.add('show'); }
Login to leave a comment
great
View Project
great