[Javascript2] starter proj + beginner JS

2025-04-06 22:19:39 -05:00 · 2025-04-06 22:19:39 -05:00 · c8ab1a7b3c
commit c8ab1a7b3c
parent 3674e55225
4 changed files with 105 additions and 1 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,3 +1,10 @@
 {
-  "cSpell.words": ["Alssya", "bondiblue", "Colton", "dimen", "Tonisha"]
+  "cSpell.words": [
+    "Alssya",
+    "bondiblue",
+    "Colton",
+    "dimen",
+    "Skylit",
+    "Tonisha"
+  ]
 }
--- a/Javascript2/asset/main.css
+++ b/Javascript2/asset/main.css
@ -0,0 +1,33 @@
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: url('https://source.unsplash.com/nDqA4d5NL0k/2000x2000');
+  background-size: cover;
+  display: flex;
+  align-items: center;
+  min-height: 100vh;
+}
+
+#bands {
+  list-style: inside square;
+  font-size: 20px;
+  background: white;
+  width: 500px;
+  margin: auto;
+  padding: 0;
+  box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
+}
+
+#bands li {
+  border-bottom: 1px solid #efefef;
+  padding: 20px;
+}
+
+#bands li:last-child {
+  border-bottom: 0;
+}
+
+a {
+  color: #ffc600;
+  text-decoration: none;
+}
--- a/Javascript2/asset/main.js
+++ b/Javascript2/asset/main.js
@ -0,0 +1,35 @@
+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, 3) === 'The') {
+    return band.substring(4);
+  } else if (band.substring(0, 1) === 'A') {
+    return band.substring(2);
+  } else if (band.substring(0, 2) === 'An') {
+    return band.substring(3);
+  }
+
+  return band;
+}
+
+const bandsWithoutArticles = bands.map(removeArticles);
+console.log(bandsWithoutArticles);
--- a/Javascript2/index.html
+++ b/Javascript2/index.html
@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!--
+Nicola Clark
+04APR25
+-->
+<!--
+Adapted from https://javascript30.com - Sorting band names without articles
+
+Changes:
+* moved CSS + JS to external files
+-->
+<!--
+New elements:
+New attributes:
+New JS:
+* JSDoc - I missed having type-based completions in VScode from TypeScript
+-->
+<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>