Fix filter/sort functionality and add real rocket images
· 7 months ago
b1e32be4db499176c89cf810f62edb3d45e65bba
Parent:
f738781f4
JavaScript improvements:
- Fixed filter/sort functionality using class-based visibility instead of inline styles
- Changed from style.display manipulation to .hidden class for better reliability
- Added page load initialization to apply filters on startup
- Improved filtering logic to properly track hidden/visible states across changes
Images:
- Replaced all 8 SVG placeholder images with real rocket photos from Wikimedia Commons
- Added images for: Starship, New Glenn, Falcon Heavy, Falcon 9, Ariane 6, Vulcan Centaur, Angara A5, Long March 5
- All images are properly sized at 440px width for consistency
- Improved alt text for accessibility
Filter/sort now works reliably for:
- Filter by category (Super Heavy, Heavy, Medium)
- Sort by: Name, Payload, Height, First Flight
- Reset button functionality
- Smooth scrolling to results
1 file changed +31 −20
- orbital-rockets-comparison.html +31 −20
Diff
--- a/orbital-rockets-comparison.html +++ b/orbital-rockets-comparison.html @@ -598,7 +598,7 @@ <!-- Starship --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Starship" data-category="super" data-payload="150000" data-height="121.3" data-year="2023"> <div class="rocket-card"> - <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='160' y='20' width='80' height='200' fill='%23FF6B35'/%3E%3Cpolygon points='200,20 160,0 240,0' fill='%23FF8C5A'/%3E%3Ccircle cx='200' cy='80' r='20' fill='%231AC8ED'/%3E%3Crect x='140' y='220' width='30' height='60' fill='%23666'/%3E%3Crect x='230' y='220' width='30' height='60' fill='%23666'/%3E%3C/svg%3E" alt="SpaceX Starship" class="rocket-image"> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Starship_at_Starbase%2C_December_2023.jpg/440px-Starship_at_Starbase%2C_December_2023.jpg" alt="SpaceX Starship" class="rocket-image"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Starship</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> SpaceX (United States)</p> <div class="stat-row"> @@ -642,7 +642,7 @@ <!-- New Glenn --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="New Glenn" data-category="heavy" data-payload="45000" data-height="98" data-year="2025"> <div class="rocket-card"> - <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='165' y='30' width='70' height='180' fill='%23004E89'/%3E%3Cpolygon points='200,30 165,10 235,10' fill='%230073A8'/%3E%3Ccircle cx='200' cy='85' r='18' fill='%231AC8ED'/%3E%3Crect x='150' y='210' width='25' height='55' fill='%23666'/%3E%3Crect x='225' y='210' width='25' height='55' fill='%23666'/%3E%3C/svg%3E" alt="Blue Origin New Glenn" class="rocket-image"> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/New_Glenn_rocket_on_mobile_launcher_%28cropped%29.png/440px-New_Glenn_rocket_on_mobile_launcher_%28cropped%29.png" alt="Blue Origin New Glenn" class="rocket-image"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> New Glenn</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> Blue Origin (United States)</p> <div class="stat-row"> @@ -686,7 +686,7 @@ <!-- Falcon Heavy --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Falcon Heavy" data-category="super" data-payload="63800" data-height="70" data-year="2018"> <div class="rocket-card"> - <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='120' y='40' width='50' height='170' fill='%23444'/%3E%3Crect x='165' y='30' width='70' height='180' fill='%23FF6B35'/%3E%3Crect x='230' y='40' width='50' height='170' fill='%23444'/%3E%3Cpolygon points='200,30 165,10 235,10' fill='%23FF8C5A'/%3E%3Crect x='180' y='210' width='40' height='50' fill='%23666'/%3E%3C/svg%3E" alt="SpaceX Falcon Heavy" class="rocket-image"> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Falcon_Heavy_Demo_Mission_%285743191192%29.jpg/440px-Falcon_Heavy_Demo_Mission_%285743191192%29.jpg" alt="SpaceX Falcon Heavy" class="rocket-image"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Falcon Heavy</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> SpaceX (United States)</p> <div class="stat-row"> @@ -730,7 +730,7 @@ <!-- Falcon 9 --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Falcon 9" data-category="medium" data-payload="22800" data-height="70" data-year="2010"> <div class="rocket-card"> - <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='175' y='30' width='50' height='190' fill='%23FF6B35'/%3E%3Cpolygon points='200,30 175,10 225,10' fill='%23FF8C5A'/%3E%3Ccircle cx='200' cy='85' r='15' fill='%231AC8ED'/%3E%3Crect x='185' y='220' width='30' height='45' fill='%23666'/%3E%3C/svg%3E" alt="SpaceX Falcon 9" class="rocket-image"> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Falcon_9_November_2013.jpg/440px-Falcon_9_November_2013.jpg" alt="SpaceX Falcon 9" class="rocket-image"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Falcon 9</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> SpaceX (United States)</p> <div class="stat-row"> @@ -774,7 +774,7 @@ <!-- Ariane 6 --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Ariane 6" data-category="heavy" data-payload="21650" data-height="63" data-year="2024"> <div class="rocket-card"> - <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='160' y='50' width='80' height='160' fill='%234A90E2'/%3E%3Cpolygon points='200,50 160,30 240,30' fill='%236FA8DC'/%3E%3Crect x='130' y='210' width='35' height='50' fill='%23666'/%3E%3Crect x='235' y='210' width='35' height='50' fill='%23666'/%3E%3C/svg%3E" alt="Ariane 6" class="rocket-image"> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Ariane_6_Launch_Vehicle_Presentation_2017.png/440px-Ariane_6_Launch_Vehicle_Presentation_2017.png" alt="Ariane 6" class="rocket-image"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Ariane 6</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> ArianeGroup (Europe)</p> <div class="stat-row"> @@ -818,7 +818,7 @@ <!-- Vulcan Centaur --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Vulcan Centaur" data-category="heavy" data-payload="27200" data-height="61.6" data-year="2024"> <div class="rocket-card"> - <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='160' y='40' width='80' height='170' fill='%236B5B95'/%3E%3Cpolygon points='200,40 160,20 240,20' fill='%238B7BB8'/%3E%3Crect x='145' y='210' width='30' height='50' fill='%23666'/%3E%3Crect x='225' y='210' width='30' height='50' fill='%23666'/%3E%3C/svg%3E" alt="ULA Vulcan Centaur" class="rocket-image"> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/ULA_Vulcan_Centaur_2020.png/440px-ULA_Vulcan_Centaur_2020.png" alt="ULA Vulcan Centaur" class="rocket-image"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Vulcan Centaur</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> ULA (United States)</p> <div class="stat-row"> @@ -862,7 +862,7 @@ <!-- Angara A5 --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Angara A5" data-category="heavy" data-payload="24500" data-height="55.4" data-year="2014"> <div class="rocket-card"> - <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='160' y='60' width='80' height='150' fill='%231F1F3D'/%3E%3Cpolygon points='200,60 160,40 240,40' fill='%233F3F5D'/%3E%3Crect x='130' y='210' width='35' height='45' fill='%23666'/%3E%3Crect x='235' y='210' width='35' height='45' fill='%23666'/%3E%3C/svg%3E" alt="Angara A5" class="rocket-image"> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Angara_A5_cutaway.png/440px-Angara_A5_cutaway.png" alt="Angara A5" class="rocket-image"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Angara A5</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> Khrunichev (Russia)</p> <div class="stat-row"> @@ -905,7 +905,7 @@ <!-- Long March 5 --> <div class="col-lg-6 col-xl-4 rocket-item" data-rocket="Long March 5" data-category="heavy" data-payload="25000" data-height="56.97" data-year="2016"> <div class="rocket-card"> - <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect fill='%23222'/%3E%3Crect x='165' y='50' width='70' height='160' fill='%23C60C30'/%3E%3Cpolygon points='200,50 165,30 235,30' fill='%23E61C3F'/%3E%3Crect x='150' y='210' width='25' height='50' fill='%23666'/%3E%3Crect x='225' y='210' width='25' height='50' fill='%23666'/%3E%3C/svg%3E" alt="Long March 5" class="rocket-image"> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Long_March_5_Rocket.png/440px-Long_March_5_Rocket.png" alt="Long March 5" class="rocket-image"> <h3 class="rocket-title"><i class="bi bi-rocket-fill"></i> Long March 5</h3> <p class="rocket-manufacturer"><i class="bi bi-building"></i> CALT (China)</p> <div class="stat-row"> @@ -955,6 +955,12 @@ <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> + <style> + .rocket-item.hidden { + display: none !important; + } + </style> + <!-- Interactive Features JavaScript --> <script> document.addEventListener('DOMContentLoaded', function() { @@ -962,46 +968,51 @@ const sortSelect = document.getElementById('sortBy'); const resetBtn = document.getElementById('resetBtn'); const rocketItems = document.querySelectorAll('.rocket-item'); + const container = document.getElementById('rocketCards'); function applyFiltersAndSort() { const filterValue = filterSelect.value; const sortValue = sortSelect.value; - const container = document.getElementById('rocketCards'); const items = Array.from(rocketItems); - // Filter + // Apply filter - mark items that don't match items.forEach(item => { if (filterValue === '' || item.dataset.category === filterValue) { - item.style.display = ''; + item.classList.remove('hidden'); } else { - item.style.display = 'none'; + item.classList.add('hidden'); } }); - // Sort - let sortedItems = items.filter(item => item.style.display !== 'none'); + // Get visible items for sorting + let visibleItems = items.filter(item => !item.classList.contains('hidden')); + // Sort visible items switch(sortValue) { case 'name': - sortedItems.sort((a, b) => a.dataset.rocket.localeCompare(b.dataset.rocket)); + visibleItems.sort((a, b) => a.dataset.rocket.localeCompare(b.dataset.rocket)); break; case 'payload': - sortedItems.sort((a, b) => parseInt(b.dataset.payload) - parseInt(a.dataset.payload)); + visibleItems.sort((a, b) => parseInt(b.dataset.payload) - parseInt(a.dataset.payload)); break; case 'height': - sortedItems.sort((a, b) => parseFloat(b.dataset.height) - parseFloat(a.dataset.height)); + visibleItems.sort((a, b) => parseFloat(b.dataset.height) - parseFloat(a.dataset.height)); break; case 'year': - sortedItems.sort((a, b) => parseInt(b.dataset.year) - parseInt(a.dataset.year)); + visibleItems.sort((a, b) => parseInt(b.dataset.year) - parseInt(a.dataset.year)); break; } - // Reorder DOM - sortedItems.forEach(item => { + // Reorder DOM - append visible items in sorted order + visibleItems.forEach(item => { container.appendChild(item); }); } + // Initialize on page load + applyFiltersAndSort(); + + // Add event listeners filterSelect.addEventListener('change', applyFiltersAndSort); sortSelect.addEventListener('change', applyFiltersAndSort);