diff --git a/5-testing-components/examples/3-list-loop/list.js b/5-testing-components/examples/3-list-loop/list.js index 31c247d7..d984b1dd 100644 --- a/5-testing-components/examples/3-list-loop/list.js +++ b/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; }; diff --git a/5-testing-components/exercises-write-components/game-board/game-board.js b/5-testing-components/exercises-write-components/game-board/game-board.js index 9f2f7c04..74b8a68f 100644 --- a/5-testing-components/exercises-write-components/game-board/game-board.js +++ b/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; +}; diff --git a/5-testing-components/exercises-write-components/info/info.js b/5-testing-components/exercises-write-components/info/info.js index 93b564c6..4016557c 100644 --- a/5-testing-components/exercises-write-components/info/info.js +++ b/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; }; diff --git a/6-refactoring/exercises/dom-and-events/flip-book/data/constants.js b/6-refactoring/exercises/dom-and-events/flip-book/data/constants.js index e69de29b..b74ff786 100644 --- a/6-refactoring/exercises/dom-and-events/flip-book/data/constants.js +++ b/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'; diff --git a/6-refactoring/exercises/dom-and-events/flip-book/src/handler.js b/6-refactoring/exercises/dom-and-events/flip-book/src/handler.js index e38b0780..43eaf8e9 100644 --- a/6-refactoring/exercises/dom-and-events/flip-book/src/handler.js +++ b/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); +}; diff --git a/6-refactoring/exercises/dom-and-events/flip-book/src/init.js b/6-refactoring/exercises/dom-and-events/flip-book/src/init.js index b3e242da..f86b136b 100644 --- a/6-refactoring/exercises/dom-and-events/flip-book/src/init.js +++ b/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); -}); +});*/ diff --git a/6-refactoring/exercises/dom-and-events/flip-book/src/listener.js b/6-refactoring/exercises/dom-and-events/flip-book/src/listener.js index 076c8ddf..af41e634 100644 --- a/6-refactoring/exercises/dom-and-events/flip-book/src/listener.js +++ b/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); diff --git a/6-refactoring/exercises/dom-and-events/flip-book/src/util.js b/6-refactoring/exercises/dom-and-events/flip-book/src/util.js index 847bfde1..91b22cdd 100644 --- a/6-refactoring/exercises/dom-and-events/flip-book/src/util.js +++ b/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; +}; diff --git a/6-refactoring/exercises/dom-and-events/flip-book/src/util.spec.js b/6-refactoring/exercises/dom-and-events/flip-book/src/util.spec.js index 94b1d831..68749262 100644 --- a/6-refactoring/exercises/dom-and-events/flip-book/src/util.spec.js +++ b/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"', () => { diff --git a/6-refactoring/exercises/dom-and-events/mouse-coordinates/data/constants.js b/6-refactoring/exercises/dom-and-events/mouse-coordinates/data/constants.js index e69de29b..c19eca8f 100644 --- a/6-refactoring/exercises/dom-and-events/mouse-coordinates/data/constants.js +++ b/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'; \ No newline at end of file diff --git a/6-refactoring/exercises/dom-and-events/mouse-coordinates/src/handler.js b/6-refactoring/exercises/dom-and-events/mouse-coordinates/src/handler.js index 68c01a10..3e0aafff 100644 --- a/6-refactoring/exercises/dom-and-events/mouse-coordinates/src/handler.js +++ b/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); + } +; diff --git a/6-refactoring/exercises/dom-and-events/mouse-coordinates/src/init.js b/6-refactoring/exercises/dom-and-events/mouse-coordinates/src/init.js index 52f28e2d..3dec7865 100644 --- a/6-refactoring/exercises/dom-and-events/mouse-coordinates/src/init.js +++ b/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); - }); + });*/ diff --git a/6-refactoring/exercises/dom-and-events/mouse-coordinates/src/listener.js b/6-refactoring/exercises/dom-and-events/mouse-coordinates/src/listener.js index 8c9e2681..23c3e801 100644 --- a/6-refactoring/exercises/dom-and-events/mouse-coordinates/src/listener.js +++ b/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); \ No newline at end of file diff --git a/6-refactoring/exercises/dom-and-events/mouse-coordinates/src/util.js b/6-refactoring/exercises/dom-and-events/mouse-coordinates/src/util.js index 713bde23..132e0b71 100644 --- a/6-refactoring/exercises/dom-and-events/mouse-coordinates/src/util.js +++ b/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; +}; diff --git a/6-refactoring/exercises/dom-and-events/mouse-coordinates/src/util.spec.js b/6-refactoring/exercises/dom-and-events/mouse-coordinates/src/util.spec.js index d4aca866..ae902a69 100644 --- a/6-refactoring/exercises/dom-and-events/mouse-coordinates/src/util.spec.js +++ b/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', () => { diff --git a/6-refactoring/exercises/state/no-copies/src/handler.js b/6-refactoring/exercises/state/no-copies/src/handler.js index af72f6c0..0e76054a 100644 --- a/6-refactoring/exercises/state/no-copies/src/handler.js +++ b/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); +}; diff --git a/6-refactoring/exercises/state/no-copies/src/util.js b/6-refactoring/exercises/state/no-copies/src/util.js index 44848c21..444e7d5d 100644 --- a/6-refactoring/exercises/state/no-copies/src/util.js +++ b/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); +}; diff --git a/exercises/convertTemperature/src/utils/utils.js b/exercises/convertTemperature/src/utils/utils.js new file mode 100644 index 00000000..61d18ff7 --- /dev/null +++ b/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;