isolate

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');

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');

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(

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');

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');

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

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

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 <li>
+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}`);
 }

2-isolate-and-integrate/1-isolate/03-element-children/exercises/pass-the-tests-2.js

@@ -9,14 +9,18 @@ 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));
 
 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',
 );

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 = `
   <table>
@@ -18,20 +17,25 @@ divEl.innerHTML = `
 console.log(divEl.nodeName, divEl.cloneNode(true));
 
 // --- write some code ---
-//  you will need to access and update each <td> element
+const tbodyEl = divEl.children[0].children[0]; // Access <tbody> element
 
+// Update each <td> 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}"`);
+  }
 }

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 <p>
-//  insert something before the <section>
-//  remove the <h1>
-//  append something to the end
+// Replace the <p> with a <nav>
+const navEl = document.createElement('nav');
+divEl.replaceChild(navEl, divEl.children[0]);
 
+// Insert an <h2> before the <section>
+const h2El = document.createElement('h2');
+divEl.insertBefore(h2El, divEl.children[1]);
+
+// Remove the <h1>
+divEl.removeChild(divEl.children[3]);
+
+// Append a new <p> at the end
+const newPEl = document.createElement('p');
+divEl.appendChild(newPEl);
 // --- --- --- --- --- ---
 
 console.log(divEl.nodeName + ' (after)', divEl.cloneNode(true));

2-isolate-and-integrate/1-isolate/04-dom-manipulation/exercises/pass-the-tests-2.js

@@ -10,25 +10,32 @@ ulEl.innerHTML = `
 console.log(ulEl.nodeName + ' (before)', ulEl.cloneNode(true));
 
 // --- write some code ---
+// Remove the <p> element, as it's invalid inside a <ul>
+ulEl.removeChild(ulEl.children[1]);
 
+// Correct the fourth <li>'s innerHTML from 'fish' to 'frog'
+ulEl.children[1].innerHTML = 'frog';
+// Remove the unnecessary spaces in all `<li>` content
+ulEl.children[0].innerHTML = 'toad';
+ulEl.children[2].innerHTML = 'salamander';
 // --- --- --- --- --- ---
 
 console.log(ulEl.nodeName + ' (after)', ulEl.cloneNode(true));
 
 console.assert(
-    ulEl.childElementCount === 3,
-    'Test: .childElementCount should be 3',
+  ulEl.childElementCount === 3,
+  'Test: .childElementCount should be 3',
 );
 
 const expectedInnerHTMLs = ['toad', 'frog', 'salamander'];
 for (let i = 0; i < expectedInnerHTMLs.length; i++) {
-    const actualNodeName = ulEl.children[i].nodeName;
-    console.assert(actualNodeName === 'LI', `Test: child ${i} .nodeName`);
+  const actualNodeName = ulEl.children[i].nodeName;
+  console.assert(actualNodeName === 'LI', `Test: child ${i} .nodeName`);
 
-    const actualInnerHTML = ulEl.children[i].innerHTML;
-    const expectedInnerHTML = expectedInnerHTMLs[i];
-    console.assert(
-        actualInnerHTML === expectedInnerHTML,
-        `Test: child ${i} .innerHTML`,
-    );
+  const actualInnerHTML = ulEl.children[i].innerHTML;
+  const expectedInnerHTML = expectedInnerHTMLs[i];
+  console.assert(
+    actualInnerHTML === expectedInnerHTML,
+    `Test: child ${i} .innerHTML`,
+  );
 }

2-isolate-and-integrate/1-isolate/04-dom-manipulation/exercises/pass-the-tests-3.js

@@ -11,21 +11,28 @@ divEl.innerHTML = `
 `;
 console.log(divEl.nodeName + ' (before)', divEl.cloneNode(true));
 
-// --- write some code ---
-//  you want to create a 2x2 table with a, b, c, d in the squares
+const tbodyEl = divEl.querySelector('tbody');
+// Add <td> elements to the first <tr>
+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 <td> elements to the second <tr>
+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}"`);
+  }
 }

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

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

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

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 `<h${level}>${text}</h${level}>`;
 };
 
 const happyH1 = renderHeader(1, ':)');