dash.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dining In</title>


  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="assets/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="assets/js/materialize.min.js"></script>

  <!-- Spinner Script -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>

  <!-- Linking Styling Sheet -->
  <link rel="stylesheet" href="assets/css/styles.css">

  <!-- Firebase Reference -->
  <script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script>

  <!-- Link Design Materialize Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- Linking Favicon -->
  <link rel="shortcut icon" type="image/png" href="assets/images/nutrition-favicon.png" />


</head>

<body>

  <!-- Navbar goes here -->
  <div class="col s12">
    <nav>
      <div class="nav-wrapper #006064 cyan darken-4">
          <img class="brand-logo left"src="assets/images/logo.jpg" 
          alt="logo" >
        <a href="index.html" class="brand-logo center">Dine or Dash</a>
        <ul id="nav-mobile" class="right">
          <li>
            <a href="dine.html">
              <i class="material-icons">restaurant</i>
            </a>
          </li>
          <li>
            <a href="dash.html">
              <i class="material-icons">time_to_leave</i>
            </a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

  <div class="wrapper">
    <div class="formWrapper #006064 cyan darken-4">
      <form>
        <span>Find a Restaurant</span>
        <input type="text" name="city" id="city-input" placeholder="Enter a city...">
        <!-- <input type="text" name="cuisine" id="cuisine-input" placeholder="Please select a cuisine..."> -->
        <select id="cuisine-input" class="input">
          <option value="null" selected disabled>Choose a cuisine...</option>
        </select>
        <button type="submit" class="api-call">Search</button>
        <button type="submit" id="resetButton">Reset</button>
        <div class="loadSpinner"></div>
      </form>
    </div>
    <div class="resultsWrapper">
      <h2 id="head"></h2>
      <div class="results" id="hits"></div>
    </div>
  </div>

  <footer class="page-footer #00838f cyan darken-3" id="dash-footer">
    <div class="footer-copyright #006064 cyan darken-4">
      <div class="container">
        <time>&copy; 2018 </time>
      </div>
    </div>
  </footer>

  <!-- linked to javascript file-->
  <script type="text/javascript" src="assets/javascript/restaurantSearch.js"></script>
</body>

</html>