Skip to content

ReactJS Calculator App ( Structure )

ReactJS Calculator App (Styling)

Last Updated : 27 Sep, 2023

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 attractive and beautiful.

Remember we had created a file named “index.css” initially? We will write all our CSS codes in this file. But before that, let’s include this file in our index.js file so that we can immediately see the effect of changes we are making in our CSS in the browser. Write the below line of code in our index.js file at the top:

Syntax:

import './index.css';

Now, let us begin writing our CSS. Follow the below-given instructions one by one and complete your styling part of the project.

The very first thing we will do is set default values for all elements. Write the below code at top of the index.css file:

CSS

   *{ 
    margin:0px; 
    padding:0px; 
    border-radius: 0px; 
    box-sizing: border-box; 
    font-size: 110%; 
} 
  
#root{ 
    text-align:center; 
} 
 
  

The next thing we will do is we will add style to our CalculatorTitle component. Add the below code to style the CalculatorTitle component.

CSS

   .calculator-title{ 
    font-size:30px; 
    background: #fff; 
    width: 400px; 
    padding: 10px 10px; 
    margin: 0 auto; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    border-radius: 2px; 
    border: 2px solid black; 
    color: #4CAF50; 
} 
 
  

To style our calculator add the below code for the parent element with className as “mainCalc”.

CSS

   .mainCalc{ 
    margin:0px; 
    padding:0px; 
    border-radius: 0px; 
    box-sizing: border-box; 
} 
 
  

To style the input field of the screenRow component We will add width, background, color, padding, etc. to this element. The below code is used for this purpose.

CSS

   .screen-row input{ 
        width: 400px; 
    background: #ddd; 
    border: 0px; 
    color: #222; 
    padding: 10px; 
    text-align: right; 
} 
 
  

The below code is used to style the buttons of the Calculator app.

CSS

   input[type="button"]{ 
    width: 100px; 
    background: #4CAF50; 
    border: 1px solid #222; 
    padding: 10px 20px; 
    color: black; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
} 
  
input[type="button"]:active{ 
    background: #ccc; 
} 
 
  

After adding all the above pieces of code in the index.css file. The index.css file will look like the below code.

CSS

   *{ 
    margin:0px; 
    padding:0px; 
    border-radius: 0px; 
    box-sizing: border-box; 
    font-size: 110%; 
} 
  
.calculator-title{ 
    font-size:30px; 
    background: #fff; 
    width: 400px; 
    padding: 10px 10px; 
    margin: 0 auto; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    border-radius: 2px; 
    border: 2px solid black; 
    color: #4CAF50; 
} 
  
  
.mainCalc{ 
    margin:0px; 
    padding:0px; 
    border-radius: 0px; 
    box-sizing: border-box; 
} 
  
input[type='button']{ 
    width: 100px; 
    background: #4CAF50; 
    border: 1px solid #222; 
    padding: 10px 20px; 
    color: black; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
} 
  
input[type='button']:active{ 
    background: #ccc; 
} 
  
  
#root{ 
    text-align:center; 
} 
  
.screen-row input{ 
    width: 400px; 
    background: #ddd; 
    border: 0px; 
    color: #222; 
    padding: 10px; 
    text-align: right; 
}
 
  

Output: You can see the change in the app in the browser window. You will now have the exact same app as shown in the very first article with the exact same functionalities. Below is a glimpse of the final ready project:

Reaching this far was not easy. We had learned a lot through this project and there is a lot more left to learn about React which we will see in the upcoming articles. This was just an introductory project to get your hands ready on React.

ReactJS Calculator App ( Structure )

harsh.agarwal0

Improve

Article Tags :

Similar Reads

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

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

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

ReactJS Calculator App (Building UI)

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

Tip Calculator using React

In this article, we will create a Tip Calculator using ReactJS. This project basically implements functional components and manages the state accordingly using the useState and useEffect hook of ReactJS. The user enters the Bill Amount, Tip Percentage and the number of persons then the output will r

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

GPA Calculator using React

GPA Calculator is an application that provides a user interface for calculating and displaying a student's GPA(Grade Point Average). Using functional components and state management, this program enables users to input course information, including course name, credit hours and earned grades and add

Aspect Ratio Calculator using React

In this React project, we'll build an interactive Aspect Ratio Calculator where users can upload images to visualize aspect ratios and adjust width and height values for live previews. Preview of final output: Let us have a look at how the final output will look like. PrerequisitesReactCSSJSXFunctio

Scientific Calculator using React

A scientific calculator is a tool, this project will be developed using REACT which performs basic and advanced calculations. In this project, our goal is to develop a web-based calculator using React. This calculator will have the capability to handle a range of functions. Preview of final output: