[JavaScript project 1] starter files

[Chapter2Project] finished proj
2025-03-16 21:41:24 -05:00 · 2025-03-09 10:21:24 -05:00
10 changed files with 450 additions and 0 deletions
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,4 @@
+{
+  singleQuote: true,
+  trailingComma: "all"
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["bondiblue", "dimen"]
+}
--- a/Chapter2Project/index.html
+++ b/Chapter2Project/index.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!--
+  Nicola Clark
+  09MAR25
+-->
+<html lang="en">
+  <head>
+    <title>WEB124 &dash; Project 2 &dash; Nicola Clark</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <p id="p1">Johnson County Community College</p>
+    <p id="p2">Johnson County Community College</p>
+    <p id="p3">Johnson County Community College</p>
+    <p id="p4">Johnson County Community College</p>
+    <p id="p5">Johnson County Community College</p>
+    <p id="p6">Johnson County Community College</p>
+    <script src="project2.js"></script>
+  </body>
+</html>
--- a/Chapter2Project/project2.js
+++ b/Chapter2Project/project2.js
@ -0,0 +1,25 @@
+/*
+ * Nicola Clark
+ * 09MAR25
+ */
+
+let myName = 'Nicola Clark';
+let para1 = document.getElementById('p1');
+para1.textContent = myName;
+
+let n1 = 2;
+let n2 = 13;
+let numberSum = n1 + n2;
+document.getElementById('p2').textContent = numberSum;
+
+let numberMult = n1 * n2;
+document.getElementById('p3').textContent = numberMult;
+
+let myNameAddNum = myName + n1;
+document.getElementById('p4').textContent = myNameAddNum;
+
+let myNameMultNum = myName * n2;
+document.getElementById('p5').textContent = myNameMultNum;
+
+let ageCompare = 25 <= numberMult;
+document.getElementById('p6').textContent = ageCompare;
--- a/Javascript1/asset/favicon-16x16.png
+++ b/Javascript1/asset/favicon-16x16.png
--- a/Javascript1/asset/favicon-32x32.png
+++ b/Javascript1/asset/favicon-32x32.png
--- a/Javascript1/asset/favicon.ico
+++ b/Javascript1/asset/favicon.ico
--- a/Javascript1/asset/main.css
+++ b/Javascript1/asset/main.css
@ -0,0 +1,107 @@
+/*
+Nicola Clark
+16MAR25
+
+Adapted from https://javascript30.com - Slide in on Scroll
+*/
+
+:root {
+  /*
+  Color palette from coolors:
+  https://coolors.co/e26d5c-403f4c-86cd82-72a276-208aae
+  */
+  --color-blue-bondiblue: #208aae;
+  --color-gray-onyx: #403f4c;
+  --color-green-asparagus: #72a276;
+  --color-green-pistachio: #86cd82;
+  --color-red-bittersweet: #e26d5c;
+
+  /*
+  Layout vars
+
+  Screen width breakpoints from
+  https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp
+  */
+  --dimen-content-w-md: 75%;
+  --dimen-space-lg: 2.5rem;
+  --dimen-space-md: 1.5rem;
+  --dimen-radius-sm: 1rem;
+  --dimen-screen-w-md: 768px;
+}
+
+html {
+  background: var(--color-green-asparagus);
+  box-sizing: border-box;
+  color: var(--color-gray-onyx);
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1.25rem;
+
+  /*
+  background: #ffc600;
+  font-family: 'helvetica neue';
+  font-size: 20px;
+  font-weight: 200;
+  */
+}
+
+body {
+  margin: 0;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+h1 {
+  font-family: 'Times New Roman', Times, serif;
+  margin-top: 0;
+}
+
+.site-wrap {
+  margin-bottom: 50px;
+  margin-top: 50px;
+  background: white;
+  padding: var(--dimen-space-lg);
+  text-align: justify;
+}
+
+@media screen and (min-width: 768px) {
+  .site-wrap {
+    border-radius: var(--dimen-radius-sm);
+    margin-bottom: 100px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 100px;
+    max-width: var(--dimen-content-w-md);
+  }
+}
+
+.align-left {
+  float: left;
+  margin-right: var(--dimen-space-md);
+}
+
+.align-right {
+  float: right;
+  margin-left: var(--dimen-space-md);
+}
+
+.slide-in {
+  opacity: 0;
+  transition: all 0.5s;
+}
+
+.align-left.slide-in {
+  transform: translateX(-30%) scale(0.95);
+}
+
+.align-right.slide-in {
+  transform: translateX(30%) scale(0.95);
+}
+
+.slide-in.active {
+  opacity: 1;
+  transform: translateX(0%) scale(1);
+}
--- a/Javascript1/asset/main.js
+++ b/Javascript1/asset/main.js
@ -0,0 +1,44 @@
+/*
+Nicola Clark
+16MAR25
+
+Adapted from https://javascript30.com - Slide in on Scroll
+*/
+
+function debounce(func, wait = 20, immediate = true) {
+  var timeout;
+  return function () {
+    var context = this,
+      args = arguments;
+    var later = function () {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}
+
+function onSlide() {
+  imagesToSlide.forEach((img) => {
+    // should start sliding when image is half-visible; this var is the scrollY
+    // where the image is halfway into the viewport.
+    const slideInAtY = window.scrollY + window.innerHeight - img.height / 2;
+
+    const imgBottom = img.offsetTop + img.height;
+
+    const isHalfShown = slideInAtY > img.offsetTop;
+    const isNotAboveViewport = window.scrollY < imgBottom;
+
+    if (isHalfShown && isNotAboveViewport) {
+      img.classList.add('active');
+    } else {
+      img.classList.remove('active');
+    }
+  });
+}
+
+const imagesToSlide = document.querySelectorAll('img.slide-in');
+window.addEventListener('scroll', debounce(onSlide));
--- a/Javascript1/index.html
+++ b/Javascript1/index.html
@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<!--
+Nicola Clark
+16MAR25
+-->
+<!--
+Adapted from https://javascript30.com - Slide in on Scroll
+
+Changes:
+* moved CSS + JS to external files
+* [CSS] modified color scheme
+* [CSS] modified layout values
+* [CSS] modified font size
+* [CSS] changed default fonts
+* [CSS] h1 now has serif typeface
+* [JS] changed images list var name to be more descriptive
+* [JS] made query selector for images more specific
+* [HTML] added viewport meta tag for responsiveness
+* [CSS] mobile-first by default with breakpoint for larger screens
+* [HTML] added favicons
+-->
+<!--
+New elements:
+New attributes:
+New JS: .offsetTop property
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>JavaScript30 &dash; Slide in on Scroll &dash; Nicola Clark</title>
+    <link rel="icon" href="asset/favicon.ico">
+    <link rel="icon" sizes="16x16" href="asset/favicon-16x16.png">
+    <link rel="icon" sizes="32x32" href="asset/favicon-32x32.png">
+    <link rel="stylesheet" href="asset/main.css">
+    <meta name="author" content="Nicola Clark">
+    <meta name="date" content="16MAR25">
+  </head>
+  <body>
+    <div class="site-wrap">
+      <h1>Slide in on Scroll</h1>
+      <p>
+        Consectetur adipisicing elit. Tempore tempora rerum, est autem
+        cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla,
+        adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas
+        laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse
+        magni, ut, dignissimos.
+      </p>
+      <p>
+        Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem
+        dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis
+        blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur
+        fugit quibusdam dolores sunt esse magni, ut, dignissimos.
+      </p>
+      <p>Adipisicing elit. Tempore tempora rerum..</p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore
+        tempora rerum, est autem cupiditate, corporis a qui libero ipsum
+        delectus quidem dolor at nulla, adipisci veniam in reiciendis aut
+        asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in
+        aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut,
+        dignissimos.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore
+        tempora rerum, est autem cupiditate, corporis a qui libero ipsum
+        delectus quidem dolor at nulla, adipisci veniam in reiciendis aut
+        asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in
+        aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut,
+        dignissimos.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore
+        tempora rerum, est autem cupiditate, corporis a qui libero ipsum
+        delectus quidem dolor at nulla, adipisci veniam in reiciendis aut
+        asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in
+        aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut,
+        dignissimos.
+      </p>
+      <img src="http://unsplash.it/400/400" class="align-left slide-in" />
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates,
+        deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta
+        dolor itaque adipisci, dolorum minima, veritatis earum provident error
+        molestias. Ratione magni illo sint vel velit ut excepturi consectetur
+        suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam,
+        reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit
+        modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus
+        dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit
+        perferendis et optio recusandae sed ratione. Culpa, dolorum
+        reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum
+        quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum
+        dolorum expedita quam, nesciunt
+      </p>
+      <img src="http://unsplash.it/400/401" class="align-right slide-in" />
+      <p>
+        at provident praesentium atque quas rerum optio dignissimos repudiandae
+        ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat.
+        Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta
+        consectetur officia omnis, doloribus voluptatibus? Veniam ipsum
+        veritatis architecto, provident quas consequatur doloremque quam quidem
+        earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui
+        aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque
+        odio. Eius minima distinctio harum, officia ab nihil exercitationem.
+        Tempora rem nemo nam temporibus molestias facilis minus ipsam quam
+        doloribus consequatur debitis nesciunt tempore officiis aperiam
+        quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus
+        quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem
+        ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit
+        natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure,
+        facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit
+        repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta
+        libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil
+        culpa? Ullam expedita eligendi obcaecati reiciendis velit provident
+        omnis quas qui in corrupti est dolore facere ad hic, animi soluta
+        assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam
+        laborum voluptas nisi pariatur sed optio accusantium quam consectetur,
+        corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis
+        velit corporis neque fugit non sequi eaque rem hic. Facere, inventore,
+        aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque
+        suscipit excepturi possimus doloremque odit saepe perferendis temporibus
+        molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum
+        labore dolor beatae blanditiis praesentium explicabo velit optio esse
+        aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed
+        culpa atque inventore, nam ullam enim expedita consectetur id velit
+        iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint
+        eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta
+        quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.
+      </p>
+      <img src="http://unsplash.it/200/500" class="align-left slide-in" />
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
+        maiores adipisci quibusdam repudiandae dolor vero placeat esse sit!
+        Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil
+        voluptatibus expedita quia vero perferendis, deserunt et incidunt
+        eveniet
+        <img src="http://unsplash.it/200/200" class="align-right slide-in" />
+        temporibus doloremque possimus facilis. Possimus labore, officia dolore!
+        Eaque ratione saepe, alias harum laboriosam deserunt laudantium
+        blanditiis eum explicabo placeat reiciendis labore iste sint.
+        Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis
+        eligendi. Asperiores laudantium, rerum ratione consequatur, culpa
+        consectetur possimus atque ab tempore illum non dolor nesciunt. Neque,
+        rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus
+        aliquid laboriosam architecto at cupiditate commodi expedita in, quae
+        blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque
+        culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel
+        corporis ullam sed tenetur ipsa qui rem quam error sint, libero.
+        Laboriosam rem, ratione. Autem blanditiis
+      </p>
+      <p>
+        laborum neque repudiandae quam, cumque, voluptate veritatis itaque,
+        placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta
+        velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum.
+        Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore
+        facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore
+        culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab
+        ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur
+        quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati
+        officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita
+        distinctio, itaque molestiae sequi, dolorum nisi repellendus quia
+        facilis iusto dignissimos nam? Tenetur fugit quos autem nihil,
+        perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus
+        distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit
+        vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet
+        reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus,
+        odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas
+        porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet,
+        facere ducimus accusantium eos veritatis neque.
+      </p>
+      <img src="http://unsplash.it/400/400" class="align-right slide-in" />
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
+        maiores adipisci quibusdam repudiandae dolor vero placeat esse sit!
+        Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil
+        voluptatibus expedita quia vero perferendis, deserunt et incidunt
+        eveniet temporibus doloremque possimus facilis. Possimus labore, officia
+        dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium
+        blanditiis eum explicabo placeat reiciendis labore iste sint.
+        Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis
+        eligendi. Asperiores laudantium, rerum ratione consequatur, culpa
+        consectetur possimus atque ab tempore illum non dolor nesciunt. Neque,
+        rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus
+        aliquid laboriosam architecto at cupiditate commodi expedita in, quae
+        blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque
+        culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel
+        corporis ullam sed tenetur ipsa qui rem quam error sint, libero.
+        Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae
+        quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi.
+        Expedita, laborum reprehenderit ratione soluta velit natus, odit
+        mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus
+        cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae
+        maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis
+        voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum
+        aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat
+        ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis
+        quo, ratione eveniet, provident pariatur. Veniam quasi expedita
+        distinctio, itaque molestiae sequi, dolorum nisi repellendus quia
+        facilis iusto dignissimos nam? Tenetur fugit quos autem nihil,
+        perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus
+        distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit
+        vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet
+        reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus,
+        odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas
+        porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet,
+        facere ducimus accusantium eos veritatis neque.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
+        maiores adipisci quibusdam repudiandae dolor vero placeat esse sit!
+        Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil
+        voluptatibus expedita quia vero perferendis, deserunt et incidunt
+        eveniet temporibus doloremque possimus facilis. Possimus labore, officia
+        dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium
+        blanditiis eum explicabo placeat reiciendis labore iste sint.
+        Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis
+        eligendi. Asperiores laudantium, rerum ratione consequatur, culpa
+        consectetur possimus atque ab tempore illum non dolor nesciunt. Neque,
+        rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus
+        aliquid laboriosam architecto at cupiditate commodi expedita in, quae
+        blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque
+        culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel
+        corporis ullam sed tenetur ipsa qui rem quam error sint, libero.
+        Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae
+        quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi.
+        Expedita, laborum reprehenderit ratione soluta velit natus, odit
+        mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus
+        cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae
+        maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis
+        voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum
+        aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat
+        ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis
+        quo, ratione eveniet, provident pariatur. Veniam quasi expedita
+        distinctio, itaque molestiae sequi, dolorum nisi repellendus quia
+        facilis iusto dignissimos nam? Tenetur fugit quos autem nihil,
+        perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus
+        distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit
+        vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet
+        reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus,
+        odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas
+        porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet,
+        facere ducimus accusantium eos veritatis neque.
+      </p>
+    </div>
+    <script src="asset/main.js"></script>
+  </body>
+</html>
Author	SHA1	Message	Date
Nicola Clark	84a7eeab46	[JavaScript project 1] starter files	2025-03-16 21:41:24 -05:00
Nicola Clark	68985b2137	[Chapter2Project] finished proj	2025-03-09 10:21:24 -05:00