Ada-C18 · reynamdiaz · Dec 6, 2022 · Dec 7, 2022 · Dec 7, 2022 · Dec 7, 2022
diff --git a/index.html b/index.html
@@ -4,9 +4,52 @@
     <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 class="header_weather">
+        <h1>Weather Report</h1>
+        <span id="headerCity" class="header_city">
+            <!-- For the City of -->
+        </span>
+    </header>
+    <section class="city_section">
+        <h2>For the City of</h2>
+            <h2 id="city">Toms River</h2>
+            <input type="text" id="inputCity" value="Toms River">
+            <button id="reset">Reset</button>
+    </section>
+    <section class="temperature_section">
+        <h2>Temperature</h2>
+    <div class="temperature_content">
+        <div class="temperature_buttons">
+        <span id="increaseTemp">⬆️</span>
+        <span id="temperatureValue" class="blue"> 58°f </span>
+        <span id ="decreaseTemp">⬇️</span>
+        </div>
+        <button id="tempButton">Get Weather</button>
+    </div>
+    </section>
+    <section class="sky_section">
+        <h2>Sky</h2>
+        <label for="skies">Choose a sky:</label>
+        <select id="skies">
+            <option value="cloudy">Cloudy</option>
+            <option value="rainy">Rainy</option>
+            <option value="sunny">Sunny</option>
+            <option value="snowy">Snowy</option>
+        </select>
+    </section>
+    <section class="garden_section">
+        <h2>Weather Garden</h2>
+        <div id="gardenContent" class="garden_content">
+            <div id="sky" class="sky-contents">☁️☁️☀️☁️☁️</div>
+            <div id="ground" class="ground-contents">🌲🌲🍁🌲🌲</div>
+        </div>
+    </section>
+    <script src="src/index.js"></script>
+    <script src="./node_modules/axios/dist/axios.min.js"></script>
 </body>
