In this Project, 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

```
<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

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

```
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

```
let a = document.getElementById("id");
```

second create two functions within our function

named `even()`

and `odd()`

which will change our html inner text

```
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()`

.

```
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

```
let total = 0;
```

Now add another variable in the `random()`

function and assign it to get the element by its id `getElementbyId()`

```
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

```
let total = total + num;
```

if you don't use the total variable like given above and use it like this :

```
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 :

```
let total += num;
```

finally change the innerText of the html to the total variable

```
equl.innerText = total;
```

Now you finall code should look like this :

```
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.

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

when i click the button again it again added the number to the total number and told us that number is odd.

Here is the live Demo

And is the Github repo : Javascript-Projects

## Top comments (0)