JS-Project for Beginners.

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