Calculator

Topics -> ReactJS, HTML, CSS, Web development

Preview Link -> Calculator

Source Code Link -> GitHub

What We are going to do?

1. Creating a react component
2. Adding keypads
3. Adding event listeners to respond on click
4. Functions to perform operations

Intialising the class

Extend a react component class.

class Calculator extends React.Component{
    constructor(props){
        super(props);
        this.state={
            display:0,
            equation:'',
        };
    }
    ...
}

Basic structure of Front-end

render () {
    return (<div className="commentContainer">
                <div className="head">
                    <div>Calculator</div>
                </div>
            <div className="displayScreen">
                <div className="eq">{this.state.equation}</div>
                <div className="disp">{this.state.display}</div>
            </div>
            <div className="number1 keypad" onClick={()=>this.inputNo("1")} value="1">1</div>
            <div className="number2 keypad" onClick={()=>this.inputNo("2")} value="2">2</div>
            <div className="number3 keypad" onClick={()=>this.inputNo("3")} value="3">3</div>
            <div className="number4 keypad" onClick={()=>this.inputNo("4")} value="4">4</div>
            <div className="number5 keypad" onClick={()=>this.inputNo("5")} value="5">5</div>
            <div className="number6 keypad" onClick={()=>this.inputNo("6")} value="6">6</div>
            <div className="number7 keypad" onClick={()=>this.inputNo("7")} value="7">7</div>
            <div className="number8 keypad" onClick={()=>this.inputNo("8")} value="8">8</div>
            <div className="number9 keypad" onClick={()=>this.inputNo("9")} value="9">9</div>
            <div className="number0 keypad" onClick={()=>this.inputNo("0")} value="0">0</div>
            <div className="decimal keypad" onClick={()=>this.inputNo(".")} value=".">.</div>
            <div className="add keypad" onClick={()=>this.operator("+")} value="+">+</div>
            <div className="sub keypad" onClick={()=>this.operator("-")} value="-">-</div>
            <div className="mul keypad" onClick={()=>this.operator("*")}  value="*">*</div>
            <div className="div keypad" onClick={()=>this.operator("/")} value="/">/</div>
            <div className="aC keypad" onClick={this.reset}>AC</div>
            <div className="equal keypad" onClick={this.result}>=</div>
        </div>
    );
    }
}

Adding Function/Event Handlers

What happens when a person click a keyword?

A event is fired and it will do the arithmetic operation and update the page.

operator(value){
    let b = value;
    b=this.state.equation+b;
    this.setState({equation:b});
}
result=()=>{
    let b = eval(this.state.equation);
    this.setState({display:b,equation:''});
}
inputNo(value){
    let b = value ;
    this.setState({display:b});
    b=this.state.equation+b;
    this.setState({equation:b});
}
reset=()=>{
    this.setState({display:0,equation:''});
}
                        

Fun Fact - Calculators were originally gear driven wheels, but now they use a chip

Add some stylings to make it look impressive.

Deployment

For deployment, We are using the GitHub Pages. For More Info

Web Preview / Output

Web preview on deployment

Placeholder text by Praveen Chaudhary · Images by Binary Beast