Adding seconds for clock

Author: dangvanthanh

public/app.css

@@ -25,10 +25,12 @@ body {
   border: .3rem solid #fff;
   border-radius: .5rem;
   display: inline-block;
+  margin-bottom: 1em;
 }
 
 .clock__hours,
-.clock__minutes {
+.clock__minutes,
+.clock__seconds {
   background: linear-gradient(to bottom, #26303b 50%, #2c3540 50%);
   display: inline-block;
   color: #fff;
@@ -46,6 +48,10 @@ body {
 }
 
 .clock__minutes {
+  border-right: .15rem solid #fff;
+}
+
+.clock__seconds {
   border-radius: 0 .5rem .5rem 0;
 }
 

public/app.js

@@ -7421,11 +7421,12 @@ function getZeroPad (n) {
   return (parseInt(n, 10) >= 10 ? '' : '0') + n
 }
 
-var Clock = {render: function(){with(this){return _h('div',{staticClass:"clock"},[_h('div',{staticClass:"clock__hours"},[_h('span',{staticClass:"clock__hourtime"},[_s(hourtime)])," "+_s(hours)]),_h('div',{staticClass:"clock__minutes"},[_s(minutes)])])}},staticRenderFns: [],
+var Clock = {render: function(){with(this){return _h('div',{staticClass:"clock"},[_h('div',{staticClass:"clock__hours"},[_h('span',{staticClass:"clock__hourtime"},[_s(hourtime)])," "+_s(hours)]),_h('div',{staticClass:"clock__minutes"},[_s(minutes)]),_h('div',{staticClass:"clock__seconds"},[_s(seconds)])])}},staticRenderFns: [],
   data: function data () {
     return {
       hours: '',
       minutes: '',
+      seconds: '',
       hourtime: ''
     }
   },
@@ -7439,6 +7440,7 @@ var Clock = {render: function(){with(this){return _h('div',{staticClass:"clock"}
 
       self.hours = now.getHours()
       self.minutes = getZeroPad(now.getMinutes())
+      self.seconds = getZeroPad(now.getSeconds())
       self.hourtime = getHourTime(self.hours)
       self.hours = self.hours % 12 || 12
 

public/index.html

@@ -10,10 +10,10 @@
   <div class="container">
     <div id="app">
         <Clock></Clock>
-        <Clock></Clock>
       </div>
     </div>
   </div>
+  <script src="https://unpkg.com/[email protected]"></script>
   <script src="app.js"></script>
 </body>
 </html>

src/components/Clock.vue

@@ -5,6 +5,7 @@
       {{hours}}
     </div>
     <div class="clock__minutes">{{minutes}}</div>
+    <div class="clock__seconds">{{seconds}}</div>
   </div>
 </template>
 
@@ -16,6 +17,7 @@ export default {
     return {
       hours: '',
       minutes: '',
+      seconds: '',
       hourtime: ''
     }
   },
@@ -29,6 +31,7 @@ export default {
 
       self.hours = now.getHours()
       self.minutes = getZeroPad(now.getMinutes())
+      self.seconds = getZeroPad(now.getSeconds())
       self.hourtime = getHourTime(self.hours)
       self.hours = self.hours % 12 || 12
 
@@ -65,10 +68,12 @@ body {
   border: .3rem solid #fff;
   border-radius: .5rem;
   display: inline-block;
+  margin-bottom: 1em;
 }
 
 .clock__hours,
-.clock__minutes {
+.clock__minutes,
+.clock__seconds {
   background: linear-gradient(to bottom, #26303b 50%, #2c3540 50%);
   display: inline-block;
   color: #fff;
@@ -86,6 +91,10 @@ body {
 }
 
 .clock__minutes {
+  border-right: .15rem solid #fff;
+}
+
+.clock__seconds {
   border-radius: 0 .5rem .5rem 0;
 }