diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 00000000..b9a064fe
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,15 @@
+module.exports = {
+ "env": {
+ "browser": true,
+ "es2021": true
+ },
+ "extends": [
+ "standard"
+ ],
+ "parserOptions": {
+ "ecmaVersion": 12,
+ "sourceType": "module"
+ },
+ "rules": {
+ }
+};
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..89d1965f
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+ "editor.formatOnSave": true,
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
\ No newline at end of file
diff --git a/03_15/Book.js b/03_15/Book.js
index 32354243..13c4b0cb 100644
--- a/03_15/Book.js
+++ b/03_15/Book.js
@@ -1,28 +1,27 @@
class Book {
- constructor(
- title,
- author,
- ISBN,
- pubYear,
- pageNumber,
- currentPage,
- readStatus,
- ) {
- this.title = title;
- this.author = author;
- this.ISBN = ISBN;
- this.pubYear = pubYear;
- this.pageNumber = pageNumber;
- this.currentPage = currentPage;
- this.readStatus = readStatus;
- }
- updateCurrentPage(newCurrentPage) {
- this.currentPage = newCurrentPage;
- }
- updateReadStatus(newReadStatus) {
- this.readStatus= newReadStatus;
- }
+ constructor(
+ title,
+ author,
+ ISBN,
+ pubYear,
+ pageNumber,
+ currentPage,
+ readStatus
+ ) {
+ this.title = title;
+ this.author = author;
+ this.ISBN = ISBN;
+ this.pubYear = pubYear;
+ this.pageNumber = pageNumber;
+ this.currentPage = currentPage;
+ this.readStatus = readStatus;
}
-
- export default Book;
-
\ No newline at end of file
+ updateCurrentPage(newCurrentPage) {
+ this.currentPage = newCurrentPage;
+ }
+ updateReadStatus(newReadStatus) {
+ this.readStatus = newReadStatus;
+ }
+}
+
+export default Book;
diff --git a/03_15/script.js b/03_15/script.js
index 3c1e8920..5ca8de0e 100755
--- a/03_15/script.js
+++ b/03_15/script.js
@@ -33,7 +33,7 @@ const surveillanceCapitalism = new Book(
691,
"Finished"
);
-console.log(surveillanceCapitalism)
+console.log(surveillanceCapitalism);
const consciousCreative = new Book(
"The Conscious Creative",
@@ -44,7 +44,7 @@ const consciousCreative = new Book(
216,
"Finished"
);
-console.log(consciousCreative)
+console.log(consciousCreative);
const techVirtues = new Book(
"Technology and the Virtues",
diff --git a/07_05/script.js b/07_05/script.js
index 743a7803..0bb1c230 100755
--- a/07_05/script.js
+++ b/07_05/script.js
@@ -2,38 +2,46 @@
* Solution: Build and modify an array
* - Build an array with 8 items
* - Remove the last item
- * - Add the last item as the first item on the array
+ * - Add the last item as the first item on the array
* - Sort the items by alphabetical order
* - Use the find() method to find a specific item in the array
* - Remove the item you found using the find method from the array.
*/
-const deskArray = ["pen", "camera", "phone", "notebook", "headphones", "lightbulb", "USB drive"]
-console.log("Original array:", deskArray)
+const deskArray = [
+ "pen",
+ "camera",
+ "phone",
+ "notebook",
+ "headphones",
+ "lightbulb",
+ "usb drive",
+];
+console.log("Original array:", deskArray);
// Remove the last item:
// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
-// deskArray.pop()
-// console.log("New array:", deskArray)
+// deskArray.pop();
+// console.log("New array:", deskArray);
-// Add last item as the firs item on the array:
+// Add last item as the first item on the array:
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift
-// deskArray.unshift(deskArray.pop())
-// console.log("Last item is now first:", deskArray)
+// deskArray.unshift(deskArray.pop());
+// console.log("Last item is now first:", deskArray);
// Sort items by alphabetical order:
// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
-// deskArray.sort()
-// console.log("Sorted array:", deskArray)
+// deskArray.sort();
+// console.log("Sorted array:", deskArray);
// Find "notebook":
// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
-// const foundItem = deskArray.find(item => item === "notebook");
-// console.log("Found item:", foundItem)
+// const foundItem = deskArray.find((item) => item === "notebook");
+// console.log("Found item:", foundItem);
// Find and remove an item:
// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
-// let remove = "notebook"
-// deskArray.splice(deskArray.indexOf(remove), 1)
-// console.log(`Array with "${remove}" removed:`, deskArray)
\ No newline at end of file
+// let remove = "notebook";
+// deskArray.splice(deskArray.indexOf(remove), 1);
+// console.log(`Array with "${remove}" removed:`, deskArray);
diff --git a/08_16/script.js b/08_16/script.js
index 3b166464..e5bbe43d 100755
--- a/08_16/script.js
+++ b/08_16/script.js
@@ -21,7 +21,6 @@ const everydayPack = new Backpack(
);
const content = `
-
diff --git a/08_17/script.js b/08_17/script.js
index 298740cf..13b48c35 100755
--- a/08_17/script.js
+++ b/08_17/script.js
@@ -7,13 +7,18 @@
*/
import backpackObjectArray from "./components/data.js";
-const main = document.querySelector(".maincontent");
-
+// Map throught the array and make a new array
const content = backpackObjectArray.map((backpack) => {
+ // "backpack" now holds a single backpack object
+
+ // Create new article
let backpackArticle = document.createElement("article");
backpackArticle.classList.add("backpack");
+
+ // Set article ID to the backpack.id property
backpackArticle.setAttribute("id", backpack.id);
+ // Set the innerHTML of backpackArticle using the backpack object.
backpackArticle.innerHTML = `
@@ -41,9 +46,15 @@ const content = backpackObjectArray.map((backpack) => {
}
`;
+
+ // Return the backpackArticle to the content array.
return backpackArticle;
});
+// Get the main
+const main = document.querySelector(".maincontent");
+
+// Loop through the content array to append each backpack article.
content.forEach((backpack) => {
main.append(backpack);
});
diff --git a/09_07/script-advanced.js b/09_07/script-advanced.js
index f2415652..e717033a 100755
--- a/09_07/script-advanced.js
+++ b/09_07/script-advanced.js
@@ -1,9 +1,11 @@
/**
* Challenge: Create an event listener
- * - Find each element with the .backpack__strap class
- * - Create function to iterate through above elements
- * - Use the data-side attribute to identify what strap you are working on
- * - Create form with a number input and a submit button
+ * - Find the two elements with the .backpack__strap class.
+ * - Create a function to output the strap length form.
+ * - Iterate through each item with the .backpack__strap class.
+ * - Capture the value of the data-side attribute to indicate the strap side.
+ * - Create a form element.
+ * - Populate the form with an input and a submit button.
* - Add event listener to each of the strap length forms.
* - Update strap length value with value submitted from form.
*/
@@ -13,31 +15,32 @@ import backpackObjectArray from "./components/data.js";
* Add event listener to the lid-toggle button.
*/
const lidToggle = function (event, button, newArg) {
- console.log(event)
- console.log(newArg)
-
+ console.log(event);
+ console.log(newArg);
+
// Find the current backpack object in backpackObjectArray
- let backpackObject = backpackObjectArray.find( ({ id }) => id === button.parentElement.id );
-
+ let backpackObject = backpackObjectArray.find(
+ ({ id }) => id === button.parentElement.id
+ );
+
// Toggle lidOpen status
- backpackObject.lidOpen == true
- ? backpackObject.lidOpen = false
- : backpackObject.lidOpen = true;
+ backpackObject.lidOpen == true
+ ? (backpackObject.lidOpen = false)
+ : (backpackObject.lidOpen = true);
// Toggle button text
- button.innerText == "Open lid"
- ? button.innerText = "Close lid"
- : button.innerText = "Open lid";
+ button.innerText == "Open lid"
+ ? (button.innerText = "Close lid")
+ : (button.innerText = "Open lid");
// Set visible property status text
let status = button.parentElement.querySelector(".backpack__lid span");
status.innerText == "closed"
? (status.innerText = "open")
: (status.innerText = "closed");
-}
+};
const backpackList = backpackObjectArray.map((backpack) => {
-
let backpackArticle = document.createElement("article");
backpackArticle.classList.add("backpack");
backpackArticle.setAttribute("id", backpack.id);
@@ -58,10 +61,10 @@ const backpackList = backpackObjectArray.map((backpack) => {
Number of pockets: ${
backpack.pocketNum
}
-
Left strap length: ${
+
Left strap length: ${
backpack.strapLength.left
} inches
-
Right strap length: ${
+
Right strap length: ${
backpack.strapLength.right
} inches
Lid status: ${
@@ -70,14 +73,14 @@ const backpackList = backpackObjectArray.map((backpack) => {
`;
-
+
let button = backpackArticle.querySelector(".lid-toggle");
- let newArg = "The argument I want to pass to the callback function!"
+ let newArg = "The argument I want to pass to the callback function!";
// Add event listener
button.addEventListener("click", (event) => {
- lidToggle(event, button, newArg)
- })
+ lidToggle(event, button, newArg);
+ });
return backpackArticle;
});
@@ -88,5 +91,3 @@ const main = document.querySelector(".maincontent");
backpackList.forEach((backpack) => {
main.append(backpack);
});
-
-
diff --git a/09_07/script-intermediate.js b/09_07/script-intermediate.js
index 38eceace..468b1f38 100755
--- a/09_07/script-intermediate.js
+++ b/09_07/script-intermediate.js
@@ -1,6 +1,6 @@
/**
- * Solution: Create an event listener
- * - Add event listeners to each of the strap length forms.
+ * Challenge: Create an event listener
+ * - Add event listener to each of the strap length forms.
* - Update strap length value with value submitted from form.
*/
import backpackObjectArray from "./components/data.js";
@@ -9,43 +9,43 @@ import backpackObjectArray from "./components/data.js";
* Add event listener to the lid-toggle button.
*/
const lidToggle = function (event, button, newArg) {
- console.log(event)
- console.log(newArg)
-
+ console.log(event);
+ console.log(newArg);
+
// Find the current backpack object in backpackObjectArray
- let backpackObject = backpackObjectArray.find( ({ id }) => id === button.parentElement.id );
-
+ let backpackObject = backpackObjectArray.find(
+ ({ id }) => id === button.parentElement.id
+ );
+
// Toggle lidOpen status
- backpackObject.lidOpen == true
- ? backpackObject.lidOpen = false
- : backpackObject.lidOpen = true;
+ backpackObject.lidOpen == true
+ ? (backpackObject.lidOpen = false)
+ : (backpackObject.lidOpen = true);
// Toggle button text
- button.innerText == "Open lid"
- ? button.innerText = "Close lid"
- : button.innerText = "Open lid";
+ button.innerText == "Open lid"
+ ? (button.innerText = "Close lid")
+ : (button.innerText = "Open lid");
// Set visible property status text
let status = button.parentElement.querySelector(".backpack__lid span");
status.innerText == "closed"
? (status.innerText = "open")
: (status.innerText = "closed");
-}
+};
/**
* Strap length functionality
*/
const newStrapLength = (strapArray) => {
-
// Loop through each element on the list
- strapArray.forEach( listElement => {
-
+ strapArray.forEach((listElement) => {
// Get what side we are working with
- let side = listElement.getAttribute("data-side")
+ let side = listElement.getAttribute("data-side");
// Create a new form element
- const lengthForm = document.createElement("form")
- lengthForm.classList.add(`${side}length`)
+ const lengthForm = document.createElement("form");
+ lengthForm.classList.add(`${side}length`);
// Populate form with an input and a button
lengthForm.innerHTML = `
@@ -54,12 +54,11 @@ const newStrapLength = (strapArray) => {
`;
// Add form to the end of the list element
- listElement.append(lengthForm)
- })
-}
+ listElement.append(lengthForm);
+ });
+};
const backpackList = backpackObjectArray.map((backpack) => {
-
let backpackArticle = document.createElement("article");
backpackArticle.classList.add("backpack");
backpackArticle.setAttribute("id", backpack.id);
@@ -92,17 +91,17 @@ const backpackList = backpackObjectArray.map((backpack) => {
`;
-
- let strapLengths = backpackArticle.querySelectorAll(".backpack__strap")
- newStrapLength(strapLengths)
+
+ let strapLengths = backpackArticle.querySelectorAll(".backpack__strap");
+ newStrapLength(strapLengths);
let button = backpackArticle.querySelector(".lid-toggle");
- let newArg = "The argument I want to pass to the callback function!"
+ let newArg = "The argument I want to pass to the callback function!";
// Add event listener
button.addEventListener("click", (event) => {
- lidToggle(event, button, newArg)
- })
+ lidToggle(event, button, newArg);
+ });
return backpackArticle;
});
@@ -113,5 +112,3 @@ const main = document.querySelector(".maincontent");
backpackList.forEach((backpack) => {
main.append(backpack);
});
-
-
diff --git a/09_08/script.js b/09_08/script.js
index 198926dc..597752ba 100755
--- a/09_08/script.js
+++ b/09_08/script.js
@@ -1,6 +1,12 @@
/**
* Solution: Create an event listener
- * - Add event listeners to each of the strap length forms.
+ * - Find the two elements with the .backpack__strap class.
+ * - Create a function to output the strap length form.
+ * - Iterate through each item with the .backpack__strap class.
+ * - Capture the value of the data-side attribute to indicate the strap side.
+ * - Create a form element.
+ * - Populate the form with an input and a submit button.
+ * - Add event listener to each of the strap length forms.
* - Update strap length value with value submitted from form.
*/
import backpackObjectArray from "./components/data.js";
@@ -9,43 +15,43 @@ import backpackObjectArray from "./components/data.js";
* Add event listener to the lid-toggle button.
*/
const lidToggle = function (event, button, newArg) {
- console.log(event)
- console.log(newArg)
-
+ console.log(event);
+ console.log(newArg);
+
// Find the current backpack object in backpackObjectArray
- let backpackObject = backpackObjectArray.find( ({ id }) => id === button.parentElement.id );
-
+ let backpackObject = backpackObjectArray.find(
+ ({ id }) => id === button.parentElement.id
+ );
+
// Toggle lidOpen status
- backpackObject.lidOpen == true
- ? backpackObject.lidOpen = false
- : backpackObject.lidOpen = true;
+ backpackObject.lidOpen == true
+ ? (backpackObject.lidOpen = false)
+ : (backpackObject.lidOpen = true);
// Toggle button text
- button.innerText == "Open lid"
- ? button.innerText = "Close lid"
- : button.innerText = "Open lid";
+ button.innerText == "Open lid"
+ ? (button.innerText = "Close lid")
+ : (button.innerText = "Open lid");
// Set visible property status text
let status = button.parentElement.querySelector(".backpack__lid span");
status.innerText == "closed"
? (status.innerText = "open")
: (status.innerText = "closed");
-}
+};
/**
* Strap length functionality
*/
const newStrapLength = (strapArray) => {
-
// Loop through each element on the list
- strapArray.forEach( listElement => {
-
+ strapArray.forEach((listElement) => {
// Get what side we are working with
- let side = listElement.getAttribute("data-side")
+ let side = listElement.getAttribute("data-side");
// Create a new form element
- const lengthForm = document.createElement("form")
- lengthForm.classList.add(`${side}length`)
+ const lengthForm = document.createElement("form");
+ lengthForm.classList.add(`${side}length`);
// Populate form with an input and a button
lengthForm.innerHTML = `
@@ -55,27 +61,25 @@ const newStrapLength = (strapArray) => {
// Add event listener to the form submit action
lengthForm.addEventListener("submit", (e) => {
-
// Stop form from reloading the page
- e.preventDefault()
+ e.preventDefault();
// Get the value from the form input
- let newValue = lengthForm.querySelector("input").value
+ let newValue = lengthForm.querySelector("input").value;
// Set the value of the field
- listElement.querySelector("span").innerHTML = `${newValue} inches`
+ listElement.querySelector("span").innerHTML = `${newValue} inches`;
// Clear the form input
- lengthForm.querySelector("input").value = ""
- })
+ lengthForm.querySelector("input").value = "";
+ });
// Add form to the end of the list element
- listElement.append(lengthForm)
- })
-}
+ listElement.append(lengthForm);
+ });
+};
const backpackList = backpackObjectArray.map((backpack) => {
-
let backpackArticle = document.createElement("article");
backpackArticle.classList.add("backpack");
backpackArticle.setAttribute("id", backpack.id);
@@ -108,17 +112,20 @@ const backpackList = backpackObjectArray.map((backpack) => {
`;
-
- let strapLengths = backpackArticle.querySelectorAll(".backpack__strap")
- newStrapLength(strapLengths)
+
+ // Find the two list items with the .backpack__strap class
+ let strapLengths = backpackArticle.querySelectorAll(".backpack__strap");
+
+ // Call the newStrapLength() function and pass on the strapLengths node list.
+ newStrapLength(strapLengths);
let button = backpackArticle.querySelector(".lid-toggle");
- let newArg = "The argument I want to pass to the callback function!"
+ let newArg = "The argument I want to pass to the callback function!";
// Add event listener
button.addEventListener("click", (event) => {
- lidToggle(event, button, newArg)
- })
+ lidToggle(event, button, newArg);
+ });
return backpackArticle;
});
@@ -129,5 +136,3 @@ const main = document.querySelector(".maincontent");
backpackList.forEach((backpack) => {
main.append(backpack);
});
-
-
diff --git a/10_01/components/Backpack.js b/10_01/components/Backpack.js
new file mode 100644
index 00000000..65236404
--- /dev/null
+++ b/10_01/components/Backpack.js
@@ -0,0 +1,45 @@
+// Set up the Backpack class
+class Backpack {
+ constructor(
+ id,
+ name,
+ volume,
+ color,
+ pocketNum,
+ strapLengthL,
+ strapLengthR,
+ lidOpen,
+ dateAcquired,
+ image
+ ) {
+ this.id = id;
+ this.name = name;
+ this.volume = volume;
+ this.color = color;
+ this.pocketNum = pocketNum;
+ this.strapLength = {
+ left: strapLengthL,
+ right: strapLengthR,
+ };
+ this.lidOpen = lidOpen;
+ this.dateAcquired = dateAcquired;
+ this.image = image;
+ }
+ toggleLid(lidStatus) {
+ this.lidOpen = lidStatus;
+ }
+ newStrapLength(lengthLeft, lengthRight) {
+ this.strapLength.left = lengthLeft;
+ this.strapLength.right = lengthRight;
+ }
+ backpackAge() {
+ let now = new Date();
+ let acquired = new Date(this.dateAcquired);
+ let elapsed = now - acquired; // elapsed time in milliseconds
+ let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24));
+ return daysSinceAcquired;
+ }
+}
+
+// Export the Backpack class to be used by other files
+export default Backpack;
diff --git a/10_01/components/data.js b/10_01/components/data.js
new file mode 100644
index 00000000..4c16376f
--- /dev/null
+++ b/10_01/components/data.js
@@ -0,0 +1,36 @@
+// Import the Backpack class so we can make new Backpack objects.
+import Backpack from "./Backpack.js";
+
+// Create new Backpack object
+const everydayPack = new Backpack(
+ "pack01",
+ "Everyday Backpack",
+ 30,
+ "grey",
+ 15,
+ 26,
+ 26,
+ false,
+ "December 5, 2018 15:00:00 PST",
+ "../assets/images/everyday.svg"
+);
+
+// Create new Backpack object
+const frogPack = new Backpack(
+ "pack02",
+ "Frog Backpack",
+ 8,
+ "green",
+ 3,
+ 10,
+ 10,
+ false,
+ "October 16, 2019 15:00:00 PST",
+ "../assets/images/frog.svg"
+);
+
+// Add Backpack objects into an array
+const backpackObjectArray = [everydayPack, frogPack];
+
+// Export the array to be used in other files
+export default backpackObjectArray;
diff --git a/10_01/index.html b/10_01/index.html
new file mode 100644
index 00000000..c3c0235f
--- /dev/null
+++ b/10_01/index.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+ BackpackPacker
+
+
+
+
+
+
+
+
+
BackpackPacker
+
All backpack packing, all the time.
+
+
+
+
A pack for every purpose
+
+ If you're carrying a heavy load, you can't find a better tool than a
+ backpack. Distributing the weight evenly across your shoulders, back,
+ and hips, the backpack lets you use the natural frame of your body to
+ literally shoulder the weight while your legs do the
+ carrying.
+
+
+
+
+
+
diff --git a/10_01/script.js b/10_01/script.js
new file mode 100644
index 00000000..036c01cb
--- /dev/null
+++ b/10_01/script.js
@@ -0,0 +1,131 @@
+/**
+ * Solution: Create an event listener
+ * - Add event listeners to each of the strap length forms.
+ * - Update strap length value with value submitted from form.
+ */
+import backpackObjectArray from "./components/data.js";
+
+/**
+ * Add event listener to the lid-toggle button.
+ */
+const lidToggle = function (event, button, newArg) {
+ console.log(event);
+ console.log(newArg);
+
+ // Find the current backpack object in backpackObjectArray
+ let backpackObject = backpackObjectArray.find(
+ ({ id }) => id === button.parentElement.id
+ );
+
+ // Toggle lidOpen status
+ backpackObject.lidOpen == true
+ ? (backpackObject.lidOpen = false)
+ : (backpackObject.lidOpen = true);
+
+ // Toggle button text
+ button.innerText == "Open lid"
+ ? (button.innerText = "Close lid")
+ : (button.innerText = "Open lid");
+
+ // Set visible property status text
+ let status = button.parentElement.querySelector(".backpack__lid span");
+ status.innerText == "closed"
+ ? (status.innerText = "open")
+ : (status.innerText = "closed");
+};
+
+/**
+ * Strap length functionality
+ */
+const newStrapLength = (strapArray) => {
+ console.log(strapArray);
+ // Loop through each element on the list
+ strapArray.forEach((listElement) => {
+ // Get what side we are working with
+ let side = listElement.getAttribute("data-side");
+ console.log(side);
+
+ // Create a new form element
+ const lengthForm = document.createElement("form");
+ lengthForm.classList.add(`${side}length`);
+
+ // Populate form with an input and a button
+ lengthForm.innerHTML = `
+
+
+ `;
+
+ // Add event listener to the form submit action
+ lengthForm.addEventListener("submit", (e) => {
+ // Stop form from reloading the page
+ e.preventDefault();
+
+ // Get the value from the form input
+ let newValue = lengthForm.querySelector("input").value;
+
+ // Set the value of the field
+ listElement.querySelector("span").innerHTML = `${newValue} inches`;
+
+ // Clear the form input
+ lengthForm.querySelector("input").value = "";
+ });
+
+ // Add form to the end of the list element
+ listElement.append(lengthForm);
+ });
+};
+
+const backpackList = backpackObjectArray.map((backpack) => {
+ let backpackArticle = document.createElement("article");
+ backpackArticle.classList.add("backpack");
+ backpackArticle.setAttribute("id", backpack.id);
+
+ backpackArticle.innerHTML = `
+
+
+
+
${backpack.name}
+
+
Volume: ${
+ backpack.volume
+ }l
+
Color: ${
+ backpack.color
+ }
+
Age: ${backpack.backpackAge()} days old
+
Number of pockets: ${
+ backpack.pocketNum
+ }
+
Left strap length: ${
+ backpack.strapLength.left
+ } inches
+
Right strap length: ${
+ backpack.strapLength.right
+ } inches