import Ġkotlinx . html . Button Type Ċ import Ġreact .* Ċ import Ġreact . dom .* Ċ import Ġkotlinx . html . js .* Ċ import Ġkotlinx . html . InputType Ċ import Ġorg . w 3 c . dom . events . Event Ċ import Ġorg . w 3 c . dom . HTML InputElement Ċ Ċ val ĠInput Component Register Ġ= Ġfunctional Component < Input Props > Ġ{ Ġprops Ġ-> ĊĠĠĠ Ġval Ġ( username , Ġset Username ) Ġ= ĠuseState ("") ĊĠĠĠ Ġval Ġ( password , Ġset Password ) Ġ= ĠuseState ("") ĊĠĠĠ Ġval Ġ( firstname , Ġset First name ) Ġ= ĠuseState ("") ĊĠĠĠ Ġval Ġ( lastname , Ġset Last name ) Ġ= ĠuseState ("") ĊĠĠĠ Ġval Ġ( day , Ġset Day ) Ġ= ĠuseState ( 0 ) ĊĠĠĠ Ġval Ġ( month , Ġset Month ) Ġ= ĠuseState ( 0 ) ĊĠĠĠ Ġval Ġ( year , Ġset Year ) Ġ= ĠuseState ( 0 ) ĊĠĠĠ Ġval Ġ( confirm Password , Ġset Confirm Password ) Ġ= ĠuseState (""); ĊĊĠĠĠ Ġval Ġsubmit Handler Register : Ġ( Event ) Ġ-> ĠUnit Ġ= Ġ{ ĊĠĠĠĠĠĠĠ Ġit . preventDefault () ĊĠĠĠĠĠĠĠ Ġset Username ("") ĊĠĠĠĠĠĠĠ Ġset Password ("") ĊĠĠĠĠĠĠĠ Ġset First name ("") ĊĠĠĠĠĠĠĠ Ġset Last name ("") ĊĠĠĠĠĠĠĠ Ġset Day ( 0 ) ĊĠĠĠĠĠĠĠ Ġset Month ( 0 ) ĊĠĠĠĠĠĠĠ Ġset Year ( 0 ) ĊĠĠĠĠĠĠĠ Ġset Confirm Password ("") ĊĊĠĠĠĠĠĠĠ Ġprops . on Submit ( username ) ĊĠĠĠĠĠĠĠ Ġprops . on Submit ( password ) ĊĠĠĠĠĠĠĠ Ġprops . on Submit ( confirm Password ) ĊĠĠĠĠĠĠĠ Ġprops . on Submit ( firstname ) ĊĠĠĠĠĠĠĠ Ġprops . on Submit ( lastname ) ĊĠĠĠĠĠĠĠ Ġprops . on Submit ( day . toString ()) ĊĠĠĠĠĠĠĠ Ġprops . on Submit ( month . toString ()) ĊĠĠĠĠĠĠĠ Ġprops . on Submit ( year . toString ()) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġval Ġchange Handler Username Register : Ġ( Event ) Ġ-> ĠUnit Ġ= Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġvalue Ġ= Ġ( it . target Ġas ĠHTML InputElement ). value ĊĠĠĠĠĠĠĠ Ġset Username ( value ) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġval Ġchange Handler Password : Ġ( Event ) Ġ-> ĠUnit Ġ= Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġvalue Ġ= Ġ( it . target Ġas ĠHTML InputElement ). value ĊĠĠĠĠĠĠĠ Ġset Password ( value ) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġval Ġchange Handler First name : Ġ( Event ) Ġ-> ĠUnit Ġ= Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġvalue Ġ= Ġ( it . target Ġas ĠHTML InputElement ). value ĊĠĠĠĠĠĠĠ Ġset First name ( value ) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġval Ġchange Handler Last name : Ġ( Event ) Ġ-> ĠUnit Ġ= Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġvalue Ġ= Ġ( it . target Ġas ĠHTML InputElement ). value ĊĠĠĠĠĠĠĠ Ġset Last name ( value ) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġval Ġchange Handler Confirm Password : Ġ( Event ) Ġ-> ĠUnit Ġ= Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġvalue Ġ= Ġ( it . target Ġas ĠHTML InputElement ). value ĊĠĠĠĠĠĠĠ Ġset Confirm Password ( value ) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġval Ġchange Handler Day : Ġ( Event ) Ġ-> ĠUnit Ġ= Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġvalue Ġ= Ġ(( it . target Ġas ĠHTML InputElement ). value ). toInt () ĊĠĠĠĠĠĠĠ Ġset Day ( value ) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġval Ġchange Handler Month : Ġ( Event ) Ġ-> ĠUnit Ġ= Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġvalue Ġ= Ġ(( it . target Ġas ĠHTML InputElement ). value ). toInt () ĊĠĠĠĠĠĠĠ Ġset Month ( value ) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġval Ġchange Handler Year : Ġ( Event ) Ġ-> ĠUnit Ġ= Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġvalue Ġ= Ġ(( it . target Ġas ĠHTML InputElement ). value ). toInt () ĊĠĠĠĠĠĠĠ Ġset Year ( value ) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġform () Ġ{ ĊĠĠĠĠĠĠĠ Ġattrs . on Submit Function Ġ= Ġsubmit Handler Register ĊĠĠĠĠĠĠĠ Ġdiv ( classes Ġ= Ġ" form - group ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġlabel ( classes Ġ= Ġ" control - label ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Username " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġinput ( InputType . text , Ġclasses Ġ= Ġ" form - control ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onChange Function Ġ= Ġchange Handler Username Register ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġusername ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġdiv ( classes Ġ= Ġ" form - group ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġlabel ( classes Ġ= Ġ" control - label ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Password " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġinput ( InputType . text , Ġclasses Ġ= Ġ" form - control ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onChange Function Ġ= Ġchange Handler Password ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġpassword ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġdiv ( classes Ġ= Ġ" form - group ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġlabel ( classes Ġ= Ġ" control - label ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Confirm ĠPassword " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġinput ( InputType . text , Ġclasses Ġ= Ġ" form - control ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onChange Function Ġ= Ġchange Handler Confirm Password ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġconfirm Password ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġdiv ( classes Ġ= Ġ" form - group ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġlabel ( classes Ġ= Ġ" control - label ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" First name " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġinput ( InputType . text , Ġclasses Ġ= Ġ" form - control ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onChange Function Ġ= Ġchange Handler First name ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġfirst name ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġdiv ( classes Ġ= Ġ" form - group ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġlabel ( classes Ġ= Ġ" control - label ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Last name " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġinput ( InputType . text , Ġclasses Ġ= Ġ" form - control ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onChange Function Ġ= Ġchange Handler Last name ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġlastname ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġdiv ( classes Ġ= Ġ" form - group ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġlabel ( classes Ġ= Ġ" control - label ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Your Ġbirthday Ġ< br > ĠDay " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġinput ( InputType . text , Ġclasses Ġ= Ġ" form - control ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onChange Function Ġ= Ġchange Handler Day ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġday . toString () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġdiv ( classes Ġ= Ġ" form - group ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġlabel ( classes Ġ= Ġ" control - label ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Month " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġinput ( InputType . text , Ġclasses Ġ= Ġ" form - control ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onChange Function Ġ= Ġchange Handler Month ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġmonth . toString () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġdiv ( classes Ġ= Ġ" form - group ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġlabel ( classes Ġ= Ġ" control - label ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Year " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġinput ( InputType . text , Ġclasses Ġ= Ġ" form - control ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onChange Function Ġ= Ġchange Handler Year ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġyear . toString () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġhr ( classes Ġ= Ġ" mt - 3 ") Ġ{ Ġ} ĊĠĠĠĠĠĠĠ Ġdiv ( classes Ġ= Ġ" form - group Ġmt - 3 ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġbutton ( type Ġ= ĠButton Type . submit , Ġclasses Ġ= Ġ" btn Ġbtn - primary Ġbtn - block ") Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Register " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onChange Function Ġ= Ġsubmit Handler Register ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