JSFiddle

  • CSS Marquee like Bullet train Ad

    No-Library (pure JS), HTML, SCSS, JavaScript 

    <div class="electric-board">
  <div class="seat-info">
    <div class="info-container">
      <p class="info -ja">指定席</p>
      <p class="info -en">Reserve</p>
    </div>
  </div>
  <div class="message-container">
    <p class="message">新幹線車内メディアの電光文字広告は、64文字のメッセージ、7色から選べる表示色、東京〜新大阪、1ヶ月表示で330万円になります。</p>
  </div>
</div>

  • Hamburger menu animation

    No-Library (pure JS), HTML, SCSS, JavaScript 

    <div class="menu-button">
  <div class="line -top"></div>
  <div class="line -middle"></div>
  <div class="line -bottom"></div>
</div>

  • Chat app like LINE with Vue.js 2.2

    Vue 2.2.1, HTML, SCSS, JavaScript 

    const Balloon = {
  template: `<div class="conversation-balloon" :class="speaker">
  <div class="avatar">
    <img src="https://avatars3.githubusercontent.com/u/15647466?v=3&s=88">
    <p class="name">{{ name }}</p>
  </div>
  <p class="message">{{ message }}</p>
</div>`,
  props: {
    name: {
      type: String,
      required: true
    },
    speaker: {
      type: String,
      required: true,
      validator: value => {
        return ['my ...

  • Infinite scroll with Vue.js2.2

    Vue 2.2.1, HTML, SCSS, JavaScript 

    // mock
function api (page, limit) {
  const items = [...Array(limit)].map((a, i) => {
    return {
      title: `page: ${page}, limit: ${limit}, ${i.toString ...

  • EasterEgg(Konami Commands)

    No-Library (pure JS), HTML, CSS, JavaScript 

    function easterEgger (commands, event) {
  const keys = [];
  document.addEventListener('keyup', (e) => {
    keys.push(e.keyCode);
    if (keys.length > commands.length) keys ...

  • Generate Identity Icon #1 is the latest revision

    任意の文字列からIdentity Iconを生成する 

    const identityIcon = document.querySelector('.identity-icon');
const source = document.getElementById('source');
const generate = document.getElementById('generate')

/**
 * 文字列からRGBを取得する
 * @param {string} val RGBに変換する文字列 ...

  • Working memory training #2 is the latest revision

    No-Library (pure JS), HTML, SCSS, JavaScript 

    const numTable = document.getElementById('number-table');
const level = document.getElementById('level');
const start = document.getElementById('start');
const reset = document.getElementById('reset ...

  • Audio Player #1 is the latest revision

    No-Library (pure JS), HTML, SCSS, JavaScript 

    const load = document.getElementById('load');
const speed = document.getElementById('speed');
const audio = document.getElementById('player');

load.addEventListener('click', () => {
  const source ...

  • How to use reduce in JavaScript

    No-Library (pure JS), HTML, CSS, JavaScript 

    const accounts = [
  { id: 1, firstName: 'taro',    lastName: 'sato',      age: 10, sex: 'male' },
  { id: 2, firstName: 'jiro',    lastName: 'suzuki',    age: 18 ...

  • Deep copy in ES6 without library

    No-Library (pure JS), HTML, CSS, JavaScript 

    const object = {
  // プリミティブ型
  a: 1,
  b: 'a',
  c: '',
  d: null,
  e: undefined,
  f: true,
  // 参照型
  g: [1, 2, 3],
  h ...