From 57a3f7d29a0d646120291b56aec4a42c46d7d76c Mon Sep 17 00:00:00 2001
From: Bahareh <izad@bu.edu>
Date: Mon, 13 Jun 2022 13:27:46 -0400
Subject: [PATCH 1/2] everything finished other than real-time-temp

---
 assets/index.js  | 103 +++++++++++++++++++++++++++++++++++++++++++++++
 index.html       |  52 +++++++++++++++++++++++-
 styles/index.css |  54 +++++++++++++++++++++++++
 3 files changed, 208 insertions(+), 1 deletion(-)
 create mode 100644 assets/index.js

diff --git a/assets/index.js b/assets/index.js
new file mode 100644
index 000000000..68db4682a
--- /dev/null
+++ b/assets/index.js
@@ -0,0 +1,103 @@
+// const axios = require('axios');
+
+// axios
+//   .get('https://dog.ceo/api/breeds/list/all')
+//   .then(() => {
+//     console.log('success!');
+//   })
+//   .catch(() => {
+//     console.log('error!');
+//   });
+
+
+// buttons for tempreture up and down 
+let btnAdd = document.querySelector('#increment');
+let btnSubstract = document.querySelector('#decrement')
+let tempContainer=document.querySelector('#tempContainer')
+
+
+const increment = ()=>{state.temp+=1;
+  tempContainer.textContent=`${state.temp}`;
+  changeLandscape();
+}
+const decrement = () =>{state.temp-=1;
+  tempContainer.textContent=`${state.temp}`;
+  changeLandscape();
+}
+
+btnAdd.addEventListener('click',increment );
+btnSubstract.addEventListener('click',decrement );
+
+
+
+// Update name of the city
+const updateCityName = () => {
+  let cityName = document.querySelector('#citynam');
+  let inputName= document.querySelector('#input').value;
+  state.city = inputName;
+  cityName.textContent = state.city;
+};
+const cityNameInput = document.getElementById('input');
+cityNameInput.addEventListener('input', updateCityName);
+
+// Reset name of the city
+const state={city:'Tehran',
+temp:70}
+const reset = () => {
+  const cityName = document.getElementById('input');
+  cityName.value = 'Tehran';
+  updateCityName();
+};
+const resetButton = document.getElementById('reset');
+resetButton.addEventListener('click', reset);
+
+// With updated sky change the garden's sky
+
+const changeSky = () => {
+  let selectedSky = document.getElementById('skys');
+  let skyOption = selectedSky.options[selectedSky.selectedIndex].text;
+
+  let skyContainer=document.getElementById('garden-sky')
+  let currentSky ='🌈☀☀☀☀🌝🌝🌝🌝☀☀☀☀☀🌈'
+  if (skyOption === 'Sunny') {
+    currentSky = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️';
+  } else if (skyOption === 'Cloudy') {
+    currentSky = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️';
+  } else if (skyOption === 'Rainy') {
+    currentSky = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧';
+  } else if (skyOption === 'Snowy') {
+    currentSky = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨';
+  }
+  skyContainer.textContent = currentSky;
+};
+const changeUpSky = document.getElementById('skys');
+changeUpSky.addEventListener('change', changeSky);
+ 
+// With updated temp change the garden's landscape
+
+const changeLandscape = () => {
+  temp=state.temp
+  let tempContainer=document.getElementById('tempContainer')
+  let landscapeContainer=document.getElementById('ground')
+  let currentLandscape ='✨✨✨✨✨🌏🌏🌏🌏🌏'
+  if (temp>80) {
+    currentLandscape = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂";
+    tempContainer.style.backgroundColor = 'red';
+  } else if (temp>=70) {
+    currentLandscape = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"
+    tempContainer.style.backgroundColor = 'orange';
+  } else if (temp>=60) {
+    currentLandscape = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"
+    tempContainer.style.backgroundColor = 'yellow';
+  } else if (temp<=59) {
+    currentLandscape = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"
+    tempContainer.style.backgroundColor = 'green';
+  }
+  landscapeContainer.textContent = currentLandscape;
+};
+const changeGround = document.getElementById('ground');
+changeGround.addEventListener('change', changeSky);
+
+ 
+
+
diff --git a/index.html b/index.html
index 68b320b9a..e25abb3f2 100644
--- a/index.html
+++ b/index.html
@@ -5,8 +5,58 @@
     <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="/Users/bahareh/Developer/weather-report/styles/index.css">
 </head>
 <body>
