Create a JavaScript driven web page that can create and display a table whose nu
ID: 3550110 • 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.
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
example for an organization that 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
- Your page should display the randomly generated picks in a table format.
- 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
02
<html xmlns="http://www.w3.org/1999/xhtml">
03
<head>
04
<title>Liam's Lottery</title>
05
<link rel="stylesheet" rev="stylesheet" href="lotto.css" />
06
<script src="lotto.js" type="text/javascript" language="javascript"></script>
07
<script src="stars.js" type="text/javascript" language="javascript"></script>
08
</head>
09
<body>
10
<h4>Liam's Lotto</h4>
11
12
<p id="Bball">Bonus Ball</p>
13
<p id="stars">Lucky Stars</p>
14
<table id="table1">
15
<tr>
16
<th width="10%" id="lotto0"> </th>
17
<th width="10%"id="lotto1"> </th>
18
<th width="10%"id="lotto2"> </th>
19
<th width="10%"id="lotto3"> </th>
20
<th width="10%"id="lotto4"> </th>
21
<th width="10%"id="lotto5"> </th>
22
<th width="10%" id="bonus"> </th>
23
<th width="10%"id="lotto6"> </th>
24
</tr>
25
</table>
26
<div id="but1">
27
<form>
28
<input type="button" value="Lotto" id="reload">
29
</form>
30
</div>
31
32
<h4>Euro Millions</h4>
33
<table>
34
<tr>
35
<th width="10%"id="euro0"> </th>
36
<th width="10%"id="euro1"> </th>
37
<th width="10%"id="euro2"> </th>
38
<th width="10%"id="euro3"> </th>
39
<th width="10%"id="euro4"> </th>
40
<th width="10%" id="bonus"> </th>
41
<th width="10%"id="star0"> </th>
42
<th width="10%"id="star1"> </th>
43
</tr>
44
</table>
45
<div id="but2">
46
<form>
47
<input type="button" value="Euro's" id="lucky2">
48
</form>
49
</div>
50
51
<div id="but3">
52
<form>
53
<input type="button" value="Lucky Stars" id="lucky3">
54
</form>
55
</div>
56
57
58
</body>
59
</html>
here is the CSS
------------------
body {
02
background-color: white;
03
color: black;
04
font-size: 14px;
05
font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
06
}
07
h1, th {
08
font-family: Georgia, "Times New Roman", Times, serif;
09
}
10
11
h1 {
12
font-size: 28px;
13
}
14
15
table {
16
border-collapse: collapse;
17
}
18
19
th, td {
20
padding: 10px;
21
border: 2px #666 solid;
22
text-align: center;
23
font-size: 24px;
24
}
25
#table1 {
26
27
margin-bottom: 20px;
28
29
30
}
31
32
#Bball {
33
position: absolute;
34
top: 29px;
35
left:480px;
36
}
37
38
#stars {
39
position: absolute;
40
top: 140px;
41
left: 225px;
42
}
43
44
#bonus {
45
border-top: none;
46
border-bottom: none;
47
border-right:none;
48
}
49
50
#free {
51
background-color: #F66;
52
}
53
54
#but1 {
55
position: absolute;
56
top: 60px;
57
left: 565px;
58
}
59
60
#but2 {
61
position: absolute;
62
top: 170px;
63
left: 320px;
64
}
and finally the Java Script
-----------------
function lottery() {
02
for (var i=0; i<=7; i++) {
03
var lottery = Math.floor(Math.random() * 49);
04
05
document.getElementById ("lotto" + i).innerHTML = lottery;
06
07
08
}
09
}
10
11
function euros() {
12
for (var x=0; x<=5; x++) {
13
var euros = Math.floor(Math.random() * 50);
14
15
document.getElementById ("euro" + x).innerHTML = euros;
16
}
17
18
}
19
20
function stars() {
21
for (var y=0; y<=2; y++) {
22
var stars = Math.floor(Math.random() * 9);
23
24
document.getElementById ("star" + y).innerHTML = stars;
25
}
26
}