React

by shahrukh007

HTML

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

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	list: [
      	{ weekday: "Monday", is_checked:false, time:[{fromTime:"", toTime:""}]},
        { weekday: "Tuesday", is_checked:false, time:[{fromTime:"", toTime:""}]},
        { weekday: "Wednesday", is_checked:false, time:[{fromTime:"", toTime:""}]},
        { weekday: "Thursday", is_checked:false, time:[{fromTime:"", toTime:""}]},
        { weekday: "Friday", is_checked:false, time:[{fromTime:"", toTime:""}]},
        { weekday: "Saturday", is_checked:false, time:[{fromTime:"", toTime:""}]},
        { weekday: "Sunday", is_checked:false, time:[{fromTime:"", toTime:""}]},
       
      ]
      
    }
  }
  
  addItem(index,indexx,e){
  var list = this.state.list;
  list[index].time.push({fromTime:"", toTime:""})
  this.setState({list:list,
       })
  }
  removeItem(index,indexx,e){
    var list = this.state.list;
    list[index].time.splice(indexx,1)
    this.setState({list:this.state.list
       })
  }
  
  handleCheck(index,e){
   var list = this.state.list;
   list[index].is_checked= !list[index].is_checked;
   if(list[index].is_checked==true){
   this.setState({list:list,
        })
  }
  else{
  list[index].time=[{fromTime:"", toTime:""}];
  this.setState({list:list,
        })
  }
  }
   
   handleFromTime(index,indexx,e){
    var list = this.state.list;
    list[index].time[indexx].fromTime=e.target.value
    this.setState({list: list});
  }
  
  handleToTime(index,indexx,e){
    var list = this.state.list;
    list[index].time[indexx].toTime=e.target.value
    this.setState({list: list});
  }
  
  render() {
  console.log(this.state.list)
    return (
      <div>
        <h2>Week Days</h2>
        <ul>
          {this.state.list.map((i,index)=>
          <li key={index}>
            <input type="checkbox" className="mycheck" checked={i.is_checked} onChange={this.handleCheck.bind(this,index)}/>
            <span>{i.weekday}</span>
            ...