From b0e5713b24e624c882eae615fc64f7036ccd99cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yusuf=20=C4=B0pek?= Date: Thu, 21 Jan 2021 15:03:30 +0300 Subject: [PATCH] added clock --- .eslintcache | 1 + package-lock.json | 10 ++++++ package.json | 2 ++ src/App.js | 47 ++++++++++++++----------- src/components/time/time-component.jsx | 0 src/components/time/time-component.scss | 0 6 files changed, 39 insertions(+), 21 deletions(-) create mode 100644 .eslintcache create mode 100644 src/components/time/time-component.jsx create mode 100644 src/components/time/time-component.scss diff --git a/.eslintcache b/.eslintcache new file mode 100644 index 0000000..6195c62 --- /dev/null +++ b/.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"] \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 96085a6..f40e7d7 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e90a452..89a97e6 100644 --- a/package.json +++ b/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" }, diff --git a/src/App.js b/src/App.js index 3784575..a584b35 100644 --- a/src/App.js +++ b/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() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); +class App extends Component { + constructor() { + super(); + this.state = { + time: new Date(), + }; + } + + currentTime() { + this.setState({ + time: new Date(), + }); + } + componentDidMount() { + setInterval(() => this.currentTime(), 1000); + } + + render() { + return ( +
+

{this.state.time.toLocaleTimeString()}

+
+ ); + } } export default App; diff --git a/src/components/time/time-component.jsx b/src/components/time/time-component.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/time/time-component.scss b/src/components/time/time-component.scss new file mode 100644 index 0000000..e69de29