Skip to content

Queues - Kayla Kubicke - js-digital-clock #15

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 16 commits into
base: master
Choose a base branch
from
Open

Queues - Kayla Kubicke - js-digital-clock #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
61ea902
Basic clock displays on page.
May 19, 2017
600d2f8
Seconds change on clock.
May 19, 2017
a2a6b13
Removed unnecessary code.
May 19, 2017
ae9ad4f
Merge pull request #1 from moonpastry/basiclock
May 19, 2017
9735ef8
Clock updates based on individual characteristics.
May 21, 2017
dbda4c0
Leading zeros are displayed for hour, minute, and second.
May 21, 2017
cad742a
12-hour clock displays full year.
May 21, 2017
b51d8ef
Clock function is called before setInterval to avoid lag.
May 21, 2017
1e218dc
Fixed hours variable.
May 21, 2017
182e452
Merge pull request #2 from moonpastry/features
May 21, 2017
1aabfaa
Basic styling.
May 21, 2017
7fae34e
Removed extra code.
May 22, 2017
a42d048
Refactored newTime string and time calculation.
May 22, 2017
2d731be
Merge pull request #3 from moonpastry/refactor
May 22, 2017
1cdd0c9
Refactored clock to update via a DateTime object.
May 23, 2017
0b9a393
Merge pull request #4 from moonpastry/refactor
May 23, 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
37 changes: 26 additions & 11 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,31 @@
@import url('https://fonts.googleapis.com/css?family=Atomic+Age');

body {
background-color: #80d4ea;
background-color: #80d4ea;
}

#clock {
height: 100px;
width: 800px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
padding-top: 70px;
font-family: courier, monospace;
text-align: center;
color: white;
font-size: 100px;
height: 100px;
width: 800px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
padding-top: 70px;
font-family: 'Atomic Age';
text-align: center;
font-weight: bold;
color: white;
font-size: 100px;
}

.page-bg {
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Vincent_Price_in_House_on_Haunted_Hill.jpg/333px-Vincent_Price_in_House_on_Haunted_Hill.jpg');
background-size: 100%;
filter: blur(3px);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
27 changes: 17 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>Clock Tower</title>
<meta charset="utf-8">
<link href="index.css" media="screen" rel="stylesheet" type="text/css"/>
</head>
<head>

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

<script src="index.js"></script>
<title>Clock Tower</title>
<meta charset="utf-8">
<link href="index.css" media="screen" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class='page-bg'>
</div>
<div id='clock'>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
67 changes: 66 additions & 1 deletion index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,66 @@
// Your code here
$(document).ready(function() {

var DateTime = function() {
var date = new Date();

this.monthNumber = date.getMonth();
this.day = date.getDate();
this.year = date.getFullYear();

this.hours = date.getHours();
this.minutes = date.getMinutes();
this.seconds = date.getSeconds();
};

DateTime.prototype = {

determineDate: function() {
var monthNames = [
"January", "February", "March",
"April", "May", "June",
"July", "August", "September",
"October", "November", "December"
];

var monthName = monthNames[this.monthNumber];
return monthName + " " + this.day + ", " + this.year + " ";
},

determineTime: function() {
var hour = this.twelveHourFormat(this.hours);
var minutes = this.decideLeadingZero(this.minutes);
var seconds = this.decideLeadingZero(this.seconds);

var timeArray = [hour, minutes, seconds].join(":");
var suffix = (this.hours >= 12)? 'pm' : 'am';

return timeArray + " " + suffix;
},

twelveHourFormat: function(hour) {
var twelveHourConversion = ((hour + 11) % 12 + 1);
return this.decideLeadingZero(twelveHourConversion);
},

decideLeadingZero: function(number) {
if (number < 10) {
return '0' + number;
}
return number;
}
};

var clock = function(newDateTime) {
newDate = new DateTime();
var date = newDate.determineDate();
var time = newDate.determineTime();

return $('#clock').html(date + time);
};

var initialDateTime = new DateTime();
clock(initialDateTime);

setInterval(clock, 1000, initialDateTime);

});