AdaGold · b-izad · Jun 13, 2022 · Jun 15, 2022 · spitsfire · Jul 18, 2022
diff --git a/index.html b/index.html
@@ -5,8 +5,57 @@
     <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">70</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="src/index.js"></script>
+<script src="./node_modules/axios/dist/axios.min.js"></script>
 </body>
 </html>
diff --git 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);
-  console.log(state.city);
-  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);
+
+
+
+
diff --git 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%;
+}
+