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

a

Browse Source
This commit is contained in:
Jonathan Branan
2025-03-22 10:32:54 -05:00
parent 87e1e634a9
commit 8b0eff9b34
13 changed files with 606 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
8/index.html
View File

@ -1,11 +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>
<!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>

44
8/index2.html
View File

@ -1,23 +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>
<!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>

30
8/script.js
View File

@ -1,16 +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!");
});
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!");
});

50
8/script2.js
View File

@ -1,26 +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";
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";
});

26
8/style2.css
View File

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