test code for review

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-  "liveServer.settings.port": 5501
+  "liveServer.settings.port": 5501,
+  "cSpell.words": [
+    "nums"
+  ]
 }

0-data-roles/0-one-file/src/data/constants.js

@@ -0,0 +1,14 @@
+export const INITIAL_STATE = {
+    currentNumber: 0,
+    allNumbers: [],
+  };
+
+  export const EVENTS = {
+    NEXT_NUMBER_CHANGE: 'next-number',
+    MOUSE_OVER_HISTORY: 'number-history',
+  };
+
+  export const HTML_CLASSES = {
+    NUMBER_ITEM: 'number-item',
+  };
+

0-data-roles/0-one-file/src/data/state.js

@@ -0,0 +1,6 @@
+
+const state = {
+    currentNumber: 0,
+    allNumbers: [],
+  };
+export default state;

0-data-roles/0-one-file/src/handlers.js

@@ -0,0 +1,25 @@
+import { INITIAL_STATE, EVENTS, HTML_CLASSES } from './data/constants.js';
+const handlers = (event) => {
+    const backwardsContainer = document.getElementById(EVENTS.MOUSE_OVER_HISTORY);
+
+   /*const eventsNextNumberChange = document.getElementById(EVENTS.NEXT_NUMBER_CHANGE,);
+      // Handler logic for when the user changes the 'next-number' input
+
+const eventsMouseOverHistory = document.getElementById(EVENTS.MOUSE_OVER_HISTORY,);
+    // Handler logic for when the user moves the mouse over 'number-history'
+*/
+const nextNumber = Number(inputValue);
+
+// --- update state ---
+state.allNumbers.push(nextNumber);
+state.currentNumber = state.allNumbers.at(-1);
+    const targetText = event.target.innerText;
+
+    backwardsContainer.innerHTML = liString + backwardsContainer.innerHTML;
+
+  if (event.target.nodeName !== 'LI') {
+    return;
+  };
+
+  const liString = `<li class="number-item">${state.currentNumber}</li>`;
+};

0-data-roles/0-one-file/src/init.js

@@ -1,37 +1,39 @@
-debugger; // once when the program is initialized
+import './listeners.js'
 
