Simple CSS / JavaScript Random Number Generator

Random Numbers

This simple Random Number Generator has only few lines of JavaScript code and some simple CSS styling.

It can be easily modified to have any of the preferred number of ciphers. This example has 3 div tags, one for every cipher. To create Random Number Generator with 4 cipher just add another div tag and one more line of JavaScript code.

Click on Roll button to create new number.


Random Number Generator :::

0
0
0
Roll


HTML file is straightforward, some DIV elements and button.

 <body>  
  <div class="box">  
     <div class="eqi-container">  
      <div id="v1">0</div>  
      <div id="v2">0</div>  
      <div id="v3">0</div>  
     </div>  
  </div>      
  <div class="btn" onclick="roll()">Roll</div>  
     <script src="app.js"></script>  
 </body>  

JavaScript has only one function with 3 calls to Math.random function.

 function roll() {  
     document.getElementById("v1").innerHTML = Math.floor(Math.random() * 10);  
     document.getElementById("v2").innerHTML = Math.floor(Math.random() * 10);  
     document.getElementById("v3").innerHTML = Math.floor(Math.random() * 10);      
 }  


Finally CSS file for styles.
 .box {  
  width:800px;  
  margin:auto;  
 }  
 .eqi-container {  
  border: 5px solid silver;   
  display: flex;  
  justify-content: space-between;  
 }  
 .eqi-container div {  
  width: 200px;  
  height: 200px;  
  background: navy;  
  text-align: center;  
  vertical-align: middle;  
  line-height: 200px;  
  color: white;  
  font-size: 120px;   
  font-family: Verdana;  
 }  
 .btn {  
  margin-top: 30px;  
  border: 5px solid silver;  
  width: 150px;  
  height: 50px;  
  margin-left: auto;  
  margin-right: auto;  
  background: navy;  
  text-align: center;  
  vertical-align: middle;  
  line-height: 50px;  
  color: white;  
  font-size: 30px;  
  font-style: bold;   
  font-family: Verdana;   
  cursor: pointer;  
 }  

*_*

Post a Comment

0 Comments