// 1. whenever we click a .js-scroll link, we want to run a function
// 2. we want to stop the link from jumping straight to our section (its defaul behaviour)
// 3. we want to find out the href attribute, and then grab that element
// 4. then scroll to it using scrollIntoView

const scrollLinks = document.querySelectorAll('.js-scroll')

console.log(scrollLinks)

scrollLinks.forEach(link => {
  // addEventListener is just the same in jquery on()
  // we can listen for events on elements and then run a function
  link.addEventListener('click', event => {
    // using the event keyword we get access to an snapshot
    // of what's going on in your website when we click in our link
    // this is equivalent to return false in jQuery
    // it will prevent the default browser behaviour
    event.preventDefault()

    // here we get the attribute href from our links
    const href = link.getAttribute('href')
    console.log(href)
    // here we get the scrollIntoView to scroll to
    // our desired destination
    document.querySelector(href).scrollIntoView({
      behavior: 'smooth'
    })
  })
})