JS-Project for Beginners.
Tags: javascript, programming, html, tutorial
Published: 2022-11-02 08:15:20

In this [Project](https://github.com/ihtesham510/Javascipt-Projects/blob/main/Random-Number-Generator/Readme.md), we will generate a random number between 0 and 10, then  tell the number if its even or odd. Then finally we'll add the numbers generated randomly.
# 1.HTML file
First create an html file and add the Title with `<h1>` tag then, `<h2>` tag which will contain our number, `<h2>` tag which will tell us that the number is even or odd. `<h2>` tag for title saying Total, finally a `<h2>` tag for number for counting our total number. 
Finally add a button.
This is how it should look like

```html
    <h1 class="gen">Random Number Generator</h1> 
     <h2 id="num">0</h2> 
     <h1 id="id">Unknown</h1> 
     <h1>Total</h1> 
     <h2 id="total">0</h2> 
     <button class="btn" onclick="random()">Generator</button> 
     <script src="index.js"></script>
```
# 2.Random Number Generator.
Now we will create our JavaScript file. 
First create a function  and in it assign a variable num 
```js
function random() {
  let num = Math.floor(Math.random() * 11);
}
```
The `Math.random()` will generate numbers between 0.1 to 0.9, but we don't want that number so we will multiply them with 11 and round the numbers using `Math.floor()` .

Now add the code to change our inner text to randomly generated number just below the variable we assigned;
```js
document.getElementById("num").innerText = num;
```

When the function `random()` is called it will change our inner text to randomly generated number.
# 3.even() or odd()
Now for the second part tell if its even or odd.
first assign a variable `a` which will get our element form html
```js
let a = document.getElementById("id");
```

second create two functions within our function
named `even()` and `odd()` which will change our html inner text
```js
  function odd() {                           
     a.innerText = "Number is odd."; 
   } 
   function even() {      
     a.innerText = "Number is even."; 
   }
```

Now add an if and else statement, if the number modulo 2 equals to zero then execute function `even()` if not then execute `odd()` .
```js
if (num % 2 == 0)  {  // if the number is even
    even();         // the even function will be called.
  } else {  // if not 
    odd();          // then odd function will be called.
  }
```
The `%` in the code represents modulo
# 4.Total numbers
Now we can begin our final part.
First assign a variable above our `random()` function 
```js
let total = 0;
```
Now add another variable in the `random()` function and assign it to get the element by its id `getElementbyId()`
```js
let equl = document.getElementbyId("total");
```
now we will add another variable which will add number randomly generated with the total variable that we declared above the `random()` function 
```js
let total = total + num;
```
if you don't use the total variable like given above and use it like this :
```js 
sum = total + num;
``` 
Then it will not work.
because total numbers are not adding to the total variable continuously.
we can also write it that another way :
```js
let total += num;
```
finally change the innerText of the html to the total variable
```js
equl.innerText = total;
```
Now you finall code should look like this :
```js
let total = 0;


function random() {
  let num = Math.floor(Math.random() * 11);
  document.getElementById("num").innerText = num;
        
  let a = document.getElementById("id");    // creating a variable to short the code. LOL.

    
  function odd() {                          // if called this will change the text to "Number id odd".
    a.innerText = "Number is odd.";
  }
  function even() {                         // if called this will change the text to "Number is even".
    a.innerText = "Number is even.";
  }
    
    
  if (num % 2 == 0)  {  // if the number is even
    even();         // the even function will be called.
  } else {  // if not 
    odd();          // then odd function will be called.
  }
  
  let equl = document.getElementById("total");  // creating a variable to short the code. LOL.
  total += num; // will add the previous value and number generated.
  equl.innerText = total;       // this will change the inner text to the total amount
}

```
I tried my best to make my-self clear if you don't understand then let me know in the comments.
Now lets test it.

![Here we have our finall result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhuq2jhjbmry09rzsd0a.png)
As you can see when i clicked the button it randomly generated our number, told us its even  and added the number with our total number 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/feznkvxiyzk5vb1pif38.png)
when i click the button again it again added the number to the total number and told us that number is odd.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h16jkp0mzxr01y9leu9x.png)
Here is the live [Demo](https://codepen.io/ihteshamulhaq510/full/eYKOwoV)
And is the Github repo : [Javascript-Projects](https://github.com/ihtesham510/Javascipt-Projects)