URL Schedule

<!DOCTYPE html>
<!-- example
http://filmsbykris.com/scripts/2020/schedule/?s=Monday^Ember|Connor^Math%20Sheets|Activity%20Sheets^Review^30%20Minute%20Break^Math%20Lesson|Reading%20Time
-->
<html lang="en">
  <head>
    <title>Schedule</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .grid-container {
        display: grid;
      }

      .grid-container--fill {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      }

      .grid-container--fit {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      }

      .grid-element {
        background-color: blue;
        padding: 20px;
        font-size:50px;
        color: #fff;
        text-align: center;
        border: 1px solid #fff;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
    <script>
      let id=0;
      $(document).ready(function(){
        let s=getVar("s");
        s = decodeURIComponent(s);
        console.log(s);
        display(s);
      });

      function display(s){
        var line = s.split("^");
        for( l of line ){
          $("#main").append('<div class="grid-container grid-container--fit" id="'+id+'">');
            var s = l.split("|");
            for( i of s ){
              console.log(i);
              $("#" + id).append('<div class="grid-element">'+i+'</div>');
            }
            id++;
          }
        }

        function getVar(variable){
          var query = window.location.search.substring(1);
          var vars = query.split("&");
          for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
          }
          return(false);
        }
      </script>
    </head>
    <body>
      <div id="main"></div>


    </body>
  </html>