timer added

Author: lijoatimaginea

README.md

@@ -17,6 +17,7 @@ Below are the various libraries used in the app.
  - [Axios](https://github.com/axios/axios) - Promise based HTTP client for the browser and node.js.
  - [Charts](https://vue-chartjs.org/) - vue-chartjs is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in Vue.
  - [Vue test utils](https://vue-test-utils.vuejs.org) - Vue Test Utils is the official unit testing utility library for Vue.js.
+ - [Vue circular count down timer](https://github.com/noorzaie/vue-circular-count-down-timer) - Count down timer library for vue.js.
 
 ## Installation
 

package-lock.json

@@ -15,6 +15,7 @@
     "router": "^1.3.4",
     "vue": "^2.6.11",
     "vue-chartjs": "^3.5.0",
+    "vue-circular-count-down-timer": "^1.0.4",
     "vue-material": "^1.0.0-beta-11",
     "vue-router": "^3.1.5",
     "vuetify": "^2.2.14",
@@ -68,6 +69,6 @@
     "moduleNameMapper": {
       "^@/(.*)$": "<rootDir>/src/$1"
     },
-    "verbose" : false
+    "verbose": false
   }
 }

package.json

@@ -1,6 +1,24 @@
 <template>
   <v-container class="quiz-inner-block">
-    <div class="title-quiz"><h1>Vue.js Quiz</h1></div>
+    <div class="title-quiz">
+      <h1 class="title-h1"> Vue.js Quiz</h1>
+      <circular-count-down-timer
+        :initial-value="300"
+        :stroke-width="5"
+        :seconds-stroke-color="'#6fcbbb'"
+        :minutes-stroke-color="'#3a96d5'"
+        :underneath-stroke-color="'lightgrey'"
+        :size="80"
+        :padding="4"
+        :minute-label="'minutes'"
+        :second-label="'seconds'"
+        :show-second="true"
+        :show-minute="true"
+        :show-hour="false"
+        :show-negatives="false"
+        :notify-every="'minute'"
+></circular-count-down-timer>
+    </div>
     <v-card
       v-show="showQuestion(index)"
       v-for="(question, index) in questions"
@@ -61,12 +79,12 @@
 </template>
 
 <script>
-import {mapState} from 'vuex'
+import { mapState } from "vuex";
 export default {
   name: "Question",
   data() {
     return {
-      alert : false,
+      alert: false,
       qIndex: 0,
       currentAnswer: null,
     };
@@ -104,7 +122,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(["questions", "answers"])
+    ...mapState(["questions", "answers"]),
   },
 };
 </script>
@@ -126,6 +144,11 @@ export default {
   margin: 0;
   border-top-right-radius: 2px;
   border-top-left-radius: 2px;
+  display:flex;
+}
+
+.quiz-inner-block .title-h1 {
+  flex: 1;
 }
 .q-chip {
   background-color: #c2dfff;

src/components/Question.vue

@@ -3,6 +3,7 @@ import App from "./App.vue";
 import router from "./router";
 import vuetify from "./plugins/vuetify";
 import store from "./store";
+import counter from "./plugins/counter";
 
 Vue.config.productionTip = false;
 
@@ -13,5 +14,6 @@ new Vue({
   vuetify,
   router,
   store,
+  counter,
   render: (h) => h(App),
 }).$mount("#app");

src/main.js

@@ -0,0 +1,6 @@
+import Vue from "vue";
+import CircularCountDownTimer from "vue-circular-count-down-timer";
+Vue.use(CircularCountDownTimer);
+
+export default {};
+