Pallavi exercise mouse coordinates

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;
 };

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,30 @@
  * @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('_');
-  _;
-  _;
+  const summaryEl = document.createElement('summary');
+  summaryEl.textContent = summary;
+  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,22 @@
-// 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,5 @@
-// 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"', () => {

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,20 @@
-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;
+
+        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,6 +1,8 @@
-document
-  .getElementById('user-interface')
-  .addEventListener('mousemove', (event) => {
+
+import './listener.js' 
+/*document
+  .getElementById(MOUSE_USER_INTERFACE)
+  .addEventListener(MOUSE_MOVE, (event) => {
     debugger;
     // read & process user input
     const xValue = event.pageX;
@@ -10,10 +12,10 @@ document
     const formattedCoordinates = 'X: ' + xValue + '\nY: ' + yValue;
 
     // render result for user
-    document.getElementById('mouse-position').innerHTML = formattedCoordinates;
+    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/listener.js

@@ -1 +1,5 @@
 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,9 @@
 /**
  *
  */
-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', () => {

6-refactoring/exercises/state/no-copies/src/handler.js

@@ -1,4 +1,22 @@
 import { saveNoCopies } from './utils.js';
 import { state } from '../data/state.js';
 
-export const saveNoCopiesHandler = () => {};
+export const saveNoCopiesHandler = () => {
+  let userInput = null;
+  while (userInput === null) {
+    userInput = prompt('enter a string to save');
+  }
+
+  // execute core logic
+  const alreadySaved = data.noCopies.includes(userInput);
+  if (!alreadySaved) {
+    data.noCopies.push(userInput);
+  }
+
+  // communicate result to user
+  const message = data.noCopies.join(', ');
+  alert(message);
+
+  // log interaction
+  console.log(data);
+};

6-refactoring/exercises/state/no-copies/src/util.js

@@ -1,4 +1,13 @@
 /**
  *
  */
-export const saveNoCopies = () => {};
+export const saveNoCopies = () => {
+  const alreadySaved = data.noCopies.includes(userInput);
+  if (!alreadySaved) {
+    data.noCopies.push(userInput);
+  }
+
+  // communicate result to user
+  const message = data.noCopies.join(', ');
+  alert(message);
+};

exercises/convertTemperature/src/utils/utils.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);
+  const convertedTemperatures = fahrenheitList.map((fahrenheit) => {
+    const celsius = ((fahrenheit - 32) * 5) / 9;
+    return celsius.toFixed(2);
+  }).join(' ');
+  return convertedTemperatures;
+};
+export default convertedTemperature;