table generator with html and javascript
In this assignment you will be asked to create an HTML file that uses JavaScript to create a
table. Your table will have a certain number of rows and columns, the cells in the table will have
different colors, and the cells will contain random numbers.
Your HTML file should have a form in it that allows the user to specify:
• the number of rows in the table (from 1 – 10)
• the number of columns in the table (from 1 – 6)
• the selection of different colors to use
• the bottom of the range of random numbers (must be an integer greater than zero)
• the top of the range of random numbers (must be an integer less than or equal to 100)
• the position of the table
Numeric fields should be checked to make sure that the user specified a correct value.
The selection of colors should be a checkbox for black, white, red, orange, yellow, green, blue
and purple. If a checkbox is checked, that color should be used. At least one box must be
checked.
The position should be a radio button for left, center (the default) or right.
this is how far i have gotten
:
<html>
<head>
<title>
Babatunde Millar-Jaja - CS103 Section #5 - JavaScript Homework #4
</title>
<style type="text/css">
BODY {
background-color : blue;
}
#messages {
font-weight : bold;
font-size : 18pt;
}
.white { background-color : white; }
.black { background-color : black; }
.red { background-color : red; }
.orange { background-color : orange; }
.yellow { background-color : yellow; }
.green { background-color : green; }
.blue { background-color : blue; }
.purple { background-color : purple; }
</style>
</head>
<div>
<body>
<center>
<form name = "Tablegenerator">
<label>Number of Rows: <input type = "number" name = "rows" id="rows" min=1 max=10 /></label><br/>
<label>Number of Columns: <input type = "number" name = "columns" id="columns" min=1 max=6 /></label><br/>
<label>Floor of Random Numbers: <input type = "number" name = "Floor" id="floor" min = 1 max = 100 /></label><br/>
<label>Ceiling of Random Numbers: <input type = "number" name = "ceiling" id = "ceiling" min = 1 max = 100 /></label><br/>
<input type="radio" name = "RightAlignment" value = "right" >Right Alignment<br>
<input type="radio" name = "CenterAlignment" value = "center">Center Alignment<br>
<input type="radio" name = "LeftAlignment" value = "left">Left Alignment<br>
<input name = "generate" type = "button" value = "CREATE MY TABLE" onclick="createtable()" />
</form>
</div>
<div>
<input type = "checkbox" onclick='setmsgcolor("red");'>Red</button>
<input type = "checkbox" onclick='setmsgcolor("yellow");'>Yellow</button>
<input type = "checkbox" onclick='setmsgcolor("green");'>Green</button>
<input type = "checkbox" onclick='setmsgcolor("black");'>Black</button>
<input type = "checkbox" onclick='setmsgcolor("white");'>White</button>
<input type = "checkbox" onclick='setmsgcolor("blue");'>Blue</button>
<input type = "checkbox" onclick='setmsgcolor("orange");'>Orange</button>
<input type = "checkbox" onclick='setmsgcolor("purple");'>Purple</button>
<div id="messages">
<b>HELLO, WELCOME TO MY PROGRAM. ENTER THE INFORMATION ABOVE.</b>
<div id ="wrapper"></div>
</div>
</center>
</body>
</html>
