OOP Typescript

index.html

@@ -27,19 +27,11 @@
     <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 id=1 class="weatherInnerContainer">
+
     </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 id=2 class="weatherInnerContainer">
+
 
     </div>
     <div class="weatherInnerContainer">

src/Typescript/City.ts

@@ -8,7 +8,7 @@ export function getCity() {
 return city
 }
 
-export function whichApi(city: string) {
+export function getApi(city: string) {
 
     document.getElementById("weatherLocation").innerHTML = city
     const api = 'https://api.openweathermap.org/data/2.5/forecast?q=' + city + '&appid=ab57b33912fbd3d3015d3f296505d3a8'

src/Typescript/WeatherDay copy.ts

@@ -0,0 +1,76 @@
+
+// public date; of moment.js type
+// - public temperature; of int type
+// - public weather_type; of int or string type to show the correct icon
+// sun/cloud
+import axios from 'axios'
+
+
+
+
+
+
+export function weatherInfo(api: string, iTimes: any) {
+    var nameValue
+    var tempValue
+    var tempValueC
+    var dateValue
+    var descValue
+    var iconValue
+    var iconPNG
+    var j = 0
+    var element
+    var nElement
+
+
+    axios.get(api)
+        .then((response: any) => {
+
+
+
+             nameValue = response.data['city']['name']
+
+             tempValue = response.data['list'][(iTimes.toString())]['main']['temp']
+             tempValueC = (parseInt(tempValue) - 273.15).toFixed(0) //Kelvin To Celsius
+
+             dateValue = response.data['list'][iTimes.toString()]['dt_txt']
+
+             descValue = response.data['list'][iTimes.toString()]['weather']['0']['description']
+
+             iconValue = response.data['list'][iTimes.toString()]['weather']['0']['icon']
+             iconPNG = 'http://openweathermap.org/img/wn/' + iconValue + '@2x.png'
+
+           const weatherData = { name: nameValue, temp: tempValueC, date: dateValue, desc: descValue, icon: iconPNG }
+
+
+            console.log(iconValue)
+
+            console.log(weatherData)
+            var oLength = Object.keys(weatherData).length;
+
+            for (j > oLength - 1; j++;) {
+                element = document.getElementById(iTimes)
+                nElement = document.createTextNode(weatherData.entries(j))
+                element.appendChild(nElement)
+                iTimes++
+            }
+            element = document.getElementById(iTimes)
+            nElement = document.createElement('img')
+            nElement.src = weatherData.icon
+
+
+        })
+
+
+
+}
+
+
+
+
+
+
+
+
+
+

src/Typescript/WeatherDay.ts

@@ -1,50 +1,50 @@
 
-// public date; of moment.js type
-// - public temperature; of int type
-// - public weather_type; of int or string type to show the correct icon
-// sun/cloud
-import axios from 'axios'
+// // public date; of moment.js type
+// // - public temperature; of int type
+// // - public weather_type; of int or string type to show the correct icon
+// // sun/cloud
+// import axios from 'axios'
 
-export function weatherData(api : string) {
-    let indexOf = 1
-    let i = 0
+// export function weatherData(api : string) {
+//     let indexOf = 1
+//     let i = 0
 
 
 
 
-    axios.get(api)
-        .then((response: any) => {
-        for( i = 0 ; i <=3; i++ ){
+//     axios.get(api)
+//         .then((response: any) => {
+//         for( i = 0 ; i <=3; i++ ){
 
-        var nameValue = response.data['city']['name']
+//         var nameValue = response.data['city']['name']
 
-        var tempValue = response.data['list'][i.toString()]['main']['temp']
+//         var tempValue = response.data['list'][i.toString()]['main']['temp']
 
-        var dateValue = response.data['list'][i.toString()]['dt_txt']
+//         var dateValue = response.data['list'][i.toString()]['dt_txt']
 
-        var descValue = response.data['list'][i.toString()]['weather']['0']['description']
+//         var descValue = response.data['list'][i.toString()]['weather']['0']['description']
 
-        var iconValue = response.data['list'][i.toString()]['weather']['0']['icon']
+//         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  = 'http://openweathermap.org/img/wn/'+iconValue+'@2x.png'
-    indexOf++
-    if (indexOf > 20 ){indexOf=1}
+//     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  = 'http://openweathermap.org/img/wn/'+iconValue+'@2x.png'
+//     indexOf++
+//     if (indexOf > 20 ){indexOf=1}
 
-        }    i=0
+//         }    i=0
 
-    })
-   return api
-}
+//     })
+//    return api
+// }
 
 
 

src/Typescript/index.ts

@@ -2,20 +2,28 @@
 
 // City button onClick -> axios GET -> handle request and construct
 // 7 WeatherDay objects -> render those 7 objects on the page
-
-import { weatherData } from './WeatherDay'
+import axios from 'axios'
+import { weatherInfo } from './WeatherDay copy'
 import { getCity } from './City'
-import { whichApi } from './City'
+import { getApi } from './City'
 
 
 
 document.querySelectorAll('.allButtons').forEach(item => {
-    item.addEventListener('click', event => {
-      //handle click 
-        // class WeatherReading is a 
-        var city = getCity()
-        var api = whichApi(city)
-        weatherData(api)
-
+  item.addEventListener('click', event => {
+      main()
     })
-  })
+})
+
+function main() {
+
+  var city = getCity()
+  var api = getApi(city)
+  var iTimes = 0;
+  weatherInfo(api, iTimes)
+
+
+}
+
+
+