Update clock with visitor thanks

src/App.css

@@ -15,7 +15,8 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 80vh;
+  max-height: 90vh;
   display: flex;
   flex-direction: column;
   align-items: center;

src/App.js

@@ -2,59 +2,65 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
-
-// @see https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element
 class Clock extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {date: new Date()};
+  // `constructor` is part of `class` and React components
+  // always called when an instance of our class is created
+  // aka `construct`d
+  constructor (props) {
+    super(props)
+    // bad code: this.state.displayTime = ''
+    // we must set state to an object
+    this.state = {
+      displayTime: ''
+    }
+    this.state = {
+      visitorName: ''
+    }
   }
 
-  componentDidMount() {
-    this.timerID = setInterval(
-      () => this.tick(),
-      1000
-    );
+  // `componentDidMount` is standard in React
+  // this is where we load data or otherwise initialize data
+  componentDidMount () {
+    this.timerID = setInterval(() => {
+      // call the `tick`
+      this.tick()
+    }, 1000);
   }
 
-  tick() {
+  // custom method as seen on reactjs.org
+  tick () {
+    console.log("In tick")
     this.setState({
-      date: new Date()
-    });
+      // displayTime: new Date().toString for 24 hour time
+      displayTime: new Date().toLocaleTimeString(),
+      visitorName: 'whoever you are!'
+
+    })
   }
 
-  render() {
+  // `render` is standard for getting html into our webpage
+  render () {
+    const displayTime = this.state.displayTime;
+    const visitorName = this.state.visitorName;
+
     return (
-      <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
-      </div>
-    );
+    <div className="clock">
+      <h2>Time is {displayTime}</h2>
+      <div>Thanks for visiting {visitorName}</div>
+    </div>
+    )
   }
 }
 
-// @see https://reactjs.org/docs/create-a-new-react-app.html
-function App() {
+function App () {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload. Ok.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <img src={logo} className="" alt="logo" />
       </header>
-      // See https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element
-      <Clock date={new Date()} />,
+      <Clock />
     </div>
-  );
+  )
 }
 
 export default App;