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 ...