<style>
.hour_box{
width:40px;
text-align:center;
display:inline-block;
}
</style>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root1"></div>
<script type="text/babel">
class App2 extends React.Component {
constructor(props) {
super(props);
const d = new Date();
const calgary_h = d.getHours();
//store est time(hour) in state
this.state = { time: calgary_h + 2, minite: 0, second: 0 };
}
componentDidMount() {
this.app_timer = setInterval(
() => this.tick(), 1000
);
}
componentWillUnmount() {
clearInterval(this.app_timer);
}
tick() {
const d = new Date();
const min = d.getMinutes();
const sec = d.getSeconds();
this.setState(
{ minite: min, second: sec }
);
}
handleChange_calgary(calgary_time) {
const est_time = calgary_time + 2;
this.setState({ time: est_time });
}
handleChange_beijing(beijing_time) {
const est_time = beijing_time - 12;
this.setState({ time: est_time });
}
handleChange_london(london_time) {
const est_time = london_time - 5;
this.setState({ time: est_time });
}
render() {
return (
<div>
<h2>check regional time</h2>
<TimeBox location={regions.Calgary}
time={parseInt(this.state.time)}
mins={this.state.minite}
secs={this.state.second}
handleChange={(e) => this.handleChange_calgary(parseInt(e.target.value))} >
</TimeBox>
<TimeBox location={regions.BeiJing}
time={parseInt(this.state.time)}
mins={this.state.minite}
secs={this.state.second}
handleChange={(e) => this.handleChange_beijing(parseInt(e.target.value))} >
</TimeBox>
<TimeBox location={regions.London}
time={parseInt(this.state.time)}
mins={this.state.minite}
secs={this.state.second}
handleChange={(e) => this.handleChange_london(parseInt(e.target.value))} >
</TimeBox>
</div>
);
}
}
function TimeBox(props) {
const est_time = props.time;
let local_time = est_time;
const city = props.location;
switch (city) {
case "calgary":
local_time -= 2;
break;
case "beijing":
local_time += 12;
break;
case "london":
local_time += 5;
break;
default:
break;
};
return (
<div>
<h3>{props.location} time</h3>
<input type="number"
className="hour_box"
value={calc_hour(local_time)}
onChange={props.handleChange} ></input>
<span> : {props.mins} : {props.secs}</span>
</div>
);
}
TimeBox.propTypes = {
time: PropTypes.number,
};
function calc_hour(hour) {
let calced_hour = hour;
if (calced_hour < 0) {
while (calced_hour < 0) { calced_hour += 24; }
}
if (calced_hour > 24) {
while (calced_hour > 24) { calced_hour -= 24; }
}
return calced_hour;
}
const regions = {
London: "london",
BeiJing: "beijing",
Calgary: "calgary"
};
ReactDOM.render(
<App2 />,
document.getElementById('root1')
);
</script>
</body>
reference:
https://www.tutorialspoint.com/reactjs/reactjs_component_life_cycle.htm
https://reactjs.org/docs/typechecking-with-proptypes.html
https://github.com/yannickcr/eslint-plugin-react/issues/1472
https://stackoverflow.com/questions/7818903/jslint-says-missing-radix-parameter-what-should-i-do
ERP Software Development Services London UK,
ReplyDeleteWeb Portal Development Services London UK,
React JS Developer in London,
Bespoke Software Development Services London UK,
Hire Best Chatbot Development Company in UK,