brio50 / divisor

Convert metric measurements to imperial and round decimal values to fractions based on your desired divisor - 1/64, 1/32, 1/16, 1/8, and 1/4
https://brio50.github.io/divisor/
MIT License
0 stars 0 forks source link

React UI Improvements #7

Open brio50 opened 1 year ago

brio50 commented 1 year ago

Input Fields

brio50 commented 1 year ago

math.js is the way to perform calculations, it can parse the expression for validity and then evaluate it. There are problems though:

  1. on mobile keyboards for iphone, only a decimal is available in the numeric keypad.

  2. validateMeasurement will have to return a validity flag, along with the validated measurement value. The onChange*

    import { parse, evaluate } from 'mathjs';
    
    ...
    
    // TODO: mathematical expressions (only allow +, -, *, / symbols) keyed on = as input?
    function validateMeasurement(event) {
    
    var valid = true; // output 1
    var value = event.target.value; // output 2
    
    function parseValue(value) {
    
      ...
    
      // do math if string contains math operations
      if (value.match(/\d+\+$/)) {      // e.g.  2+
        valid = false;
        value = value;
        console.log("plus");
        return { valid, value };
      }
    
      try {
          parse(value);
          valid = true;
          value = evaluate(value);
          return { valid, value };
      }
      catch (ex) {
          console.log("Not a mathematical expression.");
      }
    const onChangeMM = (event) => {
    
    let {valid, value} = validateMeasurement(event)
    
    if (!valid) {
      setMM({
        ...millimeters,
        input: value,
        output: "",
        error: ""
      });
      return;
    }
  3. once we detect a mathematical expression is being input, we have to provide a calculate button to let the user tell us when they're done formatting the equation. A good example expression would be adding three measurements : 1 + 1.5 + 3+(5/8)