Ada-C18 · cintiashamsu · Jan 19, 2023
diff --git a/index.html b/index.html
@@ -4,9 +4,53 @@
     <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.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@40,400,0,0" />
+    <link rel="stylesheet" href="styles/index.css" />
 </head>
+
 <body>
-
+    <section id= "landscape-container" >
+        <section id="sky">
+            <select id="sky-options">
+                <option>Sunny</option>
+                <option>Cloudy</option>
+                <option>Rainy</option>
+                <option>Snowy</option>
+            </select>
+        </section>
+        <img id="snoopy-image" src="assets/eighties-snoopy.gif" alt="snoopy weather pic" />
+        <p id="out"><span id="outside"> 🌵 🐍 🦂 🌵 🌵 🏜 🦂 </span></p>
+        <p id="up"><span id="sky-pic">🌧 🌧 🌧 🌧</span></p>
+    </section>
+    <main>
+        <div class="main-container">
+
+            <div class="location-container">
+                <h1 id="city-name">New York</h1>
+                <!-- <p id="country-time"><span id="country">US</span> - <span id="time">12:00 am</span></p> -->
+            </div>
+
+            <div class="weather-container">
+                <h2 class= "fifties" id="temp"><span id="value">50</span><span id = "degree"> °F</span></h2>
+                <!-- <h2 <span id="temp" class="default">50</span><span id = "degree">°</span> -->
+                <!-- <p id="feels-like">feels like <span id="feels-like">50</span>°</p> -->
+                <button class="btn" id="increase"><span class="material-symbols-outlined">arrow_upward</span></button>
+                <button class="btn" id="decrease"><span class="material-symbols-outlined">arrow_downward</span></button>
+                <button class="btn" id="reset"><span class="material-symbols-outlined">refresh</span></button>
+            </div>
+            <form>
+                <input type="text" id="city-search" placeholder="enter city name"/>
+                <button type="submit" id="search-button">></button>
+            </form>
+        </div>
+    </main>
+    <script src="src/index.js" type="text/javascript"></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.3"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,149 @@
+// 'use strict';
+
+const state = {
+    temp: 50,
+    city: 'New York',
+    lat: 40.7127281,
+    lon: -74.0060152,
+};
+
+const value = document.querySelector("#value");
+// const feelsLike = document.querySelector("#feels-like");
+const tempDisplay = document.querySelector("#temp");
+
+const ktoF = (temperature) => { //returns kelvin to fahrenheit
+    return (temperature - 273.15) * (9/5) + 32;
+};
+
+const getLocation  = () => {
+    axios.get(("http://127.0.0.1:5000/location"), {
+        params: {q: state.city},
+    })
+    .then((response) => {
+        // console.log(response.data);
+        console.log(response.data[0].lat);
+        state.lon = response.data[0].lon;
+        getWeather();
+    })
+    .catch((error) => {
+        console.log('lat/lon error:', error);
+    });
+};
+
+const getWeather = () => {
+    axios.get("http://127.0.0.1:5000/weather", {
+        params: {lat: state.lat, lon: state.lon}
+    })
+    .then((response) => {
+        // const weather = response.data;
+        console.log(weather);
+        state.temp = Math.round(ktoF(weather.main.temp));
+        value.textContent = state.temp;
+        updateTemp();
+    })
+    .catch((error) => {
+        console.log("weather response data error:", error);
+    });
+};
+
+const registerAPIHandlers = () => {
+    const newTemp = document.querySelector("#search-button");
+    newTemp.addEventListener("click", getLocation);
+};
+
+const updateTemp = () => {
+    const snoopyPic = document.querySelector("#snoopy-image");
+    if (state.temp >= 80) {
+        tempDisplay.className = "eighties";
+        outside.textContent = "🌞🌻🔥😎🦂🥵🌵🏜️🌞🌻🔥😎🦂🥵🌵🏜️";
+        snoopyPic.src = 'assets/eighties-snoopy.gif'
+    } else if (state.temp >= 70 && state.temp < 80) {
+        tempDisplay.className = "seventies";
+        outside.textContent = "💨🌸🌻🌤️🥵🔥☘️🐍💨🌸🌻🌤️🥵🔥☘️🐍💨";
+        snoopyPic.src = 'assets/seventies-snoopy.gif'
+    } else if (state.temp >= 60 && state.temp < 70) {
+        tempDisplay.className = "sixties";
+        outside.textContent = "🌾🌾🌸🌿🌼🍃🪨🛤🌾🌸🌸🍃🌾🌾🌸🌿";
+        snoopyPic.src = 'assets/sixties-snoopy.gif'
+    }  else if (state.temp >= 50 && state.temp < 60) {
+        tempDisplay.className = "fifties";
+        outside.textContent = "🍂🍁🍃🏕️🤧🌧️🍂🍁🍃🏕️🤧🌧️🍂🍁🍃🏕️";
+        snoopyPic.src = 'assets/fifties-snoopy.gif'
+    } else {
+        tempDisplay.className = "fourties";
+        outside.textContent = "🥶🤧❄️😰☃️⛄️☁️🌲🌲⛄️🌲⛄️🥶🤧❄️😰☃️⛄️☁️";
+        snoopyPic.src = 'assets/fourties-snoopy.gif'
+    }
+};
+
+const increaseTemp = () => {
+    state.temp += 1;
+    value.textContent = state.temp;
+    updateTemp();
+};
+
+const decreaseTemp = () => {
+    state.temp -= 1;
+    value.textContent = state.temp;
+    updateTemp();
+};
+
+const registerTempHandlers = () => {
+    const increase = document.querySelector("#increase");
+    increase.addEventListener("click", increaseTemp);
+
+    const decrease = document.querySelector("#decrease");
+    decrease.addEventListener("click", decreaseTemp);
+};
+
+const changeCityName = () => {
+    const cityInput = document.querySelector("#city-search").value;
+    const cityName = document.querySelector("#city-name");
+    cityName.textContent = state.city;
+    state.city = cityInput;
+};
+
+const resetName  = () => {
+    const cityNameInput = document.querySelector("#city-search");
+    cityNameInput.value = 'New York';
+    changeCityName();
+};
+
+const registerCityHandlers = () => {
+    const cityNameInput = document.querySelector("#city-search");
+    cityNameInput.addEventListener("input", changeCityName);
+
+    const cityResetButton = document.querySelector("#reset");
+    cityResetButton.addEventListener("click", resetName);
+};
+
+const setSky = () => {
+    const skyColor = document.querySelector("#sky-options").value;
+    const skyPic = document.querySelector("#sky-pic");
+    let sky = " ";
+    if (skyColor === "Sunny") {
+        sky = '🔆 🔆 🔆 🔆';
+    } else if (skyColor === "Cloudy") {
+        sky = '☁️ ☁️ ☁️ ☁️'
+    } else if (skyColor === "Rainy") {
+        sky = '🌧 🌧 🌧 🌧'
+    } else if (skyColor === "Snowy") {
+        sky = '❄️ ❄️ ❄️ ❄️'
+    };
+    skyPic.textContent = sky;
+};
+
+const registerSkyHandlers = () => {
+    // setSky();
+    const pickSky = document.querySelector('#sky-options');
+    pickSky.addEventListener("change", setSky)
+};
+
+const registerEventHandlers = () => {
+    registerCityHandlers();
+    registerTempHandlers();
+    registerAPIHandlers();
+    registerSkyHandlers();
+};
+
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,128 @@
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    background: thistle;
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Montserrat', sans-serif;
+}
+
+section {
+    background: pink;
+    flex-direction: column;
+    border-style: hidden;
+    justify-content: center;
+    border-radius: 20px;
+    max-width: 75%;
+    max-height: 90%;
+    align-items: center;
+    padding: 20px 100px;
+    margin: 10px;
+    font-size: 2 v;
+    text-align: center;
+    color: black;
+}
+
+#out, #up {
+    flex-direction: column;
+    background: rgba(100, 148, 237, 0.263);
+    border-style: hidden;
+    border-radius: 30px;
+    padding: 5px;
+    font-style: bold;
+}
+
+main {
+    background: pink;
+    border-style: hidden;
+    border-radius: 20px;
+    max-width: 75%;
+    max-height: 90%;
+    padding: 50px 100px;
+    margin: 10px;
+}
+
+.location-container {
+    /* padding: 10px; */
+    line-height: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: black;
+}
+
+#city-name {
+    font-size: 4vw;
+}
+
+.weather-container {
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+#temp {
+    font-size: 5vw;
+}
+
+form {
+    padding-top: 20px;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-size: 1vw;
+}
+
+#city-search{
+    background: transparent;
+    border-style: solid black;
+    border-radius: 30px;
+}
+
+::placeholder{
+    color: black;
+    font-style: italic;
+    text-align: center;
+}
+
+#search-button {
+    font-style: bold;
+    background: rgba(255, 0, 0, 0.3);
+    border-style: solid black;
+    border-radius: 30px;
+}
+
+.btn{
+    background-color: transparent;
+    background-repeat: no-repeat;
+    border: none;
+    cursor: pointer;
+    overflow: hidden;
+    outline: none;
+}
+
+.eighties{
+    color: salmon;
+}
+
+.seventies{
+    color: orange;
+}
+
+.sixties{
+    color: goldenrod;
+}
+
+.fifties{
+    color: darkseagreen;
+}
+
+.fourties{
+    color: cornflowerblue;
+}
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.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.3.tgz#31a3d824c0ebf754a004b585e5f04a5f87e6c4ff"
+  integrity sha512-pdDkMYJeuXLZ6Xj/Q5J3Phpe+jbGdsSzlQaFVkMQzRUL05+6+tetX8TV3p4HrU4kzuO9bt+io/yGQxuyxA/xcw==
   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==