Project 9: Javascript Random Number Generator

A fast and easy off day project here.

Prepare

I’m thinking you input the start number, the end number and the number of numbers you want. Et voila you have a range of random numbers. I’d like that. I’d like that a lot.

Lets bring up Math.random from MDN.

Plan

Basically, this is what I want:

  • A function to make an array of number with the input from the DOM
    • Get the min value
    • Get the max value
    • Get the amount of numbers to output
  • Create array of random numbers
    • With a for loop?
      • And push to array?
  • Then display the array to the DOM

Perform

This is what I ended up with:


function makeRandomArray() {
 
   var min = document.getElementById('min').value;
 
   var max = document.getElementById('max').value;
 
   var amount = document.getElementById('amount').value;
 
   var displayOutput = document.getElementById('random-div');
 
   var randomNum = Math.floor(Math.random() * (max - min + 1));
   var randomArray = [];
 
   for (var i = 0; i < amount; i++) {
     randomArray.push(Math.floor(Math.random() * (max - min + 1)));
   }
 
   displayOutput.value = randomArray;

}

function updateTextInput(elem, val) {
   document.getElementById('show'+elem.id).value=val;
}

 

I followed this tutorial on Sitepoint to copy from the input to the clipboard.

The layout is from one of the CSS courses on Treehouse.

Perfect

I’ve been wondering about the input type=”button” element, and the button element Stackoverflow. It seems you can put HTML inside the button element, but there’s some issues with it in IE6, according to peterbe.com.

 

By the way. I’m using prism.js to display code in my blog posts. I found this great guide on crambler.com to help me implement it.

 

So. Yes. To the project!




                        
                    

2 Comments

  1. Thanks for referencing my blog post! I really appreciate when people do that. Looks like you figured out how to implement Prism.js – looking great!

Leave a Reply

Your email address will not be published.

*

© 2017 DevelopingMike

Up ↑