Hänga tavla

by hambern

HTML

<form id="app">
  <p>
    <label for="height">Tavlans 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">Vägglinje</label>
    <input type="number" v-model="line" id="line" v-on:change="calculate()">
  </p>
  <p>
    <label for="target">Spikhöjd på väggen</label>
    <span id="target">{{ target }} cm</span>
  </p>
  <p>
    <label for="top">Överkant</label>
    <span id="top">{{ top }} cm</span>
  </p>
  <p>
    <label for="bottom">Underkant</label>
    <span id="bottom">{{ bottom }} cm</span>
  </p>
</form>

CSS

body {
  margin: 2em;
}

p {
  margin: 1em 0;
}

label {
  display: block;
}

#target, #top, #bottom {
  font-size: 1.3em;
  color: darkcyan;
  font-weight: 700;
}

Vue

const app = Vue.createApp({
  data() {
    return {
      height: 100,
      nail: 10,
      line: 140,
      target: null,
      top: null,
      bottom: null
    }
  },
  methods: {
    calculate() {
      var phi = 1.61803398874989484820458683436;
      this.target = Math.round(this.line + (this.height / phi) - this.nail);
      this.top = Math.round(this.line + (this.height / phi));
      this.bottom = Math.round(this.line - (this.height / (phi * phi)));
    }
  },
  mounted() {
    this.calculate();
  }
});

app.mount("#app");