ada-c17 · jennycodingnow · Jun 14, 2022 · Jun 14, 2022 · Jul 18, 2022 · tgoslee
diff --git a/ada-project-docs/images/cloudyday.jpg b/ada-project-docs/images/cloudyday.jpg
diff --git a/ada-project-docs/images/rainyday.jpg b/ada-project-docs/images/rainyday.jpg
diff --git a/ada-project-docs/images/sunnyday.jpg b/ada-project-docs/images/sunnyday.jpg
diff --git a/ada-project-docs/images/winterday.jpg b/ada-project-docs/images/winterday.jpg
diff --git a/index.html b/index.html
@@ -4,9 +4,56 @@
     <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 href="/styles/index.css" rel="stylesheet" />
+
     <title>Weather Report</title>
 </head>
 <body>
+    <header>
+    <h1>Weather Report</h1>
+    </header>
+    <main>
+        <div class="grid-display">
+            <img id="sunnyday" src="/ada-project-docs/images/sunnyday.jpg" alt="a sunnyday" />
+            <div id="cityTempcontainer">
+                <h1 id="cityLabel">Honolulu</h1>
+                <h1 id="tempLabel">70°F</h1>
+
+            </div>
+        </div>
+
+        <div class="grid-display">
 
+            <section>
+                <h1>Change the Sky</h1>
+                <select id="sky-types">
+                    <option value="sunny">Sunny</option>
+                    <option value="cloudy">Cloudy</option>
+                    <option value="rainy">Rainy</option>
+                    <option value="snowy">Snowy</option>
+                </select>
+                <div id="sky-horizon">☁️ ☁️ ☁️🌞☁️ ☁️ ☁️</div>
+            </section>
+            <h1 id="tempLabel" class="green">Temperature</h1>
+            <span id="tempUp">⬆️</span>
+            <span id="tempDown">⬇️</span>
+            <section>
+                <div id="landscape">🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷</div>
+                <div id="searchContainer">
+                    <label for="citySearch">Search City</label>
+                    <input type="search" id="citySearch" name="citySearch">
+                    <button id="submitCity">Submit</button>
+                    <button id="reset">Reset</button>
+                </div>
+            </section>
+
+        </div>
+    </main>
+    <footer>
+    </footer>
+
+
+    <script src="src/index.js" type="text/javascript"></script>
+    <script src="./node_modules/axios/dist/axios.min.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "axios": "^0.27.2"
+    "axios": "^0.27.2",
+    "prettier": "^2.6.2"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,148 @@
+'use strict';
+
+const state = {
+  city: 'Honolulu',
+  temperature: 70,
+  lat: 21.315603,
+  lon: -157.858,
+};
+
+const updateTempLabel = () => {
+  const tempLabel = document.getElementById('tempLabel');
+  tempLabel.textContent = `${state.temperature}°F`;
+  const changeLandscape = document.getElementById('landscape');
+
+  let landscape = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷';
+  if (state.temperature >= 80) {
+    tempLabel.className = 'red';
+    landscape = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂';
+  } else if (state.temperature >= 70) {
+    tempLabel.className = 'orange';
+    landscape = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷';
+  } else if (state.temperature >= 60) {
+    tempLabel.className = 'yellow';
+    landscape = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃';
+  } else if (state.temperature >= 50) {
+    tempLabel.className = 'green';
+    landscape = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲';
+  } else if (state.temperature <= 49) {
+    tempLabel.className = 'teal';
+    landscape = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲';
+  }
+  console.log(tempLabel.className);
+  changeLandscape.textContent = `${landscape}`;
+};
+
+const increaseTemp = () => {
+  state.temperature += 1;
+  updateTempLabel();
+  console.log('increase temp');
+};
+
+const decreaseTemp = () => {
+  state.temperature -= 1;
+  updateTempLabel();
+  console.log('decrease temp');
+};
+
+const updateCityLabel = () => {
+  const citySearch = document.getElementById('cityLabel');
+  citySearch.textContent = `${state.city}`;
+};
+
+const updateCityWithTemp = () => {
+  updateCity();
+  getLatAndLong();
+};
+
+const updateCity = () => {
+  const searchFieldInput = document.getElementById('citySearch');
+  state.city = searchFieldInput.value;
+  updateCityLabel();
+};
+
+const updateTheSky = () => {
+  const skyLabel = document.querySelector('#sky-types').value;
+  const changeSky = document.getElementById('sky-horizon');
+
+  const imageElement = document.querySelector('#sunnyday');
+
+  let sky = '☁️ ☁️ ☁️🌞☁️ ☁️ ☁️';
+  if (skyLabel === 'sunny') {
+    sky = '☁️ ☁️ ☁️🌞☁️ ☁️ ☁️';
+    imageElement.src = '../ada-project-docs/images/sunnyday.jpg';
+  } else if (skyLabel === 'cloudy') {
+    sky = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️';
+    imageElement.src = '../ada-project-docs/images/cloudyday.jpg';
+  } else if (skyLabel === 'rainy') {
+    sky = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧';
+    imageElement.src = '../ada-project-docs/images/rainyday.jpg';
+  } else if (skyLabel === 'snowy') {
+    sky = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨';
+    imageElement.src = '../ada-project-docs/images/winterday.jpg';
+  }
+  changeSky.textContent = `${sky}`;
+};
+
+const resetCity = () => {
+  const cityName = document.getElementById('citySearch');
+  cityName.value = '';
+  state.city = 'Honolulu';
+  updateCityLabel();
+
+  const skyHorizon = document.getElementById('sky-horizon');
+  skyHorizon.textContent = '☁️ ☁️ ☁️🌞☁️ ☁️ ☁️';
+};
+
+const registerEventHandlers = () => {
+  const tempUpButton = document.getElementById('tempUp');
+  tempUpButton.addEventListener('click', increaseTemp);
+  const tempDownButton = document.getElementById('tempDown');
+  tempDownButton.addEventListener('click', decreaseTemp);
+  const submitCityButton = document.getElementById('submitCity');
+  submitCityButton.addEventListener('click', updateCityWithTemp);
+  const selectItem = document.getElementById('sky-types');
+  selectItem.addEventListener('change', updateTheSky);
+  const resetButton = document.getElementById('reset');
+  resetButton.addEventListener('click', resetCity);
+  const citySearchEl = document.getElementById('citySearch');
+  citySearchEl.addEventListener('input', updateCity);
+};
+
+document.addEventListener('DOMContentLoaded', registerEventHandlers);
+
+const getLatAndLong = () => {
+  axios
+    .get('http://localhost:5000/location', {
+      params: {
+        q: state.city,
+      },
+    })
+    .then((response) => {
+      state.lat = response.data[0]['lat'];
+      state.lon = response.data[0]['lon'];
+      getRealTimeWeather();
+    })
+    .catch((error) => {
+      console.log('Error finding latitude and longitude,', error);
+    });
+};
+
+const getRealTimeWeather = () => {
+  axios
+    .get('http://localhost:5000/weather', {
+      params: {
+        lat: state.lat,
+        lon: state.lon,
+      },
+    })
+    .then((response) => {
+      let tempInKelvin = response.data.current.temp;
+      let realTimeWeather = Math.floor((tempInKelvin - 273.15) * (9 / 5) + 32);
+      state.temperature = realTimeWeather;
+      updateTempLabel();
+    })
+    .catch((error) => {
+      console.log(`Error in real time weather: ${error}`);
+    });
+};
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,53 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+header h1 {
+    margin-left: 500px;
+    margin-top: 20px;
+}
+main {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    height: 580px;
+    width: 900px;
+    margin: 0 auto; 
+    margin-top: 100px;
+}
+
+#sunnyday {
+    width: 100%;
+}
+
+.grid-display {
+    height: 100%;
+}
+
+.grid-display:nth-child(1){
+    background-color: gray;
+}
+
+.grid-display:nth-child(2){
+    background-color: lightgray;
+}
+
+.red{
+    color: red;
+}
+
+.orange{
+    color: orange;
+}
+
+.yellow{
+    color: yellow;
+}
+
+.green{
+    color: green;
+}
+
+.teal{
+    color: teal;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -52,3 +52,8 @@ mime-types@^2.1.12:
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
   dependencies:
     mime-db "1.52.0"
+
+prettier@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"
+  integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==