Create an interactive checkerboard web page. The following requirements must be
ID: 3840643 • Letter: C
Question
Create an interactive checkerboard web page.
The following requirements must be met:
You must use the provided starter HTML, image, CSS, and JavaScript files.
The user interface's behavior must be implemented ENTIRELY via JavaScript.
There are comments in the JavaScript file that show where your code must appear.
When the user clicks on an empty black square, show a checker piece on it (using the provided image).
When the user clicks on an occupied black square, remove the checker piece from it.
When the user clicks on a red square, make no change to it.Example Web Activity 8 output When the page loads: D Checkerboard C fi D eb-Activity 8/Checkerboard. A standard 8x8 checkerboard.
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.cell {
width: 70px;
height: 70px;
}
.black {
background-color: black;
}
.red {
background-color: red;
}
table {
margin: 50px auto;
}
</style>
</head>
<body>
<div class="board-wrapper"></div>
<script type="text/javascript">
// FUNCTIONS
/**
* Creates of board of given size.
* @param {Number} numberOfRowsOrColumns- Number of cols / rows to createBoard in the board.
*/
var createBoard = function(numberOfRowsOrColumns) {
// Add a class name.
table.className = "board";
// Set some attributes.
table.setAttribute("cellpadding", "0");
table.setAttribute("cellspacing", "0");
// We'll add this to the innerhtml of table.
out = "";
// iterator for rows.
for (var i = 0; i < numberOfRowsOrColumns; ++i) {
// Add a table row for every row ieration.
out += "<tr class="board-row">";
for (var j = 0; j < numberOfRowsOrColumns; ++j) {
// Modulo 2 helps us know if it is even or not. Adding the row
// number to it adds 1 every single time. so odd numbers become
// evens and evens become odds in every other row. So we form checkers.
if ((i + j) % 2 != 0)
out += "<td class="red cell"></td>";
else
out += "<td class="black cell"></td>";
}
// Add a closing tr at end of row iteration.
out += "</tr>";
}
// Add all this to the table.
table.innerHTML = out;
// Put it in the wrapper div up there.
wrap.appendChild(table);
};
var listen = function() {
// Listen for click. We can't add event listeners to straight to cells
// because cells are not formed yet at the time of loading of page. So
// we add event listener on parent and use target attribute to know if
// we clicked on black or red.
wrap.addEventListener("click", (event) => {
// If BLACK is clicked.
if (
event.target.classList.contains("black") &&
! event.target.classList.contains("clicked") ) {
event.target.innerHTML = "<img src="checker.png" class="checker" width="50px"/>";
event.target.classList.add("clicked");
}
// If BLACK is clicked again.
else if (
(event.target.classList.contains("black") &&
event.target.classList.contains("clicked"))
) {
event.target.innerHTML = "";
event.target.classList.remove("clicked");
}
// If you clicked on CHECKER, not the same as clicking on BLACK.
else if (event.target.classList.contains("checker")) {
event.target.parentNode.classList.remove("clicked");
event.target.parentNode.innerHTML = "";
}
});
};
// MAIN
var table = document.createElement("table");
var wrap = document.querySelector(".board-wrapper");
createBoard(8);
listen();
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.