HTML/CSS - Earthquake App [alpha] Online Editor and JavaScript Compiler

html

<!--
Code By: Zeke Williams
Date: October 4, 2018
Description:
    This is a web application that shows earthquake information,
    and now searches for it as well! It's interesting to find
    out there are earthquakes near you; they are just too
    small to feel most of the time. I hope some find it
    useful. Hopefully soon I will have an idea about what
    I want to do for the visual map and timeline.
    
Links:
    Personal project: https://github.com/GameSquatch/earthquakes
    CSS Grid: https://css-tricks.com/snippets/css/complete-guide-grid/
    
Version: 1.6 alpha
Update:
    1.6 alpha: The search functionality now has validation
        checking, so the api won't return an error and the
        user gets helpful validation feedback to make a
        better search. Tweaked some formatting as well.
        
    1.5 aplpha: Added functionality for the Details button!
        Click the Details button to see certain details about
        each earthquake, such as: Depth, Latitude, Longitude,
        Reported Intensity, and more. Let me know how it

css

:root {
    --cardBorder: 5px solid  #207cca;
    --tabColor:  green;
    --headerColor:  black;
}
html, body {
    margin: 0;
}
html {
    height: 100%;
}
body {
    position: relative;
    width: 100%;
}
* {
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
}
/* *****************************
*  SEARCH MODAL DESIGN *********
*/
#modalContainer {
    position: absolute;
    top: 0;

let baseURL = "https://earthquake.usgs.gov/fdsnws/event/1";
let queryURL = "/query?format=geojson&minmagnitude=4.5&limit=15&includeallmagnitudes";
let tabs;
let events;
let currentTab;
let content;
let screenH;
let modalCont;
let loaderCont, loader, loadBox1, loaderHTML;
let detailModalCont, detailMag, detailDepth, detailIntensity, detailLat, detailLong, detailPlace, detailTsu, detailExit;
let unitsMetric = true;
$(document).ready(function () {
    events = [];
    // this object will contain the tab content. Instead of loading a whole new page, I am just going to create the html
    // needed for each tab. This is for a very specific reason. The website www.sololearn.com can't use multiple pages,
    // and that's where I post a lot of my projects.
    tabs = {
        "Home": "",
        "Timeline": "",
        "Visual Map": "",
        "About": ""
    };
    currentTab = "Home";
    
    content = $("#content");

BROWSER

Console