tanner/html-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
This commit is contained in:
Tanner Collin
2026-02-14 14:35:01 -07:00
parent f861b3cecd
commit 2cd12473e5
1 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
metar.html
+23 -2
View File
@@ -5,17 +5,32 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>METAR Practice</title> <title>METAR Practice</title>
<style> <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> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<h1>METAR Practice</h1> <h1>METAR Practice</h1>
<div id="metar-display"></div>
<button id="new-metar-btn">New METAR</button>
</div> </div>
<script> <script>
const metarDisplay = document.getElementById('metar-display');
const newMetarBtn = document.getElementById('new-metar-btn');
const metars = []; 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') fetch('metars.txt')
.then(response => response.text()) .then(response => response.text())
.then(data => { .then(data => {
@@ -29,8 +44,14 @@
} }
}); });
console.log(`Loaded ${metars.length} METARs.`); 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> </script>
</body> </body>
</html> </html>