From d84e1301ba4845a6d00b89f4d5a951e616efd368 Mon Sep 17 00:00:00 2001 From: Tamiko Terada Date: Sun, 21 May 2017 19:52:11 -0700 Subject: [PATCH 1/3] show someething in the browser --- index.html | 8 +++++--- index.js | 10 ++++++++++ 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 191d3cc..8de4348 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,10 @@ -
+
+
+
+
+ - - diff --git a/index.js b/index.js index 877a3aa..026674c 100644 --- a/index.js +++ b/index.js @@ -1 +1,11 @@ // Your code here + +var time = Date.now(); +var target = document.getElementById('clock'); // Find the HTML element where the ID is js-lecture-target +target.innerHTML = '

' + time + '

'; // Put this HTML inside the div we retrieved above + +// $(document).ready(function() { +// var time = console.log("test"); +// var display = $('

' + time + '

'); +// $('.display').append(display); +// }; From c7a4e603f6a016265505e6dda553fccd65cea65b Mon Sep 17 00:00:00 2001 From: Tamiko Terada Date: Tue, 23 May 2017 10:16:53 -0700 Subject: [PATCH 2/3] add basic clock functionality --- index.html | 11 ++++++----- index.js | 34 +++++++++++++++++++++++++--------- 2 files changed, 31 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 8de4348..d940841 100644 --- a/index.html +++ b/index.html @@ -7,10 +7,11 @@ -
-
-
-
- +
+
+ + + + diff --git a/index.js b/index.js index 026674c..90869df 100644 --- a/index.js +++ b/index.js @@ -1,11 +1,27 @@ -// Your code here -var time = Date.now(); -var target = document.getElementById('clock'); // Find the HTML element where the ID is js-lecture-target -target.innerHTML = '

' + time + '

'; // Put this HTML inside the div we retrieved above +//as soon as document is loaded -// $(document).ready(function() { -// var time = console.log("test"); -// var display = $('

' + time + '

'); -// $('.display').append(display); -// }; +var toClockString = function(number) { + var str_time = number.toString(); + if (str_time.length === 1) { + return "0" + str_time; + } else { + return str_time; + } +}; + +var showTime = function(now) { + var hours = toClockString(now.getHours()), + minutes = toClockString(now.getMinutes()), + seconds = toClockString(now.getSeconds()); + + var date = now.toDateString(); + $("#clock").html('
' + hours + ":" + minutes + ":" + seconds + '
' + '

' + date + '

'); +}; + +$(document).ready(function(){ + setInterval(function(){ + var now = new Date(); + showTime(now); + }, 1000); +}); From d8acd7f7c1669d427eed60b5e2076a7f278a6438 Mon Sep 17 00:00:00 2001 From: Tamiko Terada Date: Tue, 23 May 2017 10:17:13 -0700 Subject: [PATCH 3/3] make my clock prettier --- index.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/index.css b/index.css index ec4a909..7ca5265 100644 --- a/index.css +++ b/index.css @@ -1,5 +1,6 @@ body { - background-color: #80d4ea; + background-color: lightpink; + /* old color 80d4ea */ } #clock { @@ -8,9 +9,12 @@ body { 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; } + +#clock p { + font-size: 50px; +}