Ada-C18 · LeeReyesCS · Dec 16, 2022
diff --git a/index.html b/index.html
@@ -1,12 +1,59 @@
 <!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">
+    <meta charset="UTF-8" />
+    <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 rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles/index.css" />
+
 </head>
+
 <body>
-
+    <header class="header__header">
+        <h1>Weather Report</h1>
+        <span>For the lovely city of 
+            <span id="headerCityName" class="header__city-name"></span></span>
+    </header>
+    <section class="temperature__section">
+        <h2>Temperature</h2>
+        <div class="temperature__content">
+            <div class="temperature__controls">
+                <span id="increaseTempControl">⬆️</span>
+                <span id="tempValue"></span>
+                <span id="decreaseTempControl">⬇️</span>
+                <button id="tempReset" class="reset-btn">Get Realtime Temperature</button>
+            </div>
+        </div>
+    </section>
+    <section class="sky__section">
+        <h2>Sky</h2>
+        <select id="skySelect">
+            <option>Sunny</option>
+            <option>Cloudy</option>
+            <option>Rainy</option>
+            <option>Snowy</option>
+        </select>
+    </section>
+
+    <section class="city-name__section">
+        <h2>City Name</h2>
+        <input type="text" id="cityNameInput" value="Los Angeles" />
+        <button id="cityNameReset" class="reset-btn">Reset</button>
+    </section>
+
+    <section class="garden__section">
+        <h2>Weather Garden</h2>
+        <div id="gardenContent" class="garden__content">
+            <div id="sky"></div>
+            <div id="landscape"></div>
+        </div>
+    </section>
+    <script src="src/index.js" ></script>
+    <script src="./node_modules/axios/dist/axios.min.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,149 @@
+const URL = 'http://127.0.0.1:5000';
+
+const state = {
+  city: 'Los Angeles',
+  temp: 75,
+  lat: 34.0536909,
+  lon: -118.242766
+};
+
+
+const showTemp = () => {
+  const tempValue  = document.querySelector('#tempValue');
+  tempValue.textContent = `${state.temp} °F`;
+  colorReaction();
+}
+const increaseTemp = () => {
+  const tempValue  = document.querySelector('#tempValue');
+  state.temp += 1;
+  tempValue.textContent = `${state.temp} °F`;
+  colorReaction();
+};
+
+const decreaseTemp = () => {
+  const tempValue  = document.querySelector('#tempValue');
+  state.temp -= 1;
+  tempValue.textContent = `${state.temp} °F`;
+  colorReaction();
+};
+
+const colorReaction = () => {
+  const tempColor = document.querySelector('#tempValue')
+  const landscape = document.querySelector('#landscape')
+
+  if (state.temp >= 80) {
+    tempColor.style.color = 'red';
+    landscape.textContent = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂🍳';
+  } else if (state.temp >= 70 && state.temp <= 79) {
+    tempColor.style.color = 'orange';
+    landscape.textContent = '🌸🌿🌼__🌷🌻🌿 _☘️🌱 _🌻🌷 ';
+  } else if (state.temp >= 60 && state.temp <= 69) {
+    tempColor.style.color = 'yellow';
+    landscape.textContent = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃';
+  } else if (state.temp >= 50 && state.temp <= 59) {
+    tempColor.style.color = "green";
+    landscape.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲';
+  } else {
+    tempColor.style.color = 'teal';
+    landscape.textContent = '⛄️⛄️🌲⛄️⛄️⛄️🌲⛄️⛄️🌲⛄️⛄️⛄️';
+  }
+};
+
+const changeCityName = () => {
+  const inputName = document.getElementById('cityNameInput').value;
+  const headerCityName = document.getElementById('headerCityName');
+  state.city = inputName;
+  headerCityName.textContent = state.city;
+
+};
+
+const resetCityName = () => {
+  const cityNameInput = document.getElementById('cityNameInput');
+  cityNameInput.value = 'Los Angeles';
+  changeCityName();
+};
+const convertKelvinToFahrenheit = (temp) => {
+  return Math.round((temp - 273.15) * (9 / 5) + 32);
+};
+
+const findLatAndLong = async () => {
+  await axios .get(`${URL}/location`, {
+      params: { 
+        q: state.city,
+      },
+    })
+    .then((response) => {
+      state.lat = response.data[0].lat;
+      state.lon = response.data[0].lon;
+      getWeather();
+    })
+    .catch((error) => {
+      console.log('Error finding the latitude and longitude:', error.response);
+    });
+};
+
+const getWeather = async () => {
+  await axios .get(`${URL}/weather`, {
+      params: {
+        lat: state.lat,
+        lon: state.lon,
+      },
+    })
+    .then((response) => {
+      const weather = response.data;
+      state.temp = convertKelvinToFahrenheit(weather.main.temp);
+      colorReaction();
+      const tempValue  = document.querySelector('#tempValue');
+      tempValue.textContent = `${state.temp} °F`;
+    })
+    .catch((error) => {
+      console.log('Error getting the weather:', error);
+    });
+};
+
+const updateSky = () => {
+  const skyContainer = document.getElementById('sky');
+  const choiceSky = document.getElementById('skySelect').value;
+  let skyDisplay = 'Cloudy';
+  if (choiceSky === 'Cloudy') {
+    skyContainer.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️';
+    skyDisplay = 'cloudy';
+   } else if (choiceSky === 'Snowy') {
+    skyContainer.textContent = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨';
+      skyDisplay = 'snowy';
+   } else if (choiceSky === 'Rainy') {
+    skyContainer.textContent = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧';
+      skyDisplay = 'rainy';
+  } else if (choiceSky === 'Sunny') {
+    skyContainer.textContent = '☁️     ☁️   ☁️ ☀️ ☁️  ☁️';
+    skyDisplay = 'sunny';
+  } 
+  const gardenContent = document.getElementById('gardenContent');
+  gardenContent.classList = `garden__content ${skyDisplay}`;
+};
+
+
+
+const registerEventHandlers = () => {
+  showTemp();
+  const currentTempButton = document.getElementById('tempReset');
+  currentTempButton.addEventListener('click', findLatAndLong);
+  const increaseTempControl = document.getElementById('increaseTempControl');
+  increaseTempControl.addEventListener('click', increaseTemp);
+
+  const decreaseTempControl = document.getElementById('decreaseTempControl');
+  decreaseTempControl.addEventListener('click', decreaseTemp);
+
+  updateSky();
+  const skySelect = document.getElementById('skySelect');
+  skySelect.addEventListener('change', updateSky);
+
+  changeCityName();
+  const cityNameInput = document.getElementById('cityNameInput');
+  cityNameInput.addEventListener('input', changeCityName);
+
+  const cityNameResetBtn = document.getElementById('cityNameReset');
+  cityNameResetBtn.addEventListener('click', resetCityName);
+};
+
+document.addEventListener('DOMContentLoaded', registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,152 @@
+h2 {
+    margin: 0 auto 2rem auto;
+  }
+
+  body {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    grid-template-rows: auto auto auto auto;
+    grid-gap: 1rem;
+    font-family: "Rubik", sans-serif;
+    font-size: 18px;
+    background-color: #1b69f9;
+    margin: 2rem;
+  }
+
+  .header__header {
+    color: white;
+    grid-column: span 3;
+    display: flex;
+    align-items: center;
+    margin: 2rem auto 3rem 0;
+  }
+
+  .header__header > h1 {
+    margin-right: 2rem;
+    font-size: 3em;
+  }
+
+  .header__city-name {
+    font-style: oblique;
+    font-size: 2rem;
+  }
+
+  .header__city-name::before,
+  .header__city-name::after {
+    content: "✨";
+  }
+
+  .temperature__section,
+  .sky__section,
+  .city-name__section {
+    border-radius: 8px;
+    padding: 2rem;
+    background-color: white;
+  }
+
+  .temperature__section {
+    grid-row: 2;
+  }
+
+  .sky__section {
+    grid-row: 3;
+  }
+
+  .city-name__section {
+    grid-row: 4;
+  }
+
+  .garden__section {
+    grid-row: 2 / span 3;
+    grid-column: 2;
+    text-align: center;
+    align-self: center;
+  }
+
+  .temperature__content {
+    display: flex;
+    flex-direction: row;
+    /* justify-content: space-around; */
+    /* justify-content: center; */
+  }
+
+  #tempValue {
+    font-size: 3rem;
+    margin-left: 1.5rem;
+    /* padding-right: 1rem; */
+    /* margin-right: 1.5rem; */
+  }
+
+  .temperature__controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .garden__section > h2 {
+    color: white;
+  }
+
+  .garden__content {
+    min-height: 200px;
+    max-width: fit-content;
+    margin: auto;
+    padding: 2rem;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    border-radius: 8px;
+    font-size: 2em;
+  }
+
+  .reset-btn {
+    border: 0;
+    background-color: #1655cc;
+    color: white;
+    border-radius: 8px;
+    padding: 1rem;
+    font-family: "Rubik", sans-serif;
+  }
+
+  .red {
+    color: red;
+  }
+
+  .orange {
+    color: orange;
+  }
+
+  .yellow {
+    color: gold;
+  }
+
+  .yellow-green {
+    color: yellowgreen;
+  }
+
+  .green {
+    color: green;
+  }
+
+  .teal {
+    color: teal;
+  }
+
+  .cloudy {
+    background-color: lightgrey;
+  }
+
+  .sunny {
+    background-color: rgb(221, 255, 255);
+  }
+
+  .rainy {
+    background-color: lightblue;
+  }
+
+  .snowy {
+    background-color: lightsteelblue;
+  }
+