Picodom - FizzBuzzCounter

by nju33

HTML

<script src="https://unpkg.com/picodom"></script>

CSS

.counter {
  display: flex;
  align-items: center;
  line-height: 1.2;
}

.result {
  font-size: 2.3em;
  padding: .3em .5em;
  margin-left: .2em;
  background: #fff;
  border: 1px solid #ccc;
}

.buttons {
  display: flex;
  flex-direction: column;
}

button {
  height: 2em;
  width: 2em;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin: .2em;
  outline: none;
  cursor: pointer;
  user-select: none;
}

button.disabled {
  opacity: .5;
  cursor: default;
}

Babel + JSX

/** @jsx h */
const {h, patch} = picodom;

class FizzBuzzCounter {
  constructor(state) {
    this.state = state;
    this._element = null;
    this._oldNode = null;
  }

  _increase() {
    return () => {
      const newState = Object.assign({}, {
        count: this.state.count + 1
      })
      this._update(newState);
    }
  }
  
  _decrease() {
    return () => {
      if (this.state.count === 1) {
        return;
      }
      
      const newState = Object.assign({}, {
        count: this.state.count - 1
      })
      this._update(newState);
    }
  }

  _update(newState) {
    this.state = newState;
    this.render();
  }

  _createView() {
    const result = (count => {
      if (count % 3 === 0 && count % 5 === 0) {
        return 'FizzBuzz';
      } else if (count % 3 === 0) {
        return 'Fizz';
      } else if (count % 5 === 0) {
        return 'Buzz';
      }
      return count;
    })(this.state.count);
    return (
      <div class="counter">
        <div class="buttons">
          <button onclick={this._increase()}>+</button>
          <button
            class={this.state.count === 1 && 'disabled'}
            onclick={this._decrease()}>-</button>
        </div>
        <div class="result">{this.state.count} : <span style={{color: 'orange'}}>{result}</span></div>

      </div>
    )
  }

  render() {
    const newNode = this._createView();
    this._element = patch(
      document.body,
      this._element,
      this._oldNode,
      newNode
    );
    this._oldNode = newNode;
  }
}

const fizzBuzzCounter = new FizzBuzzCounter({count: 1});
fizzBuzzCounter.render();