METAR Extractor

v4.2.0

by Sai Chauhan

HTML

<!DOCTYPE HTML>

<html>
	<head>
		<meta charset="UTF-8">
		<title>METAR Extractor</title>
		<style>
		body {
			padding:20px;
			font-family: Veranda, Helvetica, sans-serif; 
			color:black; 
			background-color:#FFFFFF;
		}
		
		article {
			color:black; 
			background-color:#E4E4E4; 
			padding:15px; 
		}
		
		#text {
			font-size: 1.25em;
			line-height: 0.5;
		}
		
		label {
			font-size: 1.25em;
		}
		
		input[type=text] {
			width: 90%;
			font-size: 1.25em;
			background-color: #ffffff;
			color: #000000;
			padding: 5px;
			border: none;
		}

		input[type=number] {
			width: 15%;
			font-size: 1.25em;
			background-color: #ffffff;
			color: #000000;
			padding: 5px;
			border: none;
			margin-right: 20px;
		}
		
		</style>
	</head>
	<body align="center" onLoad="run()">
		<article id="inputs">
			<label for="time">Local Sim Time: </label> <input type="number" id="time" placeholder="0-24" max="24" min="0"/>
			<br/><br/>
			<label for="metar">METAR: </label> <input type="text" id="metar" placeholder="KDFW 170153Z 18019G28KT 10SM BKN240 BKN300 31/21 A2992 RMK AO2 SLP123 T03110211"/>
		</article>
		
		<br/>
		
		<article id="text">
			<p id="textInfoAirport"></p>
			<p id="textInfoZulu"></p>
			<br/>
			<p id="textInfoTime"></p>
			<br/>
			<p id="textInfoVisibility"></p>
			<p id="textInfoWindDirection"></p>
			<p id="textInfoWindSpeed"></p>
			<p id="textInfoWindGust"></p>
			<p id="textInfoTurbulance"></p>
			<p id="textInfoTemperature"></p>
			<p id="textInfoClouds"></p>
		</article>
		<script>
			
			let inputMetar = document.getElementById("metar");
			let inputTime = document.getElementById("time");
			
			inputMetar.addEventListener("input", function() {run()}, false);
			inputTime.addEventListener("input", function() {run()}, false);
			
			function run(){
								
				var timeSim = inputTime.value;
				var infoTime = '';
				if (timeSim > 6 && timeSim < 18) {infoTime = 'Noon'} else {if (timeSim == 6) {infoTime = 'Sunrise'} else {if (timeSim == 18)...