Skip to content

ReactJS Calculator App (Styling)

ReactJS Calculator App (Building UI)

Last Updated : 27 Sep, 2023

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="GeeksforGeeks 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 )

ReactJS Calculator App (Styling)

P

PronabM

Improve

Article Tags :

Similar Reads

Build a Calculator using React Native

React Native is a well-known technology for developing mobile apps that can run across many platforms. It enables the creation of native mobile apps for iOS and Android from a single codebase. React Native makes it simple to construct vibrant, engaging, and high-performing mobile apps. In this tutor

Build a Calculator with VueJS

We'll learn how to build a simple calculator app using Vue.js. A calculator is a fundamental tool for performing mathematical calculations, and building one using Vue.js is a great way to understand the basics of Vue.js components, data binding, and event handling. Step-by-step guide to set up the p

Build a Simple Tip Calculator App with ReactJS

Creating a simple tip calculator app using ReactJS can be good for practicing React state management and components. In this tutorial, we'll create a basic tip calculator app using React.js. The app will allow users to input the bill amount, select a tip percentage and let split the bill, providing

ReactJS Calculator App (Styling)

Now that we have added functionality to our Calculator app and successfully created a fully functional calculator application using React. But that does not look good despite being fully functional. This is because of the lack of CSS in the code. Let's add CSS to our app to make it look more attract

ReactJS Calculator App ( Structure )

In our previous article, we have talked about a Calculator app we are going to develop and also have seen a glimpse of our final project. In this article, we will get our hands ready to start the development of our first application. We have told this earlier also that every application we will deve

BMI Calculator Using React

In this article, we will create a BMI Calculator application using the ReactJS framework. A BMI calculator determines the relationship between a person's height and weight. It provides a numerical value that categorizes the individual as underweight, normal weight, overweight, or obese. Output Previ

Age Calculator Using React-JS

In this article, we will create an Age Calculator using ReactJS and Bootstrap. This free age calculator computes age in terms of years, months, weeks, days, hours, minutes, and seconds, given a date of birth. Users can now input their birth year and calculate their current age with just a few clicks

Create a Calculator App Using Next JS

Creating a Calculator app is one of the basic projects that clears the core concept of a technology. In this tutorial, we'll walk you through the process of building a calculator app using Next.js. Output Preview: Let us have a look at how the final output will look like. Prerequisites:NPM & Nod

Build a Loan Calculator using Next.js

The Loan Calculator allows users to determine loan amount, interest rate, and tenure, calculate monthly mortgage payments, total loan payments over tenure, and total interest payable. In this article, we will walk you through the process of building a Loan Calculator using Next.js. Let's take a look

Calculator App Using TypeScript

A calculator app is a perfect project for practising TypeScript along with HTML and CSS. This app will have basic functionalities like addition, subtraction, multiplication, and division. It provides a clean and interactive interface for the user while using TypeScript to handle logic safely and eff