-    
+
+<div class="container">
+   
+    <section class="box" id="tempreture">
+        <button id="decrement">❄️</button>
+        <div id="tempContainer"></div>
+        <button id="increment">🔥</button>
+        <button id="real-time-temp">Get current tempreture</button>
+      
+   </section> 
+   
+   <section class="box" id="sky" >
+       
+       <label  for="sky-names" class="header">Sky:</label>
+       <select id="skys" name="sky-names" >
+        <option value="sunny">Sunny</option>
+        <option value="cloudy">Cloudy<option>
+        <option value="rainy">Rainy</option>
+        <option value="snowy">Snowy</option>
+       </select>
+ 
+
+   </section>
+
+   
+   <section class="box" id="city">
+       <h2 class="header" id="citynam"></h2>
+       <label for="input" class="header">City Name:</label>
+       <input type="text" id="input"  >
+       <button id="reset">reset</button>
+    </section> 
+   
+    <section class="box" id="garden-sky">
+        <header class="header">Garden's sky</header>
+       <div id="upSky">🌈☀☀☀☀🌝🌝🌝🌝☀☀☀☀☀🌈</div>
+       
+     </section> 
+  
+
+    <section class="box" id="garden-landscape">
+        <header class="header">Garden's landscape</header>
+        <div id="ground">✨✨✨✨✨🌏🌏🌏🌏🌏
+        </div>
+    </section> 
+
+</div>
+<script  src="assets/index.js"></script>
+<script src="./node_modules/axios/dist/axios.min.js"></script>
+<script src="./node_modules/axios/dist/axios.min.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/styles/index.css b/styles/index.css
index e69de29bb..d620ef20e 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -0,0 +1,54 @@
+* {background-color:cornsilk ;
+font-size: large;}
+
+.container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  .box {
+    height: 50vh;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 20%;
+    min-width: 300px;
+    border-radius: 10%;
+    /* padding:70 px 0; */
+    text-align: center;
+    overflow-x: auto;
+    border: 1px solid saddlebrown;
+    box-sizing: border-box;
+    background-color: salmon;
+    
+  }
+  
+
+.header{margin:25%;
+    background-color: grey;
+    padding: 2%;
+  }
+ 
+
+button{margin: 20%;
+    padding: 10px;
+}
+  
+
+/* #tempreture{background-color: aquamarine;
+}
+
+#garden-sky{background-color: yellow;    
+}
+
+#garden-landscape{background-color: blue;}
+  
+#city{background-color: violet;}
+
+#sky{background-color: bisque;} */
+
+img{
+    display:block;
+    margin:auto;
+    height: 100%;
+}
+

From 672074f8cf672cbf987acb0036a37da4e84744f6 Mon Sep 17 00:00:00 2001
From: Bahareh <izad@bu.edu>
Date: Wed, 15 Jun 2022 11:32:20 -0400
Subject: [PATCH 2/2] passed wave 4

---
 assets/index.js | 103 --------------------------------
 index.html      |   5 +-
 src/index.js    | 155 ++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 157 insertions(+), 106 deletions(-)
 delete mode 100644 assets/index.js

