Skip to content

Commit ddd623c

Browse files
dangvanthanhdangvanthanh
committed
Simple clock components using vue.js
0 parents  commit ddd623c

File tree

10 files changed

+207
-0
lines changed

10 files changed

+207
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎app.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
*,
2+
*:before,
3+
*:after {
4+
-webkit-box-sizing: border-box;
5+
-moz-box-sizing: border-box;
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
background-color: #dd4a38;
11+
margin: 0;
12+
color: #444;
13+
font-size: 16px;
14+
line-height: 1.5;
15+
}
16+
17+
.container {
18+
max-width: 25rem;
19+
margin: 50px auto;
20+
}
21+
22+
.clock {
23+
background: #fff;
24+
border: .3rem solid #fff;
25+
border-radius: .5rem;
26+
display: inline-block;
27+
}
28+
29+
.clock__hours,
30+
.clock__minutes {
31+
background: linear-gradient(to bottom, #26303b 50%, #2c3540 50%);
32+
display: inline-block;
33+
color: #fff;
34+
font-family: 'Nunito', sans-serif;
35+
font-size: 3rem;
36+
font-weight: 300;
37+
padding: .5rem 1rem;
38+
text-align: center;
39+
position: relative;
40+
}
41+
42+
.clock__hours {
43+
border-right: .15rem solid #fff;
44+
border-radius: .5rem 0 0 .5rem;
45+
}
46+
47+
.clock__minutes {
48+
border-radius: 0 .5rem .5rem 0;
49+
}
50+
51+
.clock__hourtime {
52+
font-size: 1rem;
53+
position: absolute;
54+
top: 2px;
55+
left: 8px;
56+
}

‎app.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
var Clock = { template: "<div class=clock><div class=clock__hours><span class=clock__hourtime>{{hourtime}}</span> {{hours}}</div><div class=clock__minutes>{{minutes}}</div></div>",
2+
data: function data() {
3+
return {
4+
hours: '',
5+
minutes: '',
6+
hourtime: ''
7+
};
8+
},
9+
ready: function ready() {
10+
this.updateDateTime();
11+
},
12+
13+
methods: {
14+
updateDateTime: function updateDateTime() {
15+
var self = this;
16+
var now = new Date();
17+
18+
self.hours = now.getHours();
19+
self.minutes = self.getZeroPad(now.getMinutes());
20+
self.hourtime = self.getHourTime(self.hours);
21+
self.hours = self.hours % 12 || 12;
22+
23+
setTimeout(self.updateDateTime, 1000);
24+
},
25+
getHourTime: function getHourTime(h) {
26+
return h >= 12 ? 'PM' : 'AM';
27+
},
28+
getZeroPad: function getZeroPad(n) {
29+
return (parseInt(n, 10) >= 10 ? '' : '0') + n;
30+
}
31+
}
32+
};
33+
34+
var app = new Vue({
35+
el: 'body',
36+
components: {
37+
Clock: Clock
38+
}
39+
});

‎index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Simple clock using vue.js</title>
6+
<link href='https://fonts.googleapis.com/css?family=Nunito:300' rel='stylesheet' type='text/css'>
7+
<link rel="stylesheet" href="app.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<clock></clock>
12+
</div>
13+
<script src="http://cdn.jsdelivr.net/vue/1.0.25/vue.min.js"></script>
14+
<script src="app.js"></script>
15+
</body>
16+
</html>

‎media/clock-using-vue.png‎

17.3 KB
Loading

‎package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "vue-clock",
3+
"version": "1.0.0",
4+
"description": "Simple clock using vue.js",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/dangvanthanh/vue-clock.git"
12+
},
13+
"author": "Dang Van Thanh <[email protected]> (http://dangthanh.org)",
14+
"license": "MIT",
15+
"bugs": {
16+
"url": "https://github.com/dangvanthanh/vue-clock/issues"
17+
},
18+
"homepage": "https://github.com/dangvanthanh/vue-clock#readme",
19+
"devDependencies": {
20+
"babel-preset-es2015-rollup": "^1.1.1",
21+
"rollup": "^0.32.0",
22+
"rollup-plugin-babel": "^2.5.1",
23+
"rollup-plugin-vue": "^2.0.1"
24+
}
25+
}

‎readme.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Vue Clock
2+
3+
> Simple clock component using vue.js
4+
5+
![Simple clock component using vue.js](https://raw.githubusercontent.com/dangvanthanh/vue-clock/master/media/clock-using-vue.png)

‎rollup.config.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import babel from 'rollup-plugin-babel'
2+
import vue from 'rollup-plugin-vue'
3+
4+
export default {
5+
entry: './src/app.js',
6+
dest: './app.js',
7+
plugins: [
8+
babel({
9+
exclude: './src/components/**',
10+
presets: 'es2015-rollup'
11+
}),
12+
vue()
13+
]
14+
}

‎src/app.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Clock from './components/Clock.vue'
2+
3+
const app = new Vue({
4+
el: 'body',
5+
components: {
6+
Clock
7+
}
8+
})

‎src/components/Clock.vue‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<div class="clock">
3+
<div class="clock__hours">
4+
<span class="clock__hourtime">{{hourtime}}</span>
5+
{{hours}}
6+
</div>
7+
<div class="clock__minutes">{{minutes}}</div>
8+
</div>
9+
</template>
10+
11+
<script>
12+
export default {
13+
data () {
14+
return {
15+
hours: '',
16+
minutes: '',
17+
hourtime: ''
18+
}
19+
},
20+
ready () {
21+
this.updateDateTime()
22+
},
23+
methods: {
24+
updateDateTime () {
25+
let self = this
26+
let now = new Date()
27+
28+
self.hours = now.getHours()
29+
self.minutes = self.getZeroPad(now.getMinutes())
30+
self.hourtime = self.getHourTime(self.hours)
31+
self.hours = self.hours % 12 || 12
32+
33+
setTimeout(self.updateDateTime, 1000)
34+
},
35+
getHourTime (h) {
36+
return h >= 12 ? 'PM' : 'AM'
37+
},
38+
getZeroPad (n) {
39+
return (parseInt(n, 10) >= 10 ? '' : '0') + n
40+
}
41+
}
42+
}
43+
</script>

0 commit comments

Comments
 (0)