ReactJS Calculator App (Building UI)

21 August 2024

2

We created our first app and deleted all those files we did not need, and created some of the files that we will need in the future. Now as we stand in our current situation we have a blank canvas before us where we will have to create our calculator app.

We will be creating the project in multiple steps with a component approach and each file code is given below for you, so let’s start building the project.

Create a calculatorTitle.js file for showing the title of the calculator and paste the code given below for this file.

Javascript

//calculatorTitle.js File 
  
import React from "react"; // Import React (Mandatory Step) 
  
// Create Functional Component. 
// Takes title as props.value. 
const CalculatorTitle = (props) => { 
    return ( 
    <div className="calculator-title">{props.value}</div> 
    ); 
}; 
export default CalculatorTitle; // Export Calculator Title

Now create a file outputScreenRow.js for taking input and showing the output of the calculation, code of this file is given below.

Javascript

// outputScreenRow.js File 
import React from "react"; // Import React (Mandatory Step) 
  
// Functional Component. 
// Used to show Question/Answer. 
const OutputScreenRow = () => { 
    return ( 
        <div className="screen-row"> 
            <input type="text" readOnly /> 
        </div> 
    ); 
}; 
export default OutputScreenRow; // Export Output Screen Row

Create an outputScreen.js file and import the outputScreenRow.js file. The code of this file is given below.

Javascript

// outputScreen.js File 
import React from "react"; // Import React (Mandatory Step). 
import OutputScreenRow from "./outputScreenRow.js"; // Import Output Screen Row. 
  
// Functional Component. 
// Use to hold two Screen Rows. 
const OutputScreen = () => { 
    return ( 
        <div className="screen"> 
            <OutputScreenRow /> 
            <OutputScreenRow /> 
        </div> 
    ); 
}; 
export default OutputScreen; // Export Output Screen.

Create a button.js file and paste the code given below.

Javascript

// button.js File 
import React from "react"; // Import React (Mandatory Step) 
  
// Create our Button component as a functional component. 
const Button = (props) => { 
    return ( 
    <input type="button" value={props.label} /> 
    ); 
}; 
export default Button; // Export our button component

Now create a calculator.js file and import calculatorTitle.js, outputScreen.js, and button.js files. The code for this program is below.

Javascript

// calculator.js File 
// Imports. 
import React from "react"; 
import CalculatorTitle from "./calculatorTitle.js"; 
import OutputScreen from "./outputScreen.js"; 
import Button from "./button.js"; 
  
class Calculator extends React.Component { 
    render() { 
        return ( 
            <div className="frame"> 
                <CalculatorTitle value="neveropen Calculator" /> 
                <div class="mainCalc"> 
                    <OutputScreen /> 
                    <div className="button-row"> 
                        <Button label={"Clear"} /> 
                        <Button label={"Delete"} /> 
                        <Button label={"."} /> 
                        <Button label={"/"} /> 
                    </div> 
                    <div className="button-row"> 
                        <Button label={"7"} /> 
                        <Button label={"8"} /> 
                        <Button label={"9"} /> 
                        <Button label={"*"} /> 
                    </div> 
                    <div className="button-row"> 
                        <Button label={"4"} /> 
                        <Button label={"5"} /> 
                        <Button label={"6"} /> 
                        <Button label={"-"} /> 
                    </div> 
                    <div className="button-row"> 
                        <Button label={"1"} /> 
                        <Button label={"2"} /> 
                        <Button label={"3"} /> 
                        <Button label={"+"} /> 
                    </div> 
                    <div className="button-row"> 
                        <Button label={"0"} /> 
                        <Button label={"="} /> 
                    </div> 
                </div> 
            </div> 
        ); 
    } 
} 
export default Calculator; // Export Calculator Component

Inside the index.js file import, the calculator.js file and the code for this file is given below.

Javascript

//index.js File 
import React from "react"; 
import ReactDOM from "react-dom"; 
import Calculator from "./components/calculator.js"; 
  
// Render the Calculator to the Web page. 
ReactDOM.render(<Calculator />, document.getElementById("root"));

Output: The output of this code will look like the below-given image.

So now we can finally see the output in our browser, but wait this is nothing like what we showed you in the introductory article! Yes, it is nowhere near to be the finished project, it is rather a barebone structure and all it needs is the CSS touch-ups that we will provide in one of the upcoming articles, but before that, we have to implement the working logic of this calculator so that at least it works before we transform this rigid design into some eye-catching masterpiece or at least a decent model. ReactJS | Calculator App ( Adding Functionality )

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

ReactJS Calculator App (Building UI)

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Java Program for Longest Common Subsequence

Maximum height of Tree when any Node can be considered as Root

Print Fibonacci sequence using 2 variables

LEAVE A REPLY Cancel reply

Most Popular

Sticky Password vs. LastPass 2024: Which Is Better? by Katarina Glamoslija

Galaxy S25 on-device AI capability expands, reducing reliance on the cloud

OnePlus 13R launches with a huge battery upgrade, starting in China

This is my surprise phone of the year [Video]

Recent Comments

EDITOR PICKS

Sticky Password vs. LastPass 2024: Which Is Better? by Katarina Glamoslija

Galaxy S25 on-device AI capability expands, reducing reliance on the cloud

OnePlus 13R launches with a huge battery upgrade, starting in China

POPULAR POSTS

Sticky Password vs. LastPass 2024: Which Is Better? by Katarina Glamoslija

Galaxy S25 on-device AI capability expands, reducing reliance on the cloud

OnePlus 13R launches with a huge battery upgrade, starting in China

POPULAR CATEGORY

ABOUT US

FOLLOW US