diff --git a/assets/index.js b/assets/index.js
deleted file mode 100644
index 68db4682a..000000000
--- a/assets/index.js
+++ /dev/null
@@ -1,103 +0,0 @@
-// const axios = require('axios');
-
-// axios
-//   .get('https://dog.ceo/api/breeds/list/all')
-//   .then(() => {
-//     console.log('success!');
-//   })
-//   .catch(() => {
-//     console.log('error!');
-//   });
-
-
-// buttons for tempreture up and down 
-let btnAdd = document.querySelector('#increment');
-let btnSubstract = document.querySelector('#decrement')
-let tempContainer=document.querySelector('#tempContainer')
-
-
-const increment = ()=>{state.temp+=1;
-  tempContainer.textContent=`${state.temp}`;
-  changeLandscape();
-}
-const decrement = () =>{state.temp-=1;
-  tempContainer.textContent=`${state.temp}`;
-  changeLandscape();
-}
-
-btnAdd.addEventListener('click',increment );
-btnSubstract.addEventListener('click',decrement );
-
-
-
-// Update name of the city
-const updateCityName = () => {
-  let cityName = document.querySelector('#citynam');
-  let inputName= document.querySelector('#input').value;
-  state.city = inputName;
-  cityName.textContent = state.city;
-};
-const cityNameInput = document.getElementById('input');
-cityNameInput.addEventListener('input', updateCityName);
-
-// Reset name of the city
-const state={city:'Tehran',
-temp:70}
-const reset = () => {
-  const cityName = document.getElementById('input');
-  cityName.value = 'Tehran';
-  updateCityName();
-};
-const resetButton = document.getElementById('reset');
-resetButton.addEventListener('click', reset);
-
-// With updated sky change the garden's sky
-
-const changeSky = () => {
-  let selectedSky = document.getElementById('skys');
-  let skyOption = selectedSky.options[selectedSky.selectedIndex].text;
-
-  let skyContainer=document.getElementById('garden-sky')
-  let currentSky ='🌈☀☀☀☀🌝🌝🌝🌝☀☀☀☀☀🌈'
-  if (skyOption === 'Sunny') {
-    currentSky = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️';
-  } else if (skyOption === 'Cloudy') {
-    currentSky = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️';
-  } else if (skyOption === 'Rainy') {
-    currentSky = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧';
-  } else if (skyOption === 'Snowy') {
-    currentSky = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨';
-  }
-  skyContainer.textContent = currentSky;
-};
-const changeUpSky = document.getElementById('skys');
-changeUpSky.addEventListener('change', changeSky);
- 
-// With updated temp change the garden's landscape
-
-const changeLandscape = () => {
-  temp=state.temp
-  let tempContainer=document.getElementById('tempContainer')
-  let landscapeContainer=document.getElementById('ground')
-  let currentLandscape ='✨✨✨✨✨🌏🌏🌏🌏🌏'
-  if (temp>80) {
-    currentLandscape = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂";
-    tempContainer.style.backgroundColor = 'red';
-  } else if (temp>=70) {
-    currentLandscape = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"
-    tempContainer.style.backgroundColor = 'orange';
-  } else if (temp>=60) {
-    currentLandscape = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"
-    tempContainer.style.backgroundColor = 'yellow';
-  } else if (temp<=59) {
-    currentLandscape = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"
-    tempContainer.style.backgroundColor = 'green';
-  }
-  landscapeContainer.textContent = currentLandscape;
-};
-const changeGround = document.getElementById('ground');
-changeGround.addEventListener('change', changeSky);
-
- 
-
-
diff --git a/index.html b/index.html
index e25abb3f2..a535757fd 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
    
     <section class="box" id="tempreture">
         <button id="decrement">❄️</button>
-        <div id="tempContainer"></div>
+        <div id="tempContainer">70</div>
         <button id="increment">🔥</button>
         <button id="real-time-temp">Get current tempreture</button>
       
@@ -55,8 +55,7 @@ <h2 class="header" id="citynam"></h2>
     </section> 
 
 </div>
-<script  src="assets/index.js"></script>
-<script src="./node_modules/axios/dist/axios.min.js"></script>
+<script  src="src/index.js"></script>
 <script src="./node_modules/axios/dist/axios.min.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index e69de29bb..9038d482c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,155 @@
