Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              #main-container {
  background-image: url(https://designshack.net/wp-content/uploads/background-textures.png);
  background-size: cover;
  height: 100vh;
  display: flex;
  font-weight: 600;
}

#main-title {
  font-size: 40px;
  text-align: center;
}

#clock-container {
  margin: auto;
  height: 300px;
  width: 500px;
  background: rgba(255, 0, 85, 0.1);
  border: 10px solid #4d004d;
  color: #4d004d;
  box-shadow: 0px 0px 40px 10px #4d004d;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-colums: 1fr 1fr 2fr 2fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: 
    "r1c1 r1c1 r1c1 r1c1 r1c1 r1c1 r1c1 r1c1 "
    "r2c1 r2c1 r2c2 r2c2 r2c2 r2c2 r2c3 r2c3"
    "r3c1 r3c2 r3c3 r3c4 r3c4 r3c6 r3c7 r3c8"
    "r5c1 r5c2 r5c3 r5c4 r5c5 r5c6 r5c7 r5c8"
    "r6c1 r6c2 r6c3 r6c4 r6c5 r6c6 r6c7 r6c8";
}

.icon {
  font-size: 24px;
}

.icon:hover {
  color: red;
}

.big-text {
  font-size: 30px;
}

.med-text {
  font-size: 24px;
}

#main-title {grid-area:r1c1;}
#timer-label {grid-area:r2c2;}
#start_stop {grid-area:r3c3; position: relative; bottom: 20px;}
#time-left {grid-area:r3c4; position: relative; bottom: 20px;}
#reset {grid-area:r3c6; position: relative; bottom: 20px;}
#break-label {grid-area:r5c7;}
#break-decrement {grid-area:r6c6; position: relative; left: 55px; bottom: 30px;}
#break-length {grid-area:r6c7; position: relative; bottom: 30px;}
#break-increment {grid-area:r6c8; position: relative; right: 50px; bottom: 29px;}
#session-label {grid-area:r5c2;}
#session-decrement {grid-area:r6c1; position: relative; left: 50px; bottom: 30px;}
#session-length {grid-area:r6c2; position: relative; bottom: 30px;}
#session-increment {grid-area:r6c3; position: relative; right: 58px; bottom: 30px;}
            
          
!
            
              class App extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    running: false,
    status: "Session",
    breakLength: 5,
    sessionLength: 25,
    minutes: 25,
    seconds: "00",
  }
  this.start = this.start.bind(this);
  this.reset = this.reset.bind(this);
  this.breakUp = this.breakUp.bind(this);
  this.breakDown = this.breakDown.bind(this);
  this.sessionUp = this.sessionUp.bind(this);
  this.sessionDown = this.sessionDown.bind(this);
  this.countdown = this.countdown.bind(this);
  }
  
  //This handles starting and pausing the timer based on "running"
  start(){
    if(this.state.running != true){
    this.setState({running: true});
    this.state.secondTimer = setInterval(this.countdown, 1000);
    } else {
      this.audio.pause();
      this.setState({running: false})
      clearInterval(this.state.secondTimer);
    }
  }
  
  //This handles the actual countdown of the timer
  countdown(){
 //********** if seconds reaches zero *************
    if(this.state.seconds == 0){
 //**************** if seconds reaches zero and time is up ****************
      if(this.state.minutes == 0){
        this.audio.play();
        if(this.state.status == "Session"){
          this.setState({status: "Break"});
          (this.state.breakLength < 10) ? this.setState({minutes: "0" + this.state.breakLength}) : this.setState({minutes: this.state.breakLength});
        } else {
           this.setState({status: "Session"});
           (this.state.sessionLength < 10) ? this.setState({minutes: "0" + this.state.sessionLength}) : this.setState({minutes: this.state.sessionLength});
          }
//******* if seconds reaches zero but time is not up *********
      } else {
          this.setState({seconds: 59});
          (this.state.minutes < 11) ? this.setState({minutes: "0" + (this.state.minutes - 1)}) : this.setState({minutes: this.state.minutes - 1});
        }
//********** if seconds does not reach zero *************
   } else {
      (this.state.seconds < 11) ? this.setState({seconds: "0" + (this.state.seconds - 1)}) : this.setState({seconds: this.state.seconds - 1});
      }
 }

  //This handles resetting the state to default
  reset(){
    this.audio.pause();
    clearInterval(this.state.secondTimer);
    this.audio.currentTime = 0;
    this.setState({
    status: "Session",
    breakLength: 5,
    sessionLength: 25,
    minutes: 25,
    seconds: "00",
    running: false,
    });
  }
  
  //This handles increasing the break time(max: 60)
  breakUp(){
    (this.state.breakLength < 60) ? this.setState({breakLength: this.state.breakLength + 1}) : this.setState({breakLength: 60});
  }
  
  //This handles decreasing the break time(min: 1)
  breakDown(){
     (this.state.breakLength > 1) ? this.setState({breakLength: this.state.breakLength - 1}) : this.setState({breakLength: 1});
  }
  
  //This handles increasing the session time and timer(only if in "Session", max: 60)
  sessionUp(){
    if(this.state.status == "Session"){
        (this.state.sessionLength < 60) ? this.setState({sessionLength: this.state.sessionLength + 1}) : this.setState({sessionLength: 60});
        if(this.state.minutes < 60) {
          this.setState({minutes: this.state.sessionLength + 1});
        }
        if(this.state.minutes < 9) {
            this.setState({minutes: "0" + (this.state.sessionLength + 1)});
        }
    }
  }
  //This handles decreasing the session time and timer(only if in "Session", min: 1)
  sessionDown(){
    if(this.state.status == "Session"){
        (this.state.sessionLength > 1) ? this.setState({sessionLength: this.state.sessionLength - 1}) : this.setState({sessionLength: 1});
        if(this.state.sessionLength > 10) {
            this.setState({minutes: this.state.sessionLength - 1});
        } 
        if(this.state.sessionLength < 11) {
            this.setState({minutes: "0" + (this.state.sessionLength - 1)});
        }
        if(this.state.sessionLength == 1) {
          this.setState({minutes: "01"});
        }
    }
  }
      
  render() {
    return (
    <div id="main-container">
      <div id="clock-container">
        <div id="main-title">Pomodoro Timer</div>
        <div id="timer-label" className="big-text">{this.state.status}</div>
        <div id="time-left" className="big-text">{this.state.minutes + ":" + this.state.seconds}</div>
        <div id="reset" className="icon" onClick={this.reset}><i class="fas fa-history"></i></div>
        <div id="start_stop" className="icon" onClick={this.start}><i class="far fa-play-circle"></i></div>
        <div id="session-label" className="med-text">Session Length</div>
        <div id="session-length" className="big-text">{this.state.sessionLength}</div>
        <div id="session-increment" className="icon" onClick={this.sessionUp}><i class="fas fa-chevron-right"></i></div>
        <div id="session-decrement" className="icon" onClick={this.sessionDown}><i class="fas fa-chevron-left"></i></div> 
        <div id="break-label" className="med-text">Break Length</div>
        <div id="break-length" className="big-text">{this.state.breakLength}</div>
        <div id="break-increment" className="icon" onClick={this.breakUp}><i class="fas fa-chevron-right"></i></div>
        <div id="break-decrement" className="icon" onClick={this.breakDown}><i class="fas fa-chevron-left"></i></div>
        <audio id="beep" preload="auto" src="https://goo.gl/65cBl1" ref={(audio) => { this.audio = audio; }} />
      </div>
    </div>           
    );
  }
};

ReactDOM.render(<App/>, document.getElementById('App'))
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console