ada-c17 · yingsgithub · Jun 12, 2022 · Jun 12, 2022 · Jun 13, 2022 · Jun 13, 2022
diff --git a/img/CrowAndSnow.png b/img/CrowAndSnow.png
diff --git a/img/gold.png b/img/gold.png
diff --git a/img/green.png b/img/green.png
diff --git a/img/orange.png b/img/orange.png
diff --git a/img/rainRain.png b/img/rainRain.png
diff --git a/img/rainUnbr.png b/img/rainUnbr.png
diff --git a/img/rainbow.png b/img/rainbow.png
diff --git a/img/rainy.png b/img/rainy.png
diff --git a/img/red.png b/img/red.png
diff --git a/img/snowTree.png b/img/snowTree.png
diff --git a/img/snowcloud.png b/img/snowcloud.png
diff --git a/img/snowy.png b/img/snowy.png
diff --git a/img/sun.png b/img/sun.png
diff --git a/img/sunflower.png b/img/sunflower.png
diff --git a/img/sunny1.png b/img/sunny1.png
diff --git a/img/sunnyday.jpeg b/img/sunnyday.jpeg
diff --git a/img/teal1.png b/img/teal1.png
diff --git a/img/teal2.png b/img/teal2.png
diff --git a/img/teruteru1.png b/img/teruteru1.png
diff --git a/img/topCloudy.png b/img/topCloudy.png
diff --git a/index.html b/index.html
@@ -5,8 +5,63 @@
     <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="stylesheet" href="styles/index.css" />
 </head>
 <body>
