Imported project into GitHub

e-bellingham · May 8, 2023 · ac2b54e · ac2b54e
1 parent 49c3167
commit ac2b54e
Show file tree

Hide file tree

Showing 3 changed files with 318 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html 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" />
+    <link rel="stylesheet" href="styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
+      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
+      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://kit.fontawesome.com/4737cd1e5f.js"
+      crossorigin="anonymous"
+    ></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
+    <title>Weather</title>
+  </head>
+  <body>
+    <div class="heading-container">
+      <div class="row">
+        <div class="col-6">
+          <h1>Weather</h1>
+        </div>
+        <div class="col-6">
+          <form id="search-form">
+            <input
+              type="search"
+              placeholder="Search for a city"
+              autocomplete="off"
+              autofocus="on"
+              id="search-text-input"
+            />
+            <button class="city-button">
+              <i class="fa-solid fa-magnifying-glass" id="magnifying-glass"></i>
+            </button>
+          </form>
+        </div>
+      </div>
+      <h2 id="location">Current Location</h2>
+      <h3 class="DDT">
+        <span id="current-day"></span> | <span id="current-date"></span> |
+        <span id="current-time"></span>
+      </h3>
+
+      <div class="container-today">
+        <div class="row">
+          <div class="col">
+            <span class="sun">🌞</span>
+          </div>
+          <div class="col">
+            <ul>
+              <li>
+                <strong>Tempurature: </strong><span id="current-temp"></span>
+                <a href="#" id="celcius-link">°C </a>|
+                <a href="#" id="fahrenheit-link">°F</a>
+              </li>
+              <li>
+                <strong>Wind: </strong
+                ><span id="current-wind-speed"></span> kts/
+                <span id="current-wind-direction"></span>°
+              </li>
+              <li>
+                <strong>Humidity: </strong> <span id="current-humidity"></span>%
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <hr />
+    <div class="container-hourly">
+      <h3 class="hourly"><strong>Temperature </strong> | Precipitation</h3>
+      <img
+        src="https://www.qpro.cz/Sluzby/Pocasi/graf.php?ID=187&JAZYK=1"
+        alt="Hourly Weather"
+      />
+    </div>
+    <hr />
+    <div class="container-tomorrow">
+      <div class="row">
+        <div class="col">Monday</div>
+        <div class="col">Tuesday</div>
+        <div class="col">Wednesday</div>
+        <div class="col">Thursday</div>
+        <div class="col">Friday</div>
+        <div class="col">Saturday</div>
+      </div>
+    </div>
+    <div class="icons">
+      <div class="row">
+        <div class="col">🌞</div>
+        <div class="col">🌧</div>
+        <div class="col">🌩</div>
+        <div class="col">🌦</div>
+        <div class="col">⛅️</div>
+        <div class="col">🌞</div>
+      </div>
+    </div>
+    <div class="Temp">
+      <div class="row">
+        <div class="col">77°F</div>
+        <div class="col">83°F</div>
+        <div class="col">84°F</div>
+        <div class="col">72°F</div>
+        <div class="col">70°F</div>
+        <div class="col">67°F</div>
+      </div>
+    </div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,108 @@
+//Challenge 1
+
+let days = [
+  "Sunday",
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+];
+let months = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+let now = new Date();
+let day = days[now.getDay()];
+let currentDay = document.querySelector("#current-day");
+currentDay.innerHTML = day;
+
+let minute = now.getMinutes();
+let hour = now.getHours();
+let timeInput = `${hour}:${minute}`;
+let currentTime = document.querySelector("#current-time");
+currentTime.innerHTML = `${hour}:${minute} `;
+
+let month = months[now.getMonth()];
+let date = now.getDate();
+let year = now.getFullYear();
+let dateInput = `${month} ${date}, ${year}`;
+let currentDate = document.querySelector("#current-date");
+currentDate.innerHTML = `${month} ${date}, ${year}`;
+
+//Challenge Search engine changes location on page:
+function displayWeatherCondition(response) {
+  document.querySelector("#location").innerHTML = response.data.name;
+  document.querySelector("#current-temp").innerHTML = Math.round(
+    response.data.main.temp
+  );
+  document.querySelector("#current-wind-speed").innerHTML = Math.round(
+    response.data.wind.speed
+  );
+  document.querySelector("#current-wind-direction").innerHTML =
+    response.data.wind.deg;
+  document.querySelector("#current-humidity").innerHTML =
+    response.data.main.humidity;
+
+  console.log(response);
+}
+
+function search(event) {
+  event.preventDefault();
+  let apiKey = "11976d7c9e336e8e53bba53c9faf5b9e";
+  let city = document.querySelector("#search-text-input").value;
+
+  let units = "metric";
+  let apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=${units}`;
+  axios.get(apiUrl).then(displayWeatherCondition);
+
+  //let searchInput = document.querySelector("#search-text-input");
+  //let h2 = document.querySelector("#current-location");
+  // h2.innerHTML = searchInput.value;
+  // if (searchInput.value) {
+  // h2.innerHTML = searchInput.value;
+  // } else {
+  // h2.innerHTML = null;
+  //  alert("Please type a city...");
+  // }
+  //Make an Api call to OpenWeather API
+  //Once I get the HTTP response, we display the city name and temp
+}
+
+let form = document.querySelector("#search-form");
+form.addEventListener("submit", search);
+
+//Temperature Units °C & °F for current temp
+function convertToFahrenheit(event) {
+  event.preventDefault();
+  let temperatureElement = document.querySelector("#current-temp");
+  let temperature = temperatureElement.innerHTML;
+  temperature = Number(temperature);
+  temperatureElement.innerHTML = Math.round((temperature * 9) / 5 + 32);
+}
+let fahrenheitLink = document.querySelector("#fahrenheit-link");
+fahrenheitLink.addEventListener("click", convertToFahrenheit);
+
+function convertToCelcius(event) {
+  event.preventDefault();
+  let temperatureElement = document.querySelector("#current-temp");
+  let temperature = temperatureElement.innerHTML;
+  temperature = Number(temperature);
+  temperatureElement.innerHTML = Math.round((temperature - 32) * 0.5556);
+}
+
+let celciusLink = document.querySelector("#celcius-link");
+celciusLink.addEventListener("click", convertToCelcius);
diff --git a/styles.css b/styles.css
@@ -0,0 +1,90 @@
+body {
+  background: radial-gradient(
+    circle at 74.2% 50.9%,
+    rgb(14, 72, 222) 5.2%,
+    rgb(3, 22, 65) 75.3%
+  );
+}
+.heading-container {
+  margin: 20px auto;
+  max-width: 800px;
+  background: rgba(165, 191, 255, 0.5);
+  padding: 20px;
+  border-radius: 10px;
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+}
+h1 {
+  color: white;
+  text-align: center;
+}
+
+.city-button {
+  border: none;
+  background: none;
+  color: white;
+  margin-top: 10px;
+  margin-left: 2px;
+}
+h2 {
+  color: white;
+  text-align: center;
+  padding-top: 20px;
+}
+.DDT {
+  text-align: center;
+  color: white;
+}
+
+.container-today {
+  text-align: center;
+  margin: 20px auto;
+}
+.sun {
+  font-size: 150px;
+  text-align: center;
+}
+ul {
+  padding-top: 55px;
+}
+li {
+  color: white;
+  font-size: large;
+  margin-top: 8px;
+  list-style: none;
+  text-align: left;
+}
+#celcius-link {
+  color: White;
+}
+#fahrenheit-link {
+  color: white;
+}
+.container-hourly {
+  margin: 20px auto;
+  max-width: 800;
+  padding: 20px;
+}
+.hourly {
+  font-size: 19px;
+  text-align: left;
+}
+img {
+  display: block;
+  margin: 0 auto;
+}
+
+.container-tomorrow {
+  margin-top: 30px;
+  text-align: center;
+  font-size: 30px;
+}
+.icons {
+  text-align: center;
+  font-size: 50px;
+}
+.Temp {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+  font-size: 18px;
+}