Skip to content

Instantly share code, notes, and snippets.

@IllusionElements

IllusionElements/index.html

Created May 25, 2018 00:36
Show Gist options
  • Save IllusionElements/a4b6c23fd46e7f7a536867a007525a0b to your computer and use it in GitHub Desktop.
Save IllusionElements/a4b6c23fd46e7f7a536867a007525a0b to your computer and use it in GitHub Desktop.
Download ZIP
React Scratchpad
Raw
index.html
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
</body>
Raw
script.babel
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
// Display fallback UI
this.setState({ hasError: true });
// You can also log the error to an error reporting service
console.error(error);
console.log(this.props.children)
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <th>Something went wrong.</th>;
}
return this.props.children;
}
}
const { Fragment: F} = React
const font = {
fontSize: '10rem',
}
const styles = {
height: window.innerHeight,
paddingLeft: '25%',
paddingRight: '25%',
marginLeft: '10%',
}
styles.children = {
font,
}
const TIME_MONTHS = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",]
const time = () => new Date();
const buildFullDay = () => {
const Month = time().getMonth()
const Year = time().getFullYear()
const Day = time().getDate()
return `${TIME_MONTHS[Month]} ${Day} ${Year}`
}
const debounce = fn => setTimeout(() => fn(), 100)
let i = 0
const TWELVE_HOURS = 12
const round = n => n.toFixed(0)
const t = new Date()
const day = Symbol('day')
const clock = Symbol('clock')
const Col = ({ otherClasses='', size='', colSpan='', children=[]}) => (
<div className={`col ${size}${colSpan}${otherClasses}`}>
{children}
</div>
)
const Row = ({ children }) => (
<div className='row'>
{children}
</div>
)
class Clock extends React.Component {
state = {
currentTime: `${new Date().getHours()}:${`${new Date().getMinutes()}`.padStart(2, 0)}:${`${new Date().getSeconds()}`.padStart(2, 0)}`,
is24HoursModeEnabled: true,
day: '...loading',
fullDate: '...loading',
isSecondsHidden: false,
}
switchClock = (hours) => hours > TWELVE_HOURS ? (hours-TWELVE_HOURS):hours
getCurrentTime = (h, m, s) => s ? `${h}:${`${m}`.padStart(2, 0)}:${`${s}`.padStart(2, 0)}`:`${h}:${`${m}`.padStart(2, 0)}`
setTime = () => this.setState(()=> ({
currentTime: this.getcurrentTime()
}))
componentDidMount() {
const date = new Date()
this.setState({
day: date,
})
this.setState({fullDate: buildFullDay()})
debounce(() => {
this[day] = setInterval(() => {
const currentDay = new Date().getFullDay()
if(this.state.day !== currentDay){
this.setState({
fullDate: buildFullDay()
})
this.setState({
day: currentDay
})
} else {
return;
}
}, 1800000)
})
this[clock] = setInterval(()=>this.setState((prev)=>({
...prev,
currentTime: `${new Date().getHours()}:${`${new Date().getMinutes()}`.padStart(2, 0)}:${`${new Date().getSeconds()}`.padStart(2, 0)}`
})), 1000)
}
componentWillUnmount() {
this.handleClear();
clearInterval(this[day])
}
handleClear = () => clearInterval(this[clock])
time= {
hours(){
return new Date().getHours()
},
minutes(){
return new Date().getMinutes()
},
seconds(){
return new Date().getSeconds()
}
}
handleHideSeconds = () => this.setState((prevState) => ({
...prevState,
isSecondsHidden: !prevState.isSecondsHidden
}), () => this.onClick(this.state.is24HoursModeEnabled))
onClick = (mode) => {
this.handleClear()
const getCurrentTime = this.getCurrentTime
const switchClock = this.switchClock
const time = this.time
if(mode === true || !this.state.is24HoursModeEnabled) {
this[clock] = setInterval(()=>{
let time;
if(!this.state.isSecondsHidden){
time = `${new Date().getHours()}:${`${new Date().getMinutes()}`.padStart(2, 0)}:${`${new Date().getSeconds()}`.padStart(2, 0)}`
} else if (!!this.state.isSecondsHidden) {
time = `${new Date().getHours()}:${`${new Date().getMinutes()}`.padStart(2, 0)}`
}
this.setState((prev)=>({
...prev,
currentTime: time,
}))}, 1000)
return;
}
this.handleClear()
const setTime = () => {
const hours = new Date().getHours()
let abbr;
if(hours >= 12 ) {
abbr = 'PM'
} else {
abbr = 'AM'
}
return !this.state.isSecondsHidden ? `${getCurrentTime(switchClock(hours), new Date().getMinutes(), new Date().getSeconds())} ${abbr}`:`${getCurrentTime(switchClock(hours), new Date().getMinutes())} ${abbr}`
}
this[clock] = setInterval(() => (
this.setState((prevState) => ({
is24HoursModeEnabled: false,
currentTime: setTime(),
}))
), 1000)
}
render() {
const {
children,
styles: {
children: {
font,
},
},
} = this.props
const Child =this.props.clockStyle
let clockFont, timeMode;
if(this.state.is24HoursModeEnabled) {
clockFont = font
timeMode = 12
} else {
timeMode = 24
clockFont = {
fontSize: '6rem'
}
}
return (
<div>
<Child
styles={clockFont}
currentTime={this.state.currentTime}
/>
<Row>
<h1>{this.state.fullDate}</h1>
</Row>
<Row>
<Col>
<button className='btn darken-1' onClick={this.onClick}> Change to {timeMode} hrs mode </button>
</Col>
<Col >
<button className='btn' onClick={this.handleHideSeconds}>{this.state.isSecondsHidden ? 'Show':'Hide'} Seconds</button>
</Col>
</Row>
</div>
)
}
}
const RedClockFace = ({styles, currentTime}) => (
<h1 className='red-text darken-1 center-align' style={styles}>{currentTime}</h1>
)
ReactDOM.render(
<ErrorBoundary>
<div className='valign-wrapper' style={styles}>
<Clock
styles={styles}
clockStyle={RedClockFace} />
</div>
</ErrorBoundary>
, document.getElementById("root"));
Raw
style.sass
html, body
font-family: 'Helvetica Neue'
font-size: 22px
color: black
.max
height: 100%
th
text-align: center
color: black
td
color: black
.card
color: black !important
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment