DEV Community

Cover image for JS-Project for Beginners.
ihtesham510
ihtesham510

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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."; 
   }
Enter fullscreen mode Exit fullscreen mode

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.
  }
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Now add another variable in the random() function and assign it to get the element by its id getElementbyId()

let equl = document.getElementbyId("total");
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

sum = total + num;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

finally change the innerText of the html to the total variable

equl.innerText = total;
Enter fullscreen mode Exit fullscreen mode

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
}

Enter fullscreen mode Exit fullscreen mode

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
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
when i click the button again it again added the number to the total number and told us that number is odd.

Image description
Here is the live Demo
And is the Github repo : Javascript-Projects

Top comments (0)