Skip to content

Elizabeth Deutsch - Queues - js-digital-clock #26

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
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Elizabeth Deutsch - Queues - js-digital-clock #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b5b1911
function to get the time, wrapper to set the interval.
edeutschie May 21, 2017
273c449
added ternary operators for minutes and seconds > 10
edeutschie May 22, 2017
db30de2
added 3 additional time zones and css
edeutschie May 22, 2017
a81c09a
added Seattle only code for reference
edeutschie May 22, 2017
54a1f3b
cleaned up final world clock code
edeutschie May 24, 2017
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
34 changes: 29 additions & 5 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,39 @@ body {
background-color: #80d4ea;
}

#clock {
* {
font-family: courier, monospace;
text-align: center;
color: white;
}

h1 {
font-size: 100px;
padding-top: 30px;
}

#clock div {
height: 100px;
width: 800px;
width: 300px;
margin: auto;
position: absolute;
display: inline-block;
top: 0; left: 0; bottom: 0; right: 0;
padding-top: 70px;
padding-top: 50px;
font-family: courier, monospace;
text-align: center;
color: white;
font-size: 100px;
font-size: 50px;
}

/*#clock, #new_york_clock, #london_clock, #tokyo_clock {
height: 100px;
width: 300px;
margin: auto;
display: inline-block;
top: 0; left: 0; bottom: 0; right: 0;
padding-top: 50px;
font-family: courier, monospace;
text-align: center;
color: white;
font-size: 50px;
}*/
10 changes: 9 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,16 @@
</head>

<body>
<div id='clock'></div>

<h1>World Clock</h1>
<div id="clock"></div>

</body>
</html>

<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

<script src="index.js"></script>
105 changes: 104 additions & 1 deletion index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,104 @@
// Your code here
//this is code for a world clock with 4 time zones.

var Clock = function(zone) {
this.timeZone = zone;
};

Clock.prototype = {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
};

$(document).ready(function() {

var intervalID = window.setInterval(myCallback, 1000);

function myCallback() {

$("#clock").empty();

var zones = ['America/Los_Angeles', 'America/New_York', 'Europe/London', 'Asia/Tokyo'];

for (var i = 0; i < zones.length; i++ ) {
var options = new Clock(zones[i]);
var formatter = new Intl.DateTimeFormat([], options);
var location = options.timeZone.split("/")[1];
if (location === "Los_Angeles") {
var localTime = "Seattle: " + formatter.format(new Date());
} else if (location === "New_York") {
var localTime = "New York: " + formatter.format(new Date());
} else {
var localTime = location + ": " + formatter.format(new Date());
};

var div = $('<div>' + localTime + '</div>');
$("#clock").append(div);

};

};

});


// ////////
// //earlier world clock code that went through the same code 4 times (once for each time zone)
// var intervalID = window.setInterval(myCallback, 1000);
//
// function myCallback() {
//
// var options = {
// timeZone: 'America/Los_Angeles',
// hour: 'numeric', minute: 'numeric', second: 'numeric',
// },
// formatter = new Intl.DateTimeFormat([], options)
//
// var seattleTime = "Seattle: " + formatter.format(new Date());
//
// var options = {
// timeZone: 'America/New_York',
// hour: 'numeric', minute: 'numeric', second: 'numeric',
// },
// formatter = new Intl.DateTimeFormat([], options)
//
// var newYorkTime = "New York: " + formatter.format(new Date());
//
// var option = {
// timeZone: 'Europe/London',
// hour: 'numeric', minute: 'numeric', second: 'numeric',
// },
// formatter = new Intl.DateTimeFormat([], options)
//
// var londonTime = "London: " + formatter.format(new Date());
//
// var options = {
// timeZone: 'Asia/Tokyo',
// hour: 'numeric', minute: 'numeric', second: 'numeric',
// },
// formatter = new Intl.DateTimeFormat([], options)
//
// var tokyoTime = "Tokyo: " + formatter.format(new Date());
//
// $("#clock").html(seattleTime);
// $("#london_clock").html(londonTime);
// $("#new_york_clock").html(newYorkTime);
// $("#tokyo_clock").html(tokyoTime);
// }
//
// });

//original code for Seattle only
// var intervalID = window.setInterval(myCallback, 1000);
//
// function myCallback() {
// var dt = new Date();
//
// var currentTime = {
// currentHour: dt.getHours(),
// currentMinute: (dt.getMinutes() < 10 ? '0' : '') + dt.getMinutes(),
// currentSecond: (dt.getSeconds() < 10 ? '0' : '') + dt.getSeconds()
// };
//
//
// var time = "Seattle: " + currentTime.currentHour + ":" + currentTime.currentMinute + ":" + currentTime.currentSecond;
2 changes: 2 additions & 0 deletions node_modules/strftime/.npmignore
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions node_modules/strftime/.tm_properties
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading