Rowadz · June 12, 2020 02:27
diff --git a/closures.js b/closures.js
 const getById = (id) => {
  console.log('get')
  return document.getElementById(id)
 }
 // IIFE
 setInterval(
  (() => {
    const h1 = getById('display-number')
    const { floor, random } = Math
    return () => {
      h1.innerText = floor(random() * 10)
    }
  })(),
  1000
 )

 const button = getById('closures-button')

 button.addEventListener(
  'click',
  (() => {
    let firstClickTime = null
    let counter = 0
    return (event) => {
      counter++
      if (!firstClickTime) {
        firstClickTime = Date.now()
        event.preventDefault()
        return
      }
      const time = Date.now()
      const timeDiff = (time - firstClickTime) / 1000
      if (timeDiff <= 1 && counter >= 2) {
        console.log(
          `%c⏱️ 2 clicks in less or equal to 1 sec, time diff = ${timeDiff}`,
          'color: #FFFFDE; font-size: 20px; text-shadow: 1px 1px #2196F3;'
        )
        button.classList.toggle('large')
        counter = 0
      }

      firstClickTime = Date.now()
    }
  })()
 )
 // 0, 1, 1, 2, 3, 5, 8, 13
 // 0, 1, 2, 3, 4, 5, 6, 7

 const feb = () => {
  const cahce = { 0: 0, 1: 1 }
  return (countingFunc = (n) => {
    console.log(cahce)
    if (n in cahce) {
      console.log(`%cFrom cahce! cache[${n}]`, 'color: blue; font-size: 20px;')
      return cahce[n]
    }

    cahce[n] = countingFunc(n - 1) + countingFunc(n - 2)
    return cahce[n]
  })
 }

 const initFeb = feb()

 console.log(initFeb(4))
 console.log(initFeb(7))



 /*
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{..js..}</title>
    <style>
      button {
        background: #009eb5;
        outline: none;
        height: 150px;
        width: 200px;
        border: none;
        cursor: pointer;
        font-size: 20px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        padding: 1em;
        transform: scale(0.9);
        transform-origin: 0 0;
        transition: transform 0.6s;
      }
      button:hover {
        background: #00bfdb;
      }
      .large {
        box-shadow: 0px 3px 20px black;
        transform: scale(1.3);
      }
    </style>
  </head>
  <body>
    <section id="closures">
      <h1 id="display-number">number</h1>
      <button id="closures-button">Click 2 times to activate</button>
    </section>
    <script src="closures.js"></script>
  </body>
 </html>
 */
	const getById = (id) => {
	console.log('get')
	return document.getElementById(id)
	}
	// IIFE
	setInterval(
	(() => {
	const h1 = getById('display-number')
	const { floor, random } = Math
	return () => {
	h1.innerText = floor(random() * 10)
	}
	})(),
	1000
	)

	const button = getById('closures-button')

	button.addEventListener(
	'click',
	(() => {
	let firstClickTime = null
	let counter = 0
	return (event) => {
	counter++
	if (!firstClickTime) {
	firstClickTime = Date.now()
	event.preventDefault()
	return
	}
	const time = Date.now()
	const timeDiff = (time - firstClickTime) / 1000
	if (timeDiff <= 1 && counter >= 2) {
	console.log(
	`%c⏱️ 2 clicks in less or equal to 1 sec, time diff = ${timeDiff}`,
	'color: #FFFFDE; font-size: 20px; text-shadow: 1px 1px #2196F3;'
	)
	button.classList.toggle('large')
	counter = 0
	}

	firstClickTime = Date.now()
	}
	})()
	)
	// 0, 1, 1, 2, 3, 5, 8, 13
	// 0, 1, 2, 3, 4, 5, 6, 7

	const feb = () => {
	const cahce = { 0: 0, 1: 1 }
	return (countingFunc = (n) => {
	console.log(cahce)
	if (n in cahce) {
	console.log(`%cFrom cahce! cache[${n}]`, 'color: blue; font-size: 20px;')
	return cahce[n]
	}

	cahce[n] = countingFunc(n - 1) + countingFunc(n - 2)
	return cahce[n]
	})
	}

	const initFeb = feb()

	console.log(initFeb(4))
	console.log(initFeb(7))



	/*
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>{..js..}</title>
	<style>
	button {
	background: #009eb5;
	outline: none;
	height: 150px;
	width: 200px;
	border: none;
	cursor: pointer;
	font-size: 20px;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	padding: 1em;
	transform: scale(0.9);
	transform-origin: 0 0;
	transition: transform 0.6s;
	}
	button:hover {
	background: #00bfdb;
	}
	.large {
	box-shadow: 0px 3px 20px black;
	transform: scale(1.3);
	}
	</style>
	</head>
	<body>
	<section id="closures">
	<h1 id="display-number">number</h1>
	<button id="closures-button">Click 2 times to activate</button>
	</section>
	<script src="closures.js"></script>
	</body>
	</html>
	*/