+
+const getLatAndLon = (city) => {
+  return axios
+    .get('http://127.0.0.1:5000/location', {
+      params: {
+        q: city,
+      },
+    })
+    .then((response) => {
+      console.log(response.data);
+      return {
+        lat: response.data[0].lat,
+        lon: response.data[0].lon,
+      };
+    })
+    .then((response)=>{
+console.log(response);
+getWeatherKelvin(response.lat,response.lon)
+    })
+
+    .catch((error) => {
+      console.log('Error finding the latitude and longitude:', error.response);
+    });
+};
+
+const getWeatherKelvin = (lat, lon) => {
+  return axios
+    .get('http://127.0.0.1:5000/weather', {
+      params: {
+        lat: lat,
+        lon: lon,
+      },
+    })
+    .then((response) => {
+      console.log(response);
+      return response.data.current.temp;
+    })
+    .then((response)=>{
+      console.log(response);
+      return Math.floor((response - 273.15) * 9/5 + 32)
+    })
+    .then((response)=>{
+      console.log(response);
+      state.temp=response
+      tempContainer.textContent=`${state.temp}`;
+
+    })
+    .catch((error) => {
+      console.log('Error finding the latitude and longitude:', error.response);
+    });
+};
+const saveCity=()=>{
+  const cityName= document.getElementById('input').value;
+  state.city=cityName
+  console.log(state.city);
+  getLatAndLon(state.city);
+  getWeatherKelvin(lat,lon);
+  
+
+
+}
+const realTimeButton = document.getElementById('real-time-temp');
+realTimeButton.addEventListener('click', saveCity);
+
+
+// buttons for tempreture up and down 
+let btnAdd = document.querySelector('#increment');
+let btnSubstract = document.querySelector('#decrement')
+let tempContainer=document.querySelector('#tempContainer')
+
+
+const increment = ()=>{state.temp+=1;
+  tempContainer.textContent=`${state.temp}`;
+  changeLandscape();
+}
+const decrement = () =>{state.temp-=1;
+  tempContainer.textContent=`${state.temp}`;
+  changeLandscape();
+}
+
+btnAdd.addEventListener('click',increment );
+btnSubstract.addEventListener('click',decrement );
+
+
+// Update name of the city
+const updateCityName = () => {
+  let cityName = document.querySelector('#citynam');
+  let inputName= document.querySelector('#input').value;
+  state.city = inputName;
+  cityName.textContent = state.city;
+};
+const cityNameInput = document.getElementById('input');
+cityNameInput.addEventListener('input', updateCityName);
+
+// Reset name of the city
+const state={city:'Tehran',
+temp:70}
+const reset = () => {
+  const cityName = document.getElementById('input');
+  cityName.value = 'Tehran';
+  updateCityName();
+};
+const resetButton = document.getElementById('reset');
+resetButton.addEventListener('click', reset);
+
+// With updated sky change the garden's sky
+
+const changeSky = () => {
+  let selectedSky = document.getElementById('skys');
+  let skyOption = selectedSky.options[selectedSky.selectedIndex].text;
+
+  let skyContainer=document.getElementById('garden-sky')
+  let currentSky ='🌈☀☀☀☀🌝🌝🌝🌝☀☀☀☀☀🌈'
+  if (skyOption === 'Sunny') {
+    currentSky = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️';
+  } else if (skyOption === 'Cloudy') {
+    currentSky = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️';
+  } else if (skyOption === 'Rainy') {
+    currentSky = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧';
+  } else if (skyOption === 'Snowy') {
+    currentSky = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨';
+  }
+  skyContainer.textContent = currentSky;
+};
+const changeUpSky = document.getElementById('skys');
+changeUpSky.addEventListener('change', changeSky);
+ 
+// With updated temp change the garden's landscape
+
+const changeLandscape = () => {
+  temp=state.temp
+  let tempContainer=document.getElementById('tempContainer')
+  let landscapeContainer=document.getElementById('ground')
+  let currentLandscape ='✨✨✨✨✨🌏🌏🌏🌏🌏'
+  if (temp>80) {
+    currentLandscape = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂";
+    tempContainer.style.backgroundColor = 'red';
+  } else if (temp>=70) {
+    currentLandscape = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"
+    tempContainer.style.backgroundColor = 'orange';
+  } else if (temp>=60) {
+    currentLandscape = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"
+    tempContainer.style.backgroundColor = 'yellow';
+  } else if (temp<=59) {
+    currentLandscape = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"
+    tempContainer.style.backgroundColor = 'green';
+  }
+  landscapeContainer.textContent = currentLandscape;
+};
+const changeGround = document.getElementById('ground');
+changeGround.addEventListener('change', changeSky);
+
+ 
+
+