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.
<html>
<head>
<title>
Babatunde Millar-Jaja - CS103 Section #5 - JavaScript Homework #4
</title>
<style type="text/css">
BODY {
background-color : turquoise;
}
#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>
<script type="text/javascript">
// http://www.webdeveloper.com/forum/showthread.php?270325-table-generator-with-html-and-javascript
// http://www.w3schools.com/html/html5_form_input_types.asp
function tabloYapmaca () {
var sa = document.getElementById('satirlar').value;
var su = document.getElementById('sutunlar').value;
// http://www.w3schools.com/jsref/jsref_number.asp
// alert(typeof( document.getElementById('minik').value)); // string
var minik = Number( document.getElementById('minik').value ) ;
var tavan = Number( document.getElementById('tavan').value ) ;
/*
var A = [];
for(var n = minik; n<=tavan; n++ ) {
A[A.length]= n;
}
alert(A);
alert( A[Math.floor((Math.random()* A.length ) )] );
*/
// http://www.w3schools.com/jsref/jsref_random.asp
// http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_random3
// Math.floor((Math.random()*100)+1);
//var rs = Math.floor((Math.random()* (tavan - minik ))+ minik );
//alert(rs);
var B = [];
for(var m =0; m< (sa*su); m++) {
B[B.length] = Math.floor((Math.random()* (tavan - minik + 1 ))+ minik );
}
alert('elements of array B (B dizisinin elemanları) = ' + B );
var s='<table border= "1" >';
var no = 0;
for(var i=0; i< sa; i++) {
s+= '<tr>';
for(var k = 0; k < su; k++) {
s += '<td>'+ B[no++] +'</td>';
}
s+= '</tr>';
}
s+= '</table>';
var d = document.getElementById('pano');
d.innerHTML = s;
}
// http://www.w3schools.com/tags/att_table_align.asp
// http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_align2
// http://www.w3schools.com/jsref/prop_radio_checked.asp
// http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_checked
// http://www.w3schools.com/jsref/prop_checkbox_checked.asp
// http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_checkbox_order
</script>
</head>
<div>
<body>
<center>
<form name = "Tablegenerator">
<label>Number of Rows: (Satırların sayısı )<input type = "number" name = "rows" id="satirlar" min=1 max=10 /></label><br/>
<label>Number of Columns: (Sütunların sayısı ) <input type = "number" name = "columns" id="sutunlar" min=1 max=6 /></label><br/>
<label>Floor of Random Numbers: ( Rastgele sayıların en küçüğü ) <input type = "number" name = "Floor" id="minik" min = 1 max = 100 /></label><br/>
<label>Ceiling of Random Numbers: ( Rastgele sayıların en büyüğü ) <input type = "number" name = "ceiling" id = "tavan" min = 1 max = 100 /></label><br/>
<input type="radio" name = "Alignment" value = "right" >Right Alignment ( Sağa hizala )<br>
<input type="radio" name = "Alignment" value = "center">Center Alignment ( Ortaya hizala)<br>
<input type="radio" name = "Alignment" value = "left">Left Alignment ( Sola hizala ) <br>
<input name = "generate" type = "button" value = "tablo yap" onclick="tabloYapmaca ()" />
</form>
<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 ="pano"></div>
</div>
</center>
</body>
</html>
Last edited by Ayşe; 12-19-2012 at 05:28 PM.
The Time Through Ages
In the Name of Allah, Most Gracious, Most Merciful
1. By the Time,
2. Verily Man is in loss,
3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.
Reply With Quote
Bookmarks