example.html #

<!-- https://jsbin.com/pazamoremo/3/edit?html,css,output -->

	<div>
		<span>0 1 2 3 4 5 6 7 8 9 10 0</span>
	</div>

example.js #

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

demo1.html #

<!--
  SVG
  https://codepen.io/erikdkennedy/pen/ygpwZg?editors=1100
-->
<header>
  <h1>Header Content</h1>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
    <polygon fill="red" points="0,100 100,0 100,100"/>
  </svg>
</header>

<section>
  <h1>Section Content</h1>
</section>

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

solution1.js #

const array = [ 1, [ 2, [ 3, [ 4, [ 5 ] ] ] ] ]
const flattenArray = (array) => {
  return array.reduce((res, it) => {
    return res.concat(Array.isArray(it) ? flattenArray(it) : it)
  }, [])
}
console.log(flattenArray(array)) // [1, 2, 3, 4, 5]

ex.js #

const prizes = [ 'A', 'B', 'C', 'D' ]
prizes.sort(() => 0.5 - Math.random())

example.css #

/* https://codepen.io/collection/XPjvPP/ */

/* Render items as columns */
.container {
  display: flex;
  flex-flow: column wrap;
}

/* Re-order items into rows */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

/* Force new columns */
.container::before,
.container::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}

app.css #

/* https://jsbin.com/piwefoxacu/edit?html,css,output */

a {
  position: relative;
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #000;
}

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

a:hover::before {
  transform: scaleX(1);
}

/* Animate the line from the right */
a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transform-origin: top right;
  transition: transform 0.3s ease;
}

pic.md #

example.js #

const lis = [...document.querySelectorAll("#wizard > li")];

lis.forEach((li) => {
  li.addEventListener("click", () => {
    const index = lis.indexOf(li);
    console.log(index);
  });
});