JSFiddle - React, Tailwind, and code Playground

HTML

Current Volume: <label id="curvol">0</label>% <br/>
Please enter pi for volume
<input type="text" id="pivol"> <label id="fail" style="color:red"></label><br />

JavaScript

var e = document.getElementById('pivol');
e.onkeyup = handleInput;
var pi = "3.141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067";
var fail = false;
function handleInput() {
  var index = pi.indexOf(e.value);
  if(e.value.length == 0){
  	document.getElementById('fail').innerHTML = "";
    document.getElementById('curvol').innerHTML = "0";
    fail = false;
  }else if(index == -1 || index > 0 || fail){
    document.getElementById('fail').innerHTML = "Fail, try again.";
    fail = true;
    document.getElementById('curvol').innerHTML = "0";
  }else if (index == 0){
  	document.getElementById('curvol').innerHTML = e.value.length - 1 <= 0 ? "1" : e.value.length - 1;
  }
}