DOM.js

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const appendAlert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    appendAlert('Nice, you triggered this alert message!', 'success')
  })
}
// CHANGING THE COLOR OF CARD TITLE

 /* let ctitle = document.getElementsByClassName("card-title")[0]
ctitle.style.color = "red" */

/*let ctitle = document.getElementById("alien")
ctitle.style.color = "red" */

/* let ctitles = document.querySelectorAll(".card-title")
ctitles[0].style.color = "green"
ctitles[1].style.color = "yellow"
ctitles[2].style.color = "red" */

/* let ctitle = document.getElementById("alien");
console.log(ctitle);*/

/* let ctitles = document.getElementsByClassName("card-title");
console.log(ctitles); */
 let ctitles = document.querySelectorAll(".card-title");
console.log(ctitles); 

ctitles[0].style.color = "blue"
ctitles[1].style.color = "red"
ctitles[2].style.color = "yellow"

// QUERY SELECTOR

console.log(document.getElementsByTagName("a"))
console.log(document.querySelector(".card-title").getElementsByTagName("a"))
console.log(document.querySelector(".card").getElementsByTagName("a"))