done boild water

src/calculator.jsx

@@ -1,15 +1,45 @@
 import React from "react"
 import TempInput from "./tempinput"
+import "./convetor";
+import { tyrConvert,toCelsius,toFahrenheit } from "./convetor";
+import BoilingVerdict from "./boil";
+
+
 
 class Calculator extends React.Component {
-
+    constructor(props){
+        super(props);
+        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
+        this.handleFahrenheitChange=this.handleFahrenheitChange.bind(this);
+        this.state = {temp:"",scale:"c"};
+    }
+
+    handleCelsiusChange(temp){
+        this.setState({scale:"c",temp});
+    }
+
+    handleFahrenheitChange(temp){
+        this.setState({scale:"f",temp});
+    }
 
     render(){
-
+        const scale = this.state.scale;
+        const temp = this.state.temp;
+        const celsius = scale === "f"? tyrConvert(temp,toCelsius):temp;
+        const fahrenheit = scale === "c"? tyrConvert(temp,toFahrenheit):temp;
+        console.log(this.state);
         return(
+
         <div>
-           <TempInput scale="c"/>
-           <TempInput scale="f"/>
+           <TempInput
+                scale="c"
+                temp={celsius}
+                onTempChange={this.handleCelsiusChange}/>
+           <TempInput
+                scale="f"
+                temp={fahrenheit}
+                onTempChange={this.handleFahrenheitChange}/>
+            <BoilingVerdict/>
         </div>
         )
     }

src/convetor.jsx

@@ -0,0 +1,23 @@
+
+// converters
+export function toCelsius(fahrenheit){
+    return(fahrenheit -32)*5/9;
+}
+
+export function toFahrenheit(celsius){
+    return (celsius*9/5)+32
+}
+
+
+// tryConverter
+export function tyrConvert(temperature,convert){
+    const input=parseFloat(temperature);
+    if(Number.isNaN(input)){
+        return '';
+    }
+
+    const output = convert(input);
+    const rounded = Math.round(output*1000)/1000;
+    return rounded.toString();
+}
+

src/tempinput.jsx

@@ -1,5 +1,7 @@
 import React from "react";
-import BoilingVerdict from "./boil";
+
+
+
 const scaleNames = {
     c:"Celcius",
     f:"Fahrenheit"
@@ -13,11 +15,12 @@ class TempInput extends React.Component {
     }
 
     handleChange(e){
-        this.setState({temp:e.target.value});
+
+        this.props.onTempChange(e.target.value);
     }
 
     render(){
-        const temp = this.state.temp;
+        const temp = this.props.temp;
         const scale = this.props.scale;
         return(
             <fieldset>
@@ -26,7 +29,6 @@ class TempInput extends React.Component {
                     value={temp}
                     onChange={this.handleChange}
                 />
-                <BoilingVerdict celsius={parseFloat(temp)}/>
             </fieldset>
         );
     }