-
+    <div id = "container">
+
+        <!-- -----------title weather report---------------- -->
+        <div>
+                <!-- <img id= 'weaPic1' > -->
+            <h1 > <img id='weaPic1' > Weather Report <img id='weaPic2' > </h1>
+        </div>
+
+        <div >
+            <div >
+                <!-- ----------- city display--------------- -->
+                <h2 id = "values">  </h2>
+                <!-- -----------temp button---------------- -->
+                <h2 id = "buttonTemp">
+                    <div>
+                        <button id = "up"> 🔼 </button>
+                    </div>
+                    <div>
+                        <span id = "tempNum">  </span> 
+                    </div> 
+                    <div>
+                        <button id = "down" > 🔽 </button>
+                    </div>
+                </h2>
+            </div>
+
+        </div>
+
+
+        <div>
+            <button id = "realTimeTemp"> Current Temp </button>
+            <input placeholder="Enter a city" name="name">
+            <button id = "resetCity"> Reset City </button>
+
+        </div>
+        <br>
+
+        <!-- -----------landscape--------------- -->
+        <div id = "landscape">
+            <img id = "img1" src="img/CrowAndSnow.png" alt=""  >
+        </div>
+        <!-- -----------button_sky---------------- -->
+
+        <h2 id = "buttonSky">
+            <label for = "skyOptions" > choose a sky</label>
+            <select name = "skys" id = "skyOptions">
+                <option value="">--sky options--</option>
+                <option value="sunny">Sunny</option>
+                <option value="cloudy">Cloudy</option>
+                <option value="rainy">Rainy</option>
+                <option value="snowy">Snowy</option>
+        </h2>
+    </div>
+    <script src="./node_modules/axios/dist/axios.min.js"></script>
+    <script src="src/index.js" type="text/javascript"></script>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,195 @@
+const state = {
+  city: 'Philadelphia',
+  lat: 0,
+  lon: 0,
+  temp: 70,
+};
+
+//set default city name
+const cityName = document.getElementById('values');
+cityName.textContent = state.city;
+
+//set default temp
+const temperature = document.getElementById('tempNum');
+temperature.textContent = state.temp;
+
+const resetCityName = () => {
+  const cityName = document.getElementById('values');
+  cityName.textContent = 'Philadelphia';
+};
+
+// event: temp num color changes as temp changes
+const tempNumColorSet = () => {
+  // let temperature = document.getElementById('tempNum');
+  // tempNum = parseInt(temperature.textContent);
+  const temperature = document.getElementById('tempNum');
+  temperature.textContent = state.temp;
+  let Landscape = document.getElementById('img1');
+  const weatherPic1 = document.getElementById('weaPic1');
+  const weatherPic2 = document.getElementById('weaPic2');
+  weatherPic1.src = 'img/rainbow.png';
+  weatherPic2.src = 'img/teruteru1.png';
+
+  // crowAndSnow = Landscape.textContent;
+  if (state.temp > 80) {
+    temperature.style.color = 'red';
+    Landscape.src = 'img/red.png';
+  } else if (state.temp > 70) {
+    temperature.style.color = 'orange';
+    Landscape.src = 'img/orange.png';
+  } else if (state.temp > 60) {
+    temperature.style.color = 'gold';
+    Landscape.src = 'img/gold.png';
+  } else if (state.temp > 50) {
+    temperature.style.color = 'green';
+    Landscape.src = 'img/green.png';
+  } else {
+    temperature.style.color = 'teal';
+    if (state.temp > 32) {
+      Landscape.src = 'img/teal2.png';
+    } else if (state.temp <= 32) {
+      Landscape.src = 'img/teal1.png';
+    }
+  }
+};
+
+// event: increase temp num by clicking "up" button
+const increaseTemp = () => {
+  // let temperature = document.getElementById('tempNum');
+  // tempNum = parseInt(temperature.textContent);
+  // temperature.textContent = tempNum + 1;
+  const temperature = document.getElementById('tempNum');
+  temperature.textContent = state.temp;
+  state.temp += 1;
+  tempNumColorSet();
+};
+
+// event:  decrease temp num by clicking "down" button
+const decreaseTemp = () => {
+  // let temperature = document.getElementById('tempNum');
+  // tempNum = parseInt(temperature.textContent);
+  // temperature.textContent = tempNum - 1;
+  const temperature = document.getElementById('tempNum');
+  temperature.textContent = state.temp;
+  state.temp -= 1;
+  tempNumColorSet();
+};
+
+// city input function ??? how to register
+// let input = document.querySelector('input');
+// const log = document.getElementById('values');
+// const getCityName = (e) => {
+//   log.textContent = e.target.value;
+// };
+const getCityInput = () => {
+  let input = document.querySelector('input').value;
+  const log = document.getElementById('values');
+  state.city = input;
+  log.textContent = state.city;
+};
+
+//using third party API to get lat and lon
+const getLatAndLon = () => {
+  axios
+    .get('http://127.0.0.1:5000/location', {
+      params: {
+        q: state.city,
+      },
+    })
+
+    .then((response) => {
+      // console.log(response.data)
+      state.lat = response.data[0]['lat'];
+      state.lon = response.data[0]['lon'];
+      console.log(state.lon);
+      console.log(state.lat);
+    })
+    .catch((error) => {
+      console.log('error:', error);
+    });
+};
+
+//using third party API to get weather
+const getWeather = () => {
+  getLatAndLon();
+  axios
+    .get('http://127.0.0.1:5000/weather', {
+      params: {
+        lat: state.lat,
+        lon: state.lon,
+      },
+    })
+    .then((response) => {
+      // console.log('getWeather response:',response);
+      state.temp = response.data.current.temp;
+      state.temp = Math.floor(tempKtoF(state.temp));
+      console.log(state.temp);
+      const temperature = document.getElementById('tempNum');
+      temperature.textContent = state.temp;
+      tempNumColorSet();
+    })
+    .catch((error) => {
+      console.log('error:', error);
+    });
+};
+
+// convert temp from K to F
+const tempKtoF = (temp) => {
+  return ((temp - 273.15) * 9) / 5 + 32;
+};
+
+//sky changes
+const changeSkys = () => {
+  const skys = document.getElementById('skyOptions').value;
+  const pageColor = document.getElementById('container');
+  let Landscape = document.getElementById('img1');
+  const weatherPic1 = document.getElementById('weaPic1');
+  const weatherPic2 = document.getElementById('weaPic2');
+  if (skys === 'sunny') {
+    pageColor.style.backgroundColor = 'wheat';
+    Landscape.src = 'img/red.png';
+    weatherPic1.src = 'img/sun.png';
+    weatherPic2.src = 'img/sunflower.png';
+  } else if (skys === 'cloudy') {
+    pageColor.style.backgroundColor = 'grey';
+    Landscape.src = 'img/orange.png';
+    weatherPic1.src = 'img/topCloudy.png';
+    weatherPic2.src = 'img/topCloudy.png';
+  } else if (skys === 'rainy') {
+    pageColor.style.backgroundColor = 'teal';
+    Landscape.src = 'img/rainy.png';
+    weatherPic1.src = 'img/rainRain.png';
+    weatherPic2.src = 'img/rainUnbr.png';
+  } else if (skys === 'snowy') {
+    pageColor.style.backgroundColor = 'white';
+    Landscape.src = 'img/snowy.png';
+    weatherPic1.src = 'img/snowCloud.png';
+    weatherPic2.src = 'img/snowTree.png';
+  }
+};
+
+const registerEventHandlers = () => {
+  // register increase temp
+  const increaseTempButton = document.getElementById('up');
+  increaseTempButton.addEventListener('click', increaseTemp);
+  // register decrease temp
+  const decreaseTempButton = document.getElementById('down');
+  decreaseTempButton.addEventListener('click', decreaseTemp);
+  //register input city name
+  let input = document.querySelector('input');
+  input.addEventListener('input', getCityInput);
+
+  //register real time temp by clicking current temp button
+  const currentTempButton = document.getElementById('realTimeTemp');
+  currentTempButton.addEventListener('click', getWeather);
+
+  //register sky changes
+  const selectSky = document.getElementById('skyOptions');
+  selectSky.addEventListener('change', changeSkys);
+
+  //register city reset
+  const cityDefault = document.getElementById('resetCity');
+  cityDefault.addEventListener('click', resetCityName);
+};
+
+document.addEventListener('DOMContentLoaded', registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,69 @@
+#buttonTemp{
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+}
+
+#cloud{
+    width: 100px;
+}
+
+#container{
+    display:flex;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    align-content: center;
+    /* height: 100vh; */
+    background-color: lightskyblue;
+    border: 2px, solid;
+}
+
+h1, label{
+    font-family:Comic Sans MS, Comic Sans, cursive
+}
+
+#img1{
+    /* width: 60%;
+    height: 70%; */
+    border-radius: 10%;
+    border: 2px solid;
+    max-width: 60%;
+    height: auto;
+
+}
+
+#values{
+    text-align: center;
+    font-weight: bolder;
+    font-size: x-large;
+    color: dark blue;
+    font-family: Comic Sans MS, Comic Sans, cursive
+}
+
+
+
+#landscape {
+    justify-content: center;
+    align-items: center;
+    width: 755;
+    height: 50;
+    background-color: #11ffee00;
+}
+
+#tempNum {
+    border: 2px solid grey;
+    border-radius: 10%;
+    color: orange;
+    margin-top: 50px;
+    padding-left: 25px;
+    padding-right: 25px;
+    font-size: 1.2em;
+    font-weight: bold;
+    font-family: "Gill Sans", sans-serif;
+}
+
+#weaPic1, #weaPic2{
+    width: 70px;
+}
+