emersonbrogadev · August 30, 2019 13:45
diff --git a/README.MD b/README.MD
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html>
 <head>
  <title>ReactDOM.render() - Clock - DEMO 2</title>
  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #root {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: #005AA7;
      background: -webkit-linear-gradient(to top, #FFFDE4, #005AA7);
      background: linear-gradient(to top, #FFFDE4, #005AA7);
    }

    .clock {
      width: 100%;
      font-family: sans-serif;
      font-size: 80px;
      font-variant-numeric: tabular-nums;
      color: #FFFFFF;
      text-align: center;
    }
  </style>
 </head>
  
 <body>
  <div id="root"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">
    const getHours = () => `0${(new Date()).getHours()}`.slice(-2);
    const getMinutes = () => `0${(new Date()).getMinutes()}`.slice(-2);
    const getSeconds = () => `0${(new Date()).getSeconds()}`.slice(-2);

    const clock = () => {
      const h = getHours();
      const m = getMinutes();
      const s = getSeconds();

      const element = (
        <div className="clock">
          It's {h}:{m}:{s}.
        </div>
      );
      
      ReactDOM.render(element, document.getElementById('root'));
    }

    setInterval(clock, 1000);
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>ReactDOM.render() - Clock - DEMO 2</title>
	<style type="text/css">
	html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	#root {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: #005AA7;
	background: -webkit-linear-gradient(to top, #FFFDE4, #005AA7);
	background: linear-gradient(to top, #FFFDE4, #005AA7);
	}

	.clock {
	width: 100%;
	font-family: sans-serif;
	font-size: 80px;
	font-variant-numeric: tabular-nums;
	color: #FFFFFF;
	text-align: center;
	}
	</style>
	</head>

	<body>
	<div id="root"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

	<script type="text/babel">
	const getHours = () => `0${(new Date()).getHours()}`.slice(-2);
	const getMinutes = () => `0${(new Date()).getMinutes()}`.slice(-2);
	const getSeconds = () => `0${(new Date()).getSeconds()}`.slice(-2);

	const clock = () => {
	const h = getHours();
	const m = getMinutes();
	const s = getSeconds();

	const element = (
	<div className="clock">
	It's {h}:{m}:{s}.
	</div>
	);

	ReactDOM.render(element, document.getElementById('root'));
	}

	setInterval(clock, 1000);
	</script>
	</body>
	</html>