Pallavi 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"', () => {

exercises/convertTemperature/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Convert Temperatures</title>
+
+    <link href="./styles.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="user-interface">
+      <input id="temperatures" type="text" value="" />
+
+      <ul id="convertedTemperatures"></ul>
+    </div>
+
+    <script type="module" src="./src/init.js"></script>
+  </body>
+</html>

exercises/convertTemperature/src/data/constants.js

@@ -0,0 +1,15 @@
+// Events
+export const ON_CHANGE = 'change';
+
+// Selectors
+export const TEMPERATURES_INPUT = 'temperatures';
+export const CONVERT_TEMPERATURE_CONTAINER = 'convertedTemperatures';
+
+// Regex
+export const SPACE_REGEX = /\s+/;
+export const NUMBERS_SPACES_REGEX = /^[0-9\s]*$/;
+export const PLACEHOLDER_REGEX = /{([0-9]+)}/g;
+
+// Messages
+export const MESSAGE_ERROR_NOT_INTEGER =
+  "The '{0}' contains values different of integer numbers";

exercises/convertTemperature/src/handlers/convert-temperatures-handler.js

@@ -0,0 +1,65 @@
+import {
+  CONVERT_TEMPERATURE_CONTAINER,
+  MESSAGE_ERROR_NOT_INTEGER,
+} from '../data/constants.js';
+import { fahrenheitToCelcius } from '../logic/convert-temperatures.js';
+import { parseToNumberArray } from '../utils/parsers.js';
+import { replacePlaceholders } from '../utils/strings.js';
+import { containsOnlyNumbersAndSpaces } from '../utils/validators.js';
+
+const prepareOutputContainer = () => {
+  const convertedTemperaturesContainer = document.getElementById(
+    CONVERT_TEMPERATURE_CONTAINER,
+  );
+  convertedTemperaturesContainer.innerHTML = '';
+  return convertedTemperaturesContainer;
+};
+
+const renderOutputContainer = (outputContainer, celsiusList) => {
+  celsiusList.forEach((celsius) => {
+    const liString = `<li class="number-item">${celsius.toFixed(2)}</li>`;
+    outputContainer.innerHTML = outputContainer.innerHTML + liString;
+  });
+};
+
+const validateTextInput = (text) => {
+  if (!text) {
+    throw new Error();
+  }
+
+  if (!containsOnlyNumbersAndSpaces(text)) {
+    throw new Error(replacePlaceholders(MESSAGE_ERROR_NOT_INTEGER, text));
+  }
+};
+
+const convertTemperatures = (fahrenheitTextList) => {
+  validateTextInput(fahrenheitTextList);
+  const fahrenheitList = parseToNumberArray(fahrenheitTextList);
+  const celsiusList = fahrenheitList.map((fahrenheit) => {
+    return fahrenheitToCelcius(fahrenheit);
+  });
+  return celsiusList;
+};
+
+/**
+ * Add an 'change' event listener to the element whose id is 'temperatures'.
+ *
+ * @param {Event} event - the 'change' event.
+ */
+export const convertTemperaturesHandler = (event) => {
+  try {
+    // Input
+    const convertedTemperaturesContainer = prepareOutputContainer();
+
+    // Logic
+    const fahrenheitTextList = event.target.value;
+    const celsiusList = convertTemperatures(fahrenheitTextList);
+
+    // Output
+    renderOutputContainer(convertedTemperaturesContainer, celsiusList);
+  } catch (error) {
+    if (error.message) {
+      window.alert(error.message);
+    }
+  }
+};

exercises/convertTemperature/src/handlers/convert-temperatures-handler.test.js