-const state = {
+/*debugger; // once when the program is initialized
+
+/*const state = {
   currentNumber: 0,
   allNumbers: [],
-};
+};*/
 
 // ==== the user can add a new number to state ====
 
-document.getElementById('next-number').addEventListener('change', (event) => {
-  debugger; // each time the user changes the 'next-number' input
-
+//document.getElementById(EVENTS.NEXT_NUMBER_CHANGE).addEventListener('change', (event) => {
+  //debugger; // each time the user changes the 'next-number' input
+/*
   // --- read the user's input ---
   const inputValue = event.target.value;
   const nextNumber = Number(inputValue);
 
   // --- update state ---
   state.allNumbers.push(nextNumber);
-  state.currentNumber = state.allNumbers.at(-1);
+  state.currentNumber = state.allNumbers.at(-1);*/
 
   // --- update UI ---
 
   // create new HTML string
-  const liString = `<li class="number-item">${state.currentNumber}</li>`;
+ /* const liString = `<li class="number-item">${state.currentNumber}</li>`;
 
   // add the new item to the history
-  const backwardsContainer = document.getElementById('number-history');
+  const backwardsContainer = document.getElementById(EVENTS.MOUSE_OVER_HISTORY);
   backwardsContainer.innerHTML = liString + backwardsContainer.innerHTML;
 });
 
 // ==== the user can change the input's value ====
 
 document
-  .getElementById('number-history')
+  .getElementById(EVENTS.MOUSE_OVER_HISTORY)
   .addEventListener('mouseover', (event) => {
     debugger; // each time the user moves the mouse over 'number-history'
 
@@ -48,5 +50,6 @@ document
     state.currentNumber = userNumber;
 
     // update the UI
-    document.getElementById('next-number').value = state.currentNumber;
+    document.getElementById(EVENTS.NEXT_NUMBER_CHANGE).value = state.currentNumber;
   });
+*/

0-data-roles/0-one-file/src/listeners.js

@@ -0,0 +1,9 @@
+import handlers from './handlers.js'
+import { INITIAL_STATE, EVENTS, HTML_CLASSES } from './data/constants.js';
+
+const listener = () => {
+document.getElementById(EVENTS.NEXT_NUMBER_CHANGE).addEventListener('change', handlers);
+};
+
+export default listener;
+

0-data-roles/0-one-file/src/utils.js

@@ -0,0 +1,7 @@
+import { INITIAL_STATE, EVENTS, HTML_CLASSES } from './data/constants.js';
+
+
+  // --- read the user's input ---
+  const inputValue = event.target.value;
+  const nextNumber = Number(inputValue);
+

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

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

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

@@ -6,17 +6,22 @@
  * @param {string} [id=''] - the element's id
  * @returns {HTMLDetailsElement}
  */
-export const info = (caption, mainText, id = '') => {
-  const detailsEl = document.createElement('_');
-  _;
+export const info = (caption, mainText, id = captionColor = 'default', mainTextColor = 'default') => {
+
+  const detailsEl = document.createElement('details');
+  detailsEl.id = id; 
+  console.log (detailsEl);
 
-  const summaryEl = document.createElement('_');
-  _;
-  _;
+  const summaryEl = document.createElement('summary');
+  summaryEl.textContentCaption = caption;
+  summaryEl.style.color = captionColor;
 
-  const pEl = document.createElement('_');
-  _;
-  _;
+  const pEl = document.createElement('p');
+  pEl.textContent = mainText ;
+  pEl.style.color = mainTextColor;
+
+  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,16 @@
-// 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;
+
+  const reversedUppercase = reverseAndUpper(input);
+  document.getElementById(REVERSED_OUTPUT).innerHTML = reversedUppercase;
+
+  // log result for developers
+  console.log('\n --- user action ---');
+  console.log('REVERSE_INPUT', input);
+  console.log('reversedUppercase:', reversedUppercase);
+};

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

@@ -1,19 +1,23 @@
-document.getElementById('input').addEventListener('keyup', (event) => {
+import { REVERSE_INPUT, KEY_UP, REVERSED_OUTPUT} from '../data/constants.js';
+
+
+import './listener.js';
+// listener
+//document.getElementById(REVERSE_INPUT).addEventListener('keyup', 
+
+/* handler
+
+(event) => {
   debugger;
   // read and process user input
   const input = event.target.value;
 
   // execute core logic
+
+  // util
   const upperCased = input.toUpperCase();
   const splitted = upperCased.split('');
   const reversed = splitted.reverse();
-  const reversedUppercase = reversed.join('');
-
+  const reversedUppercase = reversed.join('');*/
+//
   // render result for user
-  document.getElementById('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,4 @@
-// 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,9 @@
-/**
- *
- */
-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"', () => {

exercises/convertTemperature/src/constants.js

@@ -0,0 +1,4 @@
+export const SPACE = /\S+/;
+export const TEMPERATURE_INPUT = 'temperatures';
+export const CONVERT_TEMPERATURE_CONTAINER = 'convertedTemperatures';
+export const MESSAGE_ERROR_NOT_INTEGER = 'The "%S" contains values different of integer numbers';

exercises/convertTemperature/src/handler.js

@@ -0,0 +1,31 @@
+import {
+  SPACE,
+  TEMPERATURE_INPUT,
+  CONVERT_TEMPERATURE_CONTAINER,
+  MESSAGE_ERROR_NOT_INTEGER,
+} from './constants.js';
+import convertedTemperature from './utils/utils.js';
+const handlers = (event) => {
+  debugger; // each time the user changes the 'temperatures' input
+  const convertedTemperaturesContainer = document.getElementById(
+    CONVERT_TEMPERATURE_CONTAINER,
+  );
+  // Erase previous content
+  convertedTemperaturesContainer.innerHTML = '';
+  // Get the text input
+  const fahrenheitTextList = event.target.value;
+  let convertedTemp = convertedTemperaturesContainer.innerHTML;
+  // Validate it
+  if (fahrenheitTextList) {
+    var convertedTempTextList = convertedTemperature(fahrenheitTextList);
+    const convertedTemperaturesLst = '';
+    const convertedTempList = convertedTempTextList.trim().split(SPACE);
+    convertedTempList.forEach((celsius) => {
+      // Render the result
+      const liString = `<li class="number-item">${celsius}</li>`;
+      convertedTemp = convertedTemp + liString;
+    });
+    convertedTemperaturesContainer.innerHTML = convertedTemp;
+  }
+};
+export default handlers;

exercises/convertTemperature/src/init.js

@@ -1,38 +1,3 @@
 debugger; // once when the program is initialized
-
-document.getElementById('temperatures').addEventListener('change', (event) => {
-  debugger; // each time the user changes the 'temperatures' input
-
-  const convertedTemperaturesContainer = document.getElementById(
-    'convertedTemperatures',
-  );
-
-  // Erase previous content
-  convertedTemperaturesContainer.innerHTML = '';
-
-  // Get the text input
-  const fahrenheitTextList = event.target.value;
-
-  // Validade it
-  if (fahrenheitTextList) {
-    if (!/^[0-9\s]*$/.test(fahrenheitTextList)) {
-      window.alert(
-        `The '${fahrenheitTextList}' contains values different of integer numbers`,
-      );
-    }
-
-    // Sanitize it
-    const fahrenheitList = fahrenheitTextList.trim().split(/\s+/);
-
-    fahrenheitList.forEach((fahrenheit) => {
-      // Do the math
-      const celsius = ((fahrenheit - 32) * 5) / 9;
-
-      // Render the result
-      const liString = `<li class="number-item">${celsius.toFixed(2)}</li>`;
-
-      convertedTemperaturesContainer.innerHTML =
-        convertedTemperaturesContainer.innerHTML + liString;
-    });
-  }
-});
+import listener from './listener.js';
+listener();

exercises/convertTemperature/src/listener.js

@@ -0,0 +1,9 @@
+import handlers from './handlers.js';
+import {SPACE,TEMPERATURE_INPUT,CONVERT_TEMPERATURE_CONTAINER,MESSAGE_ERROR_NOT_INTEGER,
+} from './constants.js';
+const listener = () => {
+  document
+    .getElementById(TEMPERATURE_INPUT)
+    .addEventListener('change', handlers);
+};
+export default listener;

exercises/convertTemperature/src/utils/util.js

@@ -0,0 +1,21 @@
+import {
+  SPACE,
+  TEMPERATURE_INPUT,
+  CONVERT_TEMPERATURE_CONTAINER,
+  MESSAGE_ERROR_NOT_INTEGER,
+} from '../constants.js';
+export const convertedTemperature = (fahrenheitTextList) => {
+  if (!/^[0-9\s]*$/.test(fahrenheitTextList)) {
+    window.alert(MESSAGE_ERROR_NOT_INTEGER.replace('%S', fahrenheitTextList));
+  }
+  // Sanitize it
+  const fahrenheitList = fahrenheitTextList.trim().split(SPACE);
+  var convertedTemperatures = '';
+  fahrenheitList.forEach((fahrenheit) => {
+    // Do the math
+    const celsius = ((fahrenheit - 32) * 5) / 9;
+    convertedTemperatures = convertedTemperatures + ' ' + celsius.toFixed(2);
+  });
+  return convertedTemperatures;
+};
+export default convertedTemperature;

exercises/convertTemperature/src/utils/utils.spec.js

@@ -0,0 +1,11 @@
+import { convertedTemperature } from './utils.js';
+describe('convertedTemperature: fahrenheit converts into celsius', () => {
+  it('should handle input with only spaces', () => {
+    const returned = convertedTemperature('32');
+    expect(returned).toEqual(' 0.00');
+  });
+  it('should handle input with only spaces', () => {
+    const returned = convertedTemperature('32 64 128');
+    expect(returned).toEqual(' 0.00 17.78 53.33');
+  });
+});