implement showing last modification date

.gitignore

@@ -1 +1,3 @@
 node_modules
+dist
+*.pid

.gitlab-ci.yml

@@ -1,28 +1,17 @@
 image: node:latest
 
 before_script:
-  - echo "these are the currently installed node packages "
-  - npm list -g
-  - npm list minify -g || npm install  minify -g
-  - npm list uglify -g || npm install  uglify -g
+  - npm list grunt-cli -g || npm install grunt-cli -g
+  - npm install
 
 pages:
   stage: deploy
 
   script: 
-  - rm public -Rf
-  - mkdir -p min
-  - minify --js *.js > min/code.js
-  - minify --html index.html > min/index.html
-  - minify --css *.css > min/style.css
-  
-  - mkdir -p ugly
-  - uglify --css --source min/*.css --output ugly/style.css
-  - uglify --source min/*.js --output ugly/code.js
-  
-  - cp ugly public -r
-  - cp min/*.html public/
-  
+  - grunt
+  - mv dist public
+  - ls public -al
+ 
   artifacts:
     paths:
     - public

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true
+}

Gruntfile.js

@@ -0,0 +1,49 @@
+module.exports = function(grunt) {
+    grunt.initConfig({
+        htmlmin: {
+            dist: {
+                options: {
+                    removeComments: true,
+                    collapseWhitespace: true
+                },
+                files: {
+                    'dist/index.html': 'index.html' // 'destination': 'source'
+                }
+            }
+        },
+
+        cssmin: {
+            target: {
+                files: {
+                    'dist/style.css': ['style.css']
+                }
+            }
+        },
+
+        uglify: {
+            options: {
+                banner: '/* <%= grunt.template.today() %> */\n',
+                compress: true
+            },
+            dist: {
+                files: {
+                    'dist/build.min.js': ['functions.js', 'code.js']
+                }
+            }
+        },
+
+        watch: {
+            scripts: {
+                files: ['*.js', '*.html', '*.css'],
+                tasks: ['default']
+            }
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-uglify-es');
+    grunt.loadNpmTasks('grunt-contrib-htmlmin');
+    grunt.loadNpmTasks('grunt-contrib-cssmin');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+
+    grunt.registerTask('default', ['uglify', 'htmlmin', 'cssmin']);
+};

code.js

