ada-c17 · glassofcat · Jun 18, 2022 · audreyandoy · Jul 20, 2022 · audreyandoy
diff --git a/index.html b/index.html
@@ -4,9 +4,66 @@
     <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>
+    <section class="container">
+
+        <select name="weatherBox" id="weatherBox">
+          <option value="Cloudy">Cloudy</option>
+          <option value="Rainy">Rainy</option>
+          <option value="Sunny">Sunny</option>
+          <option value="Snowy">Snowy</option>
+        </select> 
+        <div id="weather">weather</div>
+        <div class = "h_buttons">
+            <div id="locationReset">Reset Location</div>
+        </div>
+        <input type="text" id="location" name="location" maxlength="14" minlength="3" value="Choose City">
+    </section>
+    <section class="container">
+
+        <h1 id="temp">170</h1>
+        <div class="h_buttons">
+            <div id="up_temp">/\</div>
+            <div id="lookup_temp">||</div>
+            <div id="down_temp">\/</div>
+        </div>
+        <div id="season">season</div>
+    </section>
 
+    <script src="src/index.js" type="text/javascript"></script>
+    <script src="./node_modules/axios/dist/axios.min.js"></script>
 </body>
-</html>
+</html>
+
+<!-- Wave 2:
+lets do centered column flex elements
+reset button0<(city name)
+3 buttons stacked next to <(70 degrees)
+update the background gradient per temperature
+
+    x An element that displays the temperature
+    x A clickable element to increase temperature
+    x A clickable element to decrease temperature
+    x An element that displays a landscape
+    x bottom gradient from blue to red
+
+Wave 3:
+
+    x An element that displays the city name
+    x? An element that contains an <input type="text"> element, used to rename the city
+
+Wave 4:
+
+    x A clickable element to get the current temperature of the displayed city name
+
+Wave 5:
+    top gradient yellow sun, grey cloud, blue rain, white snow
+    ? A <select> dropdown element to set the sky type
+    ? An element that displays a sky
+
+Wave 6:
+
+    x A clickable element to reset the city name -->
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,154 @@
+'use strict';
+// const axios = require('axios');
+
+const state = {
+  location: '',
+  temp: 70,
+  weather: '',
+  lat: 0,
+  lon: 0,
+};
+
+const getTemp = () => {
+  axios
+    .get('http://localhost:5000/weather', {
+      params: {
+        lat: state.lat,
+        lon: state.lon,
+      },
+    })
+    .then((response) => {
+      state.temp = parseInt(
+        ((response.data['current'].temp - 273) * 9) / 5 + 32
+      );
+      state.weather = response.data['current']['weather'][0].main;
+      console.log('success in finding weather!', state.temp, state.weather);
+      tempChange(state.temp, true);
+    })
+    .catch((error) => {
+      console.log('error in weather');
+    });
+  return state.temp;
+};
+
+const tempToColor = () => {
+  let newTemp = state.temp;
+  //I became aware after the fact I could set 'hsl()'
+  const toHex = (dec) => (dec < 16 ? '0' + dec.toString(16) : dec.toString(16));
+  const normalize = (newTemp) => (newTemp % 35) / 35;
+
+  let color = [];
+  if (newTemp <= -35) {
+    color = ['00', '00', 'FF'];
+  } else if (newTemp < 0) {
+    color = ['00', toHex(parseInt(255 * (1 + normalize(newTemp)))), 'FF'];
+  } else if (newTemp < 35) {
+    color = ['00', 'FF', toHex(parseInt(255 * (1 - normalize(newTemp))))];
+  } else if (newTemp < 70) {
+    color = [toHex(parseInt(255 * normalize(newTemp))), 'FF', '00'];
+  } else if (newTemp < 105) {
+    color = ['FF', toHex(parseInt(255 * (1 - normalize(newTemp)))), '00'];
+  } else {
+    color = ['FF', '00', '00'];
+  }
+  return ['#', ...color].join('');
+};
+
+const tempChange = (temp, set) => {
+  const currentTemp = document.querySelector('#temp');
+  if (set) {
+    currentTemp.textContent = temp;
+  } else {
+    state.temp += temp;
+    currentTemp.textContent = state.temp;
+  }
+  currentTemp.style.color = tempToColor();
+
+  seasonChange();
+};
+
+const seasonChange = () => {
+  const currentSeason = document.querySelector('#season');
+  if (state.temp < 30) {
+    season = '🌲🌲⛄️🍂🍁🌲⛄️🍂🌲';
+  } else if (state.temp < 60) {
+    season = '🌾_🍃_🪨__🛤_🌾_🍃';
+  } else if (state.temp < 90) {
+    season = '🌸🌿_🌱_🌻🌷_🌼__🌷';
+  } else {
+    season = '🌵_🐍🌵__🐍_🏜_🦂🌵';
+  }
+  currentSeason.textContent = season;
+};
+
+const weatherChange = () => {
+  const currentWeather = document.querySelector('#weatherBox');
+  const setWeather = document.querySelector('#weather');
+  let weatherLookup = {
+    Sunny: '☁️ ☁️ ☁️ ☀️ ☁️ ☁️',
+    Cloudy: '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️',
+    Rainy: '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧',
+    Snowy: '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨',
+  };
+
+  state.weather = currentWeather.value;
+
+  setWeather.textContent = weatherLookup[state.weather];
+};
+/////////////////////////////////////////////
+const getLocation = () => {
+  print;
+  axios
+    .get('http://localhost:5000/location', {
+      params: {
+        q: state.location,
+      },
+    })
+    .then((response) => {
+      state.lat = response.data[0].lat;
+      state.lon = response.data[0].lon;
+      console.log('success in finding location!', state.lat, state.lon);
+    })
+    .catch((error) => {
+      console.log('error in location');
+    });
+  return {};
+};
+
+const locationChange = () => {
+  const currentLocation = document.querySelector('#location');
+  const locationButton = document.querySelector('#locationReset');
+
+  state.location = currentLocation.value;
+  getLocation();
+  locationButton.textContent = state.location;
+  currentLocation.value = '';
+};
+
+const clearLocation = () => {
+  const locationButton = document.querySelector('#locationReset');
+  locationButton.textContent = 'Reset Location';
+  state.location = '';
+  state.lat = 0;
+  state.lon = 0;
+};
+
+const registerEventHandlers = () => {
+  const upTempButton = document.querySelector('#up_temp');
+  upTempButton.addEventListener('click', (event) => tempChange(1, false));
+  const downTempButton = document.querySelector('#down_temp');
+  downTempButton.addEventListener('click', (event) => tempChange(-1, false));
+  const setTempButton = document.querySelector('#lookup_temp');
+  setTempButton.addEventListener('click', (event) => getTemp());
+
+  const updateLocation = document.querySelector('#location');
+  updateLocation.addEventListener('change', (event) => locationChange());
+  const updateWeather = document.querySelector('#weatherBox');
+  updateWeather.addEventListener('change', (event) => weatherChange());
+
+  const locationResetButton = document.querySelector('#locationReset');
+  locationResetButton.addEventListener('click', (event) => clearLocation());
+};
+
+document.addEventListener('DOMContentLoaded', registerEventHandlers);
+tempChange(0, false);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,51 @@
+body{
+    width: 100vw;
+    height: 100vh;
+    margin: 0%;
+    font-size: 4vw;
+    background-image: linear-gradient(190deg, #f67f2f, #49b8fe);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    display:flex;
+    flex-direction:column;
+    /* justify-content: center; */
+    align-items: center;
+}
+.container {
+    border-radius: .5em;
+    width: 10em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: rgb(0, 255, 255);
+}
+#locationReset{
+    width: auto;
+}
+#location {
+    margin: 0%;
+    font-size: .5em;
+}
+.h_buttons {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+}
+.h_buttons div{
+    border-radius: 1px;
+    box-shadow: 0px 0px 3px 1px white;
+
+    width: 25%;
+    text-align: center;
+}
+
+#temp {
+    margin: 0%;
+    font-size: 6em;
+    text-align: center;
+}
+
+#weather {
+    font-size:.5em;
+}