Previous version:
Task:
Draw a grid with a given number of rows and columns. Each cell can be any color. The same grid should also be updated at a predetermined time interval. The grid should cover the entire visible portion of the page in the browser. Add a context menu with which you can change the parameters of the lattice.
I would really like to hear feedback on the code: syntax, logic and general any comments and tips.
I'm a young programmer so I want to hear real reviews for further development.
Corrected:
- object passed to the constructor with parameters
- variables moved inside the constructor grid
- function
createGridas a method of object inside the constructor - use style CSS
- added function that keeps track of dynamic resizing the browser window
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/gridStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/grid.js"></script>
<script type="text/javascript">
window.onload = function () {
var options = {
numRows : 20,
numColumns : 6,
updateInterval : 2000
}
var grid = new Grid (options);
}
</script>
</head>
<body>
</body>
</html>
JS:
function Grid(gridOptions) {
this.numRows = gridOptions.numRows;
this.numColumns = gridOptions.numColumns;
this.updateInterval = gridOptions.updateInterval;
var clientWidth = document.body.clientWidth;
var clientHeight = document.body.clientHeight;
var interval=0;
var checkInterval;
var stopUpdateGrid = false;
this.createGrid = function(){
var container = document.createElement("div");
document.body.appendChild(container);
container.className="container";
for (var i = 1; i <= this.numRows * this.numColumns; i++) {
var cell = document.createElement("div");
container.appendChild(cell);
cell.className="cell";
cell.style.width = (clientWidth - this.numRows - 1) / this.numRows + "px";
cell.style.height = (clientHeight - this.numColumns - 1) / this.numColumns + "px";
var n = randomColors();
cell.style.backgroundColor = "#" + n;
}
function randomColors() {
var min = 0;
var max = 15;
var colors = '';
for (var i = 1; i <= 6; i++) {
var rand = min - 0.5 + Math.random() * (max - min + 1);
rand = Math.round(rand);
rand = parseInt(rand, 10).toString(16);
colors = colors + rand;
}
return colors;
}
(function updateColorsGrid(updateInterval) {
if (interval) {
clearTimeout(interval);
}
interval = setTimeout(function() {
if (stopUpdateGrid === false) {
var container = document.getElementsByClassName("container")[0];
document.body.removeChild(container);
var grid = new Grid(gridOptions);
}
}, updateInterval);
})(this.updateInterval);
document.addEventListener("keyup", function(e) {
e = e || window.event;
if (e.keyCode === 13) {
stopUpdateGrid = true;
changeGridOptions();
}
}, false);
(function createNotification() {
var container = document.getElementsByClassName("container")[0];
var notificationContainer = document.createElement("div");
container.appendChild(notificationContainer);
notificationContainer.className = "notification";
notificationContainer.innerHTML = "Press Enter to show menu change!!!";
})();
function changeGridOptions() {
var container = document.getElementsByClassName("container")[0];
var changeOptionsForm = document.createElement("form");
container.appendChild(changeOptionsForm);
changeOptionsForm.className = "changeOptionsForm";
changeOptionsForm.style.left = clientWidth - 220 + "px";
changeOptionsForm.style.top = "15px";
var changeRowsText = document.createElement("div");
changeOptionsForm.appendChild(changeRowsText);
changeRowsText.className = "changeParametersTitle";
changeRowsText.innerHTML = "Rows:";
var changeRows = document.createElement("input");
changeOptionsForm.appendChild(changeRows);
changeRows.type = "text";
changeRows.className = "changeParametersValue";
var changeColumnsText = document.createElement("div");
changeOptionsForm.appendChild(changeColumnsText);
changeColumnsText.className = "changeParametersTitle";
changeColumnsText.innerHTML = "Columns:";
var changeColumns = document.createElement("input");
changeOptionsForm.appendChild(changeColumns);
changeColumns.type = "text";
changeColumns.className = "changeParametersValue";
var changeDelayUpdateGridText = document.createElement("div");
changeOptionsForm.appendChild(changeDelayUpdateGridText);
changeDelayUpdateGridText.className = "changeParametersTitle";
changeDelayUpdateGridText.innerHTML = "Delay Update:";
var changeDelayUpdateGrid = document.createElement("input");
changeOptionsForm.appendChild(changeDelayUpdateGrid);
changeDelayUpdateGrid.type = "text";
changeDelayUpdateGrid.className = "changeParametersValue";
var changeButton = document.createElement("input");
changeOptionsForm.appendChild(changeButton);
changeButton.type = "button";
changeButton.value = "change";
changeButton.className = "changeButton";
changeButton.addEventListener("click", function() {
gridOptions.numRows = changeRows.value || gridOptions.numRows;
gridOptions.numColumns = changeColumns.value || gridOptions.numColumns;
gridOptions.updateInterval = changeDelayUpdateGrid.value || gridOptions.updateInterval;
changeOptionsForm.style.display = "none";
stopUpdateGrid = false;
document.body.removeChild(container);
var grid = new Grid(gridOptions);
}, false);
}
(function checkSizeWindowBrowser() {
document.body.onresize = function() {
var container = document.getElementsByClassName("container")[0];
document.body.removeChild(container);
clearTimeout(interval);
var grid = new Grid(gridOptions);
};
})();
};
this.createGrid();
}
CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.cell {
float: left;
margin: -1px 0 0 -1px;
border: 1px solid #000;
}
.notification {
width: 500px;
height: 50px;
color: #fff;
font-size: 30px;
position: absolute;
}
.changeOptionsForm {
width: 200px;
height: 200px;
border: 2px solid #fff;
background-color: #808080;
position: absolute;
}
.changeParametersTitle {
width: 50px;
height: 20px;
margin: 10px;
float: left;
}
.changeParametersValue {
width: 100px;
height: 20px;
margin: 10px;
border: 2px solid #000;
}
.changeButton {
width: 100px;
height: 25px;
margin: 20px 50px;
float: left;
}
