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;
+}
diff --git a/index.html b/index.html
index 191d3cc..d940841 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,11 @@
   </head>
 
   <body>
-      <div id='clock'></div>
+    <div id='clock'>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+    <script type="text/javascript" src="index.js"></script>
+
   </body>
 </html>
-
-<script src="index.js"></script>
diff --git a/index.js b/index.js
index 877a3aa..90869df 100644
--- a/index.js
+++ b/index.js
@@ -1 +1,27 @@
-// Your code here
+
+//as soon as document is loaded
+
+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('<div>' + hours + ":" + minutes + ":" + seconds + '</div>' + '<p>' + date + '</p>');
+};
+
+$(document).ready(function(){
+  setInterval(function(){
+    var now = new Date();
+    showTime(now);
+  }, 1000);
+});
