gpDA

// bad
var firstname = 'gp';
 
// bad
var first_name = 'gp';
 
// bad
var FIRSTNAME = 'gp';
 
// bad

gpDA

// bad
var firstname = 'GP';
 
// bad
var first_name = 'GP';
 
// bad
var FIRSTNAME = 'GP';
 
// bad

gpDA

// bad
var value = 'GP';
 
// bad
var val = 'GP';
 
// good
var firstName = 'GP';

gpDA

var name = "GP LEE";
var Name = "Tim Lee";
var NAME = "Thomas Lee"

console.log(name);
// GP LEE

console.log(Name);
// Tim Lee

gpDA

const images = document.querySelectorAll('.lazyload');

function handleIntersection(entries) {
  entries.map((entry) => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      entry.target.classList.add('loaded')
      observer.unobserve(entry.target);
    }
  });

gpDA

function intersectionHandler(entry) {
  const id = entry.target.id;
  const currentlyActive = document.querySelector('nav li.active');
  const shouldBeActive = document.querySelector('nav li[data-ref=' + id + ']');

  if (currentlyActive) {
    currentlyActive.classList.remove('active');
  }
  if (shouldBeActive) {
    shouldBeActive.classList.add('active');

gpDA

const sections = document.querySelectorAll('div.screen');
const config = {
  rootMargin: '-50px 0px -55%'
};

let observer = new IntersectionObserver(function (entries, self) {
  entries.forEach(entry => {
    console.log(entry);
    if (entry.isIntersecting) {
      intersectionHandler(entry); 

gpDA

.screen {
  min-height: 100vh;
  text-align:center;
  text-transform: uppercase;
  position: relative;
}
.screen h1 {
  margin:0;
  padding:0;
  white-space: nowrap;

gpDA

<div class="screen" id="first-screen">
  <h1>First screen</h1>
</div>
<div class="screen" id="second-screen">
  <h1>Second Screen</h1>
</div>

<div class="screen" id="third-screen">
  <h1>Third Screen</h1>
</div>

gpDA

function handleIntersect(entries, observer) {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > prevRatio) {
      entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
    } else {
      entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
    }
    
    prevRatio = entry.intersectionRatio;
  });