andrea.nieves7 1 year ago
parent
commit
24df7cb33c
1 changed files with 49 additions and 26 deletions
  1. 49
    26
      App.js

+ 49
- 26
App.js View File

@@ -4,14 +4,28 @@ import { View, Image, StyleSheet, Text, Button, ScrollView } from 'react-native'
4 4
 import data from './transfer.json' 
5 5
 
6 6
 
7
+//where data will be put
8
+var organizedData
7 9
 
8
-var information = ""
10
+//where data will be stored
11
+var information = "default text"
9 12
 
13
+//organize data make it pretty
14
+function organize(){
15
+	
16
+	
17
+	
18
+	
19
+}
20
+
21
+
22
+//calls data query
10 23
 function loadDoc() {
11 24
   var xhttp = new XMLHttpRequest();
12 25
   xhttp.onreadystatechange = function() {
13 26
     if (this.readyState == 4 && this.status == 200) {
14 27
          information = this.responseText;
28
+		 organize()
15 29
   }
16 30
   };
17 31
   xhttp.open("GET", "https://api.census.gov/data/2020/acs/acs5/profile?get=group(DP02PR)&for=county:127&in=state:72", true);
@@ -19,17 +33,23 @@ function loadDoc() {
19 33
   
20 34
 }
21 35
 
36
+loadDoc()
37
+
38
+
39
+
40
+
41
+
22 42
 //change this to an external css file later
23 43
 const styles = StyleSheet.create({
24 44
 	
25 45
   buttons: {
26 46
 	  flexDirection: 'row',
27 47
 	  justifyContent: 'center',
28
-	  marginTop: 30,
48
+	  marginTop: 40,
29 49
 	  marginBottom: 30,
30
-	  margin: 4,
50
+	  margin: 30,
31 51
 	  borderColor: "grey",
32
-  },
52
+  }, 
33 53
   container: {
34 54
     flexDirection: 'column',
35 55
 	justifyContent: 'center',
@@ -37,12 +57,11 @@ const styles = StyleSheet.create({
37 57
     alignItems: 'center',
38 58
     justifyContent: 'center',
39 59
 	marginTop: 20,
40
-	marginBottom: 500
41 60
   },
42 61
   containerbackground:{
43 62
 	
44 63
     backgroundColor: '#063970',
45
-	padding: 40
64
+	marginTop: 20
46 65
   },
47 66
   intro: {
48 67
 	  fontWeight: "bold",
@@ -51,9 +70,8 @@ const styles = StyleSheet.create({
51 70
 	 
52 71
   },
53 72
   sub: {
54
-      color:"#D7D6D6",
55
-	  
56
-	  fontSize: 20,
73
+      color:"#D7D6D6",  
74
+	  fontSize: 20
57 75
   },
58 76
   scrollView:{
59 77
 	  marginHorizontal: 20
@@ -80,6 +98,7 @@ let states = {
80 98
 		  
81 99
 
82 100
 		<View style = {styles.containerbackground}>
101
+		<ScrollView style={styles.scrollView}>
83 102
 		  <View style = {styles.container}>
84 103
 		  
85 104
 		  
@@ -90,43 +109,43 @@ let states = {
90 109
 			 
91 110
 			<Image source={require('./testimg.gif')} />
92 111
 			
93
-		  </View>
112
+		  </View> 
113
+		  </ScrollView>
94 114
 		</View>,
95
-		  
96
-		dataView:
97
-		
115
+		 
116
+		newsView:
98 117
 		<View style = {styles.containerbackground}>
99 118
 		<ScrollView style={styles.scrollView}>
100 119
 		 <View style = {styles.container}>
101 120
 		  
102 121
 		  
103
-			<Text style={styles.intro}>DATADATADATADATADATA</Text>
104
-		
105
-			<Text style={styles.sub}>{information}</Text>
122
+			<Text style={styles.intro}>Noticias</Text>
106 123
 			 
107 124
 			<Image source={require('./testimg.gif')} />
108 125
 			
109 126
 		 </View>
110
-		</ScrollView></View>,
127
+		</ScrollView></View>
111 128
 
129
+		
130
+	}
112 131
 
113
-		newsView:
114
-		<View style = {styles.containerbackground}>
132
+function dataView(){	
133
+	return (
134
+	<View style = {styles.containerbackground}>
115 135
 		<ScrollView style={styles.scrollView}>
116 136
 		 <View style = {styles.container}>
117 137
 		  
118 138
 		  
119
-			<Text style={styles.intro}>Noticias</Text>
139
+			<Text style={styles.intro}>DATADATADATADATADATA</Text>
140
+		
141
+			<Text style={styles.sub}>{information}</Text>
120 142
 			 
121 143
 			<Image source={require('./testimg.gif')} />
122 144
 			
123 145
 		 </View>
124 146
 		</ScrollView></View>
125
-
126
-		
127
-	}
128
-
129
-
147
+	)
148
+}
130 149
 
131 150
 
132 151
 class App extends React.Component {
@@ -136,7 +155,11 @@ state = {current: states.welcome}
136 155
 
137 156
 //state changing functions
138 157
 setHome = () => this.setState({ current: states.welcome })
139
-setData = () => {loadDoc(); this.setState({ current: states.dataView })}
158
+
159
+
160
+setData = () => this.setState({current: dataView()})
161
+
162
+
140 163
 setNews = () => this.setState({ current: states.newsView })
141 164
 	
142 165