Ada-C18 · chemtecher · Dec 6, 2022 · Dec 9, 2022 · Dec 9, 2022 · Dec 9, 2022
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 .vscode
 .DS_Store
 node_modules
-.cache
+.cache
+
diff --git a/ada-project-docs/assets/rainy-49.png → ada-project-docs/assets/rainy.png b/ada-project-docs/assets/rainy-49.png → ada-project-docs/assets/rainy.png
diff --git a/index.html b/index.html
@@ -5,8 +5,41 @@
     <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 id="page-tile">
+        <h1>Weather Report</h1>
+        <span id="city-name">City Name</span>
+    </header>
+    <section id="city-name-textbox">
+        <input type="text" id="user-input" placeholder="Enter a city name here">
+        <button id="submit">Submit</button>
+        <button id="reset">Reset</button>
+    </section>
+    <div id="weather-display-section">
+            <img id="sky-image" src="./src/images/cloudy-sky.jpg"></img>
+        <div id="temp-controls">
+            <button id="decrease-temp">-</button>
+            <p id="temp-value">75</p><span>°</span>
+            <button id="increase-temp">+</button>
+        </div>
+    </div>
+    <section id="sky-section">
+        <h3>Sky</h3>
+        <select id="sky-dropdown">
+            <option>Sunny</option>
+            <option>Cloudy</option>
+            <option>Rainy</option>
+            <option>Snowy</option>
+        </select>
+    </section>
+    <section id="landscape-section">
+        <img id="landscape-image" src="./src/images/warm-landscape.jpg" alt="">
+    </section>
 </body>
+<script src="src/index.js" type="text/javascript"></script>
+<script src="./node_modules/axios/dist/axios.min.js"></script>
 </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/images/cloudy-sky.jpg b/src/images/cloudy-sky.jpg
