Working clock

src/App.css

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

src/App.js

@@ -2,59 +2,59 @@ 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` is part of `class` and React components
+  //always called when an instance of our class is created
+  // aka `construct` d
   constructor(props) {
-    super(props);
-    this.state = {date: new Date()};
+    super(props)
+    // we must set state to an object 
+    this.state = {
+      displayTime: '',
+      visitorName: 'who knows'
+    }
   }
+
+  // `componentDidMount` is standard in React 
+  //thii is where we load data or otherwise initialize data
+  componentDidMount (){
+    this.timerId = setInterval(() => {
+      // call the `tick`
+      this.tick()
+    }, 1000);
 
-  componentDidMount() {
-    this.timerID = setInterval(
-      () => this.tick(),
-      1000
-    );
   }
-
-  tick() {
+// custom method as seen on reactjs.org
+  tick (){
+    console.log("In tick")
     this.setState({
-      date: new Date()
-    });
+      displayTime: new Date().toLocaleTimeString()
+    })
   }
 
-  render() {
+   // `render is the standard for getting
+   //html into our web page 
+  render () {
+    const {displayTime, visitorName} = this.state;
+
     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() {
-  return (
+  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>
+      <header className=" App-header ">
+      <img src = {logo} className="" alt="logo" />
       </header>
-      // See https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element
-      <Clock date={new Date()} />,
-    </div>
-  );
+      <Clock />
+      </div>
+  )
 }
 
 export default App;