Skip to content

Instantly share code, notes, and snippets.

@thanapongp

thanapongp/index.html

Created April 18, 2019 07:56
Show Gist options
  • Save thanapongp/000c32e99fa0b400fdef0ac1f541dc32 to your computer and use it in GitHub Desktop.
Save thanapongp/000c32e99fa0b400fdef0ac1f541dc32 to your computer and use it in GitHub Desktop.
Download ZIP
Vue.js Clock Angel Problem
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Learn Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
Hour Angel: {{ hourAngel }} <br>
Min Angel: {{ minAngel }} <br>
Between Angel: {{ betweenAngel }} <br>
<div>
Hour:
<input type="number" min="0" max="12" v-model="hour">
Minute:
<input type="number" min="0" max="59" v-model="min">
</div>
</div>
</body>
<script src="main.js"></script>
</html>
Raw
main.js
var app = new Vue({
el: '#app',
data: {
hour: "0",
min: "0",
},
computed: {
hourAngel: function () {
// 360 degrees in 720 minutes
// 0.5 per minute
// 0.5 times number of minutes since 12 o'clock
let angel = 0.5 * (60 * (+this.hour) + (+this.min))
return angel >= 360 ? angel - 360 : angel
},
minAngel: function () {
// 360 degrees in 60 minutes
// 6 degrees per minute
let angel = 6 * (+this.min)
return angel >= 360 ? angel - 360 : angel
},
betweenAngel: function () {
let angel = Math.abs(this.hourAngel - this.minAngel)
return angel > 180 ? 360 - angel : angel
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment