PK l[ƒ› index.html Hunter's Swim Pace Calculator

Hunter's Swim Pace Calculator

Swimmer in pool

Calculate Your Swim Pace

Results

Enter your swim details and click calculate to see your pace per 25.

Pace Chart

Distance Pace per 25 Cumulative Time Stopwatch Cumulative Time Comparison Lap Time
Calculate pace to see chart

Swim Stopwatch

00:00:00.00

How to use:

  • Calculate your target pace first using the calculator above
  • Start the stopwatch when you begin swimming
  • Press Lap button at each 25m interval to record lap times
  • Compare your actual time with target pace (Green = faster, Red = slower, Black = same)
  • Use Print Chart to print the time chart or Download PDF to save as PDF
PK l[4Ýws's' styles.css/* Reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Header styles */ .header { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 2rem 0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .header__title { text-align: center; font-size: 2.5rem; color: #2c3e50; margin-bottom: 1.5rem; font-weight: 700; } .header__image { width: 100%; max-width: 800px; height: 400px; object-fit: cover; border-radius: 15px; display: block; margin: 0 auto; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } /* Main content styles */ .main { padding: 3rem 0; } .calculator-section { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 20px; padding: 3rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); margin-bottom: 2rem; } .calculator-section__title { text-align: center; font-size: 2rem; color: #2c3e50; margin-bottom: 2rem; font-weight: 600; } /* Form styles */ .calculator-form { max-width: 600px; margin: 0 auto 3rem; } .form-group { margin-bottom: 1.5rem; } .form-label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #2c3e50; font-size: 1rem; } .form-input { width: 100%; padding: 12px 16px; border: 2px solid #e1e8ed; border-radius: 8px; font-size: 1rem; transition: all 0.3s ease; background: #f8f9fa; } .form-input:focus { outline: none; border-color: #3498db; background: white; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); } .form-buttons { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; } .btn { padding: 12px 30px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; } .btn--primary { background: linear-gradient(135deg, #3498db, #2980b9); color: white; } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4); } .btn--secondary { background: linear-gradient(135deg, #95a5a6, #7f8c8d); color: white; } .btn--secondary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(149, 165, 166, 0.4); } .btn--warning { background: linear-gradient(135deg, #f39c12, #e67e22); color: white; } .btn--warning:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4); } .btn--danger { background: linear-gradient(135deg, #e74c3c, #c0392b); color: white; } .btn--danger:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4); } .btn--info { background: linear-gradient(135deg, #17a2b8, #138496); color: white; } .btn--info:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4); } .btn--success { background: linear-gradient(135deg, #27ae60, #219a52); color: white; } .btn--success:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4); } .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } /* Results section */ .results-section { background: #f8f9fa; border-radius: 12px; padding: 2rem; border-left: 4px solid #3498db; } .results-section__title { font-size: 1.5rem; color: #2c3e50; margin-bottom: 1.5rem; text-align: center; } .results-display { text-align: center; } .results-text { font-size: 1.1rem; color: #555; line-height: 1.8; } /* Pace Chart Section */ .pace-chart-section { margin-top: 2rem; background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .pace-chart__title { font-size: 1.3rem; color: #2c3e50; margin-bottom: 1.5rem; text-align: center; font-weight: 600; } .pace-table { width: 100%; border-collapse: collapse; margin-top: 1rem; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .pace-table th { background: linear-gradient(135deg, #3498db, #2980b9); color: white; padding: 1rem; text-align: left; font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.5px; } .pace-table td { padding: 1rem; border-bottom: 1px solid #e1e8ed; color: #2c3e50; font-weight: 500; } .pace-table tr:nth-child(even) { background-color: #f8f9fa; } .pace-table tr:hover { background-color: #e3f2fd; transform: translateX(2px); transition: all 0.2s ease; } .pace-chart__placeholder { text-align: center; color: #95a5a6; font-style: italic; padding: 2rem !important; } /* Stopwatch Section */ .stopwatch-section { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 20px; padding: 3rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .stopwatch-section__title { text-align: center; font-size: 2rem; color: #2c3e50; margin-bottom: 2rem; font-weight: 600; } .stopwatch-display { text-align: center; margin-bottom: 2rem; } .stopwatch-time { font-size: 3.5rem; font-weight: 700; color: #2c3e50; font-family: 'Courier New', monospace; background: linear-gradient(135deg, #f8f9fa, #e9ecef); padding: 1.5rem; border-radius: 15px; margin-bottom: 1.5rem; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1); border: 3px solid #3498db; } .stopwatch-controls { display: flex; gap: 1rem; justify-content: center; margin-bottom: 2rem; flex-wrap: wrap; } .stopwatch-export { display: flex; gap: 1rem; justify-content: center; margin-bottom: 2rem; flex-wrap: wrap; } .stopwatch-instructions { background: #f8f9fa; border-radius: 12px; padding: 2rem; border-left: 4px solid #27ae60; } .stopwatch-instructions h4 { color: #2c3e50; margin-bottom: 1rem; font-size: 1.2rem; } .stopwatch-instructions ul { list-style: none; padding-left: 0; } .stopwatch-instructions li { padding: 0.5rem 0; color: #555; position: relative; padding-left: 1.5rem; } .stopwatch-instructions li:before { content: "•"; color: #3498db; font-weight: bold; position: absolute; left: 0; } /* Time comparison styles */ .time-faster { color: #27ae60 !important; font-weight: 700 !important; } .time-slower { color: #e74c3c !important; font-weight: 700 !important; } .time-equal { color: #2c3e50 !important; font-weight: 700 !important; } /* Lap time styles */ .lap-time { font-weight: 600; color: #17a2b8 !important; } /* Footer styles */ .footer { background: rgba(44, 62, 80, 0.95); color: white; padding: 2rem 0; margin-top: 3rem; } .footer__text { text-align: center; margin-bottom: 1.5rem; font-size: 1rem; } /* Print styles */ @media print { body { background: white !important; color: black !important; } .header, .footer, .calculator-section, .stopwatch-controls, .stopwatch-export, .stopwatch-instructions { display: none !important; } .main { padding: 0 !important; } .container { max-width: none !important; margin: 0 !important; padding: 0 !important; } .pace-chart-section { margin: 0 !important; padding: 1rem !important; box-shadow: none !important; border-radius: 0 !important; background: white !important; } .pace-table { box-shadow: none !important; border: 1px solid #ddd !important; } .pace-table th { background: #f8f9fa !important; color: black !important; border-bottom: 2px solid #ddd !important; } .pace-table tr:nth-child(even) { background-color: #f8f9fa !important; } .print-header { display: block !important; text-align: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #3498db; } .print-header h2 { font-size: 1.5rem; color: #2c3e50; margin-bottom: 0.5rem; } .print-header p { font-size: 1.1rem; color: #555; } } /* Responsive design */ @media (max-width: 768px) { .header__title { font-size: 2rem; } .header__image { height: 250px; } .calculator-section, .stopwatch-section { padding: 2rem 1.5rem; margin: 0 1rem; } .calculator-section__title, .stopwatch-section__title { font-size: 1.5rem; } .form-buttons, .stopwatch-controls, .stopwatch-export { flex-direction: column; } .btn { width: 100%; } .stopwatch-time { font-size: 2.5rem; padding: 1rem; } .pace-table { font-size: 0.9rem; } .pace-table th, .pace-table td { padding: 0.75rem 0.5rem; } } @media (max-width: 480px) { .header__title { font-size: 1.75rem; } .calculator-section, .stopwatch-section { padding: 1.5rem 1rem; } .header__image { height: 200px; } .results-section { padding: 1.5rem; } .pace-chart-section { padding: 1.5rem; } .stopwatch-time { font-size: 2rem; } .pace-table { font-size: 0.85rem; } .pace-table th, .pace-table td { padding: 0.5rem 0.25rem; } }PK l[«“E…?[?[ script.jsdocument.addEventListener('DOMContentLoaded', function() { // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Form elements const paceCalculator = document.getElementById('paceCalculator'); const calculateBtn = document.getElementById('calculateBtn'); const resetBtn = document.getElementById('resetBtn'); const resultsSection = document.getElementById('resultsSection'); const resultsDisplay = document.getElementById('resultsDisplay'); const paceChartBody = document.getElementById('paceChartBody'); // Stopwatch elements const stopwatchDisplay = document.getElementById('stopwatchDisplay'); const startStopwatch = document.getElementById('startStopwatch'); const stopStopwatch = document.getElementById('stopStopwatch'); const lapStopwatch = document.getElementById('lapStopwatch'); const resetStopwatch = document.getElementById('resetStopwatch'); const printChart = document.getElementById('printChart'); const downloadChart = document.getElementById('downloadChart'); // Stopwatch variables let stopwatchInterval; let stopwatchStartTime = 0; let stopwatchElapsedTime = 0; let stopwatchRunning = false; let currentPaceData = []; let lapTimes = []; let currentLapIndex = 0; let currentSwimmerData = {}; // Print and PDF functionality printChart.addEventListener('click', function() { if (!currentPaceData.length) { alert('Please calculate pace first to generate a chart for printing.'); return; } // Create print header const printHeader = document.createElement('div'); printHeader.className = 'print-header'; printHeader.innerHTML = `

${currentSwimmerData.name || 'Swimmer'}'s Pace Chart

Event: ${currentSwimmerData.event || 'N/A'}

Pace per 25: ${currentSwimmerData.pace25 || 'N/A'}

`; // Clone the pace chart section for printing const paceChartSection = document.getElementById('paceChartSection'); const printContent = paceChartSection.cloneNode(true); printContent.insertBefore(printHeader, printContent.firstChild); // Create print window const printWindow = window.open('', '_blank'); printWindow.document.write(` ${currentSwimmerData.name || 'Swimmer'}'s Pace Chart ${printContent.outerHTML} `); printWindow.document.close(); // Trigger print after content loads printWindow.onload = function() { printWindow.print(); printWindow.onafterprint = function() { printWindow.close(); }; }; }); downloadChart.addEventListener('click', async function() { if (!currentPaceData.length) { alert('Please calculate pace first to generate a chart for download.'); return; } // Create a file picker dialog for PDF download try { // Create file content const fileContent = generatePDFContent(); // Create blob const blob = new Blob([fileContent], { type: 'application/pdf' }); // Show file picker dialog const fileHandle = await window.showSaveFilePicker({ suggestedName: `${currentSwimmerData.name || 'swimmer'}_pace_chart.pdf`, types: [{ description: 'PDF Document', accept: { 'application/pdf': ['.pdf'] } }] }); // Write file const writable = await fileHandle.createWritable(); await writable.write(blob); await writable.close(); alert('PDF saved successfully!'); } catch (error) { if (error.name !== 'AbortError') { console.error('Error saving PDF:', error); alert('Error saving PDF. Please try again or use the print function.'); } } }); function generatePDFContent() { return ` ${currentSwimmerData.name || 'Swimmer'}'s Pace Chart

${currentSwimmerData.name || 'Swimmer'}'s Swim Pace Chart

Event: ${currentSwimmerData.event || 'N/A'}

Pace per 25: ${currentSwimmerData.pace25 || 'N/A'}

Generated: ${new Date().toLocaleString()}

${document.getElementById('paceChartSection').outerHTML}
Generated by Hunter's Swim Pace Calculator
`; } // Stopwatch functions function startStopwatchTimer() { stopwatchStartTime = Date.now() - stopwatchElapsedTime; stopwatchInterval = setInterval(() => { stopwatchElapsedTime = Date.now() - stopwatchStartTime; updateStopwatchDisplay(); }, 10); } function stopStopwatchTimer() { clearInterval(stopwatchInterval); } function resetStopwatchTimer() { clearInterval(stopwatchInterval); stopwatchElapsedTime = 0; stopwatchRunning = false; lapTimes = []; currentLapIndex = 0; updateStopwatchDisplay(); updateStopwatchControls(); updatePaceChartWithStopwatch(); } function recordLapTime() { if (!stopwatchRunning || !currentPaceData.length) return; const currentTime = stopwatchElapsedTime / 1000; const lapTime = currentLapIndex === 0 ? currentTime : currentTime - lapTimes[currentLapIndex - 1].cumulativeTime; lapTimes.push({ lapNumber: currentLapIndex + 1, lapTime: lapTime, cumulativeTime: currentTime }); currentLapIndex++; updatePaceChartWithStopwatch(); } function updateStopwatchDisplay() { const time = stopwatchElapsedTime / 1000; const hours = Math.floor(time / 3600); const minutes = Math.floor((time % 3600) / 60); const seconds = Math.floor(time % 60); const hundredths = Math.floor((time % 1) * 100); stopwatchDisplay.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${hundredths.toString().padStart(2, '0')}`; } function updateStopwatchControls() { startStopwatch.disabled = stopwatchRunning; stopStopwatch.disabled = !stopwatchRunning; lapStopwatch.disabled = !stopwatchRunning || !currentPaceData.length; } function updatePaceChartWithStopwatch() { if (!currentPaceData.length) return; const rows = paceChartBody.querySelectorAll('tr'); rows.forEach((row, index) => { if (row.classList.contains('pace-chart__placeholder')) return; const stopwatchCell = row.cells[3]; const comparisonCell = row.cells[4]; const lapTimeCell = row.cells[5]; const currentTime = stopwatchElapsedTime / 1000; const targetTime = currentPaceData[index].cumulativeTime; // Update stopwatch cumulative time (total watch time when lapped) const lapRecord = lapTimes.find(lap => lap.lapNumber === index + 1); if (lapRecord) { stopwatchCell.textContent = formatTime(lapRecord.cumulativeTime); } else { stopwatchCell.textContent = '--'; } // Update comparison with color coding (difference between cumulative lap time and cumulative pace time) if (lapRecord) { const timeDifference = lapRecord.cumulativeTime - targetTime; if (timeDifference < 0) { comparisonCell.textContent = `-${formatTimeDifference(Math.abs(timeDifference))}`; comparisonCell.className = 'time-faster'; } else if (timeDifference > 0) { comparisonCell.textContent = `+${formatTimeDifference(Math.abs(timeDifference))}`; comparisonCell.className = 'time-slower'; } else { comparisonCell.textContent = '0:00.00'; comparisonCell.className = 'time-equal'; } } else { comparisonCell.textContent = '--'; comparisonCell.className = ''; } // Update lap time if (lapRecord) { lapTimeCell.textContent = formatTime(lapRecord.lapTime); lapTimeCell.className = 'lap-time'; } else { lapTimeCell.textContent = '--'; lapTimeCell.className = ''; } }); } function formatTimeDifference(seconds) { const minutes = Math.floor(seconds / 60); const secs = (seconds % 60).toFixed(2); return `${minutes}:${secs.padStart(5, '0')}`; } // Stopwatch event listeners startStopwatch.addEventListener('click', function() { if (!stopwatchRunning) { stopwatchRunning = true; startStopwatchTimer(); updateStopwatchControls(); } }); stopStopwatch.addEventListener('click', function() { if (stopwatchRunning) { stopwatchRunning = false; stopStopwatchTimer(); updateStopwatchControls(); } }); lapStopwatch.addEventListener('click', function() { recordLapTime(); }); resetStopwatch.addEventListener('click', function() { resetStopwatchTimer(); }); // Update stopwatch comparison in real-time setInterval(() => { if (stopwatchRunning) { updatePaceChartWithStopwatch(); } }, 100); // Calculate pace function function calculatePace() { const swimmerName = document.getElementById('swimmerName').value.trim(); const event = document.getElementById('event').value.trim(); const distance = parseFloat(document.getElementById('distance').value); const time = parseFloat(document.getElementById('time').value); // Validation if (!swimmerName || !event || !distance || !time) { showError('Please fill in all fields'); return; } if (distance <= 0 || time <= 0) { showError('Distance and time must be positive numbers'); return; } // Calculate pace per 25 units const pacePer25 = (time / distance) * 25; const minutes = Math.floor(pacePer25 / 60); const seconds = Math.floor(pacePer25 % 60); const hundredths = Math.round((pacePer25 % 1) * 100); // Format results const formattedPace = `${minutes}:${seconds.toString().padStart(2, '0')}.${hundredths.toString().padStart(2, '0')}`; // Generate pace chart data const paceChartData = generatePaceChart(distance, time, pacePer25); currentPaceData = paceChartData; // Store swimmer data for print/PDF currentSwimmerData = { name: swimmerName, event: event, distance: distance, time: time, pace25: formattedPace }; // Display results with animation displayResults({ name: swimmerName, event: event, distance: distance, time: time, pace25: formattedPace, chartData: paceChartData }); } // Generate pace chart data for each 25 units function generatePaceChart(totalDistance, totalTime, pacePer25) { const chartData = []; const numIntervals = Math.ceil(totalDistance / 25); for (let i = 1; i <= numIntervals; i++) { const currentDistance = i * 25; const cumulativeTime = (pacePer25 / 25) * currentDistance; chartData.push({ distance: currentDistance, pacePer25: pacePer25, cumulativeTime: cumulativeTime }); } return chartData; } // Display results with animation function displayResults(data) { resultsSection.style.opacity = '0'; resultsSection.style.transform = 'translateY(20px)'; resultsDisplay.innerHTML = `

Swimmer: ${data.name}

Event: ${data.event}

Distance: ${data.distance}

Time: ${formatTime(data.time)}

Pace per 25: ${data.pace25}

`; // Update pace chart updatePaceChart(data.chartData); // Animate results section setTimeout(() => { resultsSection.style.transition = 'all 0.5s ease'; resultsSection.style.opacity = '1'; resultsSection.style.transform = 'translateY(0)'; }, 100); // Scroll to results resultsSection.scrollIntoView({ behavior: 'smooth', block: 'center' }); } // Update pace chart with animation function updatePaceChart(chartData) { paceChartBody.innerHTML = ''; chartData.forEach((data, index) => { const row = document.createElement('tr'); row.style.opacity = '0'; row.style.transform = 'translateX(-20px)'; row.innerHTML = ` ${data.distance} ${formatTime(data.pacePer25)} ${formatTime(data.cumulativeTime)} -- -- -- `; paceChartBody.appendChild(row); // Animate row appearance setTimeout(() => { row.style.transition = 'all 0.4s ease'; row.style.opacity = '1'; row.style.transform = 'translateX(0)'; }, index * 100); }); } // Show error message function showError(message) { resultsSection.style.opacity = '0'; resultsSection.style.transform = 'translateY(20px)'; resultsDisplay.innerHTML = `
Error: ${message}
`; // Clear pace chart paceChartBody.innerHTML = 'Calculate pace to see chart'; setTimeout(() => { resultsSection.style.transition = 'all 0.5s ease'; resultsSection.style.opacity = '1'; resultsSection.style.transform = 'translateY(0)'; }, 100); } // Format time in seconds to MM:SS.ss format function formatTime(seconds) { const minutes = Math.floor(seconds / 60); const secs = (seconds % 60).toFixed(2); return `${minutes}:${secs.padStart(5, '0')}`; } // Reset form function function resetForm() { paceCalculator.reset(); resultsSection.style.opacity = '0'; resultsDisplay.innerHTML = '

Enter your swim details and click calculate to see your pace per 25.

'; // Reset pace chart paceChartBody.innerHTML = 'Calculate pace to see chart'; // Reset stopwatch data currentPaceData = []; currentSwimmerData = {}; setTimeout(() => { resultsSection.style.transition = 'all 0.5s ease'; resultsSection.style.opacity = '1'; }, 300); } // Event listeners calculateBtn.addEventListener('click', calculatePace); resetBtn.addEventListener('click', resetForm); // Form submission prevention paceCalculator.addEventListener('submit', function(e) { e.preventDefault(); calculatePace(); }); // Input validation and real-time feedback const inputs = document.querySelectorAll('.form-input'); inputs.forEach(input => { input.addEventListener('input', function() { if (this.checkValidity()) { this.style.borderColor = '#27ae60'; this.style.boxShadow = '0 0 0 3px rgba(39, 174, 96, 0.1)'; } else { this.style.borderColor = '#e74c3c'; this.style.boxShadow = '0 0 0 3px rgba(231, 76, 60, 0.1)'; } }); input.addEventListener('blur', function() { this.style.borderColor = '#e1e8ed'; this.style.boxShadow = 'none'; }); }); // Add loading animation for calculate button calculateBtn.addEventListener('click', function() { const originalText = this.textContent; this.textContent = 'Calculating...'; this.disabled = true; setTimeout(() => { this.textContent = originalText; this.disabled = false; }, 1000); }); // Parallax effect for header image window.addEventListener('scroll', function() { const scrolled = window.pageYOffset; const headerImage = document.querySelector('.header__image'); if (headerImage) { headerImage.style.transform = `translateY(${scrolled * 0.5}px)`; } }); // Add fade-in animation for elements on scroll const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Observe elements for scroll animations const animatedElements = document.querySelectorAll('.calculator-section, .results-section, .footer'); animatedElements.forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(20px)'; el.style.transition = 'all 0.6s ease'; observer.observe(el); }); // Enhanced chart interactions paceChartBody.addEventListener('mouseover', function(e) { if (e.target.tagName === 'TD') { const row = e.target.parentElement; if (row.tagName === 'TR' && !row.classList.contains('pace-chart__placeholder')) { row.style.backgroundColor = '#e3f2fd'; row.style.transform = 'scale(1.02)'; row.style.transition = 'all 0.3s ease'; } } }); paceChartBody.addEventListener('mouseout', function(e) { if (e.target.tagName === 'TD') { const row = e.target.parentElement; if (row.tagName === 'TR' && !row.classList.contains('pace-chart__placeholder')) { row.style.backgroundColor = ''; row.style.transform = 'scale(1)'; } } }); // Initialize stopwatch controls updateStopwatchControls(); // Remove 'm' from How to use section const instructions = document.querySelector('.stopwatch-instructions'); if (instructions) { const listItems = instructions.querySelectorAll('li'); listItems.forEach(li => { li.textContent = li.textContent.replace('25m', '25'); }); } });PK l[¢# ©{{ README.md# Hunters Swim Pace Calculator Generated with AIBuilder Prompt: create a web app that will calculate the pace of a swimmer given the distance and time as inputs. Also Ask for the swimmers name, the event to swim, and the time. use length = 25. Add a calculate button that will use this formula to calculate the pace. pace = time / (distance / length). add a reset button. PK l[ƒ› index.htmlPK l[4Ýws's' (styles.cssPK l[«“E…?[?[ Ã?script.jsPK l[¢# ©{{ )›README.mdPKÞËœ