added clock

.eslintcache

@@ -0,0 +1 @@
+[{"/home/yusuf/Programming/React/homepage/src/index.js":"1","/home/yusuf/Programming/React/homepage/src/App.js":"2","/home/yusuf/Programming/React/homepage/src/reportWebVitals.js":"3","/home/yusuf/Programming/React/homepage/src/components/time/time-component.jsx":"4"},{"size":500,"mtime":1611166245620,"results":"5","hashOfConfig":"6"},{"size":488,"mtime":1611230568467,"results":"7","hashOfConfig":"6"},{"size":362,"mtime":1611166245620,"results":"8","hashOfConfig":"6"},{"size":0,"mtime":1611230222854,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},"p1t955",{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"19"},"/home/yusuf/Programming/React/homepage/src/index.js",[],["20","21"],"/home/yusuf/Programming/React/homepage/src/App.js",[],"/home/yusuf/Programming/React/homepage/src/reportWebVitals.js",[],"/home/yusuf/Programming/React/homepage/src/components/time/time-component.jsx",[],["22","23"],{"ruleId":"24","replacedBy":"25"},{"ruleId":"26","replacedBy":"27"},{"ruleId":"24","replacedBy":"28"},{"ruleId":"26","replacedBy":"29"},"no-native-reassign",["30"],"no-negated-in-lhs",["31"],["30"],["31"],"no-global-assign","no-unsafe-negation"]

package-lock.json

@@ -10000,6 +10000,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -12286,6 +12291,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-live-clock": {
+      "version": "5.0.13",
+      "resolved": "https://registry.npmjs.org/react-live-clock/-/react-live-clock-5.0.13.tgz",
+      "integrity": "sha512-wckI0XlysCcUSEIEJELbx0UQSbX9t7nff8eMQT/w9S1v3S3cGo1Q+LTfibGMcUkT1kMUKE3PidZpZCisMlh1lQ=="
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",

package.json

@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.0",
+    "moment": "^2.29.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-live-clock": "^5.0.13",
     "react-scripts": "4.0.1",
     "web-vitals": "^0.2.4"
   },

src/App.js

@@ -1,25 +1,30 @@
-import logo from './logo.svg';
+import "./App.css";
-import './App.css';
+import React, { Component } from "react";
 
-function App() {
+class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      time: new Date(),
+    };
+  }
+
+  currentTime() {
+    this.setState({
+      time: new Date(),
+    });
+  }
+  componentDidMount() {
+    setInterval(() => this.currentTime(), 1000);
+  }
+
+  render() {
     return (
       <div className="App">
-      <header className="App-header">
+        <h1>{this.state.time.toLocaleTimeString()}</h1>
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
       </div>
     );
+  }
 }
 
 export default App;