@@ -18,17 +18,26 @@ const customStyles = {
18
18
export default class AddStudent extends Component {
19
19
constructor ( ) {
20
20
super ( )
21
- this . firstNameEl = React . createRef ( ) ; this . middleNameEl = React . createRef ( ) ; this . lastNameEl = React . createRef ( ) ;
22
- this . addressEl = React . createRef ( ) ; this . standardEl = React . createRef ( ) ;
23
- this . boardEl = React . createRef ( ) ; this . physicsEl = React . createRef ( ) ;
21
+ this . firstNameEl = React . createRef ( ) ;
22
+ this . middleNameEl = React . createRef ( ) ;
23
+ this . lastNameEl = React . createRef ( ) ;
24
+ this . addressEl = React . createRef ( ) ;
25
+ this . standardEl = React . createRef ( ) ;
26
+ this . boardEl = React . createRef ( ) ;
24
27
this . schoolEl = React . createRef ( ) ;
25
- this . englishEl = React . createRef ( ) ; this . mathsEl = React . createRef ( ) ;
26
- this . sexEl = React . createRef ( ) ; this . feesEl = React . createRef ( ) ;
28
+ this . physicsEl = React . createRef ( ) ;
29
+ this . englishEl = React . createRef ( ) ;
30
+ this . mathsEl = React . createRef ( ) ;
31
+ this . chemEl = React . createRef ( ) ;
32
+ this . bioEl = React . createRef ( ) ;
33
+ this . sexEl = React . createRef ( ) ;
34
+ this . feesEl = React . createRef ( ) ;
27
35
this . state = {
28
36
modalJoinIsOpen : false , modalDOBIsOpen : false ,
29
37
date : new Date ( ) ,
30
38
loading : false , loggedIn : false ,
31
- dateOfJoining : 'pick a date' , dateOfBirth : new Date ( )
39
+ dateOfJoining : 'pick a date' , dateOfBirth : new Date ( ) ,
40
+ age :'Age'
32
41
}
33
42
}
34
43
@@ -58,7 +67,8 @@ export default class AddStudent extends Component {
58
67
}
59
68
60
69
onDOBChange = date => {
61
- this . setState ( { dateOfBirth : date } )
70
+ const age = new Date ( ) . getFullYear ( ) - date . getFullYear ( )
71
+ this . setState ( { dateOfBirth : date , age } )
62
72
this . closeModal ( )
63
73
}
64
74
@@ -86,20 +96,42 @@ export default class AddStudent extends Component {
86
96
handleAddForm = ( e ) => {
87
97
e . preventDefault ( ) ;
88
98
this . setState ( { loading : true } )
89
- const fName = this . firstNameEl . current . value ; const mName = this . firstNameEl . current . value ;
90
- const lName = this . lastNameEl . current . value ; const std = this . standardEl . current . value ;
91
- const addr = this . addressEl . current . value ; const brd = this . boardEl . current . value ;
99
+ const fName = this . firstNameEl . current . value ;
100
+ const mName = this . firstNameEl . current . value ;
101
+ const lName = this . lastNameEl . current . value ;
102
+ const std = this . standardEl . current . value ;
103
+ const addr = this . addressEl . current . value ;
104
+ const brd = this . boardEl . current . value ;
92
105
const schl = this . schoolEl . current . value ;
93
- const phy = this . physicsEl . current . value ; const eng = this . englishEl . current . value ;
94
- const maths = this . mathsEl . current . value ; const sex = this . sexEl . current . value ; const fees = this . feesEl . current . value ;
106
+ const phy = this . physicsEl . current . value ;
107
+ const eng = this . englishEl . current . value ;
108
+ const maths = this . mathsEl . current . value ;
109
+ const chem = this . chemEl . current . value ;
110
+ const bio = this . bioEl . current . value ;
111
+ const sex = this . sexEl . current . value ;
112
+ const fees = this . feesEl . current . value ;
95
113
96
114
const addStudentRequest = {
97
- "firstName" : fName , "middleName" : mName , "lastName" : lName ,
115
+ "firstName" : fName ,
116
+ "middleName" : mName ,
117
+ "lastName" : lName ,
98
118
"dateOfBirth" : this . state . dateOfBirth ,
99
119
"joinedOn" : this . state . dateOfJoining ,
100
- "Address" : addr , "standard" : std , "Board" : brd , "school" : schl ,
101
- "lastYearmarks" : { "physics" : phy , "english" : eng , "maths" : maths } ,
102
- "sex" : sex , "fees" : { "total" : fees }
120
+ "Address" : addr ,
121
+ "standard" : std ,
122
+ "Board" : brd ,
123
+ "school" : schl ,
124
+ "lastYearmarks" : {
125
+ "physics" : phy ,
126
+ "english" : eng ,
127
+ "maths" : maths ,
128
+ "chemistry" : chem ,
129
+ "biology" : bio ,
130
+ } ,
131
+ "sex" : sex ,
132
+ "fees" : {
133
+ "total" : fees
134
+ }
103
135
}
104
136
fetch ( '/api/student' , {
105
137
method : 'POST' , mode : 'cors' ,
@@ -153,11 +185,11 @@ export default class AddStudent extends Component {
153
185
</ div >
154
186
</ div >
155
187
< div className = "row" >
156
- < div className = "form-group col" >
188
+ < div className = "form-group col-6 " >
157
189
< label htmlFor = "InputAddress" > Address</ label >
158
190
< input type = "text" ref = { this . addressEl } className = "form-control form-control-sm" id = "InputAddress" placeholder = "Address" required />
159
191
</ div >
160
- < div className = "form-group col" >
192
+ < div className = "form-group col-4 " >
161
193
< div className = "input-group" >
162
194
< label htmlFor = "dateOfBirth" > Date Of Birth </ label >
163
195
< div className = "w-100" > </ div >
@@ -169,6 +201,13 @@ export default class AddStudent extends Component {
169
201
</ div >
170
202
</ div >
171
203
</ div >
204
+ < div className = "col-2" >
205
+ < div className = "input-group" >
206
+ < label htmlFor = "Age" > Age</ label >
207
+ < div className = "w-100" > </ div >
208
+ < input type = "text" className = 'form-control form-control-sm' name = "Age" value = { this . state . age } readOnly />
209
+ </ div >
210
+ </ div >
172
211
</ div >
173
212
< hr />
174
213
< div className = "row" >
@@ -221,6 +260,22 @@ export default class AddStudent extends Component {
221
260
< input type = "text" className = "form-control form-control-sm" id = 'Maths' ref = { this . mathsEl } id = "InputMaths" placeholder = "Maths" required />
222
261
</ div >
223
262
</ div >
263
+ < div className = "form-group row" >
264
+ < div className = "col-md-4" >
265
+ < label htmlFor = "Chemistry" > Chemistry</ label >
266
+ < input type = "text"
267
+ className = "form-control form-control-sm"
268
+ id = 'Chemistry' ref = { this . chemEl }
269
+ placeholder = "Chemistry" required />
270
+ </ div >
271
+ < div className = "col-md-4" >
272
+ < label htmlFor = "Biology" > Biology</ label >
273
+ < input type = "text"
274
+ className = "form-control form-control-sm"
275
+ id = 'Biology' ref = { this . bioEl }
276
+ placeholder = "Biology" required />
277
+ </ div >
278
+ </ div >
224
279
< hr />
225
280
< div className = "row" >
226
281
< div className = "form-group col" >
0 commit comments