exercise-flip-book

5-testing-components/exercises-write-components/game-board/game-board.js

@@ -4,4 +4,20 @@
  * @param {Array[]} arrayOfArrays - a 2D array representing the game board
  * @returns {HTMLTableElement} the rendered game board
  */
-export const gameBoard = (arrayOfArrays) => {};
+export const gameBoard = (arrayOfArrays) => {
+    console.log(arrayOfArrays)
+    const table = document.createElement('table');
+
+    for (const array of arrayOfArrays){
+      console.log(array);
+      const tr = document.createElement('tr');
+        for (const element of array){
+            console.log(element);
+            const td = document.createElement('td');
+            td.innerText = element ;
+            tr.appendChild(td);
+        }
+        table.appendChild(tr);
+    }
+    return table;
+};

5-testing-components/exercises-write-components/info/info.js

@@ -4,19 +4,24 @@
  * @param {string} caption - the title of this info drop-down
  * @param {string} mainText - the important information
  * @param {string} [id=''] - the element's id
+ * @param {string} [captionColor ='black'] - the color of the caption
+ * @param {string} [mainTextColor='black'] - the color of the main text
  * @returns {HTMLDetailsElement}
  */
-export const info = (caption, mainText, id = '') => {
-  const detailsEl = document.createElement('_');
-  _;
+export const info = (caption, mainText, id = 'details', captionColor = 'black',mainTextColor= 'black') => {
+  const detailsEl = document.createElement('details');
+  detailsEl.id = id;
+
+  const summaryEl = document.createElement('summary');
+  summaryEl.textContent = summary ;
+  summaryEl.style.color = captionColor;
 
-  const summaryEl = document.createElement('_');
-  _;
-  _;
+  const pEl = document.createElement('p');
+  pEl.textContent = mainText ;
+  pEl.style.color = mainTextColor;
 
-  const pEl = document.createElement('_');
-  _;
-  _;
+  detailsEl.appendChild(summaryEl);
+  detailsEl.appendChild(pEl);
 
   return detailsEl;
 };

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

@@ -0,0 +1,3 @@
+export const REVERSE_INPUT = 'input';
+export const REVERSED_OUTPUT = 'output';
+export const KEY_UP = 'key-up';

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

@@ -1,3 +1,23 @@
-// import { reverseAndUpper } from './utils.js';
+import { reverseAndUpper } from './util.js';
 
-export const reverseAndUpperHandler = _;
+export const reverseAndUpperHandler = (event) => {
+    debugger;
+    // read and process user input
+    const input = event.target.value;
+    console.log(event);
+
+    // execute core logic- utils
+    /*const upperCased = input.toUpperCase();
+    const splitted = upperCased.split('');
+    const reversed = splitted.reverse();*/
+    const reversedUppercase = reverseAndUpper(input);
+
+    // render result for user
+    document.getElementById(REVERSED_OUTPUT).innerHTML = reversedUppercase;
+
+    // log result for developers
+    console.log('\n --- user action ---');
+    console.log('input:', input);
+    console.log('reversedUppercase:', reversedUppercase);
+  };
+

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

@@ -1,19 +1,26 @@
-document.getElementById('input').addEventListener('keyup', (event) => {
+import {REVERSE_INPUT,REVERSED_OUTPUT,KEY_UP} from "../data/constants";
+import './listener.js' 
+// listener//
+
+// document.get... addEventListener('typeEvent', handler)
+// ----------------------listener-----------------------------|--handler-- till line 25--|
+/*document.getElementById(REVERSE_INPUT).addEventListener(KEY_UP,(event) => {
   debugger;
   // read and process user input
   const input = event.target.value;
+  console.log(event)
 
-  // execute core logic
+  // execute core logic- utils
   const upperCased = input.toUpperCase();
   const splitted = upperCased.split('');
   const reversed = splitted.reverse();
   const reversedUppercase = reversed.join('');
 
   // render result for user
-  document.getElementById('output').innerHTML = reversedUppercase;
+  document.getElementById(REVERSED_OUTPUT).innerHTML = reversedUppercase;
 
   // log result for developers
   console.log('\n --- user action ---');
   console.log('input:', input);
   console.log('reversedUppercase:', reversedUppercase);
-});
+});*/

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

@@ -1 +1,3 @@
-// import { reverseAndUpperHandler } from './handler.js';
+import { reverseAndUpperHandler } from './handler.js';
+
+ document.getElementById(REVERSE_INPUT).addEventListener(KEY_UP,reverseAndUpperHandler);

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

@@ -1,4 +1,10 @@
 /**
  *
  */
-export const reverseAndUpper = () => {};
+export const reverseAndUpper = (input) => {
+    const upperCased = input.toUpperCase();
+  const splitted = upperCased.split('');
+  const reversed = splitted.reverse();
+  const reversedUppercase = reversed.join('');
+  return reversedUppercase;
+};

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

@@ -1,4 +1,4 @@
-import { reverseAndUpper } from './utils.js';
+import { reverseAndUpper } from './util.js';
 
 describe('reverseAndUpper: reverses a string and upper-cases all the letters', () => {
   it('"lower-case letters"', () => {