Skip to content

World clock PR #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Lili00ani wants to merge 3 commits into
base: main
Choose a base branch
from
Open

World clock PR #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ad74c38
updated multi clock
Lili00ani Oct 16, 2023
7281cb2
updated with bootstrap layout
Lili00ani Oct 16, 2023
aa15467
added map function
Lili00ani Oct 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,492 changes: 785 additions & 707 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^5.3.2",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1"
Expand Down
1 change: 1 addition & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
Expand Down
33 changes: 25 additions & 8 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,37 @@
import React from "react";
import logo from "./logo.png";
import "./App.css";
import WorldClock from "./WorldClock";
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {

render() {
// return (
// <div className="App">
// <header className="App-header">
// <img src={logo} className="App-logo" alt="logo" />
// <Clock timeZone="Asia/Singapore" />
// <Clock timeZone="Asia/Jakarta" />
// <Clock timeZone="Australia/Melbourne" />
// </header>
// </div>
// );
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.
</p>
</header>
<div className="container">
<div className="mt-4 mb-4">
<img src={logo} className="App-logo" alt="logo" />
</div>
<div className="row">
<div className ="col-6"><p>City</p></div>
<div className ="col-6"><p>Clock</p></div>
<WorldClock clockData={["Australia/Melbourne", "Asia/Singapore", "Asia/Tokyo", "Asia/Jakarta"]} />
</div>
</div>
);

}

}

export default App;
export default App;
22 changes: 22 additions & 0 deletions src/WorldClock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from "react";
import Clock from "./clock"

class WorldClock extends React.Component {
constructor(props) {
super(props);
// Initialise component state to contain "date" attribute with current date and time
}

render() {

return (
<div>
<p>
{this.props.clockData.map(thetimezone => (<Clock timeZone={thetimezone} key={thetimezone} />))}
Copy link
Copy Markdown

@Flashrob Flashrob Oct 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
{this.props.clockData.map(thetimezone => (<Clock timeZone={thetimezone} key={thetimezone} />))}
{this.props.clockData.map(theTimeZone => (<Clock timeZone={thetimezone} key={thetimezone} />))}

Let's always use camelCase in JavaScript

</p>
</div>
);
}
}

export default WorldClock;
38 changes: 38 additions & 0 deletions src/clock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from "react";


class Clock extends React.Component {
constructor(props) {
super(props);
// Initialise component state to contain "date" attribute with current date and time
this.state = {
date: new Date()
};

}

componentDidMount(){
this.timerId = setInterval(() => {this.setState({date: new Date()})}, 1000);
}


componentWillUnmount() {
clearInterval(this.timerId);
}

render() {
return (
<div className="container">
<div className = "row">
<div className ="col-6"><p>{this.props.timeZone}</p></div>
<div className ="col-6"><p>{this.state.date.toLocaleString("en-GB", {timeZone: this.props.timeZone})}</p></div>
</div>



</div>
);
}
}

export default Clock;
3 changes: 2 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import 'bootstrap/dist/css/bootstrap.min.css';

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
root.render(<App />);