Cacher is the code snippet organizer for pro developers

<div id="app">
 <h1>Amanogawa</h1>
 <button class="clear" value="C" v-on:click="calc('C')">C</button>
 <table>
  <tr>
   <td colspan="4"><input type="text" v-model="output"></td>
  </tr>
  <tr v-for="row in items">
   <td v-for="item in row">
    <button v-on:click="calc(item)">{{ item }}</button>
   </td>
  </tr>
 </table>
</div>

<div id="app2">
 <h1>Calculator</h1>
 
 <button class="clear" value="C" v-on:click="calc('C')">C</button>
 
 <button class="include" value="=>" v-on:click="calc('=>')">=></button>
 
 <table>
  <tr>
   <td colspan="4"><input type="text" v-model="output"></td>
  </tr>
  <tr v-for="row in items">
   <td v-for="item in row">
    <button v-on:click="calc(item)">{{ item }}</button>
   </td>
  </tr>
 </table>
</div>

<div id="stalker"></div>
<!-- <div class="memo">
 <input type="textarea">
</div> -->

var app = new Vue({ 
  el: '#app',
  data: {
    output: '0',
    items: [
      ['7', '8', '9', '/'],
      ['4', '5', '6', '*'],
      ['1', '2', '3', '-'],
      ['0', '00', '000', '+'],
      ['1.08', '1.10', '.', '=', ]
    ]
  },
  methods: {
    calc: function (cmd) {
      if(cmd === '='){
        this.output = Math.round(eval(this.output))
      }else if(cmd === 'C'){
        this.output = '0'
      }else if(this.output === '0') {
        this.output = cmd
      }else{
        this.output += cmd
      }
    }
  }
})


var app2 = new Vue({ 
  el: '#app2',
  data: {
    output: '0',
    items: [
      ['7', '8', '9', '/'],
      ['4', '5', '6', '*'],
      ['1', '2', '3', '-'],
      ['0', '00', '000', '+'],
      ['1.08', '1.10', '.', '=', ],
    ]
  },
  methods: {    
    calc: function (cmd) {      
      if(cmd === '='){
        this.output = Math.round(eval(this.output ))
      }else if(cmd === '=>'){
       this.output = app.output
      }else if(cmd === 'C'){
        this.output = '0'
      }else if(this.output === '0') {
        this.output = cmd
      }else{
        this.output += cmd
      }
    }
  }
})

// Mouse Stalker
const stalker = document.getElementById('stalker'); 
document.addEventListener('mousemove', function (e) {
    stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

@import url('https://fonts.googleapis.com/css?family=Big+Shoulders+Display&display=swap')

body  
  display: flex
  justify-content: center
  align-items: center
  flex-wrap: wrap
  min-height: 100vh
  width: 100vw
  background-color: #000
  background: linear-gradient(-45deg, rgba(25,95,228,.8), rgba(229,23,135,.7))
h1
  font-family: 'Big Shoulders Display', cursive
  color: #fff
#app
  margin-left: -100px
#app2  
  margin-left: 100px

#app, #app2
  @media only screen and (max-width: 640px)
    margin: 20px 0
  position: relative

  .clear, .include
    font-family: 'Big Shoulders Display', cursive
    
    position: absolute
    right: -64px
    width: 64px
    height: 444px
    @media only screen and (max-width: 640px)
      height: auto
      top: 40px
      right: -10px
    font-size: 48px
    background-image: linear-gradient(to right bottom, rgba(81, 21, 126, 0.5), rgba(20, 3, 26, 0.9))

    border: none
    color: #fff
    transition: .2s
    &:focus,&:active
      outline: none
    &:hover
      opacity: 0.65
      cursor: pointer
  .include  
    left: -100px
    top: 16px
    width: 64px
    height: 64px
    @media only screen and (max-width: 640px)
      left: 224px
      top: -40px
    
  table  
    background-image: linear-gradient(to right bottom, rgba(255, 165, 0, 0.68), rgba(128, 0, 128, 0.75))
    padding: 30px
    @media only screen and (max-width: 640px)
      padding: 15px
    tr
      td
        button                 
          //background-image: linear-gradient(to right bottom, rgba(79, 149, 183, 0.58), rgba(113, 216, 232, 0.69))
          background-image: linear-gradient(to right bottom, rgba(224, 172, 25, 0.75), rgba(228, 104, 31, 0.92))
          margin: 0
          padding: 4px 
          width: 60px
          height: 56px
          font-size: 32px
          color: #fff
          font-family: 'Big Shoulders Display', cursive
          letter-spacing: 2px
          border: none
          opacity: 0.9
          transition: 0.3s
          &:hover
            background-image: linear-gradient(to right bottom, rgba(21, 103, 226, 0.5), rgba(20, 230, 26, 0.7))
            cursor: pointer
          &:focus,&:active
            outline: none
        input
          font-family: 'Big Shoulders Display', cursive
          letter-spacing: 2px
          height: 54px
          width: 100%
          box-sizing: border-box
          font-size: 32px
          color: #fff
          padding: 0 8px
          //background-image: linear-gradient(to right bottom, rgba(255, 165, 0, 0.68), rgba(128, 0, 128, 0.75))
          background-image: linear-gradient(to right bottom, rgba(200, 202, 94, 0.88), rgba(187, 26, 187, 0.82))
          border: none
          margin: 12px 0

#app2  table
  background-image: linear-gradient(to right, #1b85dc, #08b0cb)
 
#stalker
  pointer-events: none
  position: fixed
  top: -16px
  left: -16px
  width: 32px
  height: 32px
  border: 2px solid rgba(255, 255, 255, 0.7)
  border-radius: 50%
  background: rgba(0, 0, 0, 0.2)
  transform: translate(0, 0)
  transition: transform 0.2s
  transition-timing-function: ease-out
  z-index: 999