add hidden fields

css/app.css

@@ -202,3 +202,20 @@ nav, .card {
 .bg-timebox input {
     color: black;
 }
+
+/*Hidden Boxes*/
+#hidden-one {
+    width: 1em;
+    height: 1em;
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+
+#hidden-two {
+    width: 1em;
+    height: 1em;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+}

index.html

@@ -821,6 +821,11 @@
             </div>
         </div>
     </div>
+
+    <template v-if="fun">
+        <div id="hidden-one" @click="tellJoke('pun', 'de')"></div>
+        <div id="hidden-two" @click="tellJoke('programming,coding,development')"></div>
+    </template>
 </div>
 
 <script src="js/codemirror.js"></script>

js/app.js

@@ -606,6 +606,10 @@ const TimeTrack = {
         },
         validateBooleans(value) {
             return value === 'true' || value === true;
+        },
+        tellJoke(category, language = 'en') {
+            let jokeService = new JokeService(category ?? undefined, language);
+            jokeService.tell();
         }
     },
     watch: {