Number Generator With JS
Tags: javascript, tips, tutorial
Published: 2021-11-15 19:17:58

[[Clique aqui para ler em português]](https://medium.com/walternascimentobarroso-pt/gerador-de-n%C3%BAmeros-com-js-5ebdc220c180)

Here we have a project that generates random numbers, odd numbers, even numbers and real numbers.

## Code

First let’s create the interface, we’ll do something simple, using just HTML.

```HTML
<h1>Gerador de números</h1>

<form name="form_main">
  <div>
    <label for="number">Quantidade</label>
    <input type="number" id="number" />
  </div>
  <div>
    <label for="type">Tipo</label>
    <input type="radio" name="type" id="odd" value="odd" />
    <label for="odd">Impar</label>
    <input type="radio" name="type" id="even" value="even" />
    <label for="even">Par</label>
    <input type="radio" name="type" id="real" value="real" checked='checked' />
    <label for="real">Reais</label>
  </div>

  <button type="button" name="generate">Gerar</button>

  <div id="output"></div>
</form>
```

In this code we have an input that will define the amount of number we want to generate, in the type (radio) we have options (odd, even and real) and finally we have a button that calls the function to generate the numbers.

```Javascript
"use strict";

let button = document.form_main.generate;
button.addEventListener('click', generate);

function generate() {
  let output = document.getElementById('output');
  let total = document.form_main.number.value;
  let type = document.form_main.type.value;
  let numbers = [];

  switch (type) {
    case 'odd':
      numbers = generateOdd(total);
      break;
    case 'even':
      numbers = generateEven(total);
      break;
    case 'real':
    default:
      numbers = generateReal(total);
      break;
  }

  output.innerHTML = numbers;
}

function generateOdd(total) {
  let numbers = [];
  let odd = 0;
  for (let index = 0; index < total; index++) {
    while (odd % 2 == 0) { odd++; }
    numbers.push(odd);
    odd++;
  }
  return numbers;
}

function generateEven(total) {
  let numbers = [];
  let even = 0;
  for (let index = 0; index < total; index++) {
    while (even % 2 != 0) { even++; }
    numbers.push(even);
    even++;
  }
  return numbers;
}

function generateReal(total) {
  let numbers = [];
  for (let index = 0; index < total; index++) {
    numbers.push(index);
  }
  return numbers;
}
```

Here we have the javascript code that does all the magic, in the first line we have the selection of the button that calls the generate function, where the type that must be generated is checked and then its respective function is called.

We have three functions:

* **generateOdd** = This function loops over the total amount of numbers that must be generated and in the while statement it is checked if the number is even and finally it returns all the even numbers generated;
* **generateEven** = This function loops over the total amount of numbers that must be generated and in the while statement it is checked if the number is odd, finally, all the generated odd numbers are returned;
* **generateReal** = This function loops over the total amount of numbers that must be generated, finally all generated numbers are returned;

ready simple like that.

## Demo

See below for the complete working project.

{% codepen https://codepen.io/WalterNascimento/pen/oNLLRqo %}

## Youtube

If you prefer to watch it, see the development on youtube.

{% youtube WokYF0Y9BuI %}

***

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