aldhie.productzilla/Calculator-App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added validation in user input

Browse Source
This commit is contained in:
Mitanshu 2022-03-13 18:47:02 +05:30
parent a232b01bf4
commit 04234e5ff8
2 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Buttons.js
View File

@ -2,13 +2,14 @@ import React from "react";
import "./styles/Buttons.css"; import "./styles/Buttons.css";
// import CALCULATOR_BUTTONS from "./CalculatorButtons"; // import CALCULATOR_BUTTONS from "./CalculatorButtons";
const Buttons = ({ const Buttons = ({ inputHandler, clearInput, backspace, changePlusMinus, calculateAns }) => {
inputHandler, document.addEventListener("keydown", function (event) {
clearInput, if (event.key === "Enter") {
backspace, event.preventDefault();
changePlusMinus, document.getElementById("equalbtn").click();
calculateAns, }
}) => { });
return ( return (
<div className="show-btn"> <div className="show-btn">
<button className="btn exp" onClick={inputHandler}> <button className="btn exp" onClick={inputHandler}>
@ -95,7 +96,7 @@ const Buttons = ({
<button className="btn exp" onClick={inputHandler}> <button className="btn exp" onClick={inputHandler}>
. .
</button> </button>
<button className="btn exp equal" onClick={calculateAns}> <button className="btn exp equal" id="equalbtn" onClick={calculateAns}>
= =
</button> </button>
</div> </div>

20
src/components/Display.js
View File

@ -2,13 +2,13 @@ import React from "react";
import "./styles/Display.css"; import "./styles/Display.css";
const Display = ({ input, setInput, answer }) => { const Display = ({ input, setInput, answer }) => {
// const onChangeTagInput = (e) => { const onChangeTagInput = (e) => {
// // setInputVal(e.target.value.replace(/^[0-9 ()+-]+$/, "a")); const re = /^[!%(-+\x2D-9^glox\xF7\u221A]+$/;
// // if(e.target.value === "1")
// setInput(e.target.value); if (e.target.value === "" || re.test(e.target.value)) {
// // console.log(e.target.value.test(/^[0-9 ()+-]+$/)); setInput(e.target.value);
// // console.log(e.target.value); }
// }; };
return ( return (
<> <>
@ -22,9 +22,10 @@ const Display = ({ input, setInput, answer }) => {
style={{ padding: "29px" }} style={{ padding: "29px" }}
value={input} value={input}
placeholder="0" placeholder="0"
// onChange={onChangeTagInput}
maxLength={12} maxLength={12}
disabled // disabled
onChange={onChangeTagInput}
autoComplete="off"
/> />
</> </>
) : ( ) : (
@ -43,7 +44,6 @@ const Display = ({ input, setInput, answer }) => {
name="value" name="value"
className="input" className="input"
value={answer} value={answer}
// onChange={onChangeTagInput}
disabled disabled
/> />
</> </>