-</html>
+
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,135 @@
+('use strict');
+
+const state = {
+  city: 'Toms River',
+  lat: 39.9537359,
+  lon: -74.1979576,
+  temp: 58,
+};
+
+const updateCity = () => {
+  const inputName = document.getElementById('inputCity');
+  const cityName = document.getElementById('city');
+  if (inputName.value) {
+    state.city = inputName.value;
+  }
+  cityName.textContent = state.city;
+};
+
+const resetCity = () => {
+  const inputCity = document.getElementById('inputCity');
+  inputCity.value = 'Toms River';
+  updateCity();
+};
+
+const getTemp = () => {
+  const totalCount = document.getElementById('temperatureValue');
+  axios
+    .get(`http://localhost:5000/location?q=${state.city}`)
+    .then((response) => {
+      console.log(response.data);
+      state.lat = response.data[0].lat;
+      state.lon = response.data[0].lon;
+      axios
+        .get(`http://localhost:5000/weather?lat=${state.lat}&lon=${state.lon}`)
+        .then((response) => {
+          const tempKelvin = response.data.main.temp;
+          const tempFarenheit = ((tempKelvin - 273.15) * 9) / 5 + 32;
+          totalCount.textContent = `${Math.round(tempFarenheit)}°f`;
+          console.log(response.data);
+        })
+        .catch((error) => {
+          console.log('error, could not get weather for that city 😞', error);
+        });
+    });
+};
+
+const totalCount = document.getElementById('temperatureValue');
+
+temperatureValue.textContent = `${state.temp}°f`;
+
+const handleIncrement = () => {
+  state.temp++;
+  temperatureValue.textContent = `${state.temp}°f`;
+  changeColor();
+  changeLandscape();
+};
+
+const handleDecrement = () => {
+  state.temp--;
+  temperatureValue.textContent = `${state.temp}°f`;
+  changeColor();
+  changeLandscape();
+};
+
+const changeColor = () => {
+  let temp = state.temp;
+  let color = '';
+  if (temp > 80) {
+    color = 'red';
+  } else if (temp > 70) {
+    color = 'orange';
+  } else if (temp > 60) {
+    color = 'yellow';
+  } else if (temp > 50) {
+    color = 'green';
+  } else {
+    color = 'blue';
+  }
+  totalCount.className = color;
+};
+
+const ground = document.getElementById('ground');
+
+const changeLandscape = () => {
+  let temp = state.temp;
+  let groundChange = '';
+  if (temp > 80) {
+    groundChange = '🌵_🏜__🌵🐍';
+  } else if (temp > 70) {
+    groundChange = '🏝_⛱__🏝_🌊';
+  } else if (temp > 60) {
+    groundChange = '🌳_🌈__🌳_🌸';
+  } else {
+    groundChange = '🌲_🌲__⛄️_🌲🌲';
+  }
+  ground.textContent = groundChange;
+};
+
+const changeSkies = () => {
+  const skyColor = document.getElementById('skies').value;
+  const sky = document.getElementById('sky');
+  let skyChange = '';
+  if (skyColor === 'cloudy') {
+    skyChange = '☁️☁️☁️☁️☁️☁️☁️☁️';
+  } else if (skyColor === 'rainy') {
+    skyChange = '🌧🌧🌧🌧🌧🌧';
+  } else if (skyColor === 'sunny') {
+    skyChange = '☀️☀️☀️☀️☀️☀️☀️☀️☀️';
+  } else {
+    skyChange = '🌨❄️🌨❄️🌨❄️🌨❄️🌨';
+  }
+  sky.textContent = skyChange;
+};
+
+const registerEventHandlers = () => {
+  const tempButton = document.getElementById('tempButton');
+  tempButton.addEventListener('click', getTemp);
+  const incrementCount = document.getElementById('increaseTemp');
+  incrementCount.addEventListener('click', handleIncrement);
+  const decrementCount = document.getElementById('decreaseTemp');
+  decrementCount.addEventListener('click', handleDecrement);
+  changeColor();
+  changeLandscape();
+  updateCity();
+  changeSkies();
+  // resetCity();
+  const cityInput = document.getElementById('inputCity');
+  cityInput.addEventListener('input', updateCity);
+  const updateSky = document.getElementById('skies');
+  updateSky.addEventListener('change', changeSkies);
+  const resetButton = document.getElementById('reset');
+  resetButton.addEventListener('click', resetCity);
+};
+
+document.addEventListener('DOMContentLoaded', registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,176 @@
+
+h1 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 150px;
+    color:ghostwhite;
+    grid-column: span 4;
+    margin: 2rem auto 3rem 0;
+    font-size: 60px;
+    text-align: center;
+} 
+
+
+h2 {
+    margin: 0 auto 2rem auto;
+    text-align: left;
+}
+
+.header_city {
+    font-style: oblique;
+    font-size: 1.5rem;
+
+}
+
+.temperature_section,
+.sky_section,
+.city_section {
+    border-radius: 8px;
+    padding: 2rem;
+    background-color:rgba(34, 246, 214, 0.7);
+    filter: brightness(200%)
+}
+
+
+.city_section, .temperature_section {
+    grid-row: 2;
+}
+
+.city_section, .sky_section {
+    grid-column: 1 / span 1;
+
+}
+.garden_section, .sky_section {
+    grid-row: 3;
+}
+
+.garden_section {
+    grid-row: 3 / span 2;
+    grid-column: 2 / span 2;
+    text-align: center;
+    align-self: center;
+
+    min-height: 150px;
+    max-width: fit-content;
+    margin: auto;
+    padding: 2rem;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    border-radius: 8px;
+
+} 
+
+
+body {
+    display: grid;
+    grid-gap: 1rem; 
+
+    font-family: 'Lucida Sans';
+    font-size: 20px; 
+    background-color: #64bdfd;
+    margin: 2rem;
+    color: ghostwhite;
+}
+
+
+#tempButton {
+    background-color: #4b67ce;
+    border: none;
+    color: white;
+    padding: 15px 25px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 30px;
+    border-radius: 10px;
+    filter: brightness(100%);
+    width: 200px;
+    margin-left: 170px;
+
+}
+
+
+.temperature_buttons {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 35px;
+}
+
+
+.garden_section  {
+    color: white;
+
+    min-height: 100px;
+    max-width: fit-content;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    border-radius: 8px;
+    font-size: 1.8em;
+    background-color:rgba(34, 246, 214, 0.7);
+    filter: brightness(200%);
+    margin-left: 100px;
+}
+
+#reset {
+    border: 0;
+    background-color: #4b67ce;
+    filter: brightness(100%);
+    color: white;
+    border-radius: 8px;
+    padding: 1rem;
+    font-family: sans-serif;
+}
+
+#temperatureValue {
+    font-size: 3rem;
+    margin-left: 1.5rem;
+}
+
+
+/* .garden_section, option[value=cloudy] {
+    background-color:lightgray;
+    filter: brightness(110%)
+} */
+
+/* .garden_section, option[value=sunny] {
+background-color: rgb(221, 255, 255);
+}
+
+.garden_section, option[value=rainy] {
+background-color: lightblue;
+}
+
+.garden_section, option[value=snowy] {
+background-color: lightsteelblue;
+} */
+
+
+
+
+.green {
+    color:green;
+}
+
+.orange {
+    color: orange;
+}
+
+.red {
+    color: red;
+}
+
+.yellow {
+    color: yellow;
+}
+
+.blue {
+    color: rgb(7, 151, 253);
+}