remove OOP

index.html

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

src/Typescript/WeatherDay OOP Attempt.ts

@@ -0,0 +1,74 @@
+
+// // 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'
+
+
+
+// var nameValue
+//     var tempValue
+//     var tempValueC
+//     var dateValue
+//     var descValue
+//     var iconValue
+//     var iconPNG
+//     var j : number = 0
+//     var element
+//     var nElement
+//     var weatherData : any
+
+
+// export function weatherInfo(api: string, iTimes: any) {
+
+
+//     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'
+
+//              weatherData = { name: nameValue, temp: tempValueC, date: dateValue, desc: descValue, icon: iconPNG }
+
+
+//              setWeatherElements(iTimes , weatherData.name)
+//              setWeatherElements(iTimes , weatherData.temp)
+//              setWeatherElements(iTimes , weatherData.date)
+//              setWeatherElements(iTimes , weatherData.desc)
+//             element = document.getElementById(iTimes)
+//             nElement = document.createElement('img')
+//             nElement.src = weatherData.icon.toString()
+
+
+//         })
+
+
+
+// }
+
+
+
+// function setWeatherElements(iTimes: any, property: any ){
+//     element = document.getElementById(iTimes)
+//     nElement = document.createTextNode(property)
+//     element.appendChild(nElement)
+
+// }
+
+
+
+
+
+

src/Typescript/WeatherDay.ts

@@ -3,48 +3,48 @@
 // // - public temperature; of int type
 // // - public weather_type; of int or string type to show the correct icon
 // // sun/cloud
-// import axios from 'axios'
+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++ ){
-
-//         var nameValue = response.data['city']['name']
+    axios.get(api)
+        .then((response: any) => {
+        for( i = 0 ; i <=3; i++ ){
+console.log(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

@@ -3,7 +3,7 @@
 // City button onClick -> axios GET -> handle request and construct
 // 7 WeatherDay objects -> render those 7 objects on the page
 import axios from 'axios'
-import { weatherInfo } from './WeatherDay copy'
+import { weatherData } from './WeatherDay'
 import { getCity } from './City'
 import { getApi } from './City'
 
@@ -19,8 +19,7 @@ function main() {
 
   var city = getCity()
   var api = getApi(city)
-  var iTimes = 0;
-  weatherInfo(api, iTimes)
+  weatherData(api)
 
 
 }