Compare commits
No commits in common. "90ebe9b21c240861b87b42ca982bfdd1526fc521" and "84a7eeab46e0d5c2acee63cf15f10c6c014014c7" have entirely different histories.
90ebe9b21c
...
84a7eeab46
9
.vscode/settings.json
vendored
9
.vscode/settings.json
vendored
@ -1,10 +1,3 @@
|
|||||||
{
|
{
|
||||||
"cSpell.words": [
|
"cSpell.words": ["bondiblue", "dimen"]
|
||||||
"Alssya",
|
|
||||||
"bondiblue",
|
|
||||||
"Colton",
|
|
||||||
"dimen",
|
|
||||||
"Skylit",
|
|
||||||
"Tonisha"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,73 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Nicola Clark
|
|
||||||
30MAR25
|
|
||||||
-->
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<title>WEB124 ‐ Project 3 ‐ 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>
|
|
||||||
firstName: 'Colton',<br>
|
|
||||||
lastName: 'H',<br>
|
|
||||||
desiredSalary: 84_000,<br>
|
|
||||||
};
|
|
||||||
</code>
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
</main>
|
|
||||||
<script src="project3.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
// 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);
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
/*
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,50 +0,0 @@
|
|||||||
/*
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,68 +0,0 @@
|
|||||||
/*
|
|
||||||
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);
|
|
||||||
});
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
<!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>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user