This content originally appeared on DEV Community and was authored by Walter Nascimento
[Clique aqui para ler em português]
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.
<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.
"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! 😊😊
This content originally appeared on DEV Community and was authored by Walter Nascimento
Walter Nascimento | Sciencx (2021-11-15T19:17:58+00:00) Number Generator With JS. Retrieved from https://www.scien.cx/2021/11/15/number-generator-with-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.