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