QdLBBL

index.html

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

qdlbbl.markdown

QdLBBL

A Pen by shubhang on CodePen.

License.

script.babel

function prefixZero(val) {
  return val<10?`0${val}`:val 
}

function timeStamp() {
  var d =  new Date(),
    day = d.getDate(),
    month = d.getMonth() + 1,
    year = d.getFullYear(),
    hours = d.getHours(),
    minutes = d.getMinutes();
  return `Added on - ${prefixZero(day)}/${prefixZero(month)}/${year} at ${prefixZero(hours)}:${prefixZero(minutes)}`
}

function InputBox(props) {
  return(
    <div>
      <form>
        <input type = "text" value = {props.inputData} className = "custom-input" onChange = {(e) => props.dataHandler(e)} placeholder = "Enter your To-do task"></input>
      </form>
    </div>
  )
}

function AddItemController(props) {
  return(
    <div className = "item-controller">
      <InputBox inputData = {props.inputData} dataHandler = {props.dataHandler}/>
      <br/>
      <AddButton addHandler = {props.addHandler}/>
    </div>
  )
}

function List(props) {
  return(
     <div>
      <div className = "list">
        {props.inputData}
        <span className = "time-stamp">{timeStamp()}</span>
        <p className = "del" onClick = {() => props.deleteItem(props.index)}>Delete</p>
      </div>
      <br/>
     </div>
  )
}

function AddButton(props) {
  var {addHandler} = props
  return <button className = "custom-button" onClick = {addHandler}>Add</button>
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      items: [],
      inputData: ""
    }
  }
  deleteList = (index) => {
    console.log(index)
    var items = this.state.items.slice()
    items = items.filter((val,i) => i !== index)
    this.setState({
      items: items.slice()
    })
  };
  addList = () => {
    console.log("called")
    var inputReset = ""
    var items = this.state.items.slice()
    var ipData = this.state.inputData
    if(ipData === inputReset) {
      return false
    }
    items.push(ipData)
    this.setState({
      items: items.slice(),
      inputData: inputReset
    })
  };
  dataHandler = (e) => {
    console.log(e.target.value)
    var data = e.target.value
    this.setState({
      inputData: data
    })
    
  };
  render() {
    console.log("rendering")
    const {items, inputData} = this.state
     return(
      <div className = "app">
         <h2>To-do App using <span style = {{color: "#f25d13"}}>React JS</span></h2><br/>
          {items.map((el,i) => <List key = {i} index = {i} deleteItem = {this.deleteList} inputData = {el}/>)}
         {/*<AddButton addHandler = {this.addList}/>*/}
         <AddItemController addHandler = {this.addList} inputData = {inputData}  dataHandler = {this.dataHandler}/>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById("app"))

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>

style.css

.list {
  border: solid 2px #c9c9c9;
  width: 500px;
  min-height: 60px;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  font-weight: bold;
  flex-direction:column
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body {
  padding-top: 20px;
}

.del {
  color: #ff9c39;
  cursor: pointer;
  background-color: #f25d13; 
  color: #FFF;
  display:flex;
  padding: 3px;
  align-items: center;
  justify-content:center;
  font-size: 12px;
  border-radius: 2px;
}

.custom-input {
  border: solid 1px #d1d1d1;
  padding: 5px;
  width: 400px;
  outline: none;
  font-size: 1.2em
}

.item-controller {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.del:hover {
  background-color: #ff4111
}

.custom-button {
  font-size: 1.2em;
  font-weight: bold;
  border: solid 1px #f25d13;
  background: #FFF;
  color: #f25d13;
  width: 100px;
  display:flex;
  align-items:center;
  justify-content: center;
  border-radius: 2px;
  outline: none;
}

.custom-button:hover {
  background-color: #f25d13;
  color: #FFF;
}

.time-stamp {
  color: #f25d13;
  font-size:.5em
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />