Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Alarm Clock UI
<div id="app"></div>
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
);
<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>
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.