@@ -0,0 +1,49 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import {
+  CONVERT_TEMPERATURE_CONTAINER,
+  MESSAGE_ERROR_NOT_INTEGER,
+  TEMPERATURES_INPUT,
+} from '../data/constants';
+import { replacePlaceholders } from '../utils/strings';
+import { convertTemperaturesHandler } from './convert-temperatures-handler';
+
+describe('convertTemperaturesHandler', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div>
+        <input id="${TEMPERATURES_INPUT}" />
+        <div id="${CONVERT_TEMPERATURE_CONTAINER}"></div>
+      </div>
+    `;
+  });
+
+  it('should convert the input temperatures', () => {
+    // GIVEN
+    const event = { target: { value: '0 32 64' } };
+    // WHEN
+    convertTemperaturesHandler(event);
+    // THEN
+    const innerHTML = document.getElementById(
+      CONVERT_TEMPERATURE_CONTAINER,
+    ).innerHTML;
+    expect(innerHTML).toContain('>-17.78<');
+    expect(innerHTML).toContain('>0.00<');
+    expect(innerHTML).toContain('>17.78<');
+  });
+
+  it('should show an alert when invalid input', () => {
+    // GIVEN
+    const input = '0 invalid 64';
+    const event = { target: { value: input } };
+    window.alert = jest.fn();
+    // WHEN
+    convertTemperaturesHandler(event);
+    // THEN
+    expect(window.alert).toHaveBeenCalledWith(
+      replacePlaceholders(MESSAGE_ERROR_NOT_INTEGER, input),
+    );
+  });
+});

exercises/convertTemperature/src/init.js

@@ -0,0 +1,4 @@
+import { convertTemperaturesHandler } from './handlers/convert-temperatures-handler.js';
+import { addTemperaturesChangeListener } from './listeners/temperatures-input-listener.js';
+
+addTemperaturesChangeListener(convertTemperaturesHandler);

exercises/convertTemperature/src/listeners/temperatures-input-listener.js

@@ -0,0 +1,12 @@
+import { ON_CHANGE, TEMPERATURES_INPUT } from '../data/constants.js';
+
+/**
+ * Add an 'change' event listener to the element whose id is 'temperatures'.
+ *
+ * @param {function} handler - Callback function to be called when the event occurs.
+ */
+export const addTemperaturesChangeListener = (handler) => {
+  document
+    .getElementById(TEMPERATURES_INPUT)
+    ?.addEventListener(ON_CHANGE, handler);
+};

exercises/convertTemperature/src/listeners/temperatures-input-listener.test.js

@@ -0,0 +1,31 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { ON_CHANGE, TEMPERATURES_INPUT } from '../data/constants';
+import { addTemperaturesChangeListener } from './temperatures-input-listener';
+
+describe('addTemperatureChangeListener', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div>
+        <input id="${TEMPERATURES_INPUT}" />
+      </div>
+    `;
+  });
+
+  it('should add a handler to the temperature change', () => {
+    // GIVEN
+    const handler = jest.fn();
+    const dispatchChangeTemperatures = () => {
+      document
+        .getElementById(TEMPERATURES_INPUT)
+        .dispatchEvent(new window.Event(ON_CHANGE));
+    };
+    // WHEN
+    addTemperaturesChangeListener(handler);
+    dispatchChangeTemperatures();
+    // THEN
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+});

exercises/convertTemperature/src/logic/convert-temperatures.js

@@ -0,0 +1,9 @@
+/**
+ * Convert a temperature in Fahrenheit degrees to Celcius degrees.
+ *
+ * @param {number} fahrenheit - Temperature in Fahrenheit degrees.
+ * @returns {number} - Temperature in Celcius degrees.
+ */
+export const fahrenheitToCelcius = (fahrenheit) => {
+  return ((fahrenheit - 32) * 5) / 9;
+};

exercises/convertTemperature/src/logic/convert-temperatures.test.js

@@ -0,0 +1,14 @@
+import { fahrenheitToCelcius } from './convert-temperatures';
+
+describe('fahrenheitToCelcius', () => {
+  describe.each`
+    fahrenheit | expected
+    ${0}       | ${-17.77777777777778}
+    ${32}      | ${0}
+    ${64}      | ${17.77777777777778}
+  `('$fahrenheit fahrenheit', ({ fahrenheit, expected }) => {
+    it(`returns ${expected} celcius`, () => {
+      expect(fahrenheitToCelcius(fahrenheit)).toEqual(expected);
+    });
+  });
+});

exercises/convertTemperature/src/utils/parsers.js

@@ -0,0 +1,18 @@
+import { SPACE_REGEX } from '../data/constants.js';
+
+/**
+ * Convert a text containing numbers to an array of numbers.
+ * If the input text contains non valid numbers, NaN is used as its substitute.
+ *
+ * @param {string} text - The text to be parsed.
+ * @returns {number[]} - Array of numbers.
+ */
+export const parseToNumberArray = (text) => {
+  if (text) {
+    return text
+      .trim()
+      .split(SPACE_REGEX)
+      .map((textNumber) => Number(textNumber));
+  }
+  return [];
+};