IllusionElements/index.html

## 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>

## react-scratchpad.markdown

      
    Raw
  

              react-scratchpad.markdown
            
          
    React Scratchpad

A Pen by Aaron Lo on CodePen.
License.

  
## 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"));

## 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

## styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.css" rel="stylesheet" />
	<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>

	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"));
	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