format time, some css, removing warnings

src/components/timer.vue

@@ -1,10 +1,28 @@
 <script lang="ts">
 	import axios from 'axios';
 
+	const padDigits = (value) => {
+		if(value < 10){
+			return '0'+value;
+		} else {
+			return value;
+		}
+	}
+
+	const getMinutes = (seconds) => {
+		return Math.floor( seconds / 60 );
+	}
+
 	const getAccumulatedSeconds = (newerTime, olderTime) => {
 		return Math.floor((newerTime-olderTime)/1000);
 	}
 
+	const formatSeconds = (total) => {
+		const minutes = getMinutes(total);
+		const seconds = total - minutes*60;
+		return `${minutes}:${padDigits(seconds)}`;
+	}
+
 	export default {
 		data() {
 			return {
@@ -12,10 +30,16 @@
 				running: false,
 				startTime:0,
 				savedPreviousSeconds:0,
-				totalSeconds:0
+				totalSeconds:0,
+				description:'',
+				practice_category_id:0,
+				comments:''
 			}
 		},
 		methods: {
+			formatTime(seconds){
+				return formatSeconds(seconds)
+			},
 			submit(event){
 				event.preventDefault();
 				const reqBody = {
@@ -70,6 +94,9 @@
 <template>
 	<details :class="{running:running}">
 		<summary><h2>Timer</h2></summary>
+		<em>
+			{{formatTime(totalSeconds)}}
+		</em>
 		<button :disabled="running" @click="start">Start Timer</button>
 		<button :disabled="!running" @click="stop">Stop Timer</button>
 		<button :disabled="running || totalSeconds === 0" @click="reset">Reset</button>
@@ -106,4 +133,11 @@ label, [type="submit"] {
 details.running {
 	background:green;
 }
+button, em {
+	margin: 1em 0;
+	display:block;
+	font-size:3em;
+	font-style:normal;
+	font-weight:bold;
+}
 </style>