šŸ–¹ Dom Manipulation


šŸŖƒ Exercise


šŸ”” Events


šŸ›’ Shopping List Exercise


ā‡¦ Problem Solving



Dom Manipulation

Exercise Setup


index.html...
<script src="script.js" defer></script>
...
<div id="container"></div>

script.jsconst container = document.querySelector('#setup-container');

const content = document.createElement('div');
content.classList.add('content');
content.textContent = 'This is the glorious text-content!';

container.appendChild(content);

Result



Exercise



const container = document.querySelector('#container');

const contentP = document.createElement('p');
const contentH3 = document.createElement('h3');
const contentDiv = document.createElement('div');

contentP.textContent = 'Hey Iā€™m red!';
contentP.style.color = '#C70039';
container.appendChild(contentP);

contentH3.textContent = 'Iā€™m a blue h3!';
contentH3.style.color = '#1F51FF';
container.appendChild(contentH3);

contentDiv.style.border = '1px black solid';
contentDiv.style.borderRadius = '0.25rem';
{
	const contentDivChildH1 = document.createElement('h1');
	const contentDivChildP = document.createElement('p');

	contentDivChildH1.textContent = 'Iā€™m in a div';
	contentDiv.appendChild(contentDivChildH1);

	contentDivChildP.textContent = 'ME TOO!';
	contentDiv.appendChild(contentDivChildP);
}
container.appendChild(contentDiv);

Result


Events

Discover the 3 ways setup events


index.html<button onclick="alert('Hello World')">Click Me</button>
<button id="btn2">Click Me</button>
<button id="btn3">Click Me Too</button>

script.jsconst btn2 = document.querySelector('#btn2');
btn2.onclick = () => alert("Hello World");

const btn3 = document.querySelector('#btn3');
btn3.addEventListener('click', () => {
	alert("Hello World");
});

Result


1 - Inline Method

2 - JS Dynamic Assign to the onclick object property

3 - JS Dynamic Event Listener Setup


1 - 2 - 3 -

My shopping list


index.html<div>
  <label for="item">Enter a new item:</label>
  <input type="text" name="item" id="item">
  <button id="add-item-to-shopping-list-button">Add item</button>
</div>

<ul id="shopping-list"></ul>

script.jsconst shoppingListButton = document.querySelector('#add-item-to-shopping-list-button');
const shoppingList = document.querySelector('#shopping-list');
const shoppingItem = document.querySelector('#item');
const getItemName = () => shoppingItem ? shoppingItem.value : '';
const resetInput = () => shoppingItem.value = '';
const createListItem = (itemName) => {
  const listItem = document.createElement('li');
  const span = document.createElement('span');
  const button = document.createElement('button');

  span.textContent = itemName;
  button.textContent = 'Delete';
  button.addEventListener('click', function () {
    shoppingList.removeChild(listItem);
  }, false);
  listItem.appendChild(span);
  listItem.appendChild(button);
  return listItem;
}
function addCurrentItem() {
  const listItem = createListItem(getItemName());

  shoppingList.appendChild(listItem);
  resetInput();
  shoppingItem.focus();
}
shoppingListButton.addEventListener("click", addCurrentItem, false);



with ā¤ļø by pulgamecanica