React

signal function

by sanat gupta

HTML

<div id="app"></div>

CSS

.container{
  width:100%;
  float:left;
}
.c1{
  width:25%;
  float:left;
}
.c2{
  width:25%;
  float:left;
}
.c3{
  width:25%;
  float:left;
}
.c4{
  width:25%;
  float:left;
}
.active {
 color:green;
}
.inactive{
   color:red;
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	east_counter:120,
      west_counter:80,
      north_counter:40,
      south_counter:0,
      status:'red'
    }
  }
  
 
  render() {
 
  	let timer = setTimeout(() => {
  		this.setState({
      	east_counter:this.state.east_counter-1,
        west_counter:this.state.west_counter-1,
        north_counter:this.state.north_counter-1,
        south_counter:this.state.south_counter-1,
      },()=>{
      	if(this.state.east_counter < -40 ){
        	this.setState({
          	east_counter:120,
            west_counter:80,
            north_counter:40,
            south_counter:0,
          });
        }
      });
		}, 1000);
     if(this.state.east_counter < -40 ){
       clearInterval(timer);
      }
    return (
     <div className="container">
       <div className="c1">
         <h1>East</h1>
         <p>{this.state.east_counter < 0 ? 0 : this.state.east_counter}</p>
         <p className={this.state.east_counter <= 0 && this.state.east_counter > -40 ? 'active' : 'inactive'}>status :- {this.state.east_counter <= 0 && this.state.east_counter > -40 ? 'green' : this.state.status}</p>
       </div>
       <div className="c2">
         <h1>West</h1>
         <p>{this.state.west_counter < 0 ? 0 : this.state.west_counter}</p>
         <p className={this.state.west_counter <= 0 && this.state.west_counter > -40 ? 'active' : 'inactive'}>status :- {this.state.west_counter <= 0  && this.state.west_counter > -40 ? 'green' : this.state.status}</p>
       </div>
       <div className="c3">
         <h1>North</h1>
         <p>{this.state.north_counter < 0 ? 0 : this.state.north_counter}</p>
         <p className={this.state.north_counter <= 0 && this.state.north_counter > -40 ? 'active' : 'inactive'}>status :- {this.state.north_counter <= 0  && this.state.north_counter > -40 ? 'green' : this.state.status}</p>
       </div>
       <div className="c4">
         <h1>South</h1>
...