diff --git a/radar.html b/radar.html
new file mode 100644
index 0000000..7843bb7
--- /dev/null
+++ b/radar.html
@@ -0,0 +1,666 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Weather Radar</title>
+
+    <meta charset="utf-8"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+
+    <link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"/>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+    <style type="text/css">
+        a {
+            color: lightblue;
+        }
+        a:hover {
+            color: white;
+        }
+        .sli {
+            list-style: none;
+            display: inline-block;
+        }
+        body{
+            background-color: rgb(26, 26, 26);
+            color: white;
+            font-family: Bahnschrift, Veranda, sans-serif;
+            overflow-y: hidden;
+        }
+        .material-symbols-outlined {
+            font-variation-settings:
+                'FILL' 0,
+                'wght' 600,
+                'GRAD' 0,
+                'opsz' 20
+        }
+        button {
+            background-color: white;
+            border: grey 2px solid;
+            padding: 5px;
+            padding-left: 10px;
+            padding-right: 10px;
+            font-size: 15px;
+            font-weight: bold;
+            cursor: pointer;
+            border-radius: 10px;
+            transition-duration: 0.25s;
+        }
+        button:hover {
+            background-color: rgb(241, 241, 241);
+            font-size: 16px;
+        }
+
+        .close {
+            border-radius: 100%;
+            border: none;
+            background: red;
+            color: white;
+            text-align: center;
+            padding: 0;
+            padding-left: 2px;
+            padding-right: 2px;
+            padding-top: 1px;
+            position: relative;
+            left: calc(100% - 20px);
+        }
+
+        .close:hover {
+            background-color: darkred;
+        }
+
+        select {
+            width: 100%;
+            border: none;
+            border-radius: 100px;
+            background: white;
+            padding: 5px;
+        }
+    </style>
+<!-- CSS_ADSBLOCK_START -->
+<link rel="stylesheet" href="https://adblockers.opera-mini.net/css_block/default-domainless.css" type="text/css" />
+<!-- CSS_ADSBLOCK_END -->
+</head>
+<body>
+
+<ul style="margin-right: 10px; text-align:right; position: absolute;top: 0; left: 50%; right: 0; height: 50px;">
+    <li class="sli"><button onclick="stop(); showFrame(animationPosition - 1); return;">&lt;</button></li>
+    <li class="sli"><button onclick="playStop();">Play / Stop</button></li>
+    <li class="sli"><button onclick="stop(); showFrame(animationPosition + 1); return;">&gt;</button></li>
+    <li class="sli"><button onclick="refresh();">Refresh</button></li>
+
+    <li class="sli"><button onclick="settings();" id="modalBtn">Settings</button></li>
+</ul>
+
+<div id="timestamp" style="margin-right: 10px; margin-bottom: 5px; text-align:right; position: absolute;top: 50px; left: 50%; right: 0; height: 20px;"></div>
+
+<h3>BusyBird15's National Weather Radar v1.1</h3>
+
+<div id="settingsModal" style="display: none;
+border-left: 0px;
+width: 300px;
+height: 300px;
+border-radius: 20px;
+padding: 10px;
+position: absolute;
+right: 4%;
+border: white 5px solid;
+top: calc(25% - 122.5px);
+z-index: 999;
+background: black;">
+    <button onclick="closeSettings();" class="close"><span class="material-symbols-outlined" style="font-size: 16px;">
+        close
+        </span></button>
+    <br><br>
+    <input type="radio" name="kind" checked="checked" onchange="setKind('radar')">Radar <input type="radio" name="kind" onchange="setKind('satellite')">Infrared Satellite<br><br>
+<input type="radio" name="duration" checked="checked" onchange="setKind('past')">Past <input type="radio" name="duration" onchange="setKind('future')">Past + Future<br><br>
+
+    <select id="colors" onchange="setColors(); return;">
+        <option value="0">Black and White Values</option>
+        <option value="1">Original</option>
+        <option value="2">Universal Blue</option>
+        <option value="3">TITAN</option>
+        <option value="4">The Weather Channel</option>
+        <option value="5">Meteored</option>
+        <option value="6" selected="selected"> NEXRAD Level-III (default)</option>
+        <option value="7">RAINBOW @ SELEX-SI</option>
+        <option value="8">Dark Sky</option>
+    </select>
+    <p><br><br>Radar tiles provided by <a href="https://rainviewer.com/api/weather-maps-api.html">RainViewer.</a>. US weather alerts provided by the <a href="https://weather.gov/documentation/services-web-api">NWS API.</a>. Map tiles provided by <a href="https://leafletjs.com">Leaflet.</a><br>Programmed by <a href="https://twitter.com/busybird150">BusyBird15</a>, with some help from <a href="https://youtube.com/@dagreenboi">DaGreenBoi.</a></p>
+</div>
+
+<div class="alertlist" style="border-left: 0px; scroll-behavior: auto; position: absolute; height: 40vh; width: 25%;">
+    <div style="    border: 5px solid white;
+    border-radius: 25px;
+    -moz-border-radius: 10px;">
+        <h2 style="padding-left: 5px; text-align: center; color: white; padding-top: 10px;">Legend</h2>
+        <p style="padding-left: 5px; color: red; margin: 4px;"><b>RED: </b>Tornado Warning</p>
+        <p style="padding-left: 5px; color: rgb(236, 193, 0); margin: 4px;"><b>YELLLOW: </b>Severe Thunderstorm Warning</p>
+        <p style="padding-left: 5px; color: #FF0284; margin: 4px;"><b>MAGENTA: </b>Flood Warning</p>
+        <p style="padding-left: 5px; color: green; margin: 4px;"><b>GREEN: </b>Flash Flood Warning</p>
+        <p style="padding-left: 5px; color: blue; margin: 4px;"><b>BLUE: </b>Special Weather Statement</p>
+        <p style="padding-left: 5px; color: orange; margin: 4px;"><b>ORANGE: </b>Other</p>
+    </div>
+    <div style="visibility: hidden; overflow-y: auto; margin-top: 10px; height: 53vh; border: 5px solid white; border-radius: 15px;  -moz-border-radius: 10px; scrollbar-width: thin;" id="alertDeets">
+        <p style="height:2px"></p>
+        <h3 id="alert_title" style="padding-left: 5px; margin: 4px; ">Unknown alert</h3>
+        <p style="height:2px"></p>
+        <p id="alert_issued" style="padding-left: 5px; margin: 4px;">Unknown issuance</p>
+        <p id="alert_expiration" style="padding-left: 5px; margin: 4px;">Unknown expiration</p>
+        <p style="height:2px"></p>
+        <p id="alert_hazards" style="padding-left: 5px; margin: 4px;">Unknown issuance</p>
+        <p id="alert_impacts" style="padding-left: 5px; margin: 4px;">Unknown issuance</p>
+        <p style="height:2px"></p>
+        <p id="alert_areas" style="padding-left: 5px; margin: 4px;">Unknown areas</p>
+        <br>
+        <p id="alert_description" style="padding-left: 5px; margin: 4px;">Unknown description</p>
+
+    </div>
+</div>
+
+
+<div id="mapid" style="border-radius: 10px; position: absolute; top: 80px; left: 26%; bottom: 1%; right: 1%;"></div>
+
+<script>
+    var map = L.map('mapid').setView([38.0, -95.2], 6);
+
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+
+    /**
+     * RainViewer radar animation part
+     * @type {number[]}
+     */
+    var apiData = {};
+    var mapFrames = [];
+    var lastPastFramePosition = -1;
+    var radarLayers = [];
+
+    var doFuture = false;     // Whether or not to show future radar
+
+    var optionKind = 'radar'; // can be 'radar' or 'satellite'
+
+    var optionTileSize = 256; // can be 256 or 512.
+    var optionColorScheme = 6; // from 0 to 8. Check the https://rainviewer.com/api/color-schemes.html for additional information
+    var optionSmoothData = 1; // 0 - not smooth, 1 - smooth
+    var optionSnowColors = 1; // 0 - do not show snow colors, 1 - show snow colors
+
+    var animationPosition = 0;
+    var animationTimer = false;
+
+    var loadingTilesCount = 0;
+    var loadedTilesCount = 0;
+
+    var alertData = []
+    var allalerts = [];
+
+    function settings(){
+        document.getElementById("settingsModal").style.display = "block";
+    }
+
+    function closeSettings(){
+        document.getElementById("settingsModal").style.display = "none";
+    }
+
+    function formatTimestamp(isoTimestamp) {
+      const date = new Date(isoTimestamp);
+      const options = {
+        year: 'numeric', month: 'long', day: 'numeric',
+        hour: '2-digit', minute: '2-digit', timeZoneName: 'short'
+      };
+      return date.toLocaleString('en-US', options);
+    }
+
+    function reverseSubarrays(arr) {
+        return arr.map(subArr => subArr.slice().reverse());
+    }
+
+    function findPair(list, target) {
+      for (let i = 0; i < list.length; i++) {
+        if (list[i][0] === target) {
+          return list[i][1];
+        }
+      }
+      return null
+    }
+
+    function findPairInDictionary(dicts, target) {
+        for (const dict of dicts) {
+            console.log(dict + " with target " + target)
+            console.log(alertData)
+            if (target in dict) {
+                return dict[target];
+                }
+            }
+        console.log("Couldn't find obj.")
+    }
+
+    function convertDictsToArrayOfArrays(arr) {
+        return arr.map(obj => Object.values(obj));
+    }
+
+    function getAlert(polycoords){
+        thisID = findPair(allalerts, polycoords.join());
+        console.log(thisID);
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', 'https://api.weather.gov/alerts/'+thisID, true);
+        xhr.setRequestHeader('Accept', 'Application/geo+json');
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState === 4 && xhr.status === 200) {
+                document.getElementById("alertDeets").style.visibility = "visible";
+                var alertInfo = JSON.parse(xhr.responseText);
+                var alertTitle = document.getElementById('alert_title');
+                if (alertInfo.properties.event.includes("Severe Thunderstorm")){
+                    alertTitle.style.color = "yellow";
+                } else if (alertInfo.properties.event.includes("Tornado")){
+                    alertTitle.style.color = "red";
+                } else if (alertInfo.properties.event.includes("Flash Flood")){
+                    alertTitle.style.color = "green";
+                } else if (alertInfo.properties.event.includes("Flood")){
+                    alertTitle.style.color = "#FF0284";
+                } else if (alertInfo.properties.event.includes("Special Weather")){
+                    alertTitle.style.color = "blue";
+                } else {
+                    alertTitle.style.color = "orange";
+                }
+                alertTitle.textContent = alertInfo.properties.event;
+                var alertExp = document.getElementById('alert_expiration');
+                alertExp.textContent = "Expires: " + formatTimestamp(alertInfo.properties.expires);
+                var alertiss = document.getElementById('alert_issued');
+                alertiss.textContent = "Issued: " + formatTimestamp(alertInfo.properties.sent);
+                var areasl = document.getElementById('alert_areas');
+                areasl.textContent = "Areas: " + alertInfo.properties.areaDesc;
+                var alertdesc = document.getElementById('alert_description');
+                alertdesc.textContent = alertInfo.properties.description;
+                try {
+                    var hazards = alertInfo.properties.description.split("HAZARD...")[1].split("\n\n")[0].replace(/\n/g, " ");
+                } catch {
+                    var hazards = "No hazards identified."
+                }
+                var haz = document.getElementById('alert_hazards');
+                haz.textContent = "Hazards: " + hazards;
+                try {
+                    var impacts = alertInfo.properties.description.split("IMPACTS...")[1].split("\n\n")[0].replace(/\n/g, " ");
+                } catch {
+                    try {
+                        var impacts = alertInfo.properties.description.split("IMPACT...")[1].split("\n\n")[0].replace(/\n/g, " ");
+                    } catch {
+                        var impacts = "No impacts identified."
+                }
+                }
+                var imp = document.getElementById('alert_impacts');
+                imp.textContent = "Impacts: " + impacts;
+
+
+
+            } else {
+                console.log(xhr.status);
+            }
+        }
+        xhr.send();
+    }
+
+    function loadAlerts() {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', 'https://api.weather.gov/alerts/active?limit=500', true);
+        xhr.setRequestHeader('Accept', 'Application/geo+json');
+
+        map.eachLayer(function(layer) {
+          if (layer instanceof L.Polygon) {
+            map.removeLayer(layer);
+          }
+        });
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState === 4 && xhr.status === 200) {
+                var alerts = JSON.parse(xhr.responseText).features;
+                alerts.forEach(function(alert) {
+                    try {
+                        var thisItem = alert.geometry.coordinates[0];
+                        console.log(thisItem);
+                        if (alert.properties.event.includes("Severe Thunderstorm")){
+                            var polygon = L.polygon(reverseSubarrays(thisItem), {color: 'yellow'}).addTo(map);
+                            polygon.setStyle({fillOpacity: 0.4});
+                            var thisAlert = [];
+                            thisAlert.push(polygon.getLatLngs().join())
+                            thisAlert.push(alert.properties.id)
+                            allalerts.push(thisAlert);
+                            polygon.on('mouseover', function (e) {
+                                polygon.setStyle({ color: 'orange', fillOpacity: 0.7 });
+                            }); polygon.on('mouseout', function (e) {
+                                polygon.setStyle({ color: 'yellow', fillOpacity: 0.4 });
+                            }); polygon.on('click', function (e) {
+                                document.getElementById("alertDeets").style.visibility = "hidden";
+                                getAlert(e.target.getLatLngs());
+                            });
+                        } else if (alert.properties.event.includes("Tornado")){
+                            var polygon = L.polygon(reverseSubarrays(thisItem), {color: 'red'}).addTo(map);
+                            polygon.setStyle({fillOpacity: 0.4});
+                            var thisAlert = [];
+                            thisAlert.push(polygon.getLatLngs().join())
+                            thisAlert.push(alert.properties.id)
+                            allalerts.push(thisAlert);
+                            polygon.on('mouseover', function (e) {
+                                polygon.setStyle({ color: 'orange', fillOpacity: 0.7 });
+                            }); polygon.on('mouseout', function (e) {
+                                polygon.setStyle({ color: 'red', fillOpacity: 0.4 });
+                            }); polygon.on('click', function (e) {
+                                document.getElementById("alertDeets").style.visibility = "hidden";
+                                getAlert(e.target.getLatLngs());
+                            });
+                        } else if (alert.properties.event.includes("Special Weather")){
+                            var polygon = L.polygon(reverseSubarrays(thisItem), {color: 'blue'}).addTo(map);
+                            polygon.setStyle({fillOpacity: 0.4});
+                            var thisAlert = [];
+                            thisAlert.push(polygon.getLatLngs().join())
+                            thisAlert.push(alert.properties.id)
+                            allalerts.push(thisAlert);
+                            polygon.on('mouseover', function (e) {
+                                polygon.setStyle({ color: 'orange', fillOpacity: 0.7 });
+                            }); polygon.on('mouseout', function (e) {
+                                polygon.setStyle({ color: 'blue', fillOpacity: 0.4 });
+                            }); polygon.on('click', function (e) {
+                                document.getElementById("alertDeets").style.visibility = "hidden";
+                                getAlert(e.target.getLatLngs());
+                            });
+                        } else if (alert.properties.event.includes("Flash Flood")){
+                            var polygon = L.polygon(reverseSubarrays(thisItem), {color: 'green'}).addTo(map);
+                            polygon.setStyle({fillOpacity: 0.4});
+                            var thisAlert = [];
+                            thisAlert.push(polygon.getLatLngs().join())
+                            thisAlert.push(alert.properties.id)
+                            allalerts.push(thisAlert);
+                            polygon.on('mouseover', function (e) {
+                                polygon.setStyle({ color: 'orange', fillOpacity: 0.7 });
+                            }); polygon.on('mouseout', function (e) {
+                                polygon.setStyle({ color: 'green', fillOpacity: 0.4 });
+                            }); polygon.on('click', function (e) {
+                                document.getElementById("alertDeets").style.visibility = "hidden";
+                                getAlert(e.target.getLatLngs());
+                            });
+                        } else if (alert.properties.event.includes("Flood")){
+                            var polygon = L.polygon(reverseSubarrays(thisItem), {color: '#FF0284'}).addTo(map);
+                            polygon.setStyle({fillOpacity: 0.4});
+                            var thisAlert = [];
+                            thisAlert.push(polygon.getLatLngs().join())
+                            thisAlert.push(alert.properties.id)
+                            allalerts.push(thisAlert);
+                            polygon.on('mouseover', function (e) {
+                                polygon.setStyle({ color: 'orange', fillOpacity: 0.7 });
+                            }); polygon.on('mouseout', function (e) {
+                                polygon.setStyle({ color: '#FF0284', fillOpacity: 0.4 });
+                            }); polygon.on('click', function (e) {
+                                document.getElementById("alertDeets").style.visibility = "hidden";
+                                getAlert(e.target.getLatLngs());
+                            });
+                        } else {
+                            var polygon = L.polygon(reverseSubarrays(thisItem), {color: '#FF8E02'}).addTo(map);
+                            polygon.setStyle({fillOpacity: 0.4});
+                            var thisAlert = [];
+                            thisAlert.push(polygon.getLatLngs().join())
+                            thisAlert.push(alert.properties.id)
+                            allalerts.push(thisAlert);
+                            polygon.on('mouseover', function (e) {
+                                polygon.setStyle({ color: 'orange', fillOpacity: 0.7 });
+                            }); polygon.on('mouseout', function (e) {
+                                polygon.setStyle({ color: '#FF8E02', fillOpacity: 0.4 });
+                            }); polygon.on('click', function (e) {
+                                document.getElementById("alertDeets").style.visibility = "hidden";
+                                getAlert(e.target.getLatLngs());
+                            });
+                        }
+                        console.log("Added alert")
+                    } catch {
+                        console.log("No coords for obj.")
+                    }
+                });
+            }
+        };
+        xhr.send();
+    }
+
+    function startLoadingTile() {
+        loadingTilesCount++;    
+    }
+    function finishLoadingTile() {
+        // Delayed increase loaded count to prevent changing the layer before 
+        // it will be replaced by next
+        setTimeout(function() { loadedTilesCount++; }, 250);
+    }
+    function isTilesLoading() {
+        return loadingTilesCount > loadedTilesCount;
+    }
+
+    /**
+     * Load all the available maps frames from RainViewer API
+     */
+     var apiRequest = new XMLHttpRequest();
+    apiRequest.open("GET", "https://api.rainviewer.com/public/weather-maps.json", true);
+    apiRequest.onload = function(e) {
+        // store the API response for re-use purposes in memory
+        apiData = JSON.parse(apiRequest.response);
+        initialize(apiData, optionKind);
+    };
+    apiRequest.send();
+
+    /**
+     * Initialize internal data from the API response and options
+     */
+    function initialize(api, kind) {
+        // remove all already added tiled layers
+        for (var i in radarLayers) {
+            map.removeLayer(radarLayers[i]);
+        }
+        mapFrames = [];
+        radarLayers = [];
+        animationPosition = 0;
+
+        if (!api) {
+            return;
+        }
+        if (kind == 'satellite' && api.satellite && api.satellite.infrared) {
+            mapFrames = api.satellite.infrared;
+
+            lastPastFramePosition = api.satellite.infrared.length - 1;
+            showFrame(lastPastFramePosition, true);
+        }
+        else if (api.radar && api.radar.past) {
+            mapFrames = api.radar.past;
+            if (api.radar.nowcast) {
+                if (doFuture){
+                    mapFrames = mapFrames.concat(api.radar.nowcast);
+                }
+            }
+
+            // show the last "past" frame
+            lastPastFramePosition = api.radar.past.length - 1;
+            showFrame(lastPastFramePosition, true);
+        }
+    }
+
+    /**
+     * Animation functions
+     * @param path - Path to the XYZ tile
+     */
+    function addLayer(frame) {
+        if (!radarLayers[frame.path]) {
+            var colorScheme = optionKind == 'satellite' ? 0 : optionColorScheme;
+            var smooth = optionKind == 'satellite' ? 0 : optionSmoothData;
+            var snow = optionKind == 'satellite' ? 0 : optionSnowColors;
+
+            var source = new L.TileLayer(apiData.host + frame.path + '/' + optionTileSize + '/{z}/{x}/{y}/' + colorScheme + '/' + smooth + '_' + snow + '.png', {
+                tileSize: 256,
+                opacity: 0.01,
+                zIndex: frame.time
+            });
+
+            // Track layer loading state to not display the overlay 
+            // before it will completelly loads
+            source.on('loading', startLoadingTile);
+            source.on('load', finishLoadingTile); 
+            source.on('remove', finishLoadingTile);
+
+            radarLayers[frame.path] = source;
+        }
+        if (!map.hasLayer(radarLayers[frame.path])) {
+            map.addLayer(radarLayers[frame.path]);
+        }
+    }
+
+    /**
+     * Display particular frame of animation for the @position
+     * If preloadOnly parameter is set to true, the frame layer only adds for the tiles preloading purpose
+     * @param position
+     * @param preloadOnly
+     * @param force - display layer immediatelly
+     */
+    function changeRadarPosition(position, preloadOnly, force) {
+        while (position >= mapFrames.length) {
+            position -= mapFrames.length;
+        }
+        while (position < 0) {
+            position += mapFrames.length;
+        }
+
+        var currentFrame = mapFrames[animationPosition];
+        var nextFrame = mapFrames[position];
+
+        addLayer(nextFrame);
+
+        // Quit if this call is for preloading only by design
+        // or some times still loading in background
+        if (preloadOnly || (isTilesLoading() && !force)) {
+            return;
+        }
+
+        animationPosition = position;
+
+        if (radarLayers[currentFrame.path]) {
+            radarLayers[currentFrame.path].setOpacity(0);
+        }
+        radarLayers[nextFrame.path].setOpacity(0.5);
+
+
+        var pastOrForecast = nextFrame.time > Date.now() / 1000 ? 'FORECAST' : 'PAST';
+
+        document.getElementById("timestamp").innerHTML = pastOrForecast + ': ' + (new Date(nextFrame.time * 1000)).toString();
+    }
+
+    /**
+     * Check avialability and show particular frame position from the timestamps list
+     */
+    function showFrame(nextPosition, force) {
+        var preloadingDirection = nextPosition - animationPosition > 0 ? 1 : -1;
+
+        changeRadarPosition(nextPosition, false, force);
+
+        // preload next next frame (typically, +1 frame)
+        // if don't do that, the animation will be blinking at the first loop
+        changeRadarPosition(nextPosition + preloadingDirection, true);
+    }
+
+    /**
+     * Stop the animation
+     * Check if the animation timeout is set and clear it.
+     */
+    function stop() {
+        if (animationTimer) {
+            clearTimeout(animationTimer);
+            animationTimer = false;
+            return true;
+        }
+        return false;
+    }
+
+    function play() {
+        showFrame(animationPosition + 1);
+
+        // Main animation driver. Run this function every 500 ms
+        animationTimer = setTimeout(play, 500);
+    }
+
+    function playStop() {
+        if (!stop()) {
+            play();
+        }
+    }
+
+    /**
+     * Change map options
+     */
+    function setKind(kind) {
+        if (kind == 'sattelite' || kind == 'radar'){
+            optionKind = kind;
+            initialize(apiData, optionKind);
+        } else if (kind == 'future') {
+            doFuture = true;
+            initialize(apiData, optionKind);
+        } else if (kind == 'past') {
+            doFuture = false;
+            initialize(apiData, optionKind);
+        }
+    }
+
+
+    function setColors() {
+        var e = document.getElementById('colors');
+        optionColorScheme = e.options[e.selectedIndex].value;
+        initialize(apiData, optionKind);
+    }
+
+
+    /**
+     * Handle arrow keys for navigation between next \ prev frames
+     */
+    document.onkeydown = function (e) {
+        e = e || window.event;
+        switch (e.which || e.keyCode) {
+            case 37: // left
+                stop();
+                showFrame(animationPosition - 1, true);
+                break;
+
+            case 39: // right
+                stop();
+                showFrame(animationPosition + 1, true);
+                break;
+
+            default:
+                return; // exit this handler for other keys
+        }
+        e.preventDefault();
+        return false;
+    }
+
+    function refresh(){
+        document.getElementById("alertDeets").style.visibility = "hidden";
+        var apiRequest = new XMLHttpRequest();
+        apiRequest.open("GET", "https://api.rainviewer.com/public/weather-maps.json", true);
+        apiRequest.onload = function(e) {
+            // store the API response for re-use purposes in memory
+            apiData = JSON.parse(apiRequest.response);
+            initialize(apiData, optionKind);
+        };
+        apiRequest.send();
+        loadAlerts();
+        console.log("Refreshed!")
+        }
+
+    function loop() {
+        var apiRequest = new XMLHttpRequest();
+        apiRequest.open("GET", "https://api.rainviewer.com/public/weather-maps.json", true);
+        apiRequest.onload = function(e) {
+            // store the API response for re-use purposes in memory
+            apiData = JSON.parse(apiRequest.response);
+            initialize(apiData, optionKind);
+        };
+        apiRequest.send();
+        loadAlerts();
+        console.log("Refreshed!")
+        setTimeout(loop, 60000);
+    }
+
+    loop()
+</script>
+
+</body>
+</html>
+
