ReactJS | Calculator App ( Styling )

In our previous article we had added functionality to our Calculator app and we had successfully created a fully functional calculator application using React. But that does not look good despite of being fully functional. This is because of 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 see the effect of changes we are making in our CSS immediately in the browser. Write the below line of code in our index.js file at the top:

import './index.css';

Now, let us begin writing our CSS. The very first thing we will do is setting default values for all elements. Write the below code at top of the index.css file:

    border-radius: 0px;
    box-sizing: border-box;
    font-size: 110%;

The next thing we will do is we will add style to our CalculatorTitle component. We had this element the className as ‘calculator-title’. So, we will add styles using this class. We will align the title to center, add padding, margin, width, background color, text color etc. Below code is used to style the CalculatorTitle component:

    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;

Next thing, is to style our calculator. Add the below code for the parent element with className as “mainCalc”.

    border-radius: 0px;
    box-sizing: border-box;

Now, we will style the input fields of ScreenRow component. The class name given to this element is ‘screen-row’. We will add width, background, color, padding etc. to this element. Below code is used for this purpose:

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

The last thing left is to style the buttons. Below code is used to style the buttons of the Calculator app.

  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;
    background: #ccc;

After adding all of the above pieces of code in the index.css file, 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 the 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. You can download the complete code of this project from this GitHub repo.

This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment



load comments

Subscribe to Our Newsletter