Create an application that modifies the \"ColorGrid.html\" file by using the ima
ID: 3895357 • Letter: C
Question
Create an application that modifies the "ColorGrid.html" file by using the images collection to add event handling code to color the border of the cell images red and black when the "Change Color" button is selected (see the "FinalGridImage.JPG" file). The initial view is shown in "InitialGridImage.JPG".
The color attributes are controlled by an external style sheet, "GridImageHandler.css", that contains two class selectors (i.e. one for the color red; one for the color black).
The event handling code is contained in a JavaScript file, "GridImageHandler.js", that is accessed using the "src" attribute of the "script" element.
ColorGrid.html code:
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
.images
{
border: 25px solid navy;
}
</style>
</head>
<body>
<h1> Grid Color Application </h1>
<table>
<tr>
<td> <img class = "images" src="Cell.png" > </td>
<td> <img class = "images" src="Cell.png" > </td>
<td> <img class = "images" src="Cell.png" > </td>
</tr>
<tr>
<td> <img class = "images" src="Cell.png" > </td>
<td> <img class = "images" src="Cell.png" > </td>
<td> <img class = "images" src="Cell.png" > </td>
</tr>
<tr>
<td> <img class = "images" src="Cell.png" > </td>
<td> <img class = "images" src="Cell.png" > </td>
<td> <img class = "images" src="Cell.png" > </td>
</tr>
</table>
<form action = "#">
<input type = "button" value = "Change Border Color" id = "colorChangeButton">
<body>
</html>
Explanation / Answer
Code:
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> Grid Color Application </h1>
<table>
<tr>
<td> <img class = "images" src="Cell.png" > </td>
<td> <img class = "images" src="Cell.png" > </td>
<td> <img class = "images" src="Cell.png" > </td>
</tr>
<tr>
<td> <img class = "images" src="Cell.png" > </td>
<td> <img class = "images" src="Cell.png" > </td>
<td> <img class = "images" src="Cell.png" > </td>
</tr>
<tr>
<td> <img class = "images" src="Cell.png" > </td>
<td> <img class = "images" src="Cell.png" > </td>
<td> <img class = "images" src="Cell.png" > </td>
</tr>
</table>
<form action = "#">
<input type = "button" value = "Change Border Color" id = "colorChangeButton">
<body>
</html>
JavaScript File:
function changeColor(event){
var objects = document.getElementsByTagName("img");
for(var iCount=1;iCount<=objects.length;iCount++){
// All even cells are red colored
if(iCount%2 == 0){
objects[iCount-1].className = "red";
}
else{
objects[iCount-1].className = "black";
}
}
};
CSS file:
.images
{
border: 25px solid navy;
}
.red{
border: 25px solid red;
}
.black{
border: 25px solid black;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.