Single Responsibilty principle (WeatherDay.ts)

src/Typescript/WeatherDay.ts

@@ -21,33 +21,60 @@ import axios from 'axios'
 
 
 
-export function addDataToDivs(weatherData: any) {
-    let li = document.getElementsByClassName("weatherInnerContainer")
-    let nI = li.length
-    for (let i = 0; i < nI; i++) {
+export function dataToDivs(weatherData: any, howManyReadings: any) {
+
+    let dataArray = []
+    for (let i = 0; i < howManyReadings; i++) {
+        let j = 0
+        let innerDataArray = []
+
+
 
         let tempInC = ((parseInt(weatherData['list'][i.toString()]['main']['temp'])) - 273.15).toFixed(0)
         let tempDiv = document.createElement('div')
         tempDiv.innerText = tempInC + 'C'
-        li[i].appendChild(tempDiv )
+        innerDataArray[j] = tempDiv
+        j++
 
         let nameDiv = document.createElement('div')
         nameDiv.innerText = weatherData['city']['name']
-        li[i].appendChild(nameDiv)
+        innerDataArray[j] = nameDiv
+        j++
 
         let timeDiv = document.createElement('div')
         timeDiv.innerText = weatherData['list'][i.toString()]['dt_txt']
-        li[i].appendChild(timeDiv)
+        innerDataArray[j] = timeDiv
+        j++
 
         let descDiv = document.createElement('div')
         descDiv.innerText = weatherData['list'][i.toString()]['weather']['0']['description']
-        li[i].appendChild(descDiv)
+        innerDataArray[j] = descDiv
+        j++
 
         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)
+        innerDataArray[j] = iconDiv
+        j++
+
+        dataArray[i] = innerDataArray 
+    }
+
+return dataArray
+}
+
+export function appendDataToDiv(dataArray: any) {
+    let li = document.getElementsByClassName("weatherInnerContainer")
+    let nI = li.length
+    for (let i = 0; i < nI; i++) {
+        for (let j = 0; j < dataArray[i].length; j++) {
+
+            li[i].appendChild(dataArray[i][j])
+
+        }
 
     }
+
+
 }

src/Typescript/index.ts

@@ -4,7 +4,8 @@
 // 7 WeatherDay objects -> render those 7 objects on the page
 import axios from 'axios'
 import { getWeatherData } from './WeatherDay'
-import { addDataToDivs } from './WeatherDay'
+import { appendDataToDiv } from './WeatherDay'
+import { dataToDivs } from './WeatherDay'
 import { getCity } from './City'
 import { getApi } from './City'
 
@@ -24,8 +25,9 @@ function main() {
 
   getWeatherData(api).then(weatherData => {
     clearDivs()
-    addDivs(howManyReadings)
-    addDataToDivs(weatherData)
+    addContainerDivs(howManyReadings)
+    let dataArray = dataToDivs(weatherData, howManyReadings)
+    appendDataToDiv(dataArray)
   })
 }
 
@@ -38,7 +40,7 @@ function clearDivs() {
   }
 }
 
-function addDivs(howManyReadings: number) {
+function addContainerDivs(howManyReadings: number) {
   const myNode = document.getElementById("weatherOuterContainer")
   for (let i = 0; i < howManyReadings; i++) {
     myNode.appendChild (document.createElement('div')).classList.add("weatherInnerContainer")