${loc.name}

${loc.address}

`; locationsList.appendChild(listItem); listItem.addEventListener('click', () => highlightLocation(loc.id)); }); }; const highlightLocation = (id) => { // Remove active class from all document.querySelectorAll('.map-pin, .location-item').forEach(el => el.classList.remove('active')); // Add active class to selected document.querySelectorAll(`[data-id='${id}']`).forEach(el => el.classList.add('active')); }; const handleAddAed = (e) => { e.preventDefault(); const nameInput = document.getElementById('aed-name'); const addressInput = document.getElementById('aed-address'); const newAed = { id: Date.now(), name: nameInput.value, address: addressInput.value, coords: { // Add at a random position for demonstration x: Math.floor(Math.random() * 60) + 20, y: Math.floor(Math.random() * 60) + 20, } }; aedLocations.push(newAed); renderLocations(); addAedForm.reset(); highlightLocation(newAed.id); }; const handlePdfDownload = () => { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.setFont('helvetica', 'bold').setFontSize(20); doc.text('AED Locations - Pirganj, Bangladesh', 105, 20, { align: 'center' }); doc.setFont('helvetica', 'normal').setFontSize(12); doc.text('For emergency use. Always call for help first.', 105, 28, { align: 'center' }); const tableData = aedLocations.map(loc => [loc.name, loc.address]); doc.autoTable({ startY: 40, head: [['Location Name', 'Address / Description']], body: tableData, theme: 'grid', headStyles: { fillColor: '#ef4444' } }); doc.save('AED_Locations_Pirganj.pdf'); }; // --- EVENT LISTENERS --- addAedForm.addEventListener('submit', handleAddAed); downloadPdfBtn.addEventListener('click', handlePdfDownload); // --- INITIALIZATION --- renderLocations(); });