const queryAllButtons = document.querySelectorAll('button');
console.log(queryAllButtons); // NodeList(9)
// It is fixed

const getAllButtons = document.getElementsByTagName('button');
console.log(getAllButtons); // HTMLCollection(9)
// It updates itself as the html changes.

const header = document.querySelector('.header');
const message = document.createElement('div');
message.classList.add('cookie-message');
message.textContent =
  'We use cookied for improved functionality and analytics.';
message.innerHTML =
  'We use cookied for improved functionality and analytics.<button class="btn btn--close-cookie">Got it!</button>';
header.prepend(message);
header.append(message);

header.after(message);
header.before(message);
message.remove();

message.style.width = '120%';
console.log(message.style.width); // 120%
console.log(message.style.height); // nothing

console.log(getComputedStyle(message)); // CSSStyleDeclaration
console.log(getComputedStyle(message).height); // 50.6px

document.documentElement.style.setProperty('--color-primary', 'red')

const logo = document.querySelector('.nav__logo');
console.log(logo.alt); // Bankist logo
console.log(logo.src); // http://127.0.0.1:5501/complete-javascript-course/13-Advanced-DOM-Bankist/starter/img/logo.png
console.log(logo.getAttribute('src')); // img/logo.png
console.log(logo.className); // nav__logo

logo.setAttribute('designer', 'jonas');
console.log(logo.getAttribute('designer')); // jonas

logo.dataset

logo.classList.add('c');
logo.classList.remove('c');
logo.classList.toggle('c');
logo.classList.contains('c');

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

btnScrollTo.addEventListener('click', e => {
  const s1croods = section1.getBoundingClientRect();
  window.scrollTo({
    left: s1croods.left + window.pageXOffset,
    top: s1croods.top + window.pageYOffset,
    behavior: 'smooth',
  });
});

const btnScrollTo = document.querySelector('.btn--scroll-to');
const section1 = document.querySelector('#section--1');

btnScrollTo.addEventListener('click', e => {
  section1.scrollIntoView({ behavior: 'smooth' });
});

const h1 = document.querySelector('h1');
const alert = e => {
  console.log('Enter');

  h1.removeEventListener('mouseenter', alert);
};
h1.addEventListener('mouseenter', alert);
h1.addEventListener('mouseleave', e => {
  console.log('Leave');
});

window.addEventListener('keydown', e => {
  console.log(e);
});

const h1 = document.querySelector('h1');

//Going downwards: child
console.log(h1.querySelectorAll('.highlight'));
console.log(h1.childNodes); // NodeList(9)
console.log(h1.children); // HTMLCollection(3)
h1.firstElementChild.style.color = 'white';
h1.lastElementChild.style.color = 'white';

// Going upwards: parents
console.log(h1.parentNode);
console.log(h1.parentElement);
h1.closest('.header').style.background = 'var(--gradient-secondary)';

// Going sideways: siblings
console.log(h1.previousElementSibling);
console.log(h1.nextElementSibling);

console.log(h1.parentElement.children);