diff --git a/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/fill-in-the-blanks.js b/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/fill-in-the-blanks.js index 4d56f28..13dceb7 100644 --- a/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/fill-in-the-blanks.js +++ b/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/fill-in-the-blanks.js @@ -8,28 +8,28 @@ */ const _1_element = document.createElement('input'); -const _1_test = _1_element.nodeName === _; +const _1_test = _1_element.nodeName === 'INPUT'; // nodeName is always uppercase console.assert(_1_test, 'Test 1'); const _2_element = document.createElement('iNPuT'); -const _2_test = _2_element.nodeName === _; +const _2_test = _2_element.nodeName === 'INPUT'; // nodeName is case-insensitive, but returns uppercase console.assert(_2_test, 'Test 2'); -const _3_element = document.createElement('_'); -const _3_test = _3_element.nodeName === 'ARTICLE'; +const _3_element = document.createElement('article'); // Create an ARTICLE element +const _3_test = _3_element.nodeName === 'ARTICLE'; // nodeName is always uppercase console.assert(_3_test, 'Test 3'); -const _4_element = document.createElement('p'); -_; +const _4_element = document.createElement('p'); // Create a paragraph element +_4_element.innerHTML = 'party palace'; // Set the innerHTML to 'party palace' const _4_test = _4_element.innerHTML === 'party palace'; console.assert(_4_test, 'Test 4'); -const _5_element = document.createElement('p'); -_5_element.className = 'wide-border'; -const _5_test = _5_element._ === _; +const _5_element = document.createElement('p'); // Create another paragraph element +_5_element.className = 'wide-border'; // Set className to 'wide-border' +const _5_test = _5_element.className === 'wide-border'; // Validate className console.assert(_5_test, 'Test 5'); -const _6_element = document.createElement('textarea'); -_6_element._ = 'many many mumbling mice'; -const _6_test = _6_element.value === _; +const _6_element = document.createElement('textarea'); // Create a textarea element +_6_element.value = 'many many mumbling mice'; // Set the value property +const _6_test = _6_element.value === 'many many mumbling mice'; // Validate the value property console.assert(_6_test, 'Test 6'); diff --git a/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/fix-the-bugs.js b/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/fix-the-bugs.js index 95769c6..b8e094f 100644 --- a/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/fix-the-bugs.js +++ b/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/fix-the-bugs.js @@ -1,8 +1,8 @@ 'use strict'; -const element = document.createElement('buton'); -element.innerHtml = 'go home'; -element.class = 'large-btn'; +const element = document.createElement('button'); +element.innerHTML = 'go home'; +element.className = 'large-btn'; // the assertions are correct! change the code above to pass them console.assert(element.nodeName === 'BUTTON', 'Test 1: nodeName'); diff --git a/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/pass-tests-1.js b/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/pass-tests-1.js index 8eca62e..5b7414f 100644 --- a/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/pass-tests-1.js +++ b/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/pass-tests-1.js @@ -1,5 +1,11 @@ 'use strict'; +const element = document.createElement('input'); // Create an input element +element.nodeName === 'INPUT'; // Test 1: Verify the nodeName + +element.placeholder = 'enter your username'; // Set the placeholder property +element.className = 'auth-field'; // Set the className property + // the assertions are correct! write code above to pass them console.assert(element.nodeName === 'INPUT', 'Test 1: nodeName'); console.assert( diff --git a/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/pass-tests-2.js b/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/pass-tests-2.js index 0a05fa8..9f43b7a 100644 --- a/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/pass-tests-2.js +++ b/2-isolate-and-integrate/1-isolate/01-dom-elements/exercises/pass-tests-2.js @@ -1,5 +1,11 @@ 'use strict'; +const element = document.createElement ('p') +element.nodeName === 'INPUT' +element.innerHTML = 'lorem ipsum dolor'; // Set the innerHTML to 'lorem ipsum dolor' +element.className = 'fancy-text'; // Assign the class name 'fancy-text' + + // the assertions are correct! write code above to pass them console.assert(element.nodeName === 'P', 'Test 1: nodeName'); console.assert(element.innerHTML === 'lorem ipsum dolor', 'Test 2: innerHTML'); diff --git a/2-isolate-and-integrate/1-isolate/02-add-event-listener/exercises/add-event-listener-1.js b/2-isolate-and-integrate/1-isolate/02-add-event-listener/exercises/add-event-listener-1.js index abbef4f..aa3f05e 100644 --- a/2-isolate-and-integrate/1-isolate/02-add-event-listener/exercises/add-event-listener-1.js +++ b/2-isolate-and-integrate/1-isolate/02-add-event-listener/exercises/add-event-listener-1.js @@ -20,7 +20,7 @@ const loginHandler = () => { }; // add the event listener to the button so a user can login -_; +buttonEl.addEventListener('click', loginHandler); // "click" the button once const clickEvent1 = new Event('click'); diff --git a/2-isolate-and-integrate/1-isolate/02-add-event-listener/exercises/add-event-listener-2.js b/2-isolate-and-integrate/1-isolate/02-add-event-listener/exercises/add-event-listener-2.js index f795495..0967444 100644 --- a/2-isolate-and-integrate/1-isolate/02-add-event-listener/exercises/add-event-listener-2.js +++ b/2-isolate-and-integrate/1-isolate/02-add-event-listener/exercises/add-event-listener-2.js @@ -6,25 +6,25 @@ const buttonEl = document.createElement('button'); buttonEl.innerHTML = 'log in'; console.log(buttonEl.nodeName, buttonEl.cloneNode(true)); -const _ = () => { - const username = prompt('enter your user name'); - if (username === null) { - return; - } - const password = prompt('enter your password'); - if (password === null) { - return; - } +const authenticationHandler = () => { + const username = prompt('enter your user name'); + if (username === null) { + return; + } + const password = prompt('enter your password'); + if (password === null) { + return; + } - alert(`welcome, ${username}`); + alert(`welcome, ${username}`); }; buttonEl.addEventListener('hover', authenticationHandler); // "hover" over the button once -const clickEvent1 = new Event(_); +const clickEvent1 = new Event(1); buttonEl.dispatchEvent(clickEvent1); // "hover" over the button again -const clickEvent2 = new Event(_); +const clickEvent2 = new Event(2); buttonEl.dispatchEvent(clickEvent2); diff --git a/2-isolate-and-integrate/1-isolate/02-add-event-listener/exercises/write-the-handler.js b/2-isolate-and-integrate/1-isolate/02-add-event-listener/exercises/write-the-handler.js index e198e68..4431524 100644 --- a/2-isolate-and-integrate/1-isolate/02-add-event-listener/exercises/write-the-handler.js +++ b/2-isolate-and-integrate/1-isolate/02-add-event-listener/exercises/write-the-handler.js @@ -7,8 +7,14 @@ buttonEl.innerHTML = 'are you honest?'; console.log(buttonEl.nodeName, buttonEl.cloneNode(true)); const truthTestHandler = () => { - // ask a user to confirm if they are honest - // let them know what you think of their answer + // ask a user to confirm if they are honest + const isHonest = confirm('Are you honest?'); + // let them know what you think of their answer + if (isHonest) { + alert('Thank you for being honest!'); + } else { + alert('Honesty is the best policy!'); + } }; buttonEl.addEventListener('click', truthTestHandler); diff --git a/2-isolate-and-integrate/1-isolate/03-element-children/exercises/pass-the-tests-1.js b/2-isolate-and-integrate/1-isolate/03-element-children/exercises/pass-the-tests-1.js index 3ed9790..b3fd1bb 100644 --- a/2-isolate-and-integrate/1-isolate/03-element-children/exercises/pass-the-tests-1.js +++ b/2-isolate-and-integrate/1-isolate/03-element-children/exercises/pass-the-tests-1.js @@ -8,15 +8,17 @@ ulEl.innerHTML = ` `; console.log(ulEl.nodeName, ulEl.cloneNode(true)); -// --- write some code --- - +// --- Fix the innerHTML to pass assertions --- +ulEl.children[0].innerHTML = 'toad'; // Trim spaces for the first
  • +ulEl.children[1].innerHTML = 'frog'; // Correct capitalization of 'Frog' +ulEl.children[2].innerHTML = 'salamander'; // Replace 'salad' with 'salamander' // --- --- --- --- --- --- console.log(ulEl.nodeName, ulEl.cloneNode(true)); const expectedInnerHTMLs = ['toad', 'frog', 'salamander']; for (let i = 0; i < expectedInnerHTMLs.length; i++) { - const actual = ulEl.children[i].innerHTML; - const expected = expectedInnerHTMLs[i]; - console.assert(actual === expected, `Test child ${i}`); + const actual = ulEl.children[i].innerHTML; + const expected = expectedInnerHTMLs[i]; + console.assert(actual === expected, `Test child ${i}`); } diff --git a/2-isolate-and-integrate/1-isolate/03-element-children/exercises/pass-the-tests-2.js b/2-isolate-and-integrate/1-isolate/03-element-children/exercises/pass-the-tests-2.js index f302e63..571525c 100644 --- a/2-isolate-and-integrate/1-isolate/03-element-children/exercises/pass-the-tests-2.js +++ b/2-isolate-and-integrate/1-isolate/03-element-children/exercises/pass-the-tests-2.js @@ -9,7 +9,11 @@ divEl.innerHTML = ` console.log(divEl.nodeName, divEl.cloneNode(true)); // --- write some code --- +// Fix the href attribute +divEl.children[0].setAttribute('href', '#top'); +// Fix the button's innerHTML +divEl.children[0].children[0].innerHTML = 'to the top'; // --- --- --- --- --- --- console.log(divEl.nodeName, divEl.cloneNode(true)); @@ -17,6 +21,6 @@ console.log(divEl.nodeName, divEl.cloneNode(true)); console.assert(divEl.children[0].getAttribute('href') === '#top', 'Test: href'); console.assert( - divEl.children[0].children[0].innerHTML === 'to the top', - 'Test: button innerHTML', + divEl.children[0].children[0].innerHTML === 'to the top', + 'Test: button innerHTML', ); diff --git a/2-isolate-and-integrate/1-isolate/03-element-children/exercises/pass-the-tests-3.js b/2-isolate-and-integrate/1-isolate/03-element-children/exercises/pass-the-tests-3.js index e9b3638..c6748cf 100644 --- a/2-isolate-and-integrate/1-isolate/03-element-children/exercises/pass-the-tests-3.js +++ b/2-isolate-and-integrate/1-isolate/03-element-children/exercises/pass-the-tests-3.js @@ -1,5 +1,4 @@ 'use strict'; - const divEl = document.createElement('ul'); divEl.innerHTML = ` @@ -18,20 +17,25 @@ divEl.innerHTML = ` console.log(divEl.nodeName, divEl.cloneNode(true)); // --- write some code --- -// you will need to access and update each element +// Update each +const firstRow = tbodyEl.children[0]; +firstRow.appendChild(document.createElement('td')).innerHTML = 'a'; // First row, first column +firstRow.appendChild(document.createElement('td')).innerHTML = 'b'; // First row, second column +// Add +const secondRow = tbodyEl.children[1]; +secondRow.appendChild(document.createElement('td')).innerHTML = 'c'; // Second row, first column +secondRow.appendChild(document.createElement('td')).innerHTML = 'd'; // Second row, second column // --- --- --- --- --- --- console.log(divEl.nodeName + ' (after)', divEl.cloneNode(true)); const expectedInnerHTMLs = ['a', 'b', 'c', 'd']; for (let i = 0; i < 2; i++) { - for (let j = 0; j < 2; j++) { - const tbodyEL = divEl.children[0].children[0]; - const trEl = tbodyEL.children[i]; - const tdEl = trEl.children[j]; - const actual = tdEl.innerHTML; - const expected = expectedInnerHTMLs.shift(); - console.assert(actual === expected, `expected "${expected}"`); - } + for (let j = 0; j < 2; j++) { + const tbodyEL = divEl.children[0].children[0]; + const trEl = tbodyEL.children[i]; + const tdEl = trEl.children[j]; + const actual = tdEl.innerHTML; + const expected = expectedInnerHTMLs.shift(); + console.assert(actual === expected, `expected "${expected}"`); + } } diff --git a/2-isolate-and-integrate/1-isolate/05-event-parameter/exercises/write-the-handler-1.js b/2-isolate-and-integrate/1-isolate/05-event-parameter/exercises/write-the-handler-1.js index 8f98c13..56476ce 100644 --- a/2-isolate-and-integrate/1-isolate/05-event-parameter/exercises/write-the-handler-1.js +++ b/2-isolate-and-integrate/1-isolate/05-event-parameter/exercises/write-the-handler-1.js @@ -5,7 +5,10 @@ buttonEl.innerHTML = '12345'; console.log('initial button:', buttonEl.cloneNode(true)); const reverseInnerHTMLHandler = (event) => { - // write code to reverse the target element's innerHTML + // Reverse the target element's innerHTML + const currentHTML = event.target.innerHTML; + const reversedHTML = currentHTML.split('').reverse().join(''); + event.target.innerHTML = reversedHTML; }; buttonEl.addEventListener('click', reverseInnerHTMLHandler); diff --git a/2-isolate-and-integrate/1-isolate/05-event-parameter/exercises/write-the-handler-2.js b/2-isolate-and-integrate/1-isolate/05-event-parameter/exercises/write-the-handler-2.js index 6910ece..426045a 100644 --- a/2-isolate-and-integrate/1-isolate/05-event-parameter/exercises/write-the-handler-2.js +++ b/2-isolate-and-integrate/1-isolate/05-event-parameter/exercises/write-the-handler-2.js @@ -4,7 +4,12 @@ const headerEl = document.createElement('h1'); console.log('initial header:', headerEl.cloneNode(true)); const changeHeaderTextHandler = (event) => { - // take input from a user and set it as the target's innerHTML + // Take input from the user + const userInput = prompt('Enter new header text:'); + if (userInput !== null) { + // Set it as the target's innerHTML + event.target.innerHTML = userInput; + } }; headerEl.addEventListener('click', changeHeaderTextHandler); diff --git a/2-isolate-and-integrate/1-isolate/05-event-parameter/exercises/write-the-handler-3.js b/2-isolate-and-integrate/1-isolate/05-event-parameter/exercises/write-the-handler-3.js index 9a05ab0..1ef0392 100644 --- a/2-isolate-and-integrate/1-isolate/05-event-parameter/exercises/write-the-handler-3.js +++ b/2-isolate-and-integrate/1-isolate/05-event-parameter/exercises/write-the-handler-3.js @@ -9,9 +9,9 @@ inputEl.type = 'checkbox'; console.log('initial input:', inputEl.cloneNode(true)); const toggleCheckedHandler = (event) => { - // write code to reverse the boolean .checked value on the target element + // Reverse the boolean .checked value on the target element + event.target.checked = !event.target.checked; }; - inputEl.addEventListener('click', toggleCheckedHandler); // "click" the button once diff --git a/2-isolate-and-integrate/1-isolate/06-html-templates/exercises/write-the-template-1.js b/2-isolate-and-integrate/1-isolate/06-html-templates/exercises/write-the-template-1.js index ef8986c..0daf7f5 100644 --- a/2-isolate-and-integrate/1-isolate/06-html-templates/exercises/write-the-template-1.js +++ b/2-isolate-and-integrate/1-isolate/06-html-templates/exercises/write-the-template-1.js @@ -7,7 +7,7 @@ * @returns {string} rendered header tag */ const renderHeader = (level, text) => { - return _; + return `${text}`; }; const happyH1 = renderHeader(1, ':)'); diff --git a/2-isolate-and-integrate/1-isolate/06-html-templates/exercises/write-the-template-2.js b/2-isolate-and-integrate/1-isolate/06-html-templates/exercises/write-the-template-2.js index c956730..e9cbe18 100644 --- a/2-isolate-and-integrate/1-isolate/06-html-templates/exercises/write-the-template-2.js +++ b/2-isolate-and-integrate/1-isolate/06-html-templates/exercises/write-the-template-2.js @@ -7,27 +7,32 @@ * @returns {string} an HTML string */ const renderSummaryDetails = (caption, mainText) => { - return `
    \n` + ` _\n` + ` _\n` + `
    `; + return ( + `
    \n` + + ` ${caption}\n` + + `

    ${mainText}

    \n` + + `
    ` + ); }; const _1_tallThings = renderSummaryDetails( - 'tall things', - 'trees, buildings, mountains.', + 'tall things', + 'trees, buildings, mountains.', ); console.assert( - _1_tallThings === - '
    \n tall things\n

    trees, buildings, mountains.

    \n
    ', - 'Test 1: tall things', + _1_tallThings === + '
    \n tall things\n

    trees, buildings, mountains.

    \n
    ', + 'Test 1: tall things', ); const _2_shortThings = renderSummaryDetails( - 'short things', - 'ants, crumbs, sand.', + 'short things', + 'ants, crumbs, sand.', ); console.assert( - _2_shortThings === - '
    \n short things\n

    ants, crumbs, sand.

    \n
    ', - 'Test 2: short things', + _2_shortThings === + '
    \n short things\n

    ants, crumbs, sand.

    \n
    ', + 'Test 2: short things', ); const divEl = document.createElement('div'); diff --git a/2-isolate-and-integrate/1-isolate/06-html-templates/exercises/write-the-template-3.js b/2-isolate-and-integrate/1-isolate/06-html-templates/exercises/write-the-template-3.js index 929da76..f38d8ae 100644 --- a/2-isolate-and-integrate/1-isolate/06-html-templates/exercises/write-the-template-3.js +++ b/2-isolate-and-integrate/1-isolate/06-html-templates/exercises/write-the-template-3.js @@ -1,5 +1,4 @@ 'use strict'; - /** * renders an unordered list of all even numbers in an array * @param {number[]} numbers - an array of numbers @@ -7,32 +6,33 @@ * @returns {string} an HTML
    element +const tbodyEl = divEl.children[0].children[0]; // Access
    element +tbodyEl.children[0].children[0].innerHTML = 'a'; // First row, first column +tbodyEl.children[0].children[1].innerHTML = 'b'; // First row, second column +tbodyEl.children[1].children[0].innerHTML = 'c'; // Second row, first column +tbodyEl.children[1].children[1].innerHTML = 'd'; // Second row, second column // --- --- --- --- --- --- console.log(divEl.nodeName, divEl.cloneNode(true)); const expectedInnerHTMLs = ['a', 'b', 'c', 'd']; for (let i = 0; i < 2; i++) { - for (let j = 0; j < 2; j++) { - const tbodyEL = divEl.children[0].children[0]; - const trEl = tbodyEL.children[i]; - const tdEl = trEl.children[j]; - const actual = tdEl.innerHTML; - const expected = expectedInnerHTMLs.shift(); - console.assert(actual === expected, `expected "${expected}"`); - } + for (let j = 0; j < 2; j++) { + const tbodyEL = divEl.children[0].children[0]; + const trEl = tbodyEL.children[i]; + const tdEl = trEl.children[j]; + const actual = tdEl.innerHTML; + const expected = expectedInnerHTMLs.shift(); + console.assert(actual === expected, `expected "${expected}"`); + } } diff --git a/2-isolate-and-integrate/1-isolate/04-dom-manipulation/exercises/pass-the-tests-1.js b/2-isolate-and-integrate/1-isolate/04-dom-manipulation/exercises/pass-the-tests-1.js index fea7af6..f6a639b 100644 --- a/2-isolate-and-integrate/1-isolate/04-dom-manipulation/exercises/pass-the-tests-1.js +++ b/2-isolate-and-integrate/1-isolate/04-dom-manipulation/exercises/pass-the-tests-1.js @@ -9,11 +9,20 @@ divEl.innerHTML = ` console.log(divEl.nodeName + ' (before)', divEl.cloneNode(true)); // --- write some code --- -// replace the

    -// insert something before the

    -// remove the

    -// append something to the end +// Replace the

    with a

    		elements to the first
    elements to the second
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - + +
    +

    + keyboard navigation: use tab and + shift+tab +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    - - if (event.type === '_') { - target.style.backgroundColor = 'black'; - target.style.color = 'white'; - } else if (event.type === '_') { - target.style.backgroundColor = 'white'; - target.style.color = 'black'; - } - }; - + - + // trick question: why would 'blur' and 'focus' not work? + // https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event + // https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event + + diff --git a/2-isolate-and-integrate/2-integrate/03-event-delegation/exercises/2-todo.html b/2-isolate-and-integrate/2-integrate/03-event-delegation/exercises/2-todo.html index e849211..0867937 100644 --- a/2-isolate-and-integrate/2-integrate/03-event-delegation/exercises/2-todo.html +++ b/2-isolate-and-integrate/2-integrate/03-event-delegation/exercises/2-todo.html @@ -1,51 +1,53 @@ - - - Todo - + + + Todo + - -
    - -
    + +
    + +
    - + const addButton = event.target; // The "+" button + const addButtonParent = addButton.parentElement; // The parent
  • of the "+" button + const todoList = addButtonParent.parentElement; // The