js example

joshparkerj · Dec 14, 2021 · b33fb7f · b33fb7f
1 parent 6fbc91e
commit b33fb7f
Show file tree

Hide file tree

Showing 8 changed files with 202 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 node_modules/
+jsjq/*/images/*
diff --git a/jsjq/c01/add-content.html b/jsjq/c01/add-content.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Constructive &amp; Co.</title>
+    <link rel="stylesheet" href="css/c01.css" />
+  </head>
+
+  <body>
+    <h1>Constructive &amp; Co.</h1>
+    <!-- <script src="js/add-content.js"></script> -->
+    <script> document.write('<h3>Welcome!</h3>'); </script>
+    <p>For all orders and inquiries please call <em>555-3344</em></p>
+  </body>
+</html>
diff --git a/jsjq/c01/css/c01.css b/jsjq/c01/css/c01.css
@@ -0,0 +1,66 @@
+/* CSS for adding content example */
+
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:800italic);
+
+body { 
+    font-family: "Courier New", Courier, monospace;
+    background: url("../images/constructive-backdrop.jpg") no-repeat center center fixed; 
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    margin: 0;
+    padding: 0;}
+
+h1, h3, p {
+    float: left;
+    clear: left;
+    width: 320px;
+    background-color: #fff;
+    color: #5a514c;
+    text-align: center;}
+
+
+h1 {
+    margin: 50px 0 0 50px;
+    height: 175px;
+    background-image: url("../images/constructive-logo.gif");
+    background-repeat: no-repeat;
+    text-indent: -9999px;
+    border-top: 1px solid #bcbdc0;
+    border-left: 1px solid #bcbdc0;
+    border-right: 1px solid #bcbdc0;}
+
+h3 {
+    margin: 0 0 0 50px;
+    padding: 25px 0 0 0;
+    font-family: 'Open Sans', arial, sans-serif;
+    font-size: 1.8em;
+    font-style: italic;
+    font-weight: 800;
+    line-height: 0.80em;
+    letter-spacing: -0.02em;
+    text-transform: uppercase;
+    border-left: 1px solid #bcbdc0;
+    border-right: 1px solid #bcbdc0;}
+
+p {
+    margin: 0 0 0 50px;
+    padding: 30px 0 25px 0;
+    font-weight: bold;
+    text-align: center;
+    border-right: 1px solid #bcbdc0;
+    border-bottom: 1px solid #bcbdc0;
+    border-left: 1px solid #bcbdc0;}
+
+/* Border under box when you move script in the last example */
+p + script + h3 {
+    padding-bottom: 20px;
+    border-bottom: 1px solid #bcbdc0;}
+
+/* Fix for full-screen background image: Chrome on Android */
+html{
+    height:100%;
+    min-height:100%;}
+body{
+    min-height:100%;}
diff --git a/jsjq/c01/js/add-content.js b/jsjq/c01/js/add-content.js
@@ -0,0 +1,8 @@
+const today = new Date();
+const hourNow = today.getHours();
+const greeting = (hourNow > 18 && 'Good evening!')
+  || (hourNow > 12 && 'Good afternoon!')
+  || (hourNow > 0 && 'Good morning!')
+  || 'Welcome!';
+
+document.write(`<h3>${greeting}</h3>`);
diff --git a/node-parsing/clicking-element-with-refresh-rate.html b/node-parsing/clicking-element-with-refresh-rate.html
@@ -0,0 +1,42 @@
+<html>
+
+<head>
+  <link rel="stylesheet" type="text/css" href="./marquee.css">
+</head>
+
+<body>
+  <main></main>
+  <marquee>You know, there's a big world out there filled with desperate orphans who would gladly swim across an ocean
+    of thumbtacks just to be eclipsed by the long shadow that is cast by my accomplishments. But I don't care about
+    them. I chose to open my heart to you two loverly children and your hideous primate. All I ask in return is that you
+    do each and every thing that pops into my head while I enjoy the enormous fortune your parents left behind.
+  </marquee>
+  <p>You know, there's a big world out there filled with desperate orphans who would gladly swim across an ocean
+    of thumbtacks just to be eclipsed by the long shadow that is cast by my accomplishments. But I don't care about
+    them. I chose to open my heart to you two loverly children and your hideous primate. All I ask in return is that you
+    do each and every thing that pops into my head while I enjoy the enormous fortune your parents left behind.
+  </p>
+  <script>
+    const main = document.querySelector('main');
+    const speech = 'You know, there\'s a big world out there filled with desperate orphans who would gladly swim across an ocean of thumbtacks just to be eclipsed by the long shadow that is cast by my accomplishments. But I don\'t care about them. I chose to open my heart to you two loverly children and your hideous primate. All I ask in return is that you do each and every thing that pops into my head while I enjoy the enormous fortune your parents left behind.';
+    const FRAMES_PER_SECOND = 30;
+
+    let marqueeStart = 0;
+    let marqueeEnd = 30;
+    const wrap = (string, start, end) => {
+      s = start % string.length;
+      e = end % string.length;
+      if (e > s) return string.slice(s, e);
+      return string.slice(s) + string.slice(0, e);
+    };
+
+    const scrolling = () => wrap(speech, marqueeStart++, marqueeEnd++);
+    const static = () => wrap(speech, marqueeStart, marqueeEnd);
+    let isScrolling = true;
+    setInterval(() => main.innerHTML = isScrolling ? scrolling() : static(), 1000 * 1 / FRAMES_PER_SECOND);
+    main.addEventListener('mousedown', () => isScrolling = false);
+    main.addEventListener('mouseup', () => isScrolling = true);
+  </script>
+</body>
+
+</html>
diff --git a/node-parsing/marquee.css b/node-parsing/marquee.css
@@ -0,0 +1,3 @@
+marquee, p {
+  width: 100px;
+}
diff --git a/node-parsing/parse-example.js b/node-parsing/parse-example.js
@@ -12,6 +12,26 @@ const getDescendant = (node, predicate) => {
   return null;
 };
 
+const getChild = (node, predicate) => {
+  for (let i = 0; i < node.childNodes?.length; i++) {
+    if (predicate(node.childNodes[i])) return node.childNodes;
+  }
+
+  return null;
+};
+
+const getFollowingSibling = (node, predicate) => {
+  for (let i = 0, foundNode = false; i < node.parentNode?.childNodes?.length; i++) {
+    if (foundNode) {
+      if (predicate(node.parentNode.childNodes[i])) return node.childNodes;
+    } else if (node.parentNode.childNodes[i] === node) {
+      foundNode = true;
+    }
+  }
+
+  return null;
+};
+
 const getDescendantByTag = (node, tag) => (
   getDescendant(node, (childNode) => childNode.tagName === tag)
 );

diff --git a/node-parsing/semantic-practice.html b/node-parsing/semantic-practice.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <link rel="stylesheet" href="style.css">
+  <title>New York City</title>
+</head>
+
+<body>
+  <nav>
+    <ul>
+      <li><a href="">Blog</a></li>
+      <li><a href="">Media</a></li>
+      <li><a href="">About</a></li>
+    </ul>
+  </nav>
+  <header>
+    <h1>New York City</h1>
+  </header>
+
+  <script>
+    const sleepHours = {
+      monday: 8,
+      tuesday: 7,
+      wednesday: 8,
+      thursday: 6,
+      friday: 7,
+      saturday: 5,
+      sunday: 8,
+    };
+
+    const getSleepHours = function getSleepHours(day) {
+      return sleepHours[day];
+    };
+
+    console.log(getSleepHours('monday'));
+    console.log(getSleepHours('tuesday'));
+    console.log(getSleepHours('wednesday'));
+    console.log(getSleepHours('thursday'));
+    console.log(getSleepHours('friday'));
+    console.log(getSleepHours('saturday'));
+    console.log(getSleepHours('sunday'));
+
+    const getActualSleepHours()
+  </script>
+</body>
+
+</html>