[Javascript2] removed unnecessary (due to CSS reset) padding from list

[Javascript2] increase list size
[Javascript2] increase font size
2025-04-06 23:09:56 -05:00 · 2025-04-06 23:09:02 -05:00 · 2025-04-06 23:07:20 -05:00 · 2025-04-06 23:06:10 -05:00 · 2025-04-06 22:57:56 -05:00 · 2025-04-06 22:48:57 -05:00
7 changed files with 376 additions and 1 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,3 +1,10 @@
 {
-  "cSpell.words": ["bondiblue", "dimen"]
+  "cSpell.words": [
+    "Alssya",
+    "bondiblue",
+    "Colton",
+    "dimen",
+    "Skylit",
+    "Tonisha"
+  ]
 }
--- a/Chapter3Project/index.html
+++ b/Chapter3Project/index.html
@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<!--
+  Nicola Clark
+  30MAR25
+-->
+<html lang="en">
+  <head>
+    <title>WEB124 &dash; Project 3 &dash; Nicola Clark</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <header>
+      <h1>WEB124 Project 3</h1>
+      <h2>Nicola Clark</h2>
+    </header>
+    <main>
+      <dl>
+        <dt>
+          <span class="qNum">1.</span>
+          Create a variable to store your full name.
+        </dt>
+        <dd>
+          <code>const myName = 'Nicola Clark';</code>
+        </dd>
+        <dt>
+          <span class="qNum">2.</span>
+          Create a variable to store your desired annual salary.
+        </dt>
+        <dd>
+          <code>const myDesiredAnnualSalary = 60_000;</code>
+        </dd>
+        <dt>
+          <span class="qNum">3.</span>
+          Create a variable to store your veteran status.
+        </dt>
+        <dd>
+          <code>const amIAVeteran = false;</code>
+        </dd>
+        <dt>
+          <span class="qNum">4.</span>
+          Create an array to store the names of three of your friends.
+        </dt>
+        <dd>
+          <code>const threeOfMyFriends = ['Jay', 'Alssya', 'Tonisha'];</code>
+        </dd>
+        <dt>
+          <span class="qNum">5.</span>
+          Create an array to store the desired annual salaries of your three
+          friends.
+        </dt>
+        <dd>
+          <code>const myThreeFriendsDesiredSalaries = [84_000, 72_000, 60_000];</code>
+        </dd>
+        <dt>
+          <span class="qNum">5.</span>
+          Create a literal object to store the first name, last name, and
+          desired annual salaries of a fourth friend.
+        </dt>
+        <dd>
+          <code>
+            const myFourthFriend = {<br>
+              &nbsp;&nbsp;firstName: 'Colton',<br>
+              &nbsp;&nbsp;lastName: 'H',<br>
+              &nbsp;&nbsp;desiredSalary: 84_000,<br>
+            };
+          </code>
+        </dd>
+      </dl>
+    </main>
+    <script src="project3.js"></script>
+  </body>
+</html>
--- a/Chapter3Project/project3.js
+++ b/Chapter3Project/project3.js
@ -0,0 +1,29 @@
+// Nicola Clark - 30MAR25
+
+// Q1
+const myName = 'Nicola Clark';
+console.log(myName);
+
+// Q2
+const myDesiredAnnualSalary = 60_000;
+console.log(myDesiredAnnualSalary);
+
+// Q3
+const amIAVeteran = false;
+console.log(amIAVeteran);
+
+// Q4
+const threeOfMyFriends = ['Jay', 'Alssya', 'Tonisha'];
+console.log(threeOfMyFriends);
+
+// Q5
+const myThreeFriendsDesiredSalaries = [84_000, 72_000, 60_000];
+console.log(myThreeFriendsDesiredSalaries);
+
+// Q5
+const myFourthFriend = {
+  firstName: 'Colton',
+  lastName: 'H',
+  desiredSalary: 84_000,
+};
+console.log(myFourthFriend);
--- a/Chapter3Project/styles.css
+++ b/Chapter3Project/styles.css
@ -0,0 +1,107 @@
+/*
+  Nicola Clark
+  30MAR25
+*/
+
+/*
+  Web fonts from Google Fonts
+
+  Serif: Domine
+  Sans-serif: Nunito Sans
+  Monospace: Fira Code
+*/
+@import url('https://fonts.googleapis.com/css2?family=Domine:wght@400..700&family=Fira+Code&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: 1.125rem;
+  line-height: 1.5;
+
+  color: var(--color-rich-black);
+
+  /*
+    Colors from coolors.co:
+    https://coolors.co/001524-3c5233-ffecd1-a28497-750d37
+  */
+  --color-claret: #750d37;
+  --color-hunter-green: #3c5233;
+  --color-mountbatten-pink: #a28497;
+  --color-papaya-whip: #ffecd1;
+  --color-rich-black: #001524;
+}
+
+header {
+  background-color: var(--color-rich-black);
+  color: var(--color-papaya-whip);
+
+  padding: 0.5rem 1rem;
+}
+
+h1,
+h2 {
+  font-family: Domine, serif;
+}
+
+main {
+  padding: 0.5rem 1rem;
+}
+
+dl > dt,
+dl > dd:not(:last-child) {
+  margin-bottom: 0.125rem;
+}
+
+dl > dt > span.qNum {
+  font-weight: bold;
+
+  color: var(--color-hunter-green);
+}
+
+dl > dd {
+  background-color: var(--color-hunter-green);
+  color: var(--color-papaya-whip);
+
+  padding: 0.125rem 0.25rem;
+}
+
+dl > dd > code {
+  font-family: 'Fira Code', monospace;
+  font-feature-settings: 'calt';
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    background-color: var(--color-rich-black);
+    color: var(--color-papaya-whip);
+  }
+
+  header {
+    border-bottom: 2px dotted var(--color-papaya-whip);
+  }
+
+  dl > dt > span.qNum {
+    color: var(--color-mountbatten-pink);
+  }
+
+  dl > dd {
+    background-color: var(--color-claret);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  header,
+  main {
+    padding: 1rem 1.5rem;
+  }
+
+  dl > dt,
+  dl > dd:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+}
--- a/Javascript2/asset/main.css
+++ b/Javascript2/asset/main.css
@ -0,0 +1,50 @@
+/*
+Nicola Clark
+06APR25
+
+Adapted from https://javascript30.com - Sorting band names without articles
+*/
+
+* {
+  box-sizing: border-box;
+
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: sans-serif;
+  font-size: 1.5rem;
+  background-color: seagreen;
+  display: flex;
+  align-items: center;
+  min-height: 100vh;
+}
+
+#bands {
+  list-style: inside square;
+  background: white;
+  /* 80px is 20px on each side of body bg color + 20px each side for shadow */
+  width: calc(100% - 80px);
+  margin: auto;
+  box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
+}
+
+#bands li {
+  border-bottom: 1px solid #efefef;
+  padding: 20px;
+}
+
+#bands li::marker {
+  /*
+   * wanted the list marker to match the border color
+   * MDN to the rescue: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
+   * voila:
+   */
+
+  color: color-mix(in srgb, black 5%, seagreen);
+}
+
+#bands li:last-child {
+  border-bottom: 0;
+}
--- a/Javascript2/asset/main.js
+++ b/Javascript2/asset/main.js
@ -0,0 +1,68 @@
+/*
+Nicola Clark
+06APR25
+
+Adapted from https://javascript30.com - Sorting band names without articles
+*/
+
+const bands = [
+  'The Plot in You',
+  'The Devil Wears Prada',
+  'Pierce the Veil',
+  'Norma Jean',
+  'The Bled',
+  'Say Anything',
+  'The Midway State',
+  'We Came as Romans',
+  'Counterparts',
+  'Oh, Sleeper',
+  'A Skylit Drive',
+  'Anywhere But Here',
+  'An Old Dog',
+];
+
+/**
+ * Removes articles from a band name
+ * @param {string} band band name to remove articles from
+ * @returns {string} the band name with articles removed
+ */
+function removeArticles(band) {
+  if (band.substring(0, 4) === 'The ') {
+    return band.substring(4);
+  } else if (band.substring(0, 2) === 'A ') {
+    return band.substring(2);
+  } else if (band.substring(0, 3) === 'An ') {
+    return band.substring(3);
+  }
+
+  return band;
+}
+
+/**
+ * Reinserts articles into a band name
+ * @param {string} band band name to reinsert the article
+ * @returns {string} the band name with the article reinserted (if applicable)
+ */
+function returnArticles(band) {
+  for (const originalBand of bands) {
+    if (originalBand.endsWith(band)) {
+      return originalBand;
+    }
+  }
+
+  // we shouldn't end up here; every band with an article removed should have a
+  // corresponding original band name.
+  return '???';
+}
+
+const bandsList = document.getElementById('bands');
+
+bands
+  .map(removeArticles)
+  .sort()
+  .map(returnArticles)
+  .forEach((band) => {
+    const bandListItem = document.createElement('li');
+    bandListItem.textContent = band;
+    bandsList.appendChild(bandListItem);
+  });
--- a/Javascript2/index.html
+++ b/Javascript2/index.html
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!--
+Nicola Clark
+06APR25
+-->
+<!--
+Adapted from https://javascript30.com - Sorting band names without articles
+
+Changes:
+* moved CSS + JS to external files
+* [HTML] changed favicon
+* [JS] … a lot.
+  I tried to complete the challenge before watching the rest of the video (as
+  suggested) and I fear that I may have massively overcomplicated the matter.
+* [CSS] added a basic reset
+* [CSS] removed unused rule
+* [CSS] changed marker color
+* [CSS] increased font size
+* [CSS] increased list size
+-->
+<!--
+New elements:
+New attributes:
+New JS:
+* JSDoc - I missed having type-based completions in VScode from TypeScript
+* Creating a DOM element - not really new, I just forgot how to and had to
+  double-check on W3Schools
+* Learned about the ability to pass a function to the Array.sort() method
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Sort Without Articles</title>
+    <link rel="icon" href="https://fav.farm/🤠">
+    <link rel="stylesheet" href="asset/main.css">
+  </head>
+  <body>
+    <ul id="bands"></ul>
+    <script src="asset/main.js"></script>
+  </body>
+</html>
Author	SHA1	Message	Date
Nicola Clark	90ebe9b21c	[Javascript2] removed unnecessary (due to CSS reset) padding from list	2025-04-06 23:09:56 -05:00
Nicola Clark	87ed25e622	[Javascript2] increase list size	2025-04-06 23:09:02 -05:00
Nicola Clark	e677ff0162	[Javascript2] increase font size	2025-04-06 23:07:20 -05:00
Nicola Clark	130a30ccb1	[Javascript2] modified marker color	2025-04-06 23:06:10 -05:00
Nicola Clark	ec9115b009	[Javascript2] removed unused CSS rule	2025-04-06 22:57:56 -05:00
Nicola Clark	ecaff0e762	[Javascript2] changed body background	2025-04-06 22:48:57 -05:00
Nicola Clark	8e88d30415	[Javascript2] added CSS reset	2025-04-06 22:47:00 -05:00
Nicola Clark	d681163769	[Javascript2] clarification on code differences from tutorial	2025-04-06 22:42:08 -05:00
Nicola Clark	68b852421f	[Javascript2] changed favicon	2025-04-06 22:39:37 -05:00
Nicola Clark	9a028f044c	[Javascript2] dates are hard	2025-04-06 22:36:04 -05:00
Nicola Clark	6cdcae6916	[Javascript2] forgot name, date, and attribution in JS + CSS	2025-04-06 22:35:43 -05:00
Nicola Clark	601020f5f5	[Javascript2] we have a list that's sorted as desired! :)	2025-04-06 22:33:30 -05:00
Nicola Clark	10a009f630	[Javascript2] add `returnArticles` to reinsert articles	2025-04-06 22:28:46 -05:00
Nicola Clark	0a8355c190	[Javascript2] fine-tuning of `removeArticles`	2025-04-06 22:27:44 -05:00
Nicola Clark	c8ab1a7b3c	[Javascript2] starter proj + beginner JS	2025-04-06 22:19:39 -05:00
Nicola Clark	3674e55225	[Project3] page content + styles	2025-03-31 00:22:19 -05:00
Nicola Clark	94a9d26309	[Project3] skeleton HTML + completed script	2025-03-30 23:42:27 -05:00