webdev-lecture-07.md

Lecture 07 - DOM

NOTE

Get Element

// Get single element
const heading = document.getElementById('heading-2'); // Return HTMLElement Object
const heading = document.querySelector('#head'); // Return Element Object

// Get list of elemets
const elements = document.getElementsByTagName('h1'); // Return HTMLCollectionOf<T>
const heading = document.getElementsByName('head'); // Return NodeListOf<HTMLElement>
const queries = document.querySelectorAll('h1'); // Return NodeListOf<T>
const list = document.getElementById('list'); // Return HTML Element
const items = list.querySelectorAll('.list-item'); // Return NodeListOf<Element>

Modify Element

// Get the elemet first
const inputItem = document.getElementById('input-item');
const btnAdd = document.getElementById('btn-add-item');
const list = document.getElementById('list');
const alertDialog = document.getElementById('alert-dialog');

// A function with signature
const clickListener = (e) => {
  // Prevent default bahaviour that may throwed by web browser
  e.preventDefault();
  
  // createElement used for creating html element
  const dialogText = alertDialog.createElement('h3');
  
  // textContent is one of dom object property that can be modified by assigning value to it
  dialogText.textContent = 'Item can not empty';
  if (inputItem.value === '') {
    dialogText.textContent = 'Item can not empty';
    
    // Every valid html attribute (like placeholder) can be manipulated
    inputItem.placeholder = 'Masukkan Item';
    
    // Some element have a special funtion
    inputItem.focus();
  } else {
    dialogText.textContent = `${inputItem.value} added`;
    inputItem.value = '';
  }
  alertDialog.showModal();
};

// Attach a function to a click event
btnAdd.addEventListener('click', clickListener);
const item = document.createElement('li');
const item2 = document.createElement('li');
item.textContent = 'List dari JS';
item2.textContent = 'List ke-2 dari JS';

// Add element(s) as child of another element
// list.appendChild(item);
// list.appendChild(item2);
list.append(item, item2);
// list.removeChild(item);

// CSS class manipulatuion
item2.classList.add('text-red');
item2.addEventListener('copy', (e) => {
  e.target.classList.toggle('text-red');
});

TASK

Shopping ListCreate a web page with following elements

• A Text Input
• Buttons
• An Unordered List

The text input used to type the name of shop item, on the right side, there is a button, if user clicks the button, the typed item name added as a list item of the unordered list and then user focus moved to cleared text input.

Each list item have a name and a button on the right side, the button used to delete the item.

If the user eneters an existing item, show an alert or dialog notifyng the user that this item already exits and don't add it to the list, instead, move the focus to the text input.

Don't forget to add styling using CSS, either with vanilla CSS or a framework (e.g. Bootstrap, Tailwind)