# How I Build "Not So Great Calculator" Using HTML, CSS, JavaScript
**Hi everyone,**
**Welcome to my blog. In this post, I will show you how to code your first DOM project.**
In this project, We want calculation will be done on screen after we manipulate the DOM i.e. after clicking the button.
![calculator.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1657751346784/Sw-Q0XMW-.gif align="center")
**LINK**- https://not-so-good-calculator.netlify.app/
**GitHub**- https://github.com/shubhamsigdar1/Not-so-good-calculator
### What is DOM?
****
When we do rendering/Painting on our HTML and CSS in a browser i.e. make some changes and as we refresh our webpage all those changes are gone i.e. we re-rendered or repainted our HTML and CSS files i.e. called DOM
### How we can add behavior and interaction to DOM so that we can manipulate the DOM?
****
**We use JavaScript to manipulate the DOM**
> **Note:-When we manipulate the DOM, We do not manipulate with actual HTML, CSS file**
## How to get started?
****
**1. Install VS Code
**
https://code.visualstudio.com/download
**2. Install the extension(open in browser) in Vs Code.
**
**3. In your text editor, create a folder Daily Music Generator and then create three separate files i.e. HTML, CSS, and JavaScript. This basically makes your code more organized.**
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657752296168/KPwXgKXuW.png align="left")
## Let's Start working on projects
****
**First, we start from HTML files, where you can link CSS and JavaScript files using the code below:
**
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1656046565744/r2DHZ-f9B.png align="left")
****
## Below is the HTML code
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657752476108/4gDsxHkYl.png align="left")
### In the above HTML code,
**1. Code to link your HTML with the CSS file and we write it inside the head tag**
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1656047783937/lPETkfvkN.png align="left")
**2. Code to link your HTML with the JavaScript file and we write it inside the body tag
**
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1656047921757/pk8LMK9ff.png align="left")
**3. I use four section tag **
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657752840532/sO1ybY3wI.png align="left")
## Below is the CSS code
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657752947899/ujMEm3Z4n.png align="left")
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657753029980/CAzMxm6f9.png align="left")
### In the above CSS code,
**1. How do I center the calculator middle of the page?**
![responsive mid.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1657754050377/59RIfybKb.gif align="center")
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657754138740/YmjHsy1V-.png align="left")
**2. How I use flexbox in Calculator button section**
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657754385674/WZUZO2AJx.png align="left")
- ** I give the parent section two property display: flex; and flex-wrap : wrap;
**
**display: flex;
Whenever we want to use flexbox, We have to apply display: flex inside the parent container**
**flex-wrap : wrap;
This property helps you set the number of flex items you want in a line or row.
**
- **I give the children i.e. button tag property flex: 1 0 21%; i.e. flex shorthand**
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657754556713/nADT-1ADY.png align="left")
**flex-grow
This property grows the size of a flex-item based on the width of the flex-container.**
**flex-shrink
This property helps a flex item shrink based on the width of the flex-container. It's the opposite of flex-grow.**
**flex-basis
This is similar to adding width to a flex-item, but only more flexible. flex-basis: 10em, for example, will set the initial size of a flex-item to 10em. Its final size will be based on the available space, flex-grow, and flex-shrink.**
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657754650054/WlWpq0MZi.png align="left")
## Below is the JavaScript code
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657755020039/563JI1UKv.png align="left")
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657755048663/fH0yGpLvH.png align="left")
### In the above JavaScript code,
**1. We want that when we click the button of a number then run the function(), For that, we write code**
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657755253609/5wqWcFDrF.png align="left")
```
Note:- Please don't use the same name of the function as the id or class attribute, If you use then your button is not clickable in the DOM
```
**2. We give the global variable total=0 because then we are able to assign a new value to the total inside the function.**
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657755903244/qBjGMXVvb.png align="left")
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657755920613/R86uf0ThL.png align="left")
**3. What is the meaning of this line**
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657756147846/aGzXomv4V.png align="left")
**We look for something in HTML that has id placeToPutResult and then we are going to put some text inside that tag and the text we are going to put inside is total.**