Compare commits
17 Commits
84a7eeab46
...
90ebe9b21c
| Author | SHA1 | Date | |
|---|---|---|---|
90ebe9b21c
|
|||
|
87ed25e622
|
|||
|
e677ff0162
|
|||
|
130a30ccb1
|
|||
|
ec9115b009
|
|||
|
ecaff0e762
|
|||
|
8e88d30415
|
|||
|
d681163769
|
|||
|
68b852421f
|
|||
|
9a028f044c
|
|||
|
6cdcae6916
|
|||
|
601020f5f5
|
|||
|
10a009f630
|
|||
|
0a8355c190
|
|||
|
c8ab1a7b3c
|
|||
|
3674e55225
|
|||
|
94a9d26309
|
9
.vscode/settings.json
vendored
9
.vscode/settings.json
vendored
@ -1,3 +1,10 @@
|
|||||||
{
|
{
|
||||||
"cSpell.words": ["bondiblue", "dimen"]
|
"cSpell.words": [
|
||||||
|
"Alssya",
|
||||||
|
"bondiblue",
|
||||||
|
"Colton",
|
||||||
|
"dimen",
|
||||||
|
"Skylit",
|
||||||
|
"Tonisha"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
73
Chapter3Project/index.html
Normal file
73
Chapter3Project/index.html
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
<!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>
|
||||||
29
Chapter3Project/project3.js
Normal file
29
Chapter3Project/project3.js
Normal file
@ -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);
|
||||||
107
Chapter3Project/styles.css
Normal file
107
Chapter3Project/styles.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
50
Javascript2/asset/main.css
Normal file
50
Javascript2/asset/main.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
68
Javascript2/asset/main.js
Normal file
68
Javascript2/asset/main.js
Normal file
@ -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);
|
||||||
|
});
|
||||||
41
Javascript2/index.html
Normal file
41
Javascript2/index.html
Normal file
@ -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>
|
||||||
Loading…
x
Reference in New Issue
Block a user