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

Compare commits

base: nicola:90ebe9b21c240861b87b42ca982bfdd1526fc521
Branches Tags
nicola:main
..
compare: nicola:84a7eeab46e0d5c2acee63cf15f10c6c014014c7
Branches Tags
nicola:main

No commits in common. "90ebe9b21c240861b87b42ca982bfdd1526fc521" and "84a7eeab46e0d5c2acee63cf15f10c6c014014c7" have entirely different histories.
90ebe9b21c ... 84a7eeab46

7 changed files with 1 additions and 376 deletions
Show Stats Expand all files Collapse all files

9
.vscode/settings.json vendored
View File

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

73
Chapter3Project/index.html
View File

@ -1,73 +0,0 @@
<!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>

29
Chapter3Project/project3.js
View File

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

107
Chapter3Project/styles.css
View File

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

50
Javascript2/asset/main.css
View File

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

68
Javascript2/asset/main.js
View File

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

41
Javascript2/index.html
View File

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