Formula validator

by Génesis García Morilla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/12.3.0/math.js"></script>
<h3>Define formula using<br>A, B, C and D variables</h3>

<form>
   <input placeholder="(A + B) >= 10 and D < C * 2">
   <button>Check</button>
</form>

<p>No formula</p>

CSS

body {
  font-family: system-ui, sans-serif;
  display: grid;
  place-items: center;
}

form {
  display: grid;
  grid-gap: 10px;
}

input {
  font-size: 16px;
}

JavaScript

const input = document.querySelector('input')
const p = document.querySelector('p')

// Sample variable values
const variables = {
  A: 8,
  B: 5,
  C: -3,
  D: 10
}

// Validate formula written in the input
input.oninput = () => {
  try {
    const result = math.evaluate(input.value, variables)
    input.setCustomValidity('')
    p.innerText = input.value ? 'Good!' : 'No formula'
  } catch (error) {
    input.setCustomValidity(error.message)
    p.innerText = 'Wrong!'
  }
}

// Prevent submit
document.querySelector('form').onsubmit = e => e.preventDefault()