nicola/WEB124-repo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Javascript3] completed proj

Browse Source
This commit is contained in:
Nicola Clark 2025-04-15 21:48:37 -05:00
parent 90ebe9b21c
commit d4677bf592
Signed by: nicola
GPG Key ID: 86693766A822D561
3 changed files with 123 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
Javascript3/asset/main.css Normal file
View File

@ -0,0 +1,53 @@
/*
Nicola Clark
15APR25
Adapted from https://javascript30.com - Sorting band names without articles
*/
:root {
/*
Color scheme from https://coolors.co/0d1f22-bcebcb-87d68d-93b48b-264027
*/
--color-black-rich: #0d1f22;
--color-blue-cambridge: #93b48b;
--color-green-cal-poly: #264027;
--color-green-celadon: #bcebcb;
--color-green-light: #87d68d;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
button {
background-color: var(--color-green-cal-poly);
border: none;
color: white;
width: 100%;
padding: 25px;
}
div {
width: 100%;
padding: 100px;
}
.one {
background: var(--color-blue-cambridge);
}
.two {
background: var(--color-green-celadon);
}
.three {
background: var(--color-green-light);
}

28
Javascript3/asset/main.js Normal file
View File

@ -0,0 +1,28 @@
/*
Nicola Clark
15APR25
Adapted from https://javascript30.com - Sorting band names without articles
*/
const divs = document.querySelectorAll('div');
const btn = document.querySelector('button');
/**
* @param {MouseEvent} evt Click event
* @this HTMLElement
*/
function logText(evt) {
console.log(this.classList.value);
//console.log(this);
//evt.stopPropagation(); // <- event shouldn't bubble up!
}
divs.forEach((div) =>
div.addEventListener('click', logText, { capture: false, once: true }),
);
btn.addEventListener('click', () => console.log('button clicked!!!'), {
once: true,
});

42
Javascript3/index.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<!--
Nicola Clark
15APR25
-->
<!--
Adapted from https://javascript30.com - Event Capture, Propagation, Bubbling, and Once
Changes:
* moved CSS + JS to external files
* [HTML] changed favicon
* [CSS] modified colorscheme
* [JS] added JSDoc comment to logText for type suggestions in VScode
* [HTML] added text to button
* [CSS] added styles to button
-->
<!--
New elements:
New attributes:
New JS:
* capture param to addEventListener
* evt.stopPropagation to keep event from bubbling
* once param to addEventListener
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Understanding JavaScript's Capture</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="https://fav.farm/bubbles">
<link rel="stylesheet" href="asset/main.css">
</head>
<body class="bod">
<div class="one">
<div class="two">
<div class="three"></div>
</div>
</div>
<button>Click me :)</button>
<script src="asset/main.js"></script>
</body>
</html>