CodePen Embed - FreeCodeCamp Pomodoro Clock

<div id="root">
</div>

#root {
	
	width : 100%;
	vertical-align: center;
	z-index: 100;
}

h1  {
	width: 100%
}

.fullWidth{
	width: 100%
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
		transition:all 0.8s ease;
	  z-index: -1;
}

.info {
	transition:all 0.8s ease;
}

//INPUT

// Base Colors
$shade-10: #2c3e50 !default;
$shade-1: #d7dcdf !default;
$shade-0: #fff !default;
$teal: #1abc9c !default;


// Reset
* {
  &,
  &:before,
  &:after {
    box-sizing: border-box;
  }
}

body {
  font-family: sans-serif;
  padding: 60px 20px;
  
  @media (min-width: 600px) {
    padding: 60px;
  }
}

.range-slider {
  margin: 60px 0 0 0%;
}


// Range Slider
$range-width: 100% !default;

$range-handle-color: $shade-10 !default;
$range-handle-color-hover: $teal !default;
$range-handle-size: 20px !default;

$range-track-color: $shade-1 !default;
$range-track-height: 10px !default;

$range-label-color: $shade-10 !default;
$range-label-width: 60px !default;

.range-slider {
  width: $range-width;
}

.range-slider__range {
  -webkit-appearance: none;
  width: calc(100% - (#{$range-label-width + 13px}));
  height: $range-track-height;
  border-radius: 5px;
  background: $range-track-color;
  outline: none;
  padding: 0;
  margin: 0;

  // Range Handle
  &::-webkit-slider-thumb {
    appearance: none;
    width: $range-handle-size;
    height: $range-handle-size;
    border-radius: 50%;
    background: $range-handle-color;
    cursor: pointer;
    transition: background .15s ease-in-out;

    &:hover {
      background: $range-handle-color-hover;
    }
  }

  &:active::-webkit-slider-thumb {
    background: $range-handle-color-hover;
  }

  &::-moz-range-thumb {
    width: $range-handle-size;
    height: $range-handle-size;
    border: 0;
    border-radius: 50%;
    background: $range-handle-color;
    cursor: pointer;
    transition: background .15s ease-in-out;

    &:hover {
      background: $range-handle-color-hover;
    }
  }

  &:active::-moz-range-thumb {
    background: $range-handle-color-hover;
  }
}


// Range Label
.range-slider__value {
  display: inline-block;
  position: relative;
  width: $range-label-width;
  color: $shade-0;
  line-height: 20px;
  text-align: center;
  border-radius: 3px;
  background: $range-label-color;
  padding: 5px 10px;
  margin-left: 8px;

  &:after {
    position: absolute;
    top: 8px;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 7px solid $range-label-color;
    border-bottom: 7px solid transparent;
    content: '';
  }
}


// Firefox Overrides
::-moz-range-track {
    background: $range-track-color;
    border: 0;
}

input::-moz-focus-inner,
input::-moz-focus-outer { 
  border: 0; 
}

View Compiled

class Title extends React.Component {
	constructor() {
		super();
		this.state = {
			visible:false
		}
	
		this.toggleInfo = this.toggleInfo.bind(this);
	}
	
	toggleInfo() 
	{
		this.setState((prevState, props) => {
		return {visible: !prevState.visible };
	});
	}
	
	render() {
	return (<div >
					<div className="col">
					<h1 className="text-center">FreeCodeCamp Pomodoro Clock <i className="fa fa-info-circle" aria-hidden="true" onClick={this.toggleInfo}></i></h1>
					</div>
					<div className="col info" hidden={!this.state.visible}>
					<h4 className="text-center"> Click <a target="_blank"href="https://en.wikipedia.org/wiki/Pomodoro_Technique">here</a> to go to Wikipedia</h4>
					</div>
					</div>
				 )};
}

class Background extends React.Component {

	render() {
		
		const divStyle = {
     color: 'blue',
		 height: this.props.percentage,
     backgroundColor: this.props.state ? 'rgba(124,252,0,0.7)' : 'rgba(255,160,122,0.7)'
};
		return (<div style= {divStyle} className="background"></div>);
	}
}

function Timer(props) {
	return (<div>
					<h1>{props.minutes}:{props.seconds< 10 ? 0 : ""}{props.seconds}</h1>
					<h4>{props.name}</h4>
					</div>);
}

class Buttons extends React.Component {
	
	onInput() {
    var breakInput = document.getElementById("breakInput");
		var sessionInput = document.getElementById("sessionInput");
    var currentVal = input.value;
    this.setState({
      value: currentVal
    })
}
	
	render() {
		return (<div class="btn-group" role="group">
						<button className="btn btn-primary" type="button" onClick={this.props.startTimer}>Start</button>
						<button className="btn btn-warning" type="button" onClick={this.props.stopTimer}>Stop</button>
						<button className="btn btn-danger" type="button" onClick={this.props.resetTimer}>Reset</button>
					 </div>);
	}
}

class Slider extends React.Component {
	  constructor(props){
  super(props);
    this.state = {
			value: this.props.defaultValue
    }
		}
			
	onInput() {
    var input = document.getElementById(this.props.name);
    var currentVal = input.value;
		this.props.setTime(currentVal);
    this.setState({
      value: currentVal
    });
}
	
	render() {
		return (<div>
						<h4>{this.props.name}</h4>
						<div className="range-slider">
						<input id={this.props.name} className="range-slider__range" type="range" min={this.props.min} max={this.props.max} step="1" defaultValue={this.props.defaultValue} onInput={this.onInput.bind(this)}/>
		<span className="range-slider__value">{this.state.value}</span>
					 </div>
		</div>
		);
	}
}


class Clock extends React.Component {
  constructor(){
  super();
    this.state = {
			time: 0,
			seconds: 0,
			sessionTime: 25,
			breakTime: 5,
			min: 1,
			max: 30,
			status: true,
			intervalId: null,
			statusName: "Session Time"
    }
			
			this.startTimer = this.startTimer.bind(this);
			this.stopTimer = this.stopTimer.bind(this);
			this.resetTimer = this.resetTimer.bind(this);
		  this.setBreakTime = this.setBreakTime.bind(this);
		  this.setSessionTime = this.setSessionTime.bind(this);
			this.getPercentage = this.getPercentage.bind(this);
      this.countDown = this.countDown.bind(this);
			this.changeStatus = this.changeStatus.bind(this);
			this.decrementSeconds = this.decrementSeconds.bind(this);
  }
		
		componentWillMount(){
    this.setState({time: this.state.sessionTime});
}

		startTimer() {
			if(!this.state.intervalId)
				{
					this.state.intervalId = setInterval(this.countDown, 1000);
				} 
  }
		stopTimer() {
			if(this.state.intervalId)
					clearInterval(this.state.intervalId);
			
			this.setState({intervalId: null});
		}
	
	resetTimer() {
			if(this.state.intervalId)
					clearInterval(this.state.intervalId);
			
			this.setState({
			time: this.state.sessionTime,
			seconds: 0,
			sessionTime: 25,
			breakTime: 5,
			min: 1,
			max: 30,
			status: true,
			intervalId: null,
			statusName: "Session Time"});
		}
	
	setBreakTime(time) {
		this.setState({
      breakTime: time
    });
		
		if(!this.state.status) 
			{
				this.setState({
      time: time,
			seconds: 0
    });
			}
	}
	
	setSessionTime(time) {
		this.setState({sessionTime: time});
		
		if(this.state.status) 
			{
				this.setState({time: time, seconds: 0
    });
			}
	}
	
	countDown(){
		if(this.state.time == 0 && this.state.seconds == 0)
			{
				this.changeStatus();
			} else
				{
					this.decrementSeconds();
				}
	}
	
	changeStatus() {
				this.setState((prevState, props) => {
		return {
			status: !prevState.status,
			statusName: !prevState.status ? "Session Time" : "Break Time",
			time: !prevState.status ? prevState.sessionTime :  prevState.breakTime
		};
	});
	}
	
	decrementSeconds() {
		if(this.state.seconds === 0)
			{
				this.setState((prevState, props) => {return {time : prevState.time -1, seconds : 59}});
			} else 
				{
					this.setState((prevState, props) => {return {seconds :prevState.seconds -1}});
				}
	}
	
	getPercentage() {
		let maxSeconds = this.state.status ? this.state.sessionTime *60 : this.state.breakTime *60;
		maxSeconds !== 0 ? maxSeconds : 1;
	
		let seconds = ((this.state.time) * 60 ) + this.state.seconds;
		
		return 100- (seconds * 100 / maxSeconds) + "%";
	}
	
	
	render() {
		return (<div className= "fullWidth">
						<div className = "row">
						<div className = "col">
						<Slider name="Break" min={this.state.min} max={this.state.max} defaultValue = "5" setTime={this.setBreakTime }></Slider>
						</div>
						<div className = "col">
						<Slider name="Session" min={this.state.min} max={this.state.max} defaultValue = "25" setTime={this.setSessionTime }></Slider>
						</div>
						</div>
						<Timer minutes={this.state.time} seconds= {this.state.seconds} name={this.state.statusName}></Timer>
						<Buttons startTimer ={this.startTimer} stopTimer ={this.stopTimer} resetTimer ={this.resetTimer}></Buttons>
						<Background state={this.state.status} percentage={this.getPercentage()}></Background>
						</div>);
	}
}


ReactDOM.render(
	
	<div className="">
		<Title></Title>
	<div className="container text-center">
	<Clock></Clock>
	</div>
	</div>,
  document.getElementById('root')
);

View Compiled

This Pen is owned by José Cabeda on CodePen.

See more by @Cabeda on CodePen

External CSS

External JavaScript