Refactoring. Renamed 'data' and 'methods' of current date and current time

beatrizsmerino · beatrizsmerino · commit a9540c474bb4 · 2021-05-16T02:15:58.000+02:00
- Renamed 'method': 'getCurrentDateFormat' to 'createCurrentDateFormat'
- Renamed 'method': 'getCurrentTimeFormat' to 'createCurrentTimeFormat'
- Renamed 'data': 'current' to 'currentDateTime'
- Renamed image of background: 'bg-currentdate' to 'bg-current-date-time'
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -280,10 +280,10 @@ https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/sh
 
 
 
-/*** CURRENT DATE ***/
+/*** CURRENT DATE TIME ***/
 /**************************/
 
-.current-date {
+.current-date-time {
 	padding: 1.5rem 2rem;
 	display: flex;
 	flex-direction: column;
@@ -296,7 +296,7 @@ https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/sh
 	color: var(--color-pokemon-3);
 }
 
-.current-date:after {
+.current-date-time:after {
 	width: 17rem;
 	height: 8.5rem;
 	content: '';
@@ -305,7 +305,7 @@ https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/sh
 	top: -0.1rem;
 	right: -0.1rem;
 	z-index: -1;
-	background-image: url('../images/bg-currentdate.svg');
+	background-image: url('../images/bg-current-date-time.svg');
 	background-position: top right;
 	background-size: contain;
 	background-repeat: no-repeat;
diff --git a/assets/images/bg-current-date-time.svg b/assets/images/bg-current-date-time.svg
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -34,7 +34,7 @@ const app = new Vue({
 				lose: false,
 			},
 			gameReset: false,
-			current: {
+			currentDateTime: {
 				time: "00:00:00",
 				date: "DD/MM/YYYY",
 			},
@@ -84,16 +84,16 @@ const app = new Vue({
 				this.resetGame();
 			},
 		},
-		"current.date": {
+		"currentDateTime.date": {
 			immediate: true,
 			handler() {
-				this.getCurrentDateFormat();
+				this.createCurrentDateFormat();
 			},
 		},
-		"current.time": {
+		"currentDateTime.time": {
 			immediate: true,
 			handler() {
-				this.getCurrentTimeFormat();
+				this.createCurrentTimeFormat();
 			},
 		},
 		"counter.init": {
@@ -318,22 +318,22 @@ const app = new Vue({
 				? 0 + number.toString()
 				: number.toString();
 		},
-		getCurrentDateFormat() {
+		createCurrentDateFormat() {
 			setInterval(() => {
 				const day = this.checkDigits(this.getCurrentDay());
 				const month = this.checkDigits(this.getCurrentMonth());
 				const year = this.checkDigits(this.getCurrentYear());
 
-				this.current.date = `${day}/${month}/${year}`;
+				this.currentDateTime.date = `${day}/${month}/${year}`;
 			}, 1000);
 		},
-		getCurrentTimeFormat() {
+		createCurrentTimeFormat() {
 			setInterval(() => {
 				const hours = this.checkDigits(this.getCurrentHours());
 				const minutes = this.checkDigits(this.getCurrentMinutes());
 				const seconds = this.checkDigits(this.getCurrentSeconds());
 
-				this.current.time = `${hours}:${minutes}:${seconds}`;
+				this.currentDateTime.time = `${hours}:${minutes}:${seconds}`;
 			}, 1000);
 		},
 		setCounter() {
diff --git a/index.html b/index.html
@@ -18,12 +18,12 @@
 	<body>
 		<div id="app" v-cloak>
 			<div class="page-content">
-				<div class="current-date">
-					<time :datetime="`${current.date}`">
-						{{ current.date }}
+				<div class="current-date-time">
+					<time :datetime="`${currentDateTime.date}`">
+						{{ currentDateTime.date }}
 					</time>
-					<time :datetime="`${current.time}`">
-						{{ current.time }}
+					<time :datetime="`${currentDateTime.time}`">
+						{{ currentDateTime.time }}
 					</time>
 				</div>
 