@@ -1,17 +1,15 @@
-
-window.onload = function(){
-
+window.onload = function() {
     var elems = getInputElements();
 
-    for(var element of elems){
-        
-        if(element.nextElementSibling !== null){
+    for (var element of elems) {
+        if (element.nextElementSibling !== null) {
             //element.addEventListener("keyup", this.focusNextMaskElement);
-            element.addEventListener("change", this.focusNextMaskElement);
+            element.addEventListener('change', this.focusNextMaskElement);
             //element.addEventListener("keypress", this.focusNextMaskElement);
-            element.addEventListener("paste", this.focusNextMaskElement);
-            element.addEventListener("input", this.focusNextMaskElement);
+            element.addEventListener('paste', this.focusNextMaskElement);
+            element.addEventListener('input', this.focusNextMaskElement);
         }
-    };
-    console.log("hiello");
-}
+    }
+
+    this.injectLastModificationDate();
+};

functions.js

@@ -1,34 +1,42 @@
-function getInputElements(){
-    return document.getElementsByClassName("mask");
+function getInputElements() {
+    return document.getElementsByClassName('mask');
 }
 
-function isMaskElementSelected(){
+function isMaskElementSelected() {
     var focussed = document.activeElement;
-    return focussed.classList.contains("mask") === true;
+    return focussed.classList.contains('mask') === true;
 }
 
-function isSelectedElementLast(){
+function isSelectedElementLast() {
     return document.activeElement.nextElementSibling === null;
 }
 
-function removeActiveInputText(){
-    if(isMaskElementSelected()){
-        document.activeElement.value = "";
+function removeActiveInputText() {
+    if (isMaskElementSelected()) {
+        document.activeElement.value = '';
     }
 }
 
-function focusNextMaskElement(){
-    if( isMaskElementSelected() &&
-        !isSelectedElementLast()
-        ){
-        document.activeElement.nextElementSibling.focus();
+function focusNextMaskElement() {
+    if (isMaskElementSelected()) {
+        if (!isSelectedElementLast()) {
+            document.activeElement.nextElementSibling.focus();
+        } else {
+            document.focus();
+        }
     }
 }
 
-function clearForm(){
+function clearForm() {
     var elems = getInputElements();
 
-    for(var e of elems){
-        e.value = "";
+    for (var e of elems) {
+        e.value = '';
     }
-}
+}
+
+function injectLastModificationDate() {
+    var lastEditedElem = this.document.getElementById('lastEdit');
+    var lastEdited = new Date(this.document.lastModified);
+    lastEditedElem.textContent = lastEdited.toString();
+}

grunt-watch.sh

@@ -0,0 +1,40 @@
+#!/bin/bash
+# run grunt watch in background and let it be terminated from background
+
+pid_file=".grunt-watch.pid"
+
+function watch_start {
+    grunt watch > /dev/null 2>&1 &
+    echo $! >> $pid_file
+    echo "started grunt watch"
+}
+
+function watch_stop {
+    kill $(cat $pid_file)
+    rm $pid_file
+    echo "stopped grunt watch"
+}
+
+function watch_status {
+    if [ -e $pid_file ]
+    then
+        echo "grunt watch is running under pid(s) $(echo $(cat $pid_file))"
+    else
+        echo "grunt watch is not running in background."
+    fi
+}
+
+if (( $# > 0 ))
+then
+    if [ $1 = "start" ] 
+    then
+        watch_start
+    elif [ $1 = "stop" ]
+    then
+        watch_stop
+    else
+        watch_status
+    fi
+else 
+    watch_status
+fi

index.html

@@ -1,22 +1,24 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-<head>
-    <title>input mask</title>
-    <meta charset="utf-8">
-    <link rel="stylesheet" type="text/css" href="style.css">
-    <script src="functions.js"></script>
-</head>
-<body>
-    <section id="auth">
-        <form action="">
-            <input type="text" class="mask">
-            <input type="text" class="mask">
-            <input type="text" class="mask">
-            <input type="text" class="mask">
-            <input type="text" class="mask">
-        </form>
-        <button onclick="clearForm()">Clear</button>
-    </section>
-    <script src="code.js"></script>
-</body>
-</html>
+    <head>
+        <title>input mask</title>
+        <meta charset="utf-8" />
+        <link rel="stylesheet" type="text/css" href="style.css" />
+    </head>
+    <body>
+        <section id="auth">
+            <form action="">
+                <input type="text" class="mask" />
+                <input type="text" class="mask" />
+                <input type="text" class="mask" />
+                <input type="text" class="mask" />
+                <input type="text" class="mask" />
+            </form>
+            <button onclick="clearForm()">Clear</button>
+        </section>
+        <section>
+            <p>Last code edit on <span id="lastEdit"></span></p>
+        </section>
+        <script src="build.min.js"></script>
+    </body>
+</html>

inputMask.code-workspace

@@ -4,5 +4,15 @@
 			"path": "."
 		}
 	],
-	"settings": {}
+	"settings": {
+		"prettier.singleQuote": true,
+		"[javascript]": {
+			"editor.defaultFormatter": "esbenp.prettier-vscode"
+		},
+		"editor.formatOnSave": true,
+		"prettier.disableLanguages": [
+			"yaml",
+			"yml"
+		]
+	}
 }

package.json

@@ -0,0 +1,27 @@
+{
+    "name": "challenge_input-mask",
+    "version": "1.0.0",
+    "description": "",
+    "main": "code.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+ssh://git@gitlab.com/hoschi-it/singleNumberInputMask.git"
+    },
+    "author": "",
+    "license": "ISC",
+    "bugs": {
+        "url": "https://gitlab.com/hoschi-it/singleNumberInputMask/issues"
+    },
+    "homepage": "https://gitlab.com/hoschi-it/singleNumberInputMask#README",
+    "devDependencies": {
+        "grunt": "^1.0.4",
+        "grunt-contrib-cssmin": "^3.0.0",
+        "grunt-contrib-htmlmin": "^3.1.0",
+        "grunt-contrib-uglify-es": "^3.3.0",
+        "grunt-contrib-watch": "^1.1.0",
+        "prettier": "^1.19.1"
+    }
+}

style.css

@@ -1,4 +1,17 @@
-input {
+body {
+    background-color: #e5dfd0;
+}
+
+#auth form {
+    width: 200px;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-gap: 0px;
+}
+
+#auth form input {
     max-width: 100px;
     font-size: xx-large;
-}
+    width: 100%;
+    height: 100%;
+}