Hänga tavla

by hambern

HTML

<form id="app">
  <p>
    <label for="height">Höjd</label>
    <input type="number" v-model="height" id="height" v-on:change="calculate()">
  </p>
  <p>
    <label for="nail">Spikavstånd (från toppen)</label>
    <input type="number" v-model="nail" id="nail" v-on:change="calculate()">
  </p>
  <p>
    <label for="line">Centerlinje</label>
    <input type="number" v-model="line" id="line" v-on:change="calculate()">
  </p>
  <p>
    <label for="target">Spikmål</label>
    <span>{{ target }}</span>
  </p>
</form>

CSS

label {
  display: block;
}

Vue

const app = Vue.createApp({
  data() {
    return {
      height: 100,
      nail: 10,
      line: 150,
      target: null,
    }
  },
  methods: {
    calculate() {
      var phi = 1.61803398874989484820458683436;
      this.target = this.line+(this.height-this.height/phi)-this.nail
    }
  },
  mounted() {
    this.calculate(); // Körs direkt när appen startar
  }
});

app.mount("#app");