<template>
  <form class="card" @submit.prevent="calculate">
    <h3 class="title">SIMPLE CALCULATOR</h3>
    <div class="inputs-wrapper">
      <input id="num1" v-model="firstNumber" type="number" placeholder="First Number" />
      <select id="operator" v-model="op">
        <option value="+">plus</option>
        <option value="-">minus</option>
        <option value="*">times</option>
        <option value="/">divided by</option>
      </select>
      <input id="num2" v-model="secondNumber" type="number" placeholder="Second number" />
    </div>
    <button type="submit">Calculate</button>
    <div class="answer-box">
      <p class="answer-label">Your answer is</p>
      <h4 id="answer-value" :class="isError? 'is-error': 'is-success'">{{answer}}</h4>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      firstNumber: "",
      secondNumber: "",
      op: "+",
      answer: "Enter values",
      isError: false
    }
  },
  methods: {
    calculate() {
      if (this.firstNumber === "" || this.secondNumber === "") {
        this.answer = "First number and second number must not be empty";
        this.isError=true;
        return;
      }

      this.answer = eval(this.firstNumber + this.op + this.secondNumber);
      this.isError = false;
    }
  }
}
</script>

<style scoped>
body {
  margin: 0px;
}

.is-error{
  color: red;
}

.is-success{
  color: green;
}

#app {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2F1F1;
}

.card {
  background: white;
  color: black;
  border-radius: 11px;
  padding: 30px 60px;
  display: flex;
  flex-direction: column;
  gap: var(--items-spacing);
}

.title {
  text-align: center;
}

.inputs-wrapper {
  display: flex;
  gap: var(--items-spacing);
}

input,
select {
  background: #F0F2F3;
  border: none;
  border-radius: var(--border-radius);
  padding: 8px 10px;
}

button[type=submit] {
  background: #3190C6;
  padding: 10px;
  color: white;
  border-radius: var(--border-radius);
  border: none;
}

.answer-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #E7EEF2;
  border-radius: var(--border-radius);
  padding: 20px;
}

.answer-label {
  margin: 0px;
}

#answer-txt {
  margin: 0px;
}
</style>