-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
44 lines (36 loc) · 2.01 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MADD9014 - Assignement</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="grid.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src="ex.js"></script>
<div class="container">
<div class="page-header">
<h1>MAD&D-9014</h1>
<p class="lead">In this assignment you will be writing your own Javascript file to manipulate the attached HTML file.</p>
<p>You must have a function that waits until the page is loaded. This first function will attach event listeners to the other HTML elements.</p>
<p>You must declare global variables to hold each of the HTML elements that will have listeners. This way you can reuse the variables in the DOMContentLoaded function as well as inside the click, mouseover, and mouseout handler functions.</p>
<p>Use only Javascript to attach the events to your functions.</p>
<p>Don't forget to write clean Javascript code</p>
</div>
<h3>Click, MouseOver and MouseOut</h3>
<p>Update the text in the right rectangle so that it shows whether the user is
moving his cursor over or out of the left rectangle.</p>
<p>Clicking on the right rectangle should show an alert but this click event can only
be triggered <strong>after</strong> the use move his cursor over the left rectangle.</p>
<div class="row">
<div class="col-md-6 long-rect">Detect if the mouse goes over this box</div>
<div class="col-md-2"></div>
<div class="col-md-4 short-rect">Update the status of this box. This box should not be clickable at this point.</div>
</div>
</div>
</body>
</html>