package Ġcom . ba eld ung . kotlin . multi platform Ċ Ċ import Ġkotlinx . html . InputType Ċ import Ġkotlinx . html . js . onChange Function Ċ import Ġorg . w 3 c . dom . HTML InputElement Ċ import Ġreact . R Builder Ċ import Ġreact . R Component Ċ import Ġreact . R Props Ċ import Ġreact . R State Ċ import Ġstyled .* Ċ Ċ external Ġinterface ĠCalculator Props Ġ: ĠR Props Ġ{ ĊĠĠĠ Ġvar Ġvalue : ĠString Ċ } Ċ Ċ data Ġclass ĠCalculator State ( val Ġvalue : ĠString ) Ġ: ĠR State Ċ Ċ @ Js Export Ċ class ĠCalculator ( props : ĠCalculator Props ) Ġ: ĠR Component < Calculator Props , ĠCalculator State >( props ) Ġ{ ĊĊĠĠĠ Ġinit Ġ{ ĊĠĠĠĠĠĠĠ Ġstate Ġ= ĠCalculator State ( props . value ) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġoverride Ġfun ĠR Builder . render () Ġ{ ĊĠĠĠĠĠĠĠ Ġstyled Label Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ Calculator Styles . text Label ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ+ Ġ" Enter Ġa ĠNumber : Ġ" ĊĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠ Ġstyled Input Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ Calculator Styles . textInput ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtype Ġ= ĠInput Type . number ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġvalue Ġ= Ġstate . value ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonChange Function Ġ= Ġ{ Ġevent Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠsetState ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠCalculator State ( value Ġ= Ġ( event . target Ġas ĠHTML InputElement ). value ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠ Ġstyled Div Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+ Calculator Styles . text Container ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Square Ġof Ġthe ĠInput : Ġ${ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġstate . value . toDouble ()* state . value . toDouble () }" ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