jblu/js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finished ch 9

Browse Source
This commit is contained in:
Jonathan Branan
2024-10-23 11:14:14 -05:00
parent 1e756f4f72
commit e48567fa30
11 changed files with 163 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
8/index.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers</title>
</head>
<body>
<h1 id="main-heading">Hello <em>World!</em></h1>
<p id="para">ow ow ow ow ow</p>
<script src="script.js"></script>
</body>
</html>

23
8/index2.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers</title>
<link href="style2.css" rel="stylesheet">
</head>
<body>
<h1 id="main-heading">Hello <em>World!</em></h1>
<ul id="word-list">
<li>The</li>
<li>Dog</li>
<li>Cat</li>
<li>Is</li>
<li>Was</li>
<li>And</li>
<li>Hungry</li>
<li>Green</li>
</ul>
<p id="sentence"></p>
<div id="box"></div>
<script src="script2.js"></script>
</body>
</html>

16
8/script.js Normal file
View File

@ -0,0 +1,16 @@
let heading = document.querySelector("#main-heading");
heading.addEventListener("click", () => {
console.log("You clicked the heading!");
});
let para = document.querySelector("#para");
para.addEventListener("click", () => {
console.log("Charlie bit me!");
});
document.querySelector("em").addEventListener("click", () =>{
console.log("You clicked the em element!");
});
document.querySelector("body").addEventListener("click", () => {
console.log("You clicked the body element!");
});

26
8/script2.js Normal file
View File

@ -0,0 +1,26 @@
let wordList = document.querySelector("#word-list");
let sentence = document.querySelector("#sentence");
wordList.addEventListener("click", event => {
let word = event.target.textContent;
sentence.textContent += word;
sentence.textContent += " ";
});
let box = document.querySelector("#box");
let currentX = 0
let currentY = 0
document.querySelector("html").addEventListener("keydown", e => {
if (e.repeat === true){
return
} else if (e.key == "w") {
currentY -= 5;
} else if (e.key == "a") {
currentX -= 5;
} else if (e.key == "s") {
currentY += 5;
} else if (e.key == "d") {
currentX += 5;
}
box.style.left = currentX + "px";
box.style.top = currentY + "px";
});

14
8/style2.css Normal file
View File

@ -0,0 +1,14 @@
li {
cursor: crosshair;
}
li:hover {
text-decoration: underline;
}
#box {
position: fixed;
left: 0px;
top: 0px;
width: 10px;
height: 10px;
background-color: hotpink;
}