feat: Display random METARs and add "New METAR" button

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
2026-02-14 14:35:01 -07:00
parent f861b3cecd
commit 2cd12473e5
1 changed files with 23 additions and 2 deletions
@@ -5,17 +5,32 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>METAR Practice</title>
    <style>
+        body { font-family: monospace; padding: 2em; }
+        #metar-display { font-size: 1.2em; margin-bottom: 1em; }
+        button { font-size: 1em; padding: 0.5em 1em; }
    </style>
 </head>
 <body>
    <div id="app">
        <h1>METAR Practice</h1>

-
+        <div id="metar-display"></div>
+        <button id="new-metar-btn">New METAR</button>
    </div>
    <script>
+        const metarDisplay = document.getElementById('metar-display');
+        const newMetarBtn = document.getElementById('new-metar-btn');
        const metars = [];

+        function displayNewMetar() {
+            if (metars.length === 0) {
+                metarDisplay.textContent = 'No METARs loaded.';
+                return;
+            }
+            const randomIndex = Math.floor(Math.random() * metars.length);
+            metarDisplay.textContent = metars[randomIndex];
+        }
+
        fetch('metars.txt')
            .then(response => response.text())
            .then(data => {
@@ -29,8 +44,14 @@
                    }
                });
                console.log(`Loaded ${metars.length} METARs.`);
+                displayNewMetar(); // Display initial METAR
            })
-            .catch(error => console.error('Error fetching or parsing metars.txt:', error));
+            .catch(error => {
+                console.error('Error fetching or parsing metars.txt:', error)
+                metarDisplay.textContent = 'Could not load METARs.';
+            });
+
+        newMetarBtn.addEventListener('click', displayNewMetar);
    </script>
 </body>
 </html>