/ Gists / JavaScript

Gists - JavaScript

On gists

Observe

JavaScript

observe.js #

const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // `entry.target` 是 dom 元素
      console.log(`${entry.target.id} is visible`);
    }
  });
};
const options = {
  threshold: 1.0,
};
const observer = new IntersectionObserver(callback, options);
const btn = document.getElementById( btn );
const bottomBtn = document.getElementById( bottom-btn );
observer.observe(btn);
observer.observe(bottomBtn);
On gists

Detect device type

JavaScript JS oneliners

snippet.js #

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
    ?  Mobile 
    :  Desktop ;
console.log(detectDeviceType());
On gists

JS lambda closure

•
JavaScript-OOP JavaScript

example.js #

function counter() {
  let count = 0;

  function increment() {
    return count += 1;
  };

  return increment;
}

const generateId = counter();

generateId(); // 1
generateId(); // 2
generateId(); // 3



// ES 6 ;)

const test = () => {
	let temp = 0;
	 return () => {
		temp++;
		console.log(temp);
	}
}

const invoke = test();

invoke();
invoke();
invoke();
On gists

Audio api

JavaScript

example.js #

   <script>
        var audios = [];
        audios[0] = new Audio("/sounds/audio_2019-12-20_11-12-44.mp3");    
        audios[1] = new Audio("/sounds/audio_2019-12-20_11-13-32.mp3");    
        audios[2] = new Audio("/sounds/audio_2019-12-20_11-13-43.mp3");    
        audios[3] = new Audio("/sounds/makak-oda.mp3");    
        
        var sound;
        var playAudio = function(index)
        {
            for (i = 0; i < audios.length; i++)
            {
                sound = audios[i];
                sound.pause();
                sound.currentTime = 0;
            }

            audios[index].play();
        };
        
    </script>
On gists

Search bar (cloning)

JavaScript

search-bar.js #

const userCardTemplate = document.querySelector("[data-user-template]")
const userCardContainer = document.querySelector("[data-user-cards-container]")
const searchInput = document.querySelector("[data-search]")

let users = []

searchInput.addEventListener("input", e => {
  const value = e.target.value.toLowerCase()
  users.forEach(user => {
    const isVisible =
      user.name.toLowerCase().includes(value) ||
      user.email.toLowerCase().includes(value)
    user.element.classList.toggle("hide", !isVisible)
  })
})

fetch("https://jsonplaceholder.typicode.com/users")
  .then(res => res.json())
  .then(data => {
    users = data.map(user => {
      const card = userCardTemplate.content.cloneNode(true).children[0]
      const header = card.querySelector("[data-header]")
      const body = card.querySelector("[data-body]")
      header.textContent = user.name
      body.textContent = user.email
      userCardContainer.append(card)
      return { name: user.name, email: user.email, element: card }
    })
  })
On gists

Alias - document.querySelector/all

JavaScript

solution.js #

// one way
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);


// second way
let $ = (selector) => document.querySelector(selector);
let $$ = (selector) => document.querySelectorAll(selector);

$('div').style.color = 'blue'
$$('div').forEach(div => div.style.background = 'orange')
On gists

How to write loops for promise with JavaScript?

JavaScript

loop.js #

const sayHi = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Hi");
      resolve();
    }, 3000);
  });
};

const asyncArray = [sayHi, sayHi, sayHi];

const hi = async () => {
  for (const func of asyncArray) {
    console.log(await func());
  }
};
On gists

Simple rating (odometer)

JavaScript CSS CSS trick

example.html #

	<section>
	<button id="minus">-</button>
	<div>
		<span style="--state: -10">- 9-8 -7 -6 -5 -4 -3 -2 -1 0 +1 +2 +3 +4 +5 +6 +7 +8 +9</span>
	</div>
	<button id="plus">+</button>
		</section>
On gists

Function called only once

JavaScript

example.js #

const myFunc = () => {
  if (myFunc.fired) {
    return;
  }
  myFunc.fired = true;
  //...
};
On gists

Check if the array contains a value / get index

JavaScript JS oneliners

ex.js #

const array = [ 'fatfish', 'hello', 'world', 24 ]
console.log(array.indexOf('fatfish')) // 0
console.log(array.indexOf('medium')) // -1



const array = [
  {
    name: 'fatfish'
  },
  {
    name: 'hello'
  },
  {
    name: 'world'
  },
]
const index = array.findIndex((it) => it.name === 'fatfish') // 0