Create a JavaScript driven web page that can create and display a table whose nu
ID: 3550147 • Letter: C
Question
Create a JavaScript driven web page that can create and display a table whose number of rows and columns can vary in a dynamic fashion.
As a concrete example you are to create a JavaScript driven web page that will provide randomly generated quick picks for a lottery player. The lottery player should be able to specify the following:
Number of white balls (regular balls):
- Valid values should be 1 to 10
Range for numbers for the regular balls:
- Valid values should be 1 to 100
Number of red balls (special balls):
- Valid values should be 0 to 10
- Note that there may not be any red balls
Range of number for the regular balls:
- Valid values should be 1 to 100
The number of tickets (picks) to be created:
- Valid values should be 1 to 5
As an example the Multi-State Lottery Association runs the following lotteries:
Lottery
# White Balls
Range of White Balls
# of Red Balls
Range of Red Balls
Powerball
5
1 to 59
1
1 to 35
Mega Millions
5
1 to 75
1
1 to 15
Hot Lotto
5
1 to 47
1
1 to 19
Wild Card
5
1 to 33
1
1 to 16*
2By2
2
1 to 26
2
1 to 26
- The table should not have any extra rows or columns.
o For example if the user wants two picks for the Powerball then your table should be either 2X6 or 6X2.
o And, if the player wants five picks for the 2By2 then your table should be either 5X4 or 4X5.
o You can decide if you want to display the picks in a horizontal or vertical format. You do not have to support both formats.
- The cells should be color coded so it is easy to distinguish the white ball picks from the red ball picks.
To generate the picks for each ticket keep in mind:
- A lottery drawing is done without replacement for each ball color. So if a 7 is picked for the first ball then the subsequent picks for that color ball for that ticket cannot be a 7.
- Tickets are independent of each other.
o The first ticket draws the specified number of balls of each color without replacement.
o The next ticket starts with a complete set of balls of each color.
o It may be possible that different tickets will have some numbers in common.
Lottery
# White Balls
Range of White Balls
# of Red Balls
Range of Red Balls
Powerball
5
1 to 59
1
1 to 35
Mega Millions
5
1 to 75
1
1 to 15
Hot Lotto
5
1 to 47
1
1 to 19
Wild Card
5
1 to 33
1
1 to 16*
2By2
2
1 to 26
2
1 to 26
Explanation / Answer
//save this as a index.html
<!DOCTYPE html>
<html>
<head>
<title>Lottary Game</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h3>Welcome To Lottery Game</h3>
<div id="lotSpec">
<form>
<h4>Enter Game Details</h4>
<span>Number Of White Ballls (1 to 10):</span><input type="number" min="1" max="10" id="numWhiteBalls"/><br/>
<span>Range Of numbers printed On white balls(greater than number of white balls and less than 101)</span><input type="number" min="1" max="100" id="whiteMaxRange"/><br/>
<span>Number Of Red Ballls (0 to 10):</span><input type="number" min="0" max="10" id="numRedBalls"/><br/>
<span>Range Of numbers printed On Red balls(greater than number of red balls and less than 101)</span><input type="number" min="1" max="100" id="redMaxRange"/><br/>
<span>Number of Picks to be generate</span><input type="number" min="1" max="5" id="picks"/><br/>
<input type="button" value="Generate Tickets" id="genTicketButton"/>
</form>
</div>
<div id="tickets">
<h4>Generated Random Picks Are :</h4><br/>
<span id="Error"></span>
<table id="tableData">
</table>
</div>
</body>
</html>
//save it as style.css
body
{
font-family: cursive;
}
.white
{
background-color:white;
}
.red
{
background-color:red;
}
table
{
border: 1px solid black;
width:50vw;
border-collapse:collapse;
}
td
{
border: 1px solid black;
height:5vh;
text-align: center;
}
tr
{
}
//save this as script.js
window.onload = init;
function init()
{
document.getElementById("genTicketButton").onclick = createDynamicTable;
}
function createDynamicTable()
{
var rows = parseInt(document.getElementById("picks").value);
var whiteBalls = parseInt(document.getElementById("numWhiteBalls").value);
var redBalls=parseInt(document.getElementById("numRedBalls").value);
var col = whiteBalls + redBalls;
var whiteRange = parseInt(document.getElementById("whiteMaxRange").value);
var redRange = parseInt(document.getElementById("redMaxRange").value);
var table = document.getElementById("tableData");
//clearing table and error msg
var error = document.getElementById("Error");
error.innerHTML = "";
while (table.hasChildNodes())
{
table.removeChild(table.lastChild);
}
//checking for error in input
if(isNaN(rows)||isNaN(whiteBalls)||isNaN(whiteBalls)||isNaN(redBalls)||isNaN(whiteRange)||isNaN(redRange))
{
error.innerHTML = "Please Enter A Number In All Fields";
return;
}
else if(whiteRange<whiteBalls)
{
error.innerHTML = "white range can not be less than number of white balls";
return;
}
else if(redRange<redBalls)
{
error.innerHTML = "red range can not be less than number of red balls";
return;
}
else if(rows<1||rows>5)
{
error.innerHTML = "pick value must be 1 to 5";
return;
}
else if(whiteBalls<1||whiteBalls>10)
{
error.innerHTML = "number of white balls must be 1 to 10";
return;
}
else if(redBalls<0||redBalls>10)
{
error.innerHTML = "number of red balls must be 0 to 10";
return;
}
else if((whiteRange<1||whiteRange>100)||(redRange<1||redRange>100))
{
error.innerHTML = "range of numbers print on balls must be 1 to 100";
return;
}
//creating balls list
var whiteBallsArray = new Array();
for(var i=0;i<whiteRange;i++)
{
whiteBallsArray[i]=i+1;
}
var redBallsArray = new Array();
for(var i=0;i<redRange;i++)
{
redBallsArray[i]=i+1;
}
//entering data to tables
for(var i=0;i<rows;i++)
{
var tableRow = document.createElement('tr');
shuffleBall(whiteBallsArray,redBallsArray);
for(var j=0;j<whiteBalls;j++)
{
var tableCol = document.createElement('td');
tableCol.setAttribute("class","white");
var ball = whiteBallsArray[j];
tableCol.innerHTML = ball;
tableRow.appendChild(tableCol);
}
for(var j=0;j<redBalls;j++)
{
var tableCol = document.createElement('td');
tableCol.setAttribute("class","red");
var ball = redBallsArray[j];
tableCol.innerHTML = ball;
tableRow.appendChild(tableCol);
}
table.appendChild(tableRow);
}
}
function shuffleBall(whiteBallsArray,redBallsArray)
{
var whiteRange = parseInt(document.getElementById("whiteMaxRange").value);
//shuffle white ball array
for(var i=0;i<100;i++)
{
var index1 = Math.floor((Math.random()*whiteRange));
var index2 = Math.floor((Math.random()*whiteRange));
var temp = whiteBallsArray[index1];
whiteBallsArray[index1]=whiteBallsArray[index2];
whiteBallsArray[index2]=temp;
}
//red ball shuffling
var redRange = parseInt(document.getElementById("redMaxRange").value);
for(var i=0;i<100;i++)
{
var index1 = Math.floor((Math.random()*redRange));
var index2 = Math.floor((Math.random()*redRange));
var temp = redBallsArray[index1];
redBallsArray[index1]=redBallsArray[index2];
redBallsArray[index2]=temp;
}
}