exercise-mouse-coordinate-done

6-refactoring/exercises/dom-and-events/mouse-coordinates/data/constants.js

@@ -0,0 +1,3 @@
+export const MOUSE_USER_INTERFACE = 'user-interface';
+export const MOUSE_MOVE = 'mousemove';
+export const MOUSE_POSITION = 'mouse-position';

6-refactoring/exercises/dom-and-events/mouse-coordinates/src/handler.js

@@ -1,3 +1,16 @@
-import { formatCoordinates } from './utils.js';
+import { formatCoordinates } from './util.js';
 
-export const showMouseCoordinates = () => {};
+export const showMouseCoordinates = (event) => {
+        debugger;
+        // read & process user input
+        const xValue = event.pageX;
+        const yValue = event.pageY;
+        // execute core logic
+        const formattedCoordinates = formatCoordinates(xValue, yValue);
+        // render result for user
+        document.getElementById(MOUSE_POSITION).innerHTML = formattedCoordinates;
+        // log action for developers
+        console.log('\n--- new coordinates ---');
+        console.log('x:', xValue);
+        console.log('y:', yValue);
+      };

6-refactoring/exercises/dom-and-events/mouse-coordinates/src/init.js

@@ -1,4 +1,7 @@
-document
+
+import './listener.js'
+
+/*document
   .getElementById('user-interface')
   .addEventListener('mousemove', (event) => {
     debugger;
@@ -16,4 +19,4 @@ document
     console.log('\n--- new coordinates ---');
     console.log('x:', xValue);
     console.log('y:', yValue);
-  });
+  });*/

6-refactoring/exercises/dom-and-events/mouse-coordinates/src/listener.js

@@ -1 +1,13 @@
 import { showMouseCoordinates } from './handler.js';
+document
+  .getElementById(MOUSE_USER_INTERFACE)
+  .addEventListener(MOUSE_MOVE, showMouseCoordinates);
+
+
+
+
+
+
+
+
+

6-refactoring/exercises/dom-and-events/mouse-coordinates/src/util.js

@@ -1,4 +1,5 @@
-/**
- *
- */
-export const formatCoordinates = () => {};
+export const formatCoordinates = (xValue , yValue) => {
+    // execute core logic
+    const formattedCoordinates = 'X: ' + xValue + '\nY: ' + yValue;
+    return formattedCoordinates;
+};

6-refactoring/exercises/dom-and-events/mouse-coordinates/src/util.spec.js

@@ -1,4 +1,4 @@
-import { formatCoordinates } from './utils.js';
+import { formatCoordinates } from './util.js';
 
 describe('formatCoordinates: formats two numbers into a coordinates string', () => {
   it('positive numbers', () => {