Alarm Clock UI

alarm-clock-ui.markdown

Alarm Clock UI

Made with Mark (https://codepen.io/iheartkode)

A Pen by Josh Bivens on CodePen.

License.

index.html

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

script.babel

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      hour: "01",
      minute: "00",
      ampmIndex: 0,
      ampm: "AM"
    }
  }
  changeHour(e) {
    if(e.target.value === "0") {
      this.setState({
        hour: "00"
      });
    } else if(parseInt(e.target.value) < 10) {
      this.setState({
        hour: "0" + e.target.value
      });
    } else {
      this.setState({
        hour: e.target.value
      });
    }
  }
  changeMinute(e) {
    if(e.target.value === "0") {
      this.setState({
        minute: "00"
      });
    } else if(parseInt(e.target.value) < 10) {
      this.setState({
        minute: "0" + e.target.value
      });
    } else {
      this.setState({
        minute: e.target.value
      });
    }
  }
  setAmPm(e) {
    if(e.target.value === "1") {
      this.setState({
        ampm: "PM",
        ampmIndex: 1
      });
    } else if(e.target.value === "0") {
      this.setState({
        ampm: "AM",
        ampmIndex: 0  
      });
    }
  }
  render() {
    let ampmStyles = {
      cursor: "pointer",
      color: this.state.ampm === "PM" ? "steelblue" : "yellow",
      transition: "all .3s ease-in"
    };
    let containerStyles = {
      background: this.state.ampm === "PM" ? "#152736" : "skyblue",
      transition: "all .3s ease-in"
    }; 
    
    return (
      <div className="container" style={containerStyles}>
        <div className="alarm">
          <div className="readout">
            <span>{this.state.hour}</span><span>:</span><span>{this.state.minute}</span>&nbsp;
            <span onClick={this.setAmPm.bind(this)} style={ampmStyles}>
              { this.state.ampm }
            </span>
           </div>
          <div className="sliders">
            <input onChange={this.changeHour.bind(this)} type="range"  min="1" max="12" value={this.state.hour}/>
            <input onChange={this.changeMinute.bind(this)} type="range" max="59" value={this.state.minute}/>
            <input onChange={this.setAmPm.bind(this)} type="range" max="1"  value={this.state.ampmIndex}/>
          </div>
        </div>  
      </div>
    );
  }
}

const mountNode = document.getElementById("app");
ReactDOM.render(
  <App />,
  mountNode
);

scripts

<script src="https://fb.me/react-15.1.0.min.js"></script>
<script src="https://fb.me/react-dom-15.1.0.min.js"></script>

style.scss

.container {
  font-family: "Roboto";
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

.alarm {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
}

input {
  width: 200px;
  margin-top: 55px;
}

input[type="range"] {
  appearance: none;
  width: 130px;
  height: 2px;
  background: #fff;
  outline: none;
  border: 0;
  border-radius: 20px;
  cursor: pointer;
}

input[type='range']::-webkit-slider-thumb {
  transition: all 0.1s ease-in;
  appearance: none;
  background: #fff;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  &:active {
    background: dodgerblue;
  }
}

.sliders {
  transform: rotate(-90deg);
  width: 235px;
  margin-top: -70px;
  margin-left: -62px;
}

span {
  font-size: 2.8em;
  color: white;
}