tweather.html - adamsgaard.dk - my academic webpage
 (HTM) git clone git://src.adamsgaard.dk/adamsgaard.dk
 (DIR) Log
 (DIR) Files
 (DIR) Refs
 (DIR) README
 (DIR) LICENSE
       ---
       tweather.html (2795B)
       ---
            1 <!DOCTYPE html>
            2 <html lang="en">
            3 <head>
            4         <meta charset="utf-8">
            5         <meta name="viewport" content="width=device-width, initial-scale=1">
            6 
            7         <script type="text/javascript">
            8                 function getUrlVars() {
            9                         var vars = {};
           10                         var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
           11                                                                  function(m,key,value) {
           12                                                                      vars[key] = value; });
           13                         return vars;
           14                 }
           15 
           16                 var zip = getUrlVars()["z"];
           17                 if (zip == "" || zip == undefined) {
           18                         zip = 8000;
           19                 }
           20                 var lon, lat;
           21                 if (zip == 1000) {
           22                         lon = "55.68";
           23                         lat = "12.57";
           24                 } else if (zip == 7700) {
           25                         lon = "56.96";
           26                         lat = "8.70";
           27                 } else if (zip == 7730) {
           28                         lon = "57.10";
           29                         lat = "8.72";
           30                 } else if (zip == 8000) {
           31                         lon = "56.16";
           32                         lat = "10.20";
           33                 } else if (zip == 8400) {
           34                         lon = "56.24";
           35                         lat = "10.58";
           36                 } else if (zip == 9520) {
           37                         lon = "56.84";
           38                         lat = "9.89";
           39                 }
           40         </script>
           41 
           42         <title id="pagetitle"></title>
           43 
           44         <style>
           45                 body{
           46                         margin:1em auto;
           47                         max-width:40em;
           48                         padding:0 .62em;
           49                         font:1.2em/1.62 sans-serif;
           50                         color:#4d4d4c;
           51                 }
           52                 h1,h2,h3 {
           53                         text-align:center;
           54                         color:#333;
           55                         line-height:1.2;
           56                 }
           57                 a {
           58                         color:#126b8c;
           59                         text-decoration:none;
           60                 }
           61                 img {
           62                         max-width:100%;
           63                         padding:0.3em 0em;
           64                 }
           65                 @media print {
           66                         body{
           67                                 max-width:none
           68                         }
           69                 }
           70                 form {
           71                         text-align:center;
           72                 }
           73         </style>
           74 </head>
           75 <body>
           76 <article>
           77 <header>
           78 <h1 id="pageheader"></h1>
           79 <aside>
           80         <center>
           81                 <p>
           82                         <a href="?z=1000">København</a>,
           83                         <a href="?z=7700">Thisted</a>,
           84                         <a href="?z=7730">Hanstholm</a>,
           85                         <a href="?z=8000">Aarhus</a>,
           86                         <a href="?z=8400">Ebeltoft</a>
           87                 </p>
           88         </center>
           89 </aside>
           90 </header>
           91 
           92 <div style="text-align:center">
           93         <img src="#" id="dmi-0-2" alt="0-2 days">
           94         <img src="#" id="dmi-3-9" alt="3-9 days">
           95         <img src="#" id="clearoutside" alt="Clear Outside forecast">
           96 </div>
           97 
           98 <form action="" method="get">
           99         <input type="text" placeholder="Postnummer" name="z">
          100         <input type="submit" value="Gå">
          101 </form>
          102 
          103 </article>
          104 
          105 <script>
          106         document.getElementById("pagetitle").innerHTML = "Vejrudsigt for " + zip;
          107         document.getElementById("pageheader").innerHTML = "Vejrudsigt for " + zip;
          108 
          109         document.getElementById("dmi-0-2").setAttribute("src",
          110                 "https://servlet.dmi.dk/byvejr/servlet/byvejr_dag1?by="+zip+"&mode=long&eps=true");
          111 
          112         document.getElementById("dmi-3-9").setAttribute("src",
          113                 "https://servlet.dmi.dk/byvejr/servlet/byvejr?by="+zip+"&tabel=dag3_9&eps=true");
          114 
          115         if (lon && lat) {
          116                 document.getElementById("clearoutside").style.visibility = "visible";
          117                 document.getElementById("clearoutside").setAttribute("src",
          118                         "https://clearoutside.com/forecast_image_large/"+lon+"/"+lat+"/forecast.png");
          119         } else {
          120                 document.getElementById("clearoutside").style.visibility = "hidden";
          121         }
          122 </script>
          123 
          124 </body>
          125 </html>