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:
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:
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:
Next thing, is to style our calculator. Add the below code for the parent element with className as “mainCalc”.
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:
The last thing left is to style the buttons. Below code is used to style the buttons of the Calculator app.
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.
- ReactJS | Calculator App ( Introduction )
- ReactJS | Calculator App ( Structure )
- ReactJS | Calculator App ( Building UI )
- ReactJS | Calculator App ( Adding Functionality )
- CSS | Styling Images
- CSS | Styling Forms
- Dynamic Styling in ElectronJS
- Styling Django Forms with django-crispy-forms
- How to create a Color-Box App using ReactJS?
- How to Create ToDo App using ReactJS ?
- How to create a Dice Rolling App using ReactJS ?
- How to Create a Coin Flipping App using ReactJS?
- Create a Quiz App using ReactJS
- Introduction to Xamarin | A Software for Mobile App Development and App Creation
- Deploying Your Web App using Azure App Service
- Progressive Web App - A Combination of Native and Web App
- HTML | Calculator
- HTML | Scientific Calculator
- Design and Implement Calculator using jQuery
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.