1. Site Header (10 points) As a top-level header (h1) put your name, left aligned In the upper-ri...

Question

Question

1. Site Header (10 points) As a top-level header (h1) put your name, left aligned In the upper-right corner of the page, put

1. Site Header (10 points) As a top-level header (h1) put your name, left aligned In the upper-ri...

1. Site Header (10 points) As a top-level header (h1) put your name, left aligned In the upper-right corner of the page, put a div with a large text size (about h1 size) a. b. i. This div should have a black background and white text ii. In this div, you should put the step number that you believe to have completed of the quiz, updating it before you submit All of the rest of the elements shall be left-aligned. 2. Table strip (10 points) a. b. c. d. Make a table, it has one row and 10 columns The table has a noticeable boarder on it, defined by CSS The first cell has a noticeably different border, defined by CSS, so that it looks "selected" The table cells should be squares (equal width and height) 3. Main Table (10 points) There is a main table on the page This table has 20 rows and 20 columns Each cell is easily accessed by javascript using 0-based indexing from the upper left corner (which is 0,0). For example, the cell at 13,15 might have the id "cell1315" This table has a faint, but visible border (think light grey) Cell backgrounds are white The table cells should be squares (equal width and height) a. b. c. d. e. f. 4. Initial Javascript (10 points) When a cell on the strip is clicked, it becomes "selected" and the previous cell becomes un-selected (using CSS) When a cell in the main table is clicked, its coordinates appear in a javascript alert b. c. During part 2, various interactions will cause the cells to change colors. You will want to be able to detect which CSS class is applied to a cell and be able to change the CSS class easily.

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

<html>
<head>
<title></title>
<style>
.right {
float: right;
width: 300px;
height: 300px;
background: #000;
padding: 10px;
}
table {
table-layout: fixed;
border-collapse: collapse;
}

table, td, th {
border: 1px solid black;
border-color:lightgrey
}
div {
display: table;
width: 250px;
table-layout: fixed;
}
.notice{
border-color:red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$('#thetable').find('td').click( function(){// find the td where click happen
alert('Cordinate of cell is: '+this.parentNode.rowIndex+','+this.cellIndex);
/*return row index this.parentNode.rowIndex
return column index this.cellIndex*/
});
$('#noticechange').find('th').click( function(){
var id=this.id;// get id where click happen
for(var i=1;i<=10;i++)
{

document.getElementById(i).className="notice1";//change classname for all the cells

}
document.getElementById(id).className="notice";// change classname to notice where click happen

});
});
</script>
</head>
<body>
<h1 align="left">Your Name</h1>
<div class="right" class="container"><font color="white">write step accordance to you that you think it completed</font></div>
<h3 Style="margin-top:50px">Strip table</h3>
<div><table width="400" id="noticechange" >
<tr>
<td class="notice" id="1">A</td>
<th id="2">B</th>
<th id="3">C</th>
<th id="4">D</th>
<th id="5">E</th>
<th id="6">F</th>
<th id="7">G</th>
<th id="8">H</th>
<th id="9">I</th>
<th id="10">J</th></tr>
</table></div>
<h3 Style="margin-top:50px">Main table</h3>
<div>
<table width="400" BORDERCOLOR="red" id="thetable">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr><tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
</tr>
</table>
</div>

</body>
</html>

Add a comment

Answer 2

1. Site Header (10 points) As a top-level header (h1) put your name, left aligned In the upper-ri...

Homework Answers

Add Answer to:
1. Site Header (10 points) As a top-level header (h1) put your name, left aligned In the upper-ri...

Post as a guest

Earn Coins

Assignment:Super Lotto This exercise is JavaScript only. No jQuery, please. Your page should work as follows: Ask the user the highest number that they want to generate. (Some lotteries are 1 ‐ 47, so...

Can you please provide the formula for the worksheet also. CASE PROBLEMS Level 1- Analyzing Sales...

1. Site Header (10 points) As a top-level header (h1) put your name, left aligned In the upper-ri...

Homework Answers

Add Answer to: 1. Site Header (10 points) As a top-level header (h1) put your name, left aligned In the upper-ri...

Post as a guest

Earn Coins

Assignment:Super Lotto This exercise is JavaScript only. No jQuery, please. Your page should work as follows: Ask the user the highest number that they want to generate. (Some lotteries are 1 ‐ 47, so...

Can you please provide the formula for the worksheet also. CASE PROBLEMS Level 1- Analyzing Sales...

Add Answer to:
1. Site Header (10 points) As a top-level header (h1) put your name, left aligned In the upper-ri...