{"mappings":"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","sources":["script.js"],"sourcesContent":["'use strict';\n\n///////////////////////////////////////\n// Modal window\n\nconst modal = document.querySelector('.modal');\nconst overlay = document.querySelector('.overlay');\nconst btnCloseModal = document.querySelector('.btn--close-modal');\nconst btnsOpenModal = document.querySelectorAll('.btn--show-modal');\nconst btnScrollTo = document.querySelector('.btn--scroll-to');\nconst section1 = document.querySelector('#section--1');\nconst nav = document.querySelector('.nav');\nconst tabs = document.querySelectorAll('.operations__tab');\nconst tabsContainer = document.querySelector('.operations__tab-container');\nconst tabsContent = document.querySelectorAll('.operations__content');\n\nconst openModal = function (e) {\n  e.preventDefault();\n  modal.classList.remove('hidden');\n  overlay.classList.remove('hidden');\n};\n\nconst closeModal = function () {\n  modal.classList.add('hidden');\n  overlay.classList.add('hidden');\n};\n\nbtnsOpenModal.forEach(btn => btn.addEventListener('click', openModal));\n\nbtnCloseModal.addEventListener('click', closeModal);\noverlay.addEventListener('click', closeModal);\n\ndocument.addEventListener('keydown', function (e) {\n  if (e.key === 'Escape' && !modal.classList.contains('hidden')) {\n    closeModal();\n  }\n});\n\n///////////////////////////////////////\n// Button Scrolling\nbtnScrollTo.addEventListener('click', function (e) {\n  const s1coords = section1.getBoundingClientRect();\n  console.log(s1coords);\n\n  console.log(e.target.getBoundingClientRect());\n\n  console.log('Current scroll (X/Y)', window.pageXOffset, window.pageYOffset);\n\n  console.log(\n    'height/width viewport',\n    document.documentElement.clientHeight,\n    document.documentElement.clientWidth\n  );\n\n  // Scrolling\n  // window.scrollTo(\n  //   s1coords.left + window.pageXOffset,\n  //   s1coords.top + window.pageYOffset\n  // );\n\n  // window.scrollTo({\n  //   left: s1coords.left + window.pageXOffset,\n  //   top: s1coords.top + window.pageYOffset,\n  //   behavior: 'smooth',\n  // });\n\n  section1.scrollIntoView({ behavior: 'smooth' });\n});\n\n///////////////////////////////////////\n// Page Navigation\n\n// document.querySelectorAll('.nav__link').forEach(function (el) {\n//   el.addEventListener('click', function (e) {\n//     e.preventDefault();\n//     const id = this.getAttribute('href');\n//     console.log(id);\n//     document.querySelector(id).scrollIntoView({ behavior: 'smooth' });\n//   });\n// });\n\n// 1. Add event listener to common parent element\n// 2. Determine what element originated the event\n\ndocument.querySelector('.nav__links').addEventListener('click', function (e) {\n  e.preventDefault();\n  // Matching Strategy\n  if (e.target.classList.contains('nav__link')) {\n    const id = e.target.getAttribute('href');\n    document.querySelector(id).scrollIntoView({ behavior: 'smooth' });\n  }\n});\n\n// Tabbed Components\n\ntabsContainer.addEventListener('click', function (e) {\n  const clicked = e.target.closest('.operations__tab');\n\n  // Guard Clause\n  if (!clicked) return;\n\n  // Remove Active Classes\n  tabs.forEach(t => t.classList.remove('operations__tab--active'));\n  tabsContent.forEach(c => c.classList.remove('operations__content--active'));\n\n  // Active Tab\n  clicked.classList.add('operations__tab--active');\n\n  // Activate Content Area\n  document\n    .querySelector(`.operations__content--${clicked.dataset.tab}`)\n    .classList.add('operations__content--active');\n});\n\n// Menu fade animation\nconst handleHover = function (e) {\n  if (e.target.classList.contains('nav__link')) {\n    const link = e.target;\n    const siblings = link.closest('.nav').querySelectorAll('.nav__link');\n    const logo = link.closest('.nav').querySelector('img');\n\n    siblings.forEach(el => {\n      if (el !== link) el.style.opacity = this;\n    });\n  }\n};\n\n// Passing an \"argument\" into handler\nnav.addEventListener('mouseover', handleHover.bind(0.5));\nnav.addEventListener('mouseout', handleHover.bind(1));\n\n// Sticky Navigation\\\n// const initialCoords = section1.getBoundingClientRect();\n// console.log(initialCoords);\n\n// window.addEventListener('scroll', function () {\n//   console.log(window.scrollY);\n\n//   if (window.scrollY > initialCoords.top) nav.classList.add('sticky');\n//   else nav.classList.remove('sticky');\n// });\n\n// Sticky Navigation: Intersection Observer API\n// const obsCallback = function (entries, observer) {\n//   entries.forEach(entry => {\n//     console.log(entry);\n//   });\n// };\n\n// const obsOptions = {\n//   root: null,\n//   threshold: [0, 0.2],\n// };\n\n// const observer = new IntersectionObserver(obsCallback, obsOptions);\n// observer.observe(section1);\n\nconst header = document.querySelector('.header');\nconst navHeight = nav.getBoundingClientRect().height;\n\nconst stickyNav = function (entries) {\n  const [entry] = entries;\n\n  if (!entry.isIntersecting) nav.classList.add('sticky');\n  else nav.classList.remove('sticky');\n};\n\nconst headerObserver = new IntersectionObserver(stickyNav, {\n  root: null,\n  threshold: 0,\n  rootMargin: `-${navHeight}px`,\n});\nheaderObserver.observe(header);\n\n// Reveal Sections\nconst allSections = document.querySelectorAll('.section');\n\nconst revealSection = function (entries, observer) {\n  const [entry] = entries;\n  //console.log(entry);\n\n  if (!entry.isIntersecting) return;\n\n  entry.target.classList.remove('section--hidden');\n  observer.unobserve(entry.target);\n};\n\nconst sectionObserver = new IntersectionObserver(revealSection, {\n  root: null,\n  threshold: 0.15,\n});\nallSections.forEach(function (section) {\n  sectionObserver.observe(section);\n  //section.classList.add('section--hidden');\n});\n\n// Lazy Loading Images\nconst imgTargets = document.querySelectorAll('img[data-src]');\nconsole.log(imgTargets);\n\nconst loadImg = function (entries, observer) {\n  const [entry] = entries;\n  if (!entry.isIntersecting) return;\n\n  // Replace src with data-src\n  entry.target.src = entry.target.dataset.src;\n\n  entry.target.addEventListener('load', function () {\n    entry.target.classList.remove('lazy-img');\n  });\n\n  observer.unobserve(entry.target);\n};\n\nconst imgObserver = new IntersectionObserver(loadImg, {\n  root: null,\n  threshold: 0,\n  rootMargin: '200px',\n});\n\nimgTargets.forEach(img => imgObserver.observe(img));\n\n// Slider\nconst slider = function () {\n  const slides = document.querySelectorAll('.slide');\n  const btnLeft = document.querySelector('.slider__btn--left');\n  const btnRight = document.querySelector('.slider__btn--right');\n  const dotContainer = document.querySelector('.dots');\n\n  let curSlide = 0;\n  const maxSlide = slides.length;\n\n  // Functions\n  const createDots = function () {\n    slides.forEach(function (_, i) {\n      dotContainer.insertAdjacentHTML(\n        'beforeend',\n        `<button class=\"dots__dot\" data-slide=\"${i}\"></button>`\n      );\n    });\n  };\n\n  const activateDot = function (slide) {\n    document\n      .querySelectorAll('.dots__dot')\n      .forEach(dot => dot.classList.remove('dots__dot--active'));\n\n    document\n      .querySelector(`.dots__dot[data-slide=\"${slide}\"]`)\n      .classList.add('dots__dot--active');\n  };\n\n  const goToSlide = function (slide) {\n    slides.forEach(\n      (s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)\n    );\n  };\n\n  // Next Slide\n  const nextSlide = function () {\n    if (curSlide === maxSlide - 1) {\n      curSlide = 0;\n    } else {\n      curSlide++;\n    }\n\n    goToSlide(curSlide);\n    activateDot(curSlide);\n  };\n\n  const prevSlide = function () {\n    if (curSlide === 0) {\n      curSlide = maxSlide - 1;\n    } else {\n      curSlide--;\n    }\n    goToSlide(curSlide);\n    activateDot(curSlide);\n  };\n\n  const init = function () {\n    goToSlide(0);\n    createDots();\n    activateDot(0);\n  };\n  init();\n\n  // Event Handlers\n  btnRight.addEventListener('click', nextSlide);\n  btnLeft.addEventListener('click', prevSlide);\n\n  document.addEventListener('keydown', function (e) {\n    if (e.key === 'ArrowLeft') prevSlide();\n    e.key === 'ArrowRight' && nextSlide();\n  });\n\n  dotContainer.addEventListener('click', function (e) {\n    if (e.target.classList.contains('dots__dot')) {\n      const { slide } = e.target.dataset;\n      goToSlide(slide);\n      activateDot(slide);\n    }\n  });\n};\nslider();\n////////////////////////////////////////////\n////////////////////////////////////////////\n////////////////////////////////////////////\n/*\n// Selecting Elements\nconsole.log(document.documentElement);\nconsole.log(document.head);\nconsole.log(document.body);\n\nconst header = document.querySelector('.header');\nconst allSections = document.querySelectorAll('.section');\nconsole.log(allSections);\ndocument.getElementById('section--1');\nconst allButtons = document.getElementsByTagName('button');\nconsole.log(allButtons);\n\nconsole.log(document.getElementsByClassName('btn'));\n\n// Creating and Inserting Elements\nconst message = document.createElement('div');\nmessage.classList.add('cookie-message');\nmessage.textContent =\n  'We use cookies for improved functionality and analytics.';\nmessage.innerHTML =\n  'We use cookies for improved functionality and analytics.<button class=\"btn btn--close-cookie\">Got it!</button>';\n//header.prepend(message);\nheader.append(message);\n//header.append(message.cloneNode(true));\n\n//header.before(message);\n//header.after(message);\ndocument\n  .querySelector('.btn--close-cookie')\n  .addEventListener('click', function () {\n    message.remove();\n  });\n\n// Styles\nmessage.style.backgroundColor = '#37383d';\nmessage.style.width = '120%';\n\nconsole.log(message.style.colorß);\nconsole.log(message.style.backgroundColor);\n\nconsole.log(getComputedStyle(message).color);\nconsole.log(getComputedStyle(message).height);\n\nmessage.style.height =\n  Number.parseFloat(getComputedStyle(message).height, 10) + 30 + 'px';\n\ndocument.documentElement.style.setProperty('--color-primary', 'orangered');\n\n// Attributes\nconst logo = document.querySelector('.nav__logo');\nconsole.log(logo.alt);\nconsole.log(logo.src);\nconsole.log(logo.className);\n\nlogo.alt = 'Beautiful minimaßlist logo';\n\n// Non-standard\nconsole.log(logo.designer);\nconsole.log(logo.getAttribute('designer'));\nlogo.setAttribute('company', 'Bankist');\n\nconsole.log(logo.getAttribute('src'));\n\nconst link = document.querySelector('.nav__link--btn');\nconsole.log(link.href);\nconsole.log(link.getAttribute('href'));\n\n// Data Attributes\nconsole.log(logo.dataset.versionNumber);\n\n// Classes\nlogo.classList.add('c');\nlogo.classList.remove('c');\nlogo.classList.toggle('c');\nlogo.classList.contains('c');\n\n// Don't use.  Overrides previous and only allows 1 class\n//logo.className = 'Jonas'\n\n\nconst btnScrollTo = document.querySelector('.btn--scroll-to');\nconst section1 = document.querySelector('#section--1');\n\nbtnScrollTo.addEventListener('click', function (e) {\n  const s1coords = section1.getBoundingClientRect();\n  console.log(s1coords);\n\n  console.log(e.target.getBoundingClientRect());\n\n  console.log('Current scroll (X/Y)', window.pageXOffset, window.pageYOffset);\n\n  console.log(\n    'height/width viewport',\n    document.documentElement.clientHeight,\n    document.documentElement.clientWidth\n  );\n\n  // Scrolling\n  // window.scrollTo(\n  //   s1coords.left + window.pageXOffset,\n  //   s1coords.top + window.pageYOffset\n  // );\n\n  // window.scrollTo({\n  //   left: s1coords.left + window.pageXOffset,\n  //   top: s1coords.top + window.pageYOffset,\n  //   behavior: 'smooth',\n  // });\n\n  section1.scrollIntoView({ behavior: 'smooth' });\n});\n\nconst h1 = document.querySelector('h1');\n\nconst alertH1 = function (e) {\n  alert('addEventListenser: Great! You are reading the heading :D');\n};\n\nh1.addEventListener('mouseenter', alertH1);\n\nsetTimeout(() => h1.removeEventListener('mouseenter', alertH1), 3000);\n\n// Old Way\n// h1.onmouseenter = function (e) {\n//   alert('onmouseenter: Great! You are reading the heading :D');\n// };\n\n\n// rgb(255,255,255)\nconst randomInt = (min, max) =>\n  Math.floor(Math.random() * (max - min + 1) + min);\nconst randomColor = () =>\n  `rbg(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;\nconsole.log(randomColor(0, 255));\n\ndocument.querySelector('.nav__link').addEventListener('click', function (e) {\n  this.style.backgroundColor = randomColor();\n  console.log('LINK', e.target, e.currentTarget);\n});\n\ndocument.querySelector('.nav__links').addEventListener('click', function (e) {\n  this.style.backgroundColor = randomColor();\n  console.log('CONTAINER', e.target, e.currentTarget);\n});\n\ndocument.querySelector('.nav').addEventListener('click', function (e) {\n  this.style.backgroundColor = randomColor();\n  console.log('NAV', e.target, e.currentTarget);\n});\n\n\nconst h1 = document.querySelector('h1');\n\n// Going downwards: child\nconsole.log(h1.querySelectorAll('.highlight'));\nconsole.log(h1.childNodes);\nconsole.log(h1.children);\nh1.firstElementChild.style.color = 'white';\nh1.lastElementChild.style.color = 'orangered';\n\n// Going upwards: parents\nconsole.log(h1.parentNode);\nconsole.log(h1.parentElement);\n\nh1.closest('.header').style.background = 'var(--gradient-secondary)';\n\nh1.closest('h1').style.background = 'var(--gradient-primary)';\n\n// Going sideways: siblings\nconsole.log(h1.previousElementSibling);\nconsole.log(h1.nextElementSibling);\n\nconsole.log(h1.previousSibling);\nconsole.log(h1.nextSibling);\n\nconsole.log(h1.parentElement.children);\n[...h1.parentElement.children].forEach(function (el) {\n  if (el !== h1) el.style.transform = 'scale(0.5)';\n});\n*/\n\ndocument.addEventListener('DOMContentLoaded', function (e) {\n  console.log('HTML parsed and DOM tree built!', e);\n});\n\nwindow.addEventListener('load', function (e) {\n  console.log('Page fully loaded', e);\n});\n\n// window.addEventListener('beforeunload', function (e) {\n//   e.preventDefault();\n//   console.log(e);\n//   e.returnValue = '';\n// });\n"],"names":["modal","document","querySelector","overlay","btnCloseModal","btnsOpenModal","querySelectorAll","btnScrollTo","section1","nav","tabs","tabsContainer","tabsContent","openModal","e","preventDefault","classList","remove","closeModal","add","forEach","btn","addEventListener","key","contains","s1coords","getBoundingClientRect","console","log","target","window","pageXOffset","pageYOffset","documentElement","clientHeight","clientWidth","scrollIntoView","behavior","id","getAttribute","clicked","closest","t","c","dataset","tab","handleHover","link","siblings","el","style","opacity","this","bind","header","navHeight","height","stickyNav","entries","entry","isIntersecting","headerObserver","IntersectionObserver","root","threshold","rootMargin","observe","allSections","revealSection","observer","unobserve","sectionObserver","section","imgTargets","loadImg","src","imgObserver","img","slider","slides","btnLeft","btnRight","dotContainer","curSlide","maxSlide","length","activateDot","slide","dot","goToSlide","s","i","transform","nextSlide","prevSlide","_","insertAdjacentHTML"],"version":3,"file":"index.bdb368f0.js.map"}