Single Responsibility Principle

Samuel-Morgan-Tyghe · Sep 25, 2020 · c409067 · c409067
1 parent a5b501e
commit c409067
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 156 deletions.
diff --git a/index.html b/index.html
@@ -26,38 +26,8 @@
 
     <p id="demo" class="lead text-muted">Showing Weather forecast for    <div id="todaysdate"></div>        <p id="weatherLocation"></p></p>    <div id="todaysdate"></div>
 
-    <div class="weatherOuterContainer">
-    <div  class="weatherInnerContainer">
-        <div id="i1"></div>
-        <div id="i2"></div>
-        <div id="i3"></div>
-        <div id="i4"></div>
-        <img id="i5"><img>
-    </div>
-    <div class="weatherInnerContainer">
-        <div id="i6"></div>
-        <div id="i7"></div>
-        <div id="i8"></div>
-        <div id="i9"></div>
-        <img id="i10"><img>
-
-    </div>
-    <div class="weatherInnerContainer">
-        <div id="i11"></div>
-        <div id="i12"></div>
-        <div id="i13"></div>
-        <div id="i14"></div>
-        <img id="i15"><img>
-
-    </div>
-    <div class="weatherInnerContainer">
-        <div id="i16"></div>
-        <div id="i17"></div>
-        <div id="i18"></div>
-        <div id="i19"></div>
-        <img id="i20"><img>
-
-    </div>
+    <div id="weatherOuterContainer" class="weatherOuterContainer">
+
     </div>
 
 </div>

diff --git a/public/js/index.min.js b/public/js/index.min.js
diff --git a/public/js/index.min.js.map b/public/js/index.min.js.map
diff --git a/src/Typescript/WeatherDay.ts b/src/Typescript/WeatherDay.ts
@@ -5,50 +5,49 @@
 // // sun/cloud
 import axios from 'axios'
 
-export async function weatherData(api : string) {
-    let indexOf = 1
-    let i = 0
 
-
 
-    try {
-        axios.get(api)
-            .then((response: any) => {
-                for (i = 0; i <= 3; i++) {
-                    var nameValue = response.data['city']['name']
+    export function getWeatherData(api : string) {
 
-                    var tempValue = response.data['list'][i.toString()]['main']['temp']
-
-                    var dateValue = response.data['list'][i.toString()]['dt_txt']
-
-                    var descValue = response.data['list'][i.toString()]['weather']['0']['description']
-
-                    var iconValue = response.data['list'][i.toString()]['weather']['0']['icon']
-
-
-                    var tempValueC = (parseInt(tempValue) - 273.15).toFixed(0) //Kelvin To Celsius
-                    document.getElementById("i" + indexOf.toString()).innerHTML = nameValue
-                    indexOf++
-                    document.getElementById("i" + indexOf.toString()).innerHTML = tempValueC + 'C'
-                    indexOf++
-                    document.getElementById("i" + indexOf.toString()).innerHTML = dateValue
-                    indexOf++
-                    document.getElementById("i" + indexOf.toString()).innerHTML = descValue
-                    indexOf++
-                    (<HTMLImageElement>document.getElementById("i" + indexOf.toString())).src = 'https://openweathermap.org/img/wn/' + iconValue + '@2x.png'
-                    indexOf++
-                    if (indexOf > 20) { indexOf = 1 }
-
-                } i = 0
-
-            })
-
-        return api
-
-    } catch (error) {
-        alert(error)
-    }
-}
+        return axios.get(api)
+        .then(function (response) {
+            return response.data
+        })
+        .catch(function(error){
+           console.log(error)
+        })
+        }
+
+
+
 
+export function addDataToDivs(weatherData: any) {
+    let li = document.getElementsByClassName("weatherInnerContainer")
+    let nI = li.length
+    for (var i = 0; i < nI; i++) {
 
-
+        let tempInC = ((parseInt(weatherData['list'][i.toString()]['main']['temp'])) - 273.15).toFixed(0)
+        var tempDiv = document.createElement('div')
+        tempDiv.innerText = tempInC
+        li[i].appendChild(tempDiv)
+
+        var nameDiv = document.createElement('div')
+        nameDiv.innerText = weatherData['city']['name']
+        li[i].appendChild(nameDiv)
+
+        var timeDiv = document.createElement('div')
+        timeDiv.innerText = weatherData['list'][i.toString()]['dt_txt']
+        li[i].appendChild(timeDiv)
+
+        var descDiv = document.createElement('div')
+        descDiv.innerText = weatherData['list'][i.toString()]['weather']['0']['description']
+        li[i].appendChild(descDiv)
+
+        let iconDiv = document.createElement('img')
+        let iconValue = (weatherData['list'][i.toString()]['weather']['0']['icon']).toString()
+        let iconLink = 'https://openweathermap.org/img/wn/' + iconValue + '@2x.png'
+        iconDiv.src = iconLink
+        li[i].appendChild(iconDiv)
+
+    }
+}
diff --git a/src/Typescript/index.ts b/src/Typescript/index.ts
@@ -3,10 +3,12 @@
 // City button onClick -> axios GET -> handle request and construct
 // 7 WeatherDay objects -> render those 7 objects on the page
 import axios from 'axios'
-import { weatherData } from './WeatherDay'
+import { getWeatherData } from './WeatherDay'
+import { addDataToDivs } from './WeatherDay'
 import { getCity } from './City'
 import { getApi } from './City'
 
+var howManyReadings = 7
 
 
 document.querySelectorAll('.allButtons').forEach(item => {
@@ -16,13 +18,34 @@ document.querySelectorAll('.allButtons').forEach(item => {
 })
 
 function main() {
-
   var city = getCity()
   var api = getApi(city)
-  weatherData(api)
-
 
+
+  getWeatherData(api).then(weatherData => {
+    clearDivs()
+    addDivs(howManyReadings)
+    addDataToDivs(weatherData)
+  })
 }
 
 
-
+function clearDivs() {
+
+  const myNode = document.getElementById("weatherOuterContainer")
+  while (myNode.firstChild) {
+    myNode.removeChild(myNode.lastChild);
+  }
+}
+
+function addDivs(howManyReadings: number) {
+  const myNode = document.getElementById("weatherOuterContainer")
+  for (let i = 0; i < howManyReadings; i++) {
+    myNode.appendChild (document.createElement('div')).classList.add("weatherInnerContainer")
+  }
+
+
+
+
+}
+