BroFox86

let lastScrollY = scrollY || 0;

window.addEventListener("scroll", () => {
  if (scrollY > lastScrollY) {
    console.log("down scroll");
  } else if (scrollY < lastScrollY) {
    console.log("up scroll");
  }

  lastScrollY = scrollY;

BroFox86

<div role="group" aria-labelledby="groupLabel">
  <span id="groupLabel">Heading</span>
  <input type="text">
  <input type="text">
</div>

BroFox86

if (value.startsWith('34') || value.startsWith('37')) {
  return 'americanExpress'
}

if (value.startsWith('62')) {
  return 'chinaUnionPay'
}

if (value.startsWith('6011') || value.startsWith('65')) {
  return 'DiscoverCard'

BroFox86

/**
 * Launches star animation.
 * @param {Number} interval - Animation speed in MS.
 * @param {String} target - Target selector.
 */
async function animateStar(interval, target) {
  try {
    const container = document.querySelector(target)
    const image = document.createElement('img')
    const paths = ['images/Star1.svg', 'images/Star2.svg', 'images/Star3.svg', 'images/Star4.svg', 'images/Star5.svg']

BroFox86

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const image = document.createElement('img')

    image.src = src

    image.onload = () => resolve(image)

    image.onerror = () => reject(new Error(`Load image error: ${src}`))
  })

BroFox86

<svg
  aria-labelledby='logoLabel'
>
  <title id='logoLabel'>Brand logo</title>   
  ...
</svg>

BroFox86

.element-child {
  color: black;
}

@-moz-document url-prefix() {
  .element-child {
    color: pink;
  }
}

BroFox86

if (screen && screen.orientation !== null) {
  window.screen.orientation.onchange = () => { 
    switch (screen.orientation.type) {
  	  case "landscape-primary":
        console.log("That looks good.");
        break;
      case "landscape-secondary":
        console.log("Mmmh… the screen is upside down!");
        break;
      case "portrait-secondary":

BroFox86

<svg className={s.icon} width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id='MyGradient'>
      <stop offset='5%' stopColor='#F60' />
      <stop offset='95%' stopColor='#FF6' />
    </linearGradient>
  </defs>
  <rect width='100' height='50' fill='url(#MyGradient)' />
</svg>

BroFox86

const svgElem = document.createElementNS("http://www.w3.org/2000/svg", "svg");
const useElem = document.createElementNS("http://www.w3.org/2000/svg", "use");

useElem.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#down-arrow");

svgElem.appendChild(useElem);