ada-c17 · tiffinihyatt · Jun 9, 2022 · Jun 10, 2022 · Jun 10, 2022 · Jun 10, 2022
diff --git a/assets/cloud-logo.png b/assets/cloud-logo.png
diff --git a/assets/donnie-rosie-winter.jpg b/assets/donnie-rosie-winter.jpg
diff --git a/assets/janmesh-shah-fall.jpg b/assets/janmesh-shah-fall.jpg
diff --git a/assets/laura-adai-spring.jpg b/assets/laura-adai-spring.jpg
diff --git a/assets/marissa-rodriguez-summer.jpg b/assets/marissa-rodriguez-summer.jpg
diff --git a/assets/sky/brandon-morgan-lightning.jpg b/assets/sky/brandon-morgan-lightning.jpg
diff --git a/assets/sky/daoudi-aissa-cloudy.jpg b/assets/sky/daoudi-aissa-cloudy.jpg
diff --git a/assets/sky/grooveland-designs-sunny.jpg b/assets/sky/grooveland-designs-sunny.jpg
diff --git a/assets/sky/jessica-fadel-snowing.jpg b/assets/sky/jessica-fadel-snowing.jpg
diff --git a/index.html b/index.html
@@ -5,8 +5,70 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Weather Report</title>
+    <link href="styles/index.css" rel="stylesheet">
 </head>
+
 <body>
+    <div class="container">
+        <header>
+            <img
+            id="cloud-logo"
+            src="assets/cloud-logo.png"
+            alt="A small, white cloud outlined in black">
+            <h1 id="weather-wizard">weather wizard</h1>
+        </header>
 
