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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

.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;
}

chevron_right


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



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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;
}

chevron_right


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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.