Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 15, 2021 07:17 pm GMT

Number Generator With JS

[Clique aqui para ler em portugus]

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

Code

First lets create the interface, well do something simple, using just HTML.

<h1>Gerador de nmeros</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.

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

Youtube

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

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!


Original Link: https://dev.to/walternascimentobarroso/number-generator-with-js-213h

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To