<template>
  <div id="wrapper">
    <main>
      <router-link to="/heim">Heim</router-link>

      <div id="calcUt">
        <div id="skjerm">
          {{ tall1 }} {{pluss}}  {{tall2}} = {{svar}}
        </div>
        <button v-on:click="leggTil" class="xKnapp" type="button">+</button>
        <button v-on:click="summer" class="xKnapp" type="button">=</button>
        <button v-on:click="cls" class="xKnapp" type="button">CLEAR</button>
        <div>
          <ul v-for="i in 9" id="grid">
            <button v-on:click="skiftTall(i)" class="knappar" type="button">{{i}}</button>
          </ul>
        </div>
      </div>

    </main>
  </div>
</template>

<script>
export default {
  name: 'calc-page',
  components: {},
  methods: {
    skiftTall: function (e) {
      if (this.pluss !== '') {
        this.tall2 += e
      } else {
        this.tall1 += e
      }
    },
    leggTil: function () {
      this.pluss = '+'
    },
    summer: function () {
      this.svar = parseInt(this.tall1) + parseInt(this.tall2)
    },
    cls: function () {
      this.tall1 = ''
      this.tall2 = ''
      this.svar = ''
      this.pluss = ''
    }
  },
  data () {
    return {
      tall1: '',
      tall2: '',
      svar: '',
      pluss: ''
    }
  }
}
</script>

<style lang="css">
div {
}
.xKnapp {
  width: auto;
  height: 10%;
}
#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 50px;
  grid-gap: 2em;
}

#skjerm {
  border-style: solid;
}

#wrapper {
  background:
    radial-gradient(
      ellipse at top left,
      rgba(255, 255, 255, 1) 0%,
      rgba(229, 229, 229, .9) 20%
    );
  height: 800px;
  width: 100%;
}
button {
}

main {
}

</style>