[Javascript3] completed proj

2025-04-15 21:48:37 -05:00 · 2025-04-15 21:48:37 -05:00 · d4677bf592
commit d4677bf592
parent 90ebe9b21c
3 changed files with 123 additions and 0 deletions
--- a/Javascript3/asset/main.css
+++ b/Javascript3/asset/main.css
@ -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);
+}
--- a/Javascript3/asset/main.js
+++ b/Javascript3/asset/main.js
@ -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,
+});
--- a/Javascript3/index.html
+++ b/Javascript3/index.html
@ -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>