index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Weather App</title>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="./src/styles.css">
  </head>

  <body>
    <div class="container">
      <div class="weather-app-wrapper">
        <div class="weather-app">
          <div class="overview">
            <h1>City Name</h1>
            <ul>
              <li id="input-city-timestamp"><span id="date"></li>
              <li id="updated-timestamp">Last Updated: <span id="local-date"></span> local time.</li>
              <li id="weather-summary"></li>
            </ul>
          </div>
          <div class="row">
            <div class="col-6">
              <div class="clearfix weather-temperature">
                <img src="" alt="no image" id="weather-icon" class="float-left" />
                <div class="float-left weather-detail">
                  <strong id="tempNum"></strong
                  ><span class="temp-units"
                    ><a href="#" id="fahrenheit" class="active">°F</a> |
                    <a href="#" id="celsius">°C</a></span
                  >
                </div>
              </div>
            </div>
            <div class="col-6">
              <ul>
                <li>Feels Like: <span id=feels-like></span>°</li>
                <li>Humidity: <span id=humidity>0</span>%</li>
                <li>Wind: <span id=wind>0</span> mph</li>
              </ul>
            </div>
          </div>
          <div class="future-forecast-title text-center">
            <h2>5 Day Forecast:</h2>
          </div>
          <div class="future-forecast" id="five-day-forecast">
          </div>
          <div class="row justify-content-around">
            <form id="city-form" class="mt-5">
              <input
              type="search"
              placeholder="Enter a city..."
              autofocus="on"
              autocomplete="off"
              class="form-control"
              id="city-input" />
            </div>
            <div class="row justify-content-around mt-3">
              <input type="submit" id="search" value="Search"/>
            </form>
            <button id="locate" class="w-200"/>My Location</button>
          </div>
        </div>
      </div>
      <footer class="text-center">
      <small>
        <a
          href="https://github.com/bexter89/weather-app"
          target="_blank"
          >Open-source code</a> by Rebekah Cruz
      </small>
    </footer>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>