diff --git a/src/calculator.jsx b/src/calculator.jsx index 81389c1..445dc32 100644 --- a/src/calculator.jsx +++ b/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( +
- - + + +
) } diff --git a/src/convetor.jsx b/src/convetor.jsx new file mode 100644 index 0000000..26d6f1d --- /dev/null +++ b/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(); +} + diff --git a/src/tempinput.jsx b/src/tempinput.jsx index 3c8a08f..c0a8b81 100644 --- a/src/tempinput.jsx +++ b/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(
@@ -26,7 +29,6 @@ class TempInput extends React.Component { value={temp} onChange={this.handleChange} /> -
); }