Pomodoro Timer

Pomodoro time is based on pomodoro technique for efficient time management.

by Prakash Upadhyay

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>
<div id='root'></div>

SCSS

body {
  background: #e3eae6;
}

.pomoDoro {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

.timer {
  & .timer-label {
    margin-bottom: 5px;
    color: #999;
  }
  
  & .timer-clock {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 10px solid #888;
    color: #333;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 6px 11px 2px #968b8b;
    background: #fff;

    & span {
      font-size: 34px;
      font-weight: bold;
    }
  }
}

.taskModal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.9);
  
  & form {
    background: rgba(252,254,252,0.9);
    border: 1px solid #ddd;
    padding: 20px;
    width: 100%;
    max-width: 440px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  & h4 {
    margin: 0 0 20px;
    font-size: 22px;
  }
  
  & .form-block {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  & label {
    display: inline-block;
    width: 22%;
    font-size: 16px;
  }
  
  & input[type='text'] {
    width: 70%;
    height: 25px;
    padding-left: 10px;
    font-size: 16px;
  }
  
  & input[type='number'] {
    width: 40px;
    height: 25px;
    padding-left: 10px;
    font-size: 16px;
  }
  
  & .helper-text {
    font-size: 13px;
    color: #999;
    padding-left: 20px;
  }
  
  & .form-action {
    margin: 15px 0 0;
    padding: 15px 0 0;
    border-top: 1px solid #b7b4b4;
    position: relative;
    
    &:after {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      border-top: 1px solid #fff;
    }
  }
}

.task {
  padding: 0;
  width: 100%;
  border: 1px solid #fff;
  
  & li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #fbfbfb;
    background: #d1dde4;
 ...

Babel + JSX

class App extends React.Component {
    constructor(props) {
        super(props);
        this.openModel = this.openModel.bind(this);
        this.closeModel = this.closeModel.bind(this);
        this.saveTask = this.saveTask.bind(this);
        this.deleteTask = this.deleteTask.bind(this);
        this.updateTimer = this.updateTimer.bind(this);
        this.state = {
            showTaskModal: false,
            tasks: [],
            time:{
                duration: 0,
                shortBreak: 0
            },
            timerSatus: false
        }
    }
    openModel(){
        this.setState({ showTaskModal: true})
    }
    
    
    deleteTask(task) {
      const newlist = this.state.tasks.filter(item=> task.id !== item.id);
      this.setState({tasks: newlist});
    }

    closeModel() {
      this.setState({ showTaskModal: false})
    }

    saveTask(task) {
        this.state.tasks.push(task);
    }

    updateTimer(timerStatus, task) {
    this.setState({timerSatus : false})
        this.setState({timerSatus : timerStatus,
         time: {
         duration: parseInt(task.duration),
         shortBreak: parseInt(task.shortBreak)
         }
         }); 
        
    }

    render() {
        return (<div className="pomoDoro">
            <h2 className="promodoro-titile text-center">Pomodoro Timer</h2>
            <Timer startTimer={ this.state.timerSatus } time={ this.state.time }/>
            <div className="text-center"><br/>
                <button class="btn btn-primary" onClick={this.openModel}>
                    <i className="fa fa-tasks"></i>
                    &nbsp; Add Task
                </button>
            </div>
            <TaskList
                task={ this.state.tasks }
                updateTimer= {this.updateTimer }
                deleteTask={ this.deleteTask }
            />
            { this.state.showTaskModal ? <TaskModal
                closeModel={this.closeModel}
                saveTask={ this.saveTask }/>
      ...