+        <section id="current-city">
+            <h2>The temperature in <span id="display-city">Chicago</span> is:</h2>
+        </section>
+
+        <button class="temp-adjusters" id="decrease-temp">-</button>
+        <h2 id="temperature">0</h2>
+        <button class="temp-adjusters" id="increase-temp">+</button>
+
+        <section id="city-search">
+            <label for="input-city"><h2>Show me the weather in:</h2></label>
+            <input type="text" id="input-city" name="name">
+        </section>
+
+        <section id="reset-city-or-temp">
+            <button class="reset-button" id="reset-city-button"><h2>RESET CITY</h2></button>
+            <button class="reset-button" id="current-temp-button"><h2>SHOW CURRENT TEMPERATURE</h2></button>
+        </section>
+
+        <section id="sky-and-landscape-container">
+            <figure id="sky-with-caption">
+                <img
+                id="sky-image"
+                src="assets/sky/grooveland-designs-sunny.jpg"
+                alt="The sun, off in the distance, surrounded by bright blue sky">
+                <figcaption id="sky-caption">Photo by Grooveland Designs</figcaption>
+            </figure>
+
+            <div id="sky-selector">
+                <label for="sky-dropdown"><h2>CHANGE SKY</h2></label>
+                <select name="skies" id="sky-dropdown">
+                    <option value="">Please select an option below</option>
+                    <option value="sunny">Sunny</option>
+                    <option value="cloudy">Cloudy</option>
+                    <option value="stormy">Stormy</option>
+                    <option value="snowy">Snowy</option>
+                </select>
+            </div>
+
+            <figure id="landscape-with-caption">
+                <img
+                id="landscape-image"
+                src="assets/marissa-rodriguez-summer.jpg"
+                alt="Crystal clear turquoise water in a pool or sea">
+                <figcaption id="landscape-caption">Photo by Marissa Rodriguez</figcaption>
+            </figure>
+        </section>
+
+        <footer>© 2022 Tiffini Hyatt</footer>
+    </div>
+
+    <script src="./node_modules/axios/dist/axios.min.js"></script>
+    <script src="src/index.js" type="text/javascript"></script>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,238 @@
+'use strict';
+
+const state = {
+  temperature: 0,
+  coordinates: [],
+  currentColor: 'black',
+  currentLandscape: 'summer',
+  currentCity: 'Chicago',
+  currentSky: 'sunny',
+};
+
+// increase temperature
+const increaseTemperature = () => {
+  const temperatureContainer = document.getElementById('temperature');
+  state.temperature += 1;
+
+  temperatureContainer.textContent = `${state.temperature}° F`;
+
+  changeTemperatureColor();
+  changeLandscape();
+  changeSky();
+};
+
+// decrease temperature
+const decreaseTemperature = () => {
+  const temperatureContainer = document.getElementById('temperature');
+  state.temperature -= 1;
+
+  temperatureContainer.textContent = `${state.temperature}° F`;
+
+  changeTemperatureColor();
+  changeLandscape();
+  changeSky();
+};
+
+// helper function to change temperature text color
+const changeTemperatureColor = () => {
+  const temperatureContainer = document.getElementById('temperature');
+
+  if (state.temperature >= 80) {
+    state.currentColor = 'coral';
+  } else if (state.temperature >= 60 && state.temperature <= 79) {
+    state.currentColor = '#f5b942';
+  } else if (state.temperature >= 40 && state.temperature <= 59) {
+    state.currentColor = 'teal';
+  } else if (state.temperature >= 20 && state.temperature <= 39) {
+    state.currentColor = '#1a557d';
+  } else {
+    state.currentColor = '#67686b';
+  }
+
+  temperatureContainer.style.color = state.currentColor;
+};
+
+// helper function to change landscape based on temp
+const changeLandscape = () => {
+  const landscapeImage = document.getElementById('landscape-image');
+  const landscapeCaption = document.getElementById('landscape-caption');
+
+  if (state.temperature >= 80) {
+    landscapeImage.src = 'assets/marissa-rodriguez-summer.jpg';
+    landscapeImage.alt = 'Crystal clear turquoise water in a pool or sea';
+    landscapeCaption.textContent = 'Photo by Marissa Rodriguez';
+  } else if (state.temperature >= 60 && state.temperature <= 79) {
+    landscapeImage.src = 'assets/laura-adai-spring.jpg';
+    landscapeImage.alt = 'A close up image of a branch with pink flowers';
+    landscapeCaption.textContent = 'Photo by Laura Adai';
+  } else if (state.temperature >= 40 && state.temperature <= 59) {
+    landscapeImage.src = 'assets/janmesh-shah-fall.jpg';
+    landscapeImage.alt = 'A tree full of golden leaves';
+    landscapeCaption.textContent = 'Photo by Janmesh Shah';
+  } else {
+    landscapeImage.src = 'assets/donnie-rosie-winter.jpg';
+    landscapeImage.alt =
+      'A forest with tall, snowcapped trees above a bed of snow';
+    landscapeCaption.textContent = 'Photo by Donnie Rosie';
+  }
+};
+
+// helper function to change sky based on temp
+const changeSky = () => {
+  const skyImage = document.getElementById('sky-image');
+  const skyCaption = document.getElementById('sky-caption');
+
+  if (state.temperature >= 80) {
+    skyImage.src = 'assets/sky/grooveland-designs-sunny.jpg';
+    skyImage.alt =
+      'The sun, off in the distance, surrounded by bright blue sky';
+    skyCaption.textContent = 'Photo by Grooveland Designs';
+  } else if (state.temperature >= 60 && state.temperature <= 79) {
+    skyImage.src = 'assets/sky/brandon-morgan-lightning.jpg';
+    skyImage.alt =
+      'A dark sky with one big bolt of lightning stretching toward the ground';
+    skyCaption.textContent = 'Photo by Brandon Morgan';
+  } else if (state.temperature >= 40 && state.temperature <= 59) {
+    skyImage.src = 'assets/sky/daoudi-aissa-cloudy.jpg';
+    skyImage.alt = 'An overcast sky full of fluffy clouds, some ominous';
+    skyCaption.textContent = 'Photo by Daoudi Aissa';
+  } else {
+    skyImage.src = 'assets/sky/jessica-fadel-snowing.jpg';
+    skyImage.alt =
+      'A snow flurry against a dark background, as though it is nighttime';
+    skyCaption.textContent = 'Photo by Jessica Fadel';
+  }
+};
+
+// manually change sky using dropdown
+const manuallyChangeSky = () => {
+  const skyImage = document.getElementById('sky-image');
+  const skyCaption = document.getElementById('sky-caption');
+  const selectedSky = document.getElementById('sky-dropdown').value;
+
+  state.currentSky = selectedSky;
+
+  if (selectedSky === 'sunny') {
+    skyImage.src = 'assets/sky/grooveland-designs-sunny.jpg';
+    skyImage.alt =
+      'The sun, off in the distance, surrounded by bright blue sky';
+    skyCaption.textContent = 'Photo by Grooveland Designs';
+  } else if (selectedSky === 'cloudy') {
+    skyImage.src = 'assets/sky/daoudi-aissa-cloudy.jpg';
+    skyImage.alt = 'An overcast sky full of fluffy clouds, some ominous';
+    skyCaption.textContent = 'Photo by Daoudi Aissa';
+  } else if (selectedSky === 'stormy') {
+    skyImage.src = 'assets/sky/brandon-morgan-lightning.jpg';
+    skyImage.alt =
+      'A dark sky with one big bolt of lightning stretching toward the ground';
+    skyCaption.textContent = 'Photo by Brandon Morgan';
+  } else if (selectedSky === 'snowy') {
+    skyImage.src = 'assets/sky/jessica-fadel-snowing.jpg';
+    skyImage.alt =
+      'A snow flurry against a dark background, as though it is nighttime';
+    skyCaption.textContent = 'Photo by Jessica Fadel';
+  }
+};
+
+const updateDisplayCity = () => {
+  const displayCity = document.getElementById('display-city');
+  const userInputCity = document.getElementById('input-city').value;
+
+  // update display city text content
+  displayCity.textContent = userInputCity;
+};
+
+// function to display real time temperature
+const showCurrentTemp = () => {
+  // update state current city based on completed user input
+  state.currentCity = document.getElementById('display-city').textContent;
+
+  const currentTemp = document.getElementById('temperature');
+
+  // update display temp, sky, and landscape after retrieving weather data
+  getCurrentTemp().then(() => {
+    currentTemp.textContent = `${state.temperature}° F`;
+
+    changeTemperatureColor();
+    changeLandscape();
+    changeSky();
+  });
+};
+
+// reset display city
+const resetDisplayCity = () => {
+  const displayCity = document.getElementById('display-city');
+
+  document.getElementById('input-city').value = '';
+  displayCity.textContent = 'Chicago';
+  state.currentCity = displayCity.textContent;
+
+  showCurrentTemp();
+};
+
+const registerEventHandlers = () => {
+  const increaseTempButton = document.getElementById('increase-temp');
+  increaseTempButton.addEventListener('click', increaseTemperature);
+
+  const decreaseTempButton = document.getElementById('decrease-temp');
+  decreaseTempButton.addEventListener('click', decreaseTemperature);
+
+  const userInputCity = document.getElementById('input-city');
+  userInputCity.addEventListener('input', updateDisplayCity);
+
+  const currentTempButton = document.getElementById('current-temp-button');
+  currentTempButton.addEventListener('click', showCurrentTemp);
+
+  const resetCityButton = document.getElementById('reset-city-button');
+  resetCityButton.addEventListener('click', resetDisplayCity);
+
+  const skyDropdown = document.getElementById('sky-dropdown');
+  skyDropdown.addEventListener('change', manuallyChangeSky);
+};
+
+document.addEventListener('DOMContentLoaded', registerEventHandlers);
+
+// endpoints to retrieve real time weather data
+
+const getCurrentTemp = () => {
+  // get latitude and longitude of current city
+  return (
+    axios
+      .get('http://127.0.0.1:5000/location', {
+        params: {
+          q: state.currentCity,
+        },
+      })
+      .then((response) => {
+        const lat = response.data[0]['lat'];
+        const lon = response.data[0]['lon'];
+
+        return [lat, lon];
+      })
+      // get current temp of current city
+      .then((response) => {
+        return axios
+          .get('http://127.0.0.1:5000/weather', {
+            params: {
+              lat: response[0],
+              lon: response[1],
+            },
+          })
+          .then((response) => {
+            const tempInK = response.data.current.temp;
+            const tempInF = Math.floor(1.8 * (tempInK - 273) + 32);
+
+            // update state temperature
+            state.temperature = tempInF;
+
+            return tempInF;
+          })
+          .catch(() => {
+            console.log('Error retrieving current weather');
+          });
+      })
+      .catch(() => {
+        console.log('Error retrieving latitude and longitude');
+      })
+  );
+};