PineCreek_Web_2.0/js/main.js

const hamburger = document.getElementById('hamburger'),
      mainNav = document.querySelector('#mainNav ul'),
      navItem = document.getElementsByClassName('nav-item')

// Nav toggle, open, close
const toggleNav = () => {
        !(mainNav.classList.contains('in')) ? (
          mainNav.classList.add('in'),
          hamburger.classList.add('in')
        ) : (
          mainNav.classList.remove('in'),
          hamburger.classList.remove('in')
        )
      },
      openNav = () => mainNav.classList.add('in'),
      closeNav = () => mainNav.classList.remove('in')

// Hamburger menu icon click
hamburger.onclick = toggleNav

// Nav items on click: close nav (mobile) and smooth-scroll to anchor targets
for (let i = 0; i < navItem.length; i++) {
  navItem[i].onclick = function (e) {
    // prevent default anchor jump; we'll smooth-scroll with offset instead
    e.preventDefault()
    // close mobile nav if open
    closeNav()

    const href = this.getAttribute('href') || ''
    if (href.startsWith('#')) {
      const target = document.querySelector(href)
      if (target) {
        // compute offset to account for fixed header
        const header = document.getElementById('mainNav')
        const headerHeight = header ? header.offsetHeight : 0
        const extra = 8 // small spacing under header
        const targetY = window.pageYOffset + target.getBoundingClientRect().top - headerHeight - extra

        window.scrollTo({ top: targetY, behavior: 'smooth' })
        return
      }
    }

    // fallback: follow the link if it's not an in-page anchor
    if (href) window.location.href = href
  }
}

// If the page is loaded with a hash or the hash changes, adjust scroll to account for the fixed header
const scrollToHashWithOffset = (hash) => {
  if (!hash) return
  const target = document.querySelector(hash)
  if (!target) return
  const header = document.getElementById('mainNav')
  const headerHeight = header ? header.offsetHeight : 0
  const extra = 8
  const targetY = window.pageYOffset + target.getBoundingClientRect().top - headerHeight - extra
  // Use a short timeout to allow browser default jump to complete before adjusting
  setTimeout(() => window.scrollTo({ top: targetY, behavior: 'smooth' }), 50)
}

window.addEventListener('load', () => scrollToHashWithOffset(location.hash))
window.addEventListener('hashchange', () => scrollToHashWithOffset(location.hash))

// light auth
window.onload = () => {
  const board = document.getElementById('boardPage'),
        owner = document.getElementById('ownerPage')

  if (board || owner) {
    const response = prompt('Please enter the password.')
    
    switch (response) {
      case '12345':
        console.log('Board Member')
        break
      case 'abcde':
        console.log('Owner')
        break
      default:
        console.log('Access Denied')
        break
    }
  }
}

// Slides

const slidesVineyard = document.getElementById('slidesVineyard'),
      slidesVineyardLeft = document.querySelector('#slidesVineyard .slides-arrow:nth-last-child(2)'),
      slidesVineyardRight = document.querySelector('#slidesVineyard .slides-arrow:last-child'),
      slidesVineyardImg = document.querySelector('#slidesVineyard .slides-img'),
      slidesHouse = document.getElementById('slidesHouse'),
      slidesHouseLeft = document.querySelector('#slidesHouse .slides-arrow:nth-last-child(2)'),
      slidesHouseRight = document.querySelector('#slidesHouse .slides-arrow:last-child'),
      slidesHouseImg = document.querySelector('#slidesHouse .slides-img')

let vineyardImgs = 0

slidesVineyardRight.onclick = () => {
  vineyardImgs = vineyardImgs + 1
  slidesVineyardImg.classList.add('out')
  setTimeout(() => {
    slidesVineyardImg.setAttribute('src', 'img/vineyard-' + vineyardImgs + '.jpg')
    slidesVineyardImg.classList.remove('out')
    if (vineyardImgs >= 1) {
      slidesVineyardLeft.classList.remove('out')
    }
  }, 150)
}

slidesVineyardLeft.onclick = () => {
  slidesVineyardImg.classList.add('out')
  
  setTimeout(() => {
    slidesVineyardImg.classList.remove('out')
    if (vineyardImgs > 0) {
      vineyardImgs = vineyardImgs - 1
      slidesVineyardImg.setAttribute('src', 'img/vineyard-' + vineyardImgs + '.jpg')
    }
    if (vineyardImgs < 1) {
      slidesVineyardLeft.classList.add('out')
    }
  }, 150)
}

const imgVineyardError = (image) => {
  vineyardImgs = 0
  image.src = 'img/vineyard-0.jpg'

  setTimeout(() => {
    if (vineyardImgs < 1) {
      slidesVineyardLeft.classList.add('out')
    }
  }, 150)
  return true
}

let houseImgs = 0

slidesHouseRight.onclick = () => {
  houseImgs = houseImgs + 1
  slidesHouseImg.classList.add('out')
  setTimeout(() => {
    slidesHouseImg.setAttribute('src', 'img/house-' + houseImgs + '.jpg')
    slidesHouseImg.classList.remove('out')
    if (houseImgs >= 1) {
      slidesHouseLeft.classList.remove('out')
    }
  }, 150)
}

slidesHouseLeft.onclick = () => {
  slidesHouseImg.classList.add('out')
  
  setTimeout(() => {
    slidesHouseImg.classList.remove('out')
    if (houseImgs > 0) {
      houseImgs = houseImgs - 1
      slidesHouseImg.setAttribute('src', 'img/house-' + houseImgs + '.jpg')
    }
    if (houseImgs < 1) {
      slidesHouseLeft.classList.add('out')
    }
  }, 150)
}

const imgHouseError = (image) => {
  houseImgs = 0
  image.src = 'img/house-0.jpg'

  setTimeout(() => {
    if (houseImgs < 1) {
      slidesHouseLeft.classList.add('out')
    }
  }, 150)
  return true
}