diff --git a/index.css b/index.css
index ec4a909..1c70e2f 100644
--- a/index.css
+++ b/index.css
@@ -2,7 +2,7 @@ body {
     background-color: #80d4ea;
 }
 
-#clock {
+.clock {
     height: 100px;
     width: 800px;
     margin: auto;
diff --git a/index.html b/index.html
index 191d3cc..f7cec42 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,12 @@
   </head>
 
   <body>
-      <div id='clock'></div>
+      <div class='clock'></div>
+      <script
+        src="https://code.jquery.com/jquery-3.2.1.js"
+        integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
+        crossorigin="anonymous"></script>
+
+        <script src="index.js"></script>
   </body>
 </html>
-
-<script src="index.js"></script>
diff --git a/index.js b/index.js
index 877a3aa..8d82e8f 100644
--- a/index.js
+++ b/index.js
@@ -1 +1,15 @@
-// Your code here
+$(document).ready(function () {
+  var clocks = function (){
+  var now = new Date(),
+    hours = now.getHours().toString().length === 1 ? '0' + now.getHours() : now.getHours(),
+    minutes = now.getMinutes().toString().length === 1 ? '0' + now.getMinutes() : now.getMinutes(),
+    seconds = now.getSeconds().toString().length === 1 ? '0' + now.getSeconds() : now.getSeconds(),
+    clocks = ( hours + ':' + minutes + ':' + seconds)
+$('.clock').text(clocks)
+}
+//
+setInterval(clocks, 1000);
+
+
+
+});
