Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>JS List</title>
    <style>
      body, html {
        margin: 0;
        padding: 0;
        background-color: rgb(198, 198, 198);
      }

      table {
        width: 100%;
      }

      form.login-form {
        max-width: 400px;
        margin: auto;
      }

      form.login-form h1 {
        text-align: center;
        font-size: 42px;
        font-family: Impact;
      }

      form.login-form fieldset label {
        display: inline-block;
        width: 30%;
      }
      form.login-form fieldset input {
        display: inline-block;
        width: 65%;
      }
      form.login-form fieldset {
        text-align: center;
      }
      #login-button {
        display: block;
        margin: 20px auto;
        width: 40%;
        color: white;
        font-size: 24px;
        background-color: green;
        height: 50px;
        border: none;
        box-shadow: 1px 1px 4px black;
      }

      #course-dropdown {
        display: block;
        width: 50%;
        margin: 5px;
        font-size: 24px;
      }

      table tbody tr {
        display: block;
        width: 96%;
        padding: 2%;
        margin-top: 20px;
        background-color: white;
        box-shadow: 2px 2px 4px black;
      }
      table tr td {
        display: inline-block;
        width: 30%;
      }
      table tr th {
        display: inline-block;
        width: 30%;
      }
    </style>
  </head>
  <body>
    <form class="login-form">
      <h1>Tally-Ho</h1>
      <fieldset>
        <legend>Log Into Our App</legend>
        <label for="username">Username:</label>
        <input type="text" name="username" id="username">
        <br>
        <label for="password">Password:</label>
        <input type="password" name="password" id="password">
        <br>
        <label for="color">Security Color</label>
        <input type="color" name="color" id="color">
      </fieldset>
    </form>
    <button id="login-button" onclick="logIn()">Log In</button>

    <select id="course-dropdown">
      <option value="107">CSIT 107</option>
      <option value="207">CSIT 207</option>
      <option value="307">CSIT 307</option>
    </select>
    <hr>
    <aside id="sidebar">
      <h4>Top Course</h4>
      <ol>
        <li>107 (65)</li>
        <li>207 (34)</li>
        <li>307 (26)</li>
      </ol>
    </aside>
    <table>
      <thead>
        <tr>
          <th>Department</th>
          <th>Number</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>CSIT</td>
          <td>307</td>
          <td>Mobile Aesthetic Design</td>
        </tr>
      </tbody>
    </table>


    <script type="text/javascript">
        // Hide the List!
        document.querySelector('table').style.display = 'none';
        document.querySelector('#course-dropdown').style.display = 'none';

        // Show the list on login
        function logIn() {
          document.querySelector('table').style.display = 'table';
          document.querySelector('#course-dropdown').style.display = 'block';
          document.querySelector('form').style.display = 'none';
          document.querySelector('#login-button').style.display = 'none';
        }


        // alert('HEYYYYYY YOUOUUU GUYYYSSSSSSSS');
        var courses = [{
          name: 'Web Programming I',
          number: '107',
          dept: 'CSIT'
        }, {
          name: 'Web Programming 2',
          number: '207',
          dept: 'CSIT'
        }];

        courses.forEach(course => {
          var tbody = document.querySelector('tbody');
          tbody.innerHTML += `
          <tr>
            <td>${course.dept}</td>
            <td>${course.number}</td>
            <td>${course.name}</td>
          </tr>
          `;
        });
    </script>
  </body>
</html>