Ada-C18 · Lindseymarcea · Dec 7, 2022 · Dec 8, 2022 · Dec 8, 2022 · Dec 8, 2022
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -2,11 +2,70 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <link href="styles/index.css" rel="stylesheet">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Weather Report</title>
 </head>
 <body>
 
+    <div class="container">
+        <header class="header">
+            Weather Report <span>for the lovely city of 
+                <span id="headerCityName">
+                    Seattle
+                </span>
+            </span>
+        </header>
+        <div class="white-boxes">
+            <div class="white" id="temperature_box">
+                <h2>Temperature</h2>
+                <div class="temperature_content">
+                    <div class="change_temperature">
+                        <span id="increaseTemp">⬆️</span>
+                        <span id="temp">70</span>
+                        <span id="decreaseTemp">⬇️</span>
+                    </div>
+                    <button id="getTemp">Get Realtime Temperature</button>
+                    <section id="tempContainer"></section>
+                    <!-- new code added in, grouping element to help with styling -->
+                </div>
+            </div>
+            <div class="white" id="sky_box">
+                <h2>Sky</h2>
+                <select id="selectSky">
+                    <option>Sunny</option>
+                    <option>Cloudy</option>
+                    <option>Rainy</option>
+                    <option>Snowy</option>
+                </select>
+            </div> 
+            <div class="white" id="city_name">
+                <h2>City name</h2>
+                <input type="text" id="cityNameInput" value="Seattle" />
+                <button id="resetCity" class="resetButton">Reset</button>
+            </div>
+        </div> 
+        <div class="content">
+            <div class = "garden_name">Weather Garden</div>            
+            <div class="garden" id="weatherBox">
+                <div id="sky"></div>
+                <div id="garden"></div>
+            </div>
+        </div>
+        <footer> Lindsey & Masha's Weather Report © 2022 </footer>
+
+
+    <!-- <div class="box">
+
+    </div> -->
+
+
+
+
+
+
+    <script src="./node_modules/axios/dist/axios.min.js"></script>
+    <script src="/src/index.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "axios": "^0.27.2"
+    "axios": "^1.2.1"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,167 @@
+'use strict';
+
+console.log('testing');
+
+const BASE_URL = 'http://localhost:5000';
+
+const state = {
+  city: 'Seattle',
+  temp: 70,
+  lat: 47.6062,
+  lon: -122.3321,
+};
+
+const increaseTemperature = (event) => {
+  console.log('in increaseTemp:', event);
+  state.temp += 1;
+  changeColorAndGarden();
+};
+
+const decreaseTemperature = (event) => {
+  console.log('in decreaseTemp:', event);
+  state.temp -= 1;
+  changeColorAndGarden();
+};
+
+const changeColorAndGarden = () => {
+  let temp = state.temp;
+  let color = 'red';
+  let garden = '🦜🦜__😎_ 🌞__⛱⛱_ ';
+
+  if (temp >= 80) {
+    color = 'red';
+    garden = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂';
+  } else if (temp >= 70) {
+    color = 'orange';
+    garden = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷';
+    // garden = '🦜🦜__😎_ 🌞__⛱⛱_ ';
+  } else if (temp >= 60) {
+    color = 'yellow';
+    garden = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃';
+  } else if (temp >= 50) {
+    color = 'green';
+    garden = '❄️🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲️';
+  } else {
+    color = 'teal';
+    garden = '❄️❄️❄️❄️❄️⛄️⛄️⛄️⛄️⛄️⛄️❄️❄️❄️❄️❄️';
+  }
+
+  const newgarden = document.getElementById('garden');
+  newgarden.textContent = garden;
+  const temperature = document.getElementById('temp');
+  // temperature.className = color;
+  temperature.style.color = color;
+  // temperature.textContent = String(state.temp);
+  temperature.textContent = state.temp;
+};
+
+const modifySky = (event) => {
+  console.log('in Modify Sky name:', event);
+  let sky = document.getElementById('selectSky');
+  let color = 'lightblue';
+
+  let sky_visual = '😎😎😎😎😎🌞🌞🌞🌞🌞';
+  if (sky.value === 'Sunny') {
+    sky_visual = '😎😎😎😎😎🌞🌞🌞🌞🌞';
+    color = 'lightyellow';
+  } else if (sky.value === 'Cloudy') {
+    sky_visual = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️';
+    color = 'lightgray';
+  } else if (sky.value === 'Rainy') {
+    sky_visual = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧';
+    color = 'darkblue';
+  } else if (sky.value === 'Snowy') {
+    sky_visual = '❄️❄️❄️❄️🌨🌨🌨🌨❄️❄️❄️❄️';
+    color = 'white';
+  }
+
+  const skyInWeatherBox = document.getElementById('sky');
+  skyInWeatherBox.textContent = sky_visual;
+  const weatherBox = document.getElementById('weatherBox');
+  weatherBox.style.backgroundColor = color;
+};
+
+const modifyCityName = (event) => {
+  console.log('in Modify City name:', event);
+  const cityInput = document.getElementById('cityNameInput').value;
+  const headerCityName = document.getElementById('headerCityName');
+  state.city = cityInput;
+  headerCityName.textContent = state.city;
+};
+
+const resetCityName = (event) => {
+  console.log('in Reset City name:', event);
+  const cityInput = document.getElementById('cityNameInput');
+  cityNameInput.value = 'Seattle';
+  modifyCityName();
+};
+
+const getLatAndLon = async () => {
+  try {
+    const response = await axios.get('http://localhost:5000/location', {
+      params: { q: state.city },
+    });
+    state.lat = response.data[0].lat;
+    state.lon = response.data[0].lon;
+    console.log(state);
+  } catch (error) {
+    console.log('Error in get Lat & Lon');
+  }
+};
+
+const getWeather = async () => {
+  await getLatAndLon();
+  // changeColorAndGarden();
+  axios
+    .get('http://127.0.0.1:5000/weather', {
+      params: {
+        lat: state.lat,
+        lon: state.lon,
+        units: 'imperial',
+      },
+    })
+
+    .then((response) => {
+      const temp = response.data.main.temp;
+      console.log(response.data.main.temp);
+      // document.getElementById('temp') = temp;
+      state.temp = Math.round((temp - 273.15) * 1.8 + 32);
+      const newTemp = document.getElementById('temp');
+      newTemp.textContent = state.temp;
+      changeColorAndGarden();
+    })
+
+    .catch((error) => {
+      console.log('Error calling OpenWeather');
+    });
+};
+
+const registerEventHandlers = (event) => {
+  console.log('in registerEventHandlers:', event);
+
+  changeColorAndGarden();
+  getLatAndLon();
+
+  const increaseTemp = document.getElementById('increaseTemp');
+  increaseTemp.addEventListener('click', increaseTemperature);
+
+  const decreaseTemp = document.getElementById('decreaseTemp');
+  decreaseTemp.addEventListener('click', decreaseTemperature);
+
+  // modifyCityName();
+  const cityNameInput = document.getElementById('cityNameInput');
+  cityNameInput.addEventListener('input', modifyCityName);
+
+  const cityResetButton = document.getElementById('resetCity');
+  cityResetButton.addEventListener('click', resetCityName);
+
+  modifySky();
+  const selectNewSky = document.getElementById('selectSky');
+  selectNewSky.addEventListener('change', modifySky);
+
+  getWeather();
+  const getTemp = document.getElementById('getTemp');
+  getTemp.addEventListener('click', getWeather);
+};
+
+document.addEventListener('DOMContentLoaded', registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,84 @@
+
+body {
+    background-color: rgb(17, 129, 241);
+    font-family: "Montserrat", sans-serif;
+    font-weight: 400;
+}
+
+
+.container {
+    width: 80%;
+    height: 60%;
+    margin: auto;
+    /* background-color: lightblue; */
+
+    display: grid;
+    grid-template: 15% auto 5% /30% 70%;
+}
+    /* grid-template-columns: 100px 100px; */
+
+.header {
+    grid-column: auto / span 2;
+    color: white;
+    font-size: 40px;
+}
+
+.white-boxes {
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+
+
+    /* grid-row: auto; */
+}
+
+.white {
+    background-color: white;
+    border-radius: 10px;
+    margin: 15px;
+    padding: 5% 5%;
+
+
+}
+
+.content {
+
+    /* grid-row: auto; */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+}
+
+#temp {
+    color: orange
+}
+
+.garden_name {
+    width: 50%;
+    border-radius: 10px;
+    margin: 10px;
+    padding: 5px 22px;
+    font-size: large;
+    color: white;
+    text-align: center;
+}
+
+.garden {
+    background-color: white;
+    width: 50%;
+    border-radius: 10px;
+    margin: 10px;
+    padding: 55px 22px;
+    text-align: center;
+
+
+}
+
+footer {
+    grid-column: auto / span 2;
+    font-size: large;
+    color: white;
+}