ecki/JavaScript-from-Beginner-to-Professional
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Project 3

Browse Source
This commit is contained in:
Karan 2021-11-24 22:51:47 +05:30 committed by GitHub
parent ec4ae6e57d
commit 3372587b61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
Chapter 11/Project 3 Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>Complete JavaScript Course</title>
<style>
.holder {
display: inline-block;
width: 300px;
height: 300px;
border: 1px solid black;
padding: 10px;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div class="holder">
<div id="output"></div>
</div>
<script>
const ele = document.querySelector(".holder");
ele.addEventListener("mouseover", (e) => { e.target.classList.add("active"); })
ele.addEventListener("mouseout", (e) => { e.target.classList.remove("active"); })
ele.addEventListener("mousemove", coordin);
function coordin() {
let html = "X:" + event.clientX + " | Y:" + event.clientY;
document.getElementById("output").innerHTML = html;
}
</script>
</body>
</html>