index.html

<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hiker Helper</title>

    <!-- icons -->

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

    <!-- Fonts -->

    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">


    <!-- Compiled and minified CSS -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <link rel="stylesheet" href="style_file/style.css" />
  </head>
  <body>
    <!-- Hiker Helper header -->

    <div class="row">
      <div class="col s12 head">
         <p class="brand-logo center icon-text blue-grey-text text-lighten-4"><i class="material-icons ">directions_walk</i>Hiker Helper</p>
      </div>
    </div>

    <!-- Main div containing all content -->
<main>

  <div class="container main">

    <!-- Zip Code Search  -->
    <div class="container">
      <div class="row">
        <div class="col l4 m4 s12 zipcode">
          <div class="search-container">
            <form class="col s12">
              <div class="row">
                <div class="input-field col s12">
                  <textarea
                  maxlength="5"
                    id="textarea1"
                    class="materialize-textarea"
                  ></textarea>

                  <a
                    id="submitBtn"
                    class="trailButton waves-effect waves-light btn-small"
                    >Search Zip Code</a
                  >
                  <label class="black-text" for="textarea1"
                    >Enter zipcode</label>
                </div>
              </div>
            </form>
          </div>
        </div>

        <!-- Forecast  -->

        <div class="col l8 m8 s12 forcast">
          FORECAST
          <div id="currentCity">
            <h4>City 8/15/2020</h4>
          </div>
          <div class="current" id="currentTemp">Temperature:  deg F</div>
          <div class="current" id="currentHumid">Humidity: %</div>
          <div class="current" id="currentWind">Wind Speed: MPH</div>
          <div class="current" id="currentUv">UV Index: </div>
        </div>
      </div>

      <!--5 day forcast-->
      <div class="row">
        <div
          id="date1"
          class="col l2 offset-l1 m2 offset-m1 s4 day"
          style="border-radius: 10px 0px 0px 10px"
        >
          <div class="text"></div>
          <div class="icon">
            <img id="icon1" alt="weather-icon" />
          </div>

          <p>Day 1</p>
        </div>

        <div id="date2" class="col l2 m2 s4 day">
          <div class="text"></div>
          <div class="icon">
            <img id="icon2" alt="weather-icon" />
          </div>

          <p>Day 2</p>
        </div>

        <div id="date3" class="col l2 m2 s4 day">
          <div class="text"></div>
          <div class="icon">
            <img id="icon3" alt="weather-icon" />
          </div>

          <p>Day 3</p>
        </div>

        <div id="date4" class="col l2 m2 s4 offset-s2 day">
          <div class="text"></div>
          <div class="icon">
            <img id="icon4" alt="weather-icon" />
          </div>

          <p>Day 4</p>
        </div>

        <div
          id="date5"
          class="col l2 m2 s4 day"
          style="border-radius: 0px 10px 10px 0px"
        >
          <div class="text"></div>
          <div class="icon">
            <img id="icon5" alt="weather-icon" />
          </div>

          <p>Day 5</p>
        </div>
      </div>
    </div>

      </div>

        <!-- Container for Trail results API -->
      <div class="container">
        <div class="row">
          <div id="trailResults" class="col l6  m6 s12 trailListStyles">
            <div>
              <h6><b>Trails Nearby</b></h6>
            </div>
          </div>
  
          <div class="col l6  m6 s12 mapEl">
            <div class="search-container bold-text">
            <!-- Trail map embedded from https://www.trailforks.com/widgets/config/region_map/?rid=3156 -->
              <div class="TrailforksRegionInfo" 
              data-w="600px" 
              data-h="150px" 
              data-rid="3156" 
              data-counts="1" 
              data-stats="1">
            </div>

              <div class="TrailforksWidgetMap s12" 
              data-w="450px" 
              data-h="250px" 
              data-rid="3156" 
              data-activitytype="1" 
              data-maptype="trailforks" 
              data-trailstyle="difficulty" 
              data-controls="1" 
              data-list="0" 
              data-dml="1" 
              data-layers="labels,poi,polygon,directory,region" 
              data-z="" 
              data-lat="" 
              data-lon="" 
              data-hideunsanctioned="0">
            </div>

        </div>
      </div>


</main>

        <!-- FOOTER -->
        
        <!-- Materialize footer was not very basic, so I had to style it in a way to erase
             what I didn't want from the framework. If I just deleted code, the fixed margin
             from materialize -->

       
        <footer class="page-footer N/A transparent">
          <div class="container ">
            <div class="row">
            </div>
          </div>
          
          <div class="footer-copyright text-black green lighten-2">
             <p> ©Copyright 2020 </p>
             <p> Gold Team Rules </p>
          </div>
        </footer>

    <!-- Jquery and AJAX -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

    <script
      type="text/javascript"
      src="https://MomentJS.com/downloads/moment.js"
    ></script>
    <script
      type="text/javascript"
      src="https://momentjs.com/downloads/moment-with-locales.js"
    ></script>

    <!--Our javaScript files-->
    <script src="./javascript_files/hikingTrails.js"></script>

    <script src="./javascript_files/map.js"></script>
    <script src="./javascript_files/weather.js"></script>
  </body>
</html>
 