src/tools/math-evaluator/math-evaluator.vue


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<template>
  <div>
    <n-input
      v-model:value="expression"
      rows="1"
      type="textarea"
      placeholder="Your math expression (ex: 2*sqrt(6) )..."
      size="large"
      autocomplete="off"
      autocorrect="off"
      autocapitalize="off"
      spellcheck="false"
    />
    <br />
    <br />

    <n-card v-if="result !== ''" title="Result ">
      {{ result }}
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { withDefaultOnError } from '@/utils/defaults';
import { evaluate } from 'mathjs';
import { computed, ref } from 'vue';

const expression = ref('');

const result = computed(() => withDefaultOnError(() => evaluate(expression.value) ?? '', ''));
</script>