Since you are learning, I will do the heavy lifting for your; however, the rest is after you since there is no way to learn without you working on the problem yourself. I hope that you can take care of the rest since the information to do so is available online if you search for it.
Let's take care of the engine first.
First, we create an object that will hold both array:
let numbers = {
stored:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
used: []
};
I put both into an object to make it more reusable.
To obtain a random number, we need to obtain a random index:
let index = Math.floor(Math.random() * this.stored.length);
We do this by multiplying the length of the array with the value return by Math.random() which goes from 0 to 1. Then, we floor the results in order to eliminate any decimals.
Next, we obtain the value that we wish to return:
let value = this.stored[index];
Following, we move that value from the stored array to the used array:
this.used.push(value);
Then, we used the sort method of the array. We pass a function as an argument that indicates how we wish to order the values. by indicating how we wish to order the values.
this.used.sort((a, b) => a - b);
The way it works is that the function provided will return either zero, a positive value or a negative value, which will indicate how it will sort the content. For more information check Array.prototype.sort()
Lets not forget to remove that value from the stored array:
this.stored = this.stored.filter(elem => elem != value);
What we do here is to filter out all elements that aren't the value and return those numbers, then we assign this new array.
Note: We are assuming that all elements in the stored array are unique. If that isn't the case, then this line needs to be replaced to handle that.
let numbers = {
stored:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
used: [],
get random() {
if (this.stored.length < 1) return;
let index = Math.floor(Math.random() * this.stored.length);
let value = this.stored[index];
this.used.push(value);
this.used.sort((a, b) => a - b);
this.stored = this.stored.filter(elem => elem != value);
return value;
},
reset() {
this.used.forEach(element => this.stored.push(element));
this.used = [];
},
hasNext(){
return this.stored.length > 0;
}
};
while(numbers.hasNext()){
console.log(numbers.random);
}
console.log("Stored Numbers: ", numbers.stored);
console.log("Used Numbers: ", numbers.used);
numbers.reset();
console.log("Stored Numbers: ", numbers.stored);
console.log("Used Numbers: ", numbers.used);
For the popup, input box and such, there are many options.
You could do it with pure HTML, CSS, and JavaScript.
Create the form in HTML. With CSS, you can make the form to be hidden, with the position absolute and centered. Then, with JavaScript you manipulate when shows and not. There are many examples online showing different ways to do this.
If you are allowed to use a library then one option I might suggest is using Bootstrap.
It will make your whole interface look pretty.
You can use modals and with jQuery you can manipulate the interface.