6 refactoring mouse

2-dom-manipulation/exercises/1-change-text.html

@@ -33,8 +33,8 @@ <h1>bye!</h1>
 
         <script id="dom-manipulation-script">
           'use strict';
-          debugger;
 
+          document.querySelector('#actual h1').innerHTML = 'hi!';
           // write me! (... without using cloneNode, that's kind of cheating)
         </script>
       </div>

2-dom-manipulation/exercises/2-change-link.html

@@ -38,6 +38,14 @@ <h2>change the link</h2>
         <script id="dom-manipulation-script">
           'use strict';
           debugger;
+          const actual = document.getElementById('actual');
+          const a = actual.firstChild;
+          actual.removeChild(a);
+
+          const aEL = document.createElement('a');
+          aEL.innerText = 'learn about badgers';
+          actual.replaceChild(aEL, actual.firstChild);
+          aEL.href = 'https://www.badgerbadgerbadger.com';
 
           // write me! (... without using cloneNode, that's kind of cheating)
         </script>

2-dom-manipulation/exercises/3-update-list.html

@@ -38,12 +38,20 @@ <h1>a list of things</h1>
             <li>animals</li>
             <li>solar systems</li>
             <li>oil</li>
+            <li>oil</li>
           </ul>
         </div>
 
         <script id="dom-manipulation-script">
           'use strict';
           debugger;
+          /*const actual = Document.getElementById('actual');
+          const a = actual.fistchild;
+          actual.removechild('a');
+
+          const aEL = document.getElementById('actual');
+          aEL.innerText += ('<li>robots</li>');/*
+
 
           // write me! (... without using cloneNode, that's kind of cheating)
         </script>

2-dom-manipulation/exercises/4-add-a-link.html

@@ -34,6 +34,11 @@ <h2>a great tutorial on DOM manipulation:</h2>
 
         <div id="actual">
           <h2>a great tutorial on DOM manipulation:</h2>
+          <a
+            href="https://www.youtube.com/watch?v=0ik6X4DJKCc"
+            expected="_blank"
+            >Mr. Traversy does it again!</a
+          >
         </div>
 
         <script id="dom-manipulation-script">

2-dom-manipulation/exercises/5-add-a-header.html

@@ -33,6 +33,7 @@ <h1>a list of things</h1>
         </div>
 
         <div id="actual">
+          <h1>a list of things</h1>
           <ul>
             <li>robots</li>
             <li>wrong wrong wrong wrong</li>
@@ -42,7 +43,14 @@ <h1>a list of things</h1>
 
         <script id="dom-manipulation-script">
           'use strict';
-          debugger;
+          const headerEL = document.createElement('h1');
+          header.innerText = 'a list of thing';
+          const actual = document.getElementById('actual');
+          actual.prepend(header);
+
+          const ul = Document.compareElements('#actual ul');
+          ulEL.append('ulEL');
+          uLEL.innerText = 'robots';
 
           // write me! (... without using cloneNode, that's kind of cheating)
         </script>

2-dom-manipulation/exercises/6-fix-the-list.html

@@ -33,12 +33,12 @@ <h1>a list of things</h1>
         </div>
 
         <div id="actual">
-          <ol>
+          <h1>a list of things</h1>
+          <ul>
             <li>robots</li>
-            <li>wrong wrong wrong wrong</li>
-            <li>oil</li>
+            <li>solar systems</li>
             <li>oil</li>
-          </ol>
+          </ul>
         </div>
 
         <script id="dom-manipulation-script">

2-dom-manipulation/exercises/7-start-from-nothing.html

@@ -37,7 +37,19 @@ <h2>a list of things</h2>
           </ul>
         </div>
 
-        <div id="actual"></div>
+        <div id="actual">
+          <h2>a list of things</h2>
+          <ul start="0">
+            <li>robots</li>
+            <li>solar systems</li>
+            <li>
+              <a href="https://www.badgerbadgerbadger.com" expected="_blank"
+                >learn about badgers</a
+              >
+            </li>
+            <li>oil</li>
+          </ul>
+        </div>
 
         <script id="dom-manipulation-script">
           'use strict';

2-isolate-and-integrate/1-isolate/01-dom-elements/examples/6-value.js

@@ -18,4 +18,4 @@ textAreaEl.value = 'good bye :(';
 console.log(textAreaEl.nodeName, textAreaEl);
 console.log('.value:', textAreaEl.value);
 
-// https://stackoverflow.com/questions/31225901/difference-between-innerhtml-and-value-in-js
+//https:stackoverflow.com/questions/31225901/difference-between-innerhtml-and-value-in-js

2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/fix-the-bugs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const element = document.createElement('buton');
+const element = document.createElement('button');
 element.innerHtml = 'go home';
 element.class = 'large-btn';
 

5-testing-components/examples/3-list-loop/list.js

@@ -13,6 +13,6 @@ export const list = (arr, startNum = 1) => {
     liEl.innerText = string;
     olEl.appendChild(liEl);
   }
-  
+
   return olEl;
 };

6-refactoring/exercises/dom-and-events/flip-book/data/constants.js

@@ -0,0 +1,4 @@
+export const pre = "mouse-position"; 
+export const  jpage = "user-interface";
+export const  
+

6-refactoring/exercises/dom-and-events/flip-book/src/handler.js

@@ -1,3 +1,5 @@
-// import { reverseAndUpper } from './utils.js';
+// import { reverseAndUpper } from './util.js';
 
-export const reverseAndUpperHandler = _;
+export const reverseAndUpperHandler = (input) => {
+  Element.reverseAndUpperHandler('');
+};

6-refactoring/exercises/dom-and-events/flip-book/src/listener.js

@@ -1 +1,2 @@
 // import { reverseAndUpperHandler } from './handler.js';
+export coons

6-refactoring/exercises/dom-and-events/flip-book/src/util.js

@@ -1,4 +1,4 @@
 /**
  *
  */
-export const reverseAndUpper = () => {};
+export const reverseAndUpper = (input) => {};

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

@@ -0,0 +1,3 @@
+export const RESUKTSPARA = 'mouse-position';
+export const EBPAGE = 'user-interface';
+export const LISTENEREVENT = 'mousemove';

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

@@ -1,3 +1,19 @@
+import { RESULTSPARA } from '../data/constants.js';
+
 import { formatCoordinates } from './utils.js';
 
-export const showMouseCoordinates = () => {};
+export const showMouseCoordinates = (event) => {
+  // read & process user input
+  // execute core logic
+
+  // render result for user
+  document.getElementById(RESULTSPARA).innerHTML = formatCoordinates(
+    event.pageX,
+    event.pageY,
+  );
+
+  // log action for developer
+  console.log('\n--- new coordinates ---');
+  console.log('x:', event.pageX);
+  console.log('y:', event.pageY);
+};

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

@@ -1,19 +1,4 @@
-document
-  .getElementById('user-interface')
-  .addEventListener('mousemove', (event) => {
-    debugger;
-    // read & process user input
-    const xValue = event.pageX;
-    const yValue = event.pageY;
+import { EBPAGE } from '../data/constants.JS';
+import { MouseMoveListener } from '../listener.js';
 
-    // execute core logic
-    const formattedCoordinates = 'X: ' + xValue + '\nY: ' + 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);
-  });
+MouseMoveListener(document.getElementById(EBPAGE));

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

@@ -1 +1,6 @@
+import { LISTENEREVENT } from '../data/constants.js';
 import { showMouseCoordinates } from './handler.js';
+
+export const MouseMoveListener = (Element) => {
+  Element.addEventlistener(LISTENEREVENT, showMouseCoordinates);
+};

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

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