diff --git a/src/images/cold-landscape.jpg b/src/images/cold-landscape.jpg
diff --git a/src/images/cool-landscape.jpg b/src/images/cool-landscape.jpg
diff --git a/src/images/hot-landscape.jpg b/src/images/hot-landscape.jpg
diff --git a/src/images/rainy-sky.jpg b/src/images/rainy-sky.jpg
diff --git a/src/images/snowy-sky.jpg b/src/images/snowy-sky.jpg
diff --git a/src/images/sunny-sky.jpg b/src/images/sunny-sky.jpg
diff --git a/src/images/warm-landscape.jpg b/src/images/warm-landscape.jpg
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,173 @@
+"use strict";
+
+const state = {temperature: 75};
+const tempVal = document.getElementById("temp-value");
+const decButton = document.getElementById("decrease-temp");
+const incButton = document.getElementById("increase-temp");
+const cityName = document.getElementById("city-name");
+let userInput = document.getElementById("user-input");
+const submitButton = document.getElementById("submit");
+const skyImg = document.getElementById("sky-image");
+const skyDropdown = document.getElementById("sky-dropdown");
+let landscape = document.getElementById("landscape-image");
+const resetButton = document.getElementById("reset");
+
+const updateCityName = () => {
+  cityName.innerHTML = userInput.value;
+};
+
+const updateSky = () => {
+  const skyOption = document.getElementById('sky-dropdown').value
+  if (skyOption == 'Sunny'){
+    skyImg.src = './src/images/sunny-sky.jpg'
+  }
+  else if (skyOption == 'Rainy'){
+    skyImg.src = './src/images/rainy-sky.jpg'
+  }
+  else if (skyOption == 'Cloudy'){
+    skyImg.src = './src/images/cloudy-sky.jpg'
+  }
+  else if (skyOption == 'Snowy'){
+    skyImg.src = './src/images/snowy-sky.jpg'
+  }
+}
+
+const tempColor = (temp) => {
+  if (temp <= 50){
+    landscape.src = './src/images/cold-landscape.jpg';
+    skyImg.src = './src/images/snowy-sky.jpg'
+    return 'blue';
+  }
+  else if (temp <= 60){
+    landscape.src = './src/images/cool-landscape.jpg';
+    skyImg.src = './src/images/cloudy-sky.jpg'
+    return 'lightblue';
+  }
+  else if (temp <= 70){
+    landscape.src = './src/images/warm-landscape.jpg';
+    skyImg.src = './src/images/cloudy-sky.jpg'
+    return 'lightgreen';
+  }
+  else if (temp <= 80){
+    landscape.src = './src/images/warm-landscape.jpg';
+    skyImg.src = './src/images/sunny-sky.jpg'
+    return 'yellow';
+  }
+  else {
+    landscape.src = './src/images/hot-landscape.jpg';
+    skyImg.src = './src/images/sunny-sky.jpg'
+    return 'red';
+  }
+}
+
+const registerEventHandlers = () => { 
+  decButton.addEventListener("click", () => {
+    tempVal.innerHTML = state.temperature;
+    state.temperature -= 1;
+    tempVal.style.color = tempColor(state.temperature);
+  });
+
+  incButton.addEventListener("click", () => {
+    tempVal.innerHTML = state.temperature;
+    state.temperature += 1;
+    tempVal.style.color = tempColor(state.temperature);
+  });
+
+  updateCityName();
+  userInput.addEventListener("input", updateCityName);
+
+  submitButton.addEventListener("click", () =>{
+    let city = userInput.value;
+    getLocation(city);
+  });
+
+  updateSky();
+  skyDropdown.addEventListener("change", updateSky)
+
+  resetButton.addEventListener("click", () => {
+    userInput.value = "Detroit";
+    updateCityName();
+  })
+};
+
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
+
+// API Calls
+const getLocation = (city) => {
+  console.log(city)
+  axios.get('http://127.0.0.1:5000/location', {
+    params: {
+      q: city,
+      format: 'json'
+    }
+  })
+  .then(function(response){
+    let lat = response.data[0]["lat"];
+    let lon = response.data[0]["lon"];
+    getWeather(lat, lon);
+  })
+  .catch(function(error) {
+    console.error('error in getlocation!');
+  });
+};
+
+const getWeather = (lat, lon) => {
+  axios.get('http://127.0.0.1:5000/weather', {
+    params: {
+      lat: lat,
+      lon: lon
+    }
+  })
+  .then(function(response){
+    let tempK = response.data['main']['temp'];
+    let tempF = Math.round((tempK - 273.15) * 1.8) + 32;
+    tempVal.innerText = tempF
+  })
+  .catch(function(error) {
+    console.error('error in getWeather');
+  })
+};
+
+
+// // API Calls
+// const getWeatherByLoc = (city) => {
+//   const getLocation = () => {
+//     axios
+//     .get ('http://127.0.0.1:5000/location'), {
+//       params: {
+//         key: 'pk.b8aab1a85295b2c1f6e71a4ed20c3120',
+//         q: city,
+//         format: 'json'
+//       }
+//     }
+//     .then (function(response){
+//       let lat = response.data[0]["lat"];
+//       let lon = response.data[0]["lon"];
+//       getWeather(lat, lon);
+//       console.log("We got the lat and lon!")
+//     })
+//     .catch (function(error) {
+//       console.error('error in getlocation!');
+//     })
+//   }
+
+//   const getWeather = (lat, lon) => {
+//     axios
+//     .get ('http://127.0.0.1:5000/weather'), {
+//       params: {
+//         appid: '76d80595e856e8e068fcdd93241e2622',
+//         lat: lat,
+//         lon: lon
+//       }
+//     }
+//     .then (function(response){
+//       let tempK = response.data['main']['temp'];
+//       let tempF = Math.round((tempK - 273.15) * 1.8) + 32;
+//       tempVal.innerText = tempF
+//       console.log("We got the weather!")
+//     })
+//     .catch (function(error) {
+//       console.error('error in getWeather');
+//     })
+//   }
+// }
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,98 @@
+body {
+    font-family: "Rubik", sans-serif;
+    font-size: 18px;
+    background-color: plum;
+}
+h1 {
+    font-size: 50px;
+}
+#city-name-textbox{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+    background-color: white;
+    width: 85%;
+    height: 40px;
+    margin: 0 auto 2rem;
+    border: 2px solid #AAAAAA;
+
+}
+:placeholder-shown {
+    font-family: "Rubik", sans-serif;
+}
+
+#sky-image {
+    /* padding: 0 10px; */
+    display: flex;
+    width: 85%;
+    height: 284px;
+    margin: 0 auto 2rem;
+    /* background: #A35FCA; */
+    border: 2px solid #AAAAAA;
+}
+
+#bottom-section {
+    display:flex;
+    flex-direction: row;
+    background-color: aquamarine;
+}
+
+#user-input {
+    border: none; 
+    font-family: "Rubik", sans-serif;
+    font-size: large;
+}
+
+#reset, #submit {
+    justify-content: center;
+    padding: 0px 18px;
+    width: 81px;
+    height: 36px;
+    background: #A35FCA;
+    border-radius: 4px;
+    border: none;
+    font-family: "Rubik", sans-serif;
+}
+
+#temp-value{
+    text-align: center;
+    margin: 0;
+    font-size: 60px;
+    color: #000000;
+}
+
+#sky-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+    background-color: white;
+    margin: 0 auto 2rem;
+    height: 40px;
+    width: 85%;
+    border: 2px solid #AAAAAA;
+}
+
+#temp-controls {
+    display: flex;
+    justify-content:center;
+}
+
+#increase-temp, #decrease-temp, span {
+    border: none;
+    background-color: transparent;
+    font-size: 3rem;
+    padding: 0 5px;
+}
+#decrease-temp {
+    padding: 0 35px;
+}
+
+#landscape-image {
+    display: flex;
+    width: 88%;
+    height: 284px;
+    margin: 0 auto 2rem;
+    border: 2px solid #AAAAAA;
+}
diff --git a/yarn.lock b/yarn.lock
@@ -7,13 +7,14 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
-axios@^0.27.2:
-  version "0.27.2"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
-  integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
+axios@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.1.tgz#44cf04a3c9f0c2252ebd85975361c026cb9f864a"
+  integrity sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==
   dependencies:
-    follow-redirects "^1.14.9"
+    follow-redirects "^1.15.0"
     form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
 
 combined-stream@^1.0.8:
   version "1.0.8"
@@ -27,10 +28,10 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
-follow-redirects@^1.14.9:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.0.tgz#06441868281c86d0dda4ad8bdaead2d02dca89d4"
-  integrity sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==
+follow-redirects@^1.15.0:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
 
 form-data@^4.0.0:
   version "4.0.0"
@@ -52,3 +53,8 @@ mime-types@^2.1.12:
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
   dependencies:
     mime-db "1.52.0"
+
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==