nicola/WEB124-repo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Javascript2] starter proj + beginner JS

Browse Source
This commit is contained in:
Nicola Clark 2025-04-06 22:19:39 -05:00
parent 3674e55225
commit c8ab1a7b3c
Signed by: nicola
GPG Key ID: BEF8036296D094BF
4 changed files with 105 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.vscode/settings.json vendored
View File

@ -1,3 +1,10 @@
{ {
"cSpell.words": ["Alssya", "bondiblue", "Colton", "dimen", "Tonisha"] "cSpell.words": [
"Alssya",
"bondiblue",
"Colton",
"dimen",
"Skylit",
"Tonisha"
]
} }

33
Javascript2/asset/main.css Normal file
View File

@ -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;
}

35
Javascript2/asset/main.js Normal file
View File

@ -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);

29
Javascript2/index.html Normal file
View File

@ -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>