diff --git a/01_01/Photo.js b/01_01/Photo.js new file mode 100755 index 00000000..722467ce --- /dev/null +++ b/01_01/Photo.js @@ -0,0 +1,78 @@ +/** + * Fragment from React Photo Gallery component. + * By Sandra Gonzales @neptunian + * @link https://github.com/neptunian/react-photo-gallery + * The MIT License (MIT) + * Copyright (c) 2015-2018 Sandra Gonzales + */ + +import React from "react"; +import PropTypes from "prop-types"; + +const imgWithClick = { cursor: "pointer" }; + +const Photo = ({ + index, + onClick, + photo, + margin, + direction, + top, + left, + key, +}) => { + const imgStyle = { margin: margin, display: "block" }; + if (direction === "column") { + imgStyle.position = "absolute"; + imgStyle.left = left; + imgStyle.top = top; + } + + const handleClick = (event) => { + onClick(event, { photo, index }); + }; + + return ( + + ); +}; + +export const photoPropType = PropTypes.shape({ + key: PropTypes.string, + src: PropTypes.string.isRequired, + width: PropTypes.number.isRequired, + height: PropTypes.number.isRequired, + alt: PropTypes.string, + title: PropTypes.string, + srcSet: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), + sizes: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), +}); + +Photo.propTypes = { + index: PropTypes.number.isRequired, + onClick: PropTypes.func, + photo: photoPropType.isRequired, + margin: PropTypes.number, + top: (props) => { + if (props.direction === "column" && typeof props.top !== "number") { + return new Error( + "top is a required number when direction is set to `column`" + ); + } + }, + left: (props) => { + if (props.direction === "column" && typeof props.left !== "number") { + return new Error( + "left is a required number when direction is set to `column`" + ); + } + }, + direction: PropTypes.string, +}; + +export default Photo; diff --git a/01_05/index.html b/01_05/index.html new file mode 100755 index 00000000..321b97c0 --- /dev/null +++ b/01_05/index.html @@ -0,0 +1,10 @@ + + + + + + Console demo + + + + diff --git a/01_05/script.js b/01_05/script.js new file mode 100755 index 00000000..98737d50 --- /dev/null +++ b/01_05/script.js @@ -0,0 +1,51 @@ +/** + * Create a Backpack object, populate some HTML to display its properties. + */ + +const updateBackpack = (update) => { + let main = document.querySelector("main"); + main.innerHTML = markup(backpack); + console.info(update); +}; + +const backpack = { + name: "Everyday Backpack", + volume: 30, + color: "grey", + pocketNum: 15, + strapLength: { + left: 26, + right: 26, + }, + lidOpen: false, + toggleLid: function (lidStatus) { + this.lidOpen = lidStatus; + updateBackpack(`Lid status changed.`); + }, + newStrapLength: function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + updateBackpack(`Strap lengths updated.`); + }, +}; + +const markup = (backpack) => { + return ` +
+

${backpack.name}

+ +
+`; +}; + +const main = document.createElement("main"); +main.innerHTML = markup(backpack); +document.body.appendChild(main); diff --git a/02_01/index.html b/02_01/index.html new file mode 100755 index 00000000..a4f753a6 --- /dev/null +++ b/02_01/index.html @@ -0,0 +1,53 @@ + + + + + + Inline JavaScript + + + +
+
+

Inline JavaScript

+

+ You can write JavaScript directly inside an HTML document using the + script element. The element can be added in the + head section or inside the body element. +

+
+
+ + + + diff --git a/02_02/index.html b/02_02/index.html new file mode 100755 index 00000000..216b38ca --- /dev/null +++ b/02_02/index.html @@ -0,0 +1,10 @@ + + + + + + Module demo + + + + diff --git a/02_02/script.js b/02_02/script.js new file mode 100755 index 00000000..57ea5b97 --- /dev/null +++ b/02_02/script.js @@ -0,0 +1,50 @@ +/** + * Create a Backpack object, populate some HTML to display its properties. + */ +const updateBackpack = (update) => { + let main = document.querySelector("main"); + main.innerHTML = markup(backpack); + console.info(update); +}; + +const backpack = { + name: "Everyday Backpack", + volume: 30, + color: "grey", + pocketNum: 15, + strapLength: { + left: 26, + right: 26, + }, + lidOpen: false, + toggleLid: function (lidStatus) { + this.lidOpen = lidStatus; + updateBackpack(`Lid status changed.`); + }, + newStrapLength: function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + updateBackpack(`Strap lengths updated.`); + }, +}; + +const markup = (backpack) => { + return ` +
+

${backpack.name}

+ +
+`; +}; + +const main = document.createElement("main"); +main.innerHTML = markup(backpack); +document.body.appendChild(main); diff --git a/02_03/index.html b/02_03/index.html new file mode 100755 index 00000000..596929d3 --- /dev/null +++ b/02_03/index.html @@ -0,0 +1,10 @@ + + + + + + Module demo + + + + diff --git a/02_03/script.js b/02_03/script.js new file mode 100755 index 00000000..57ea5b97 --- /dev/null +++ b/02_03/script.js @@ -0,0 +1,50 @@ +/** + * Create a Backpack object, populate some HTML to display its properties. + */ +const updateBackpack = (update) => { + let main = document.querySelector("main"); + main.innerHTML = markup(backpack); + console.info(update); +}; + +const backpack = { + name: "Everyday Backpack", + volume: 30, + color: "grey", + pocketNum: 15, + strapLength: { + left: 26, + right: 26, + }, + lidOpen: false, + toggleLid: function (lidStatus) { + this.lidOpen = lidStatus; + updateBackpack(`Lid status changed.`); + }, + newStrapLength: function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + updateBackpack(`Strap lengths updated.`); + }, +}; + +const markup = (backpack) => { + return ` +
+

${backpack.name}

+ +
+`; +}; + +const main = document.createElement("main"); +main.innerHTML = markup(backpack); +document.body.appendChild(main); diff --git a/02_04/backpack.js b/02_04/backpack.js new file mode 100755 index 00000000..f2da323c --- /dev/null +++ b/02_04/backpack.js @@ -0,0 +1,28 @@ +const updateBackpack = (update) => { + let main = document.querySelector("main"); + main.innerHTML = markup(backpack); + console.info(update); +}; + +const backpack = { + name: "Everyday Backpack", + volume: 30, + color: "grey", + pocketNum: 15, + strapLength: { + left: 26, + right: 26, + }, + lidOpen: false, + toggleLid: function (lidStatus) { + this.lidOpen = lidStatus; + updateBackpack(`Lid status changed.`); + }, + newStrapLength: function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + updateBackpack(`Strap lengths updated.`); + }, +}; + +export default backpack; diff --git a/02_04/index.html b/02_04/index.html new file mode 100755 index 00000000..948ffc3d --- /dev/null +++ b/02_04/index.html @@ -0,0 +1,11 @@ + + + + + + Module demo + + + + + diff --git a/02_04/script.js b/02_04/script.js new file mode 100755 index 00000000..a6342f86 --- /dev/null +++ b/02_04/script.js @@ -0,0 +1,25 @@ +/** + * Create a Backpack object, populate some HTML to display its properties. + */ +import backpack from "./backpack.js"; + +const markup = (backpack) => { + return ` +
+

${backpack.name}

+ +
+`; +}; + +const main = document.createElement("main"); +main.innerHTML = markup(backpack); +document.body.appendChild(main); diff --git a/03_02/index.html b/03_02/index.html new file mode 100755 index 00000000..c5183e4f --- /dev/null +++ b/03_02/index.html @@ -0,0 +1,10 @@ + + + + + + Building a JavaScript object from scratch + + + + diff --git a/03_02/script.js b/03_02/script.js new file mode 100755 index 00000000..84bf41d4 --- /dev/null +++ b/03_02/script.js @@ -0,0 +1,22 @@ +/** + * Create a Backpack object. + */ + +const backpack = { + name: "Everyday Backpack", + volume: 30, + color: "grey", + pocketNum: 15, + strapLength: { + left: 26, + right: 26, + }, + lidOpen: false, + toggleLid: function (lidStatus) { + this.lidOpen = lidStatus; + }, + newStrapLength: function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + }, +}; diff --git a/03_03/index.html b/03_03/index.html new file mode 100755 index 00000000..dcde0ed1 --- /dev/null +++ b/03_03/index.html @@ -0,0 +1,10 @@ + + + + + + Object container + + + + diff --git a/03_03/script.js b/03_03/script.js new file mode 100755 index 00000000..84bf41d4 --- /dev/null +++ b/03_03/script.js @@ -0,0 +1,22 @@ +/** + * Create a Backpack object. + */ + +const backpack = { + name: "Everyday Backpack", + volume: 30, + color: "grey", + pocketNum: 15, + strapLength: { + left: 26, + right: 26, + }, + lidOpen: false, + toggleLid: function (lidStatus) { + this.lidOpen = lidStatus; + }, + newStrapLength: function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + }, +}; diff --git a/03_04/index.html b/03_04/index.html new file mode 100755 index 00000000..0023527a --- /dev/null +++ b/03_04/index.html @@ -0,0 +1,10 @@ + + + + + + Object properties + + + + diff --git a/03_04/script.js b/03_04/script.js new file mode 100755 index 00000000..84bf41d4 --- /dev/null +++ b/03_04/script.js @@ -0,0 +1,22 @@ +/** + * Create a Backpack object. + */ + +const backpack = { + name: "Everyday Backpack", + volume: 30, + color: "grey", + pocketNum: 15, + strapLength: { + left: 26, + right: 26, + }, + lidOpen: false, + toggleLid: function (lidStatus) { + this.lidOpen = lidStatus; + }, + newStrapLength: function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + }, +}; diff --git a/03_05/index.html b/03_05/index.html new file mode 100755 index 00000000..a4ade733 --- /dev/null +++ b/03_05/index.html @@ -0,0 +1,10 @@ + + + + + + Accessing objects + + + + diff --git a/03_05/script.js b/03_05/script.js new file mode 100755 index 00000000..84bf41d4 --- /dev/null +++ b/03_05/script.js @@ -0,0 +1,22 @@ +/** + * Create a Backpack object. + */ + +const backpack = { + name: "Everyday Backpack", + volume: 30, + color: "grey", + pocketNum: 15, + strapLength: { + left: 26, + right: 26, + }, + lidOpen: false, + toggleLid: function (lidStatus) { + this.lidOpen = lidStatus; + }, + newStrapLength: function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + }, +}; diff --git a/03_06/index.html b/03_06/index.html new file mode 100755 index 00000000..cb3391f2 --- /dev/null +++ b/03_06/index.html @@ -0,0 +1,10 @@ + + + + + + Accessing object properties + + + + diff --git a/03_06/script.js b/03_06/script.js new file mode 100755 index 00000000..0203772a --- /dev/null +++ b/03_06/script.js @@ -0,0 +1,24 @@ +/** + * Create a Backpack object. + */ + +const backpack = { + name: "Everyday Backpack", + volume: 30, + color: "grey", + pocketNum: 15, + strapLength: { + left: 26, + right: 26, + }, + lidOpen: false, + toggleLid: function (lidStatus) { + this.lidOpen = lidStatus; + }, + newStrapLength: function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + }, +}; + +console.log("The backpack object:", backpack); diff --git a/03_08/index.html b/03_08/index.html new file mode 100755 index 00000000..4be0f511 --- /dev/null +++ b/03_08/index.html @@ -0,0 +1,10 @@ + + + + + + Object methods + + + + diff --git a/03_08/script.js b/03_08/script.js new file mode 100755 index 00000000..e38d752d --- /dev/null +++ b/03_08/script.js @@ -0,0 +1,25 @@ +/** + * Create a Backpack object. + */ + +const backpack = { + name: "Everyday Backpack", + volume: 30, + color: "grey", + pocketNum: 15, + strapLength: { + left: 26, + right: 26, + }, + lidOpen: false, + toggleLid: function (lidStatus) { + this.lidOpen = lidStatus; + }, + newStrapLength: function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + }, +}; + +console.log("The backpack object:", backpack); +console.log("The pocketNum value:", backpack.pocketNum); diff --git a/03_08e/index.html b/03_08e/index.html new file mode 100755 index 00000000..4be0f511 --- /dev/null +++ b/03_08e/index.html @@ -0,0 +1,10 @@ + + + + + + Object methods + + + + diff --git a/03_08e/script.js b/03_08e/script.js new file mode 100755 index 00000000..7dfe71d3 --- /dev/null +++ b/03_08e/script.js @@ -0,0 +1,31 @@ +/** + * Create a Backpack object. + */ + +const backpack = { + name: "Everyday Backpack", + volume: 30, + color: "grey", + pocketNum: 15, + strapLength: { + left: 26, + right: 26, + }, + lidOpen: false, + toggleLid: function (lidStatus) { + this.lidOpen = lidStatus; + }, + newStrapLength: function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + }, +}; + +console.log("The backpack object:", backpack); +console.log("The pocketNum value:", backpack.pocketNum); + +console.log("Left before:", backpack.strapLength.left); + +backpack.newStrapLength(10, 15); + +console.log("Left after:", backpack.strapLength.left); diff --git a/03_10/Backpack.js b/03_10/Backpack.js new file mode 100755 index 00000000..cca45eb3 --- /dev/null +++ b/03_10/Backpack.js @@ -0,0 +1,40 @@ +/** + * Creating classes: + * + * Class declaration: class Name {} + * Class expression: const Name = class {} + */ + +class Backpack { + constructor( + // Defines parameters: + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen + ) { + // Define properties: + this.name = name; + this.volume = volume; + this.color = color; + this.pocketNum = pocketNum; + this.strapLength = { + left: strapLengthL, + right: strapLengthR, + }; + this.lidOpen = lidOpen; + } + // Add methods like normal functions: + toggleLid(lidStatus) { + this.lidOpen = lidStatus; + } + newStrapLength(lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + } +} + +export default Backpack; diff --git a/03_10/index.html b/03_10/index.html new file mode 100755 index 00000000..a2156f39 --- /dev/null +++ b/03_10/index.html @@ -0,0 +1,11 @@ + + + + + + Classes + + + + + diff --git a/03_10/script.js b/03_10/script.js new file mode 100755 index 00000000..d08043d0 --- /dev/null +++ b/03_10/script.js @@ -0,0 +1,18 @@ +/** + * Create a class for the Backpack object type. + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes + */ +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false +); + +console.log("The everydayPack object:", everydayPack); +console.log("The pocketNum value:", everydayPack.pocketNum); diff --git a/03_11/index.html b/03_11/index.html new file mode 100755 index 00000000..94f924e3 --- /dev/null +++ b/03_11/index.html @@ -0,0 +1,10 @@ + + + + + + Classes + + + + diff --git a/03_11/script.js b/03_11/script.js new file mode 100755 index 00000000..35b4b680 --- /dev/null +++ b/03_11/script.js @@ -0,0 +1,41 @@ +/** + * Create an object constructor function for the Backpack object type. + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new + */ + +function Backpack( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen +) { + this.name = name; + this.volume = volume; + this.color = color; + this.pocketNum = pocketNum; + this.strapLength = { + left: strapLengthL, + right: strapLengthR, + }; + this.lidOpen = lidOpen; + this.toggleLid = function (lidStatus) { + this.lidOpen = lidStatus; + }; + this.newStrapLength = function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + }; +} + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false +); diff --git a/03_13/Backpack.js b/03_13/Backpack.js new file mode 100755 index 00000000..47022deb --- /dev/null +++ b/03_13/Backpack.js @@ -0,0 +1,39 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired + ) { + this.name = name; + this.volume = volume; + this.color = color; + this.pocketNum = pocketNum; + this.strapLength = { + left: strapLengthL, + right: strapLengthR, + }; + this.lidOpen = lidOpen; + this.dateAcquired = dateAcquired; + } + 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 default Backpack; diff --git a/03_13/index.html b/03_13/index.html new file mode 100755 index 00000000..a2156f39 --- /dev/null +++ b/03_13/index.html @@ -0,0 +1,11 @@ + + + + + + Classes + + + + + diff --git a/03_13/script.js b/03_13/script.js new file mode 100755 index 00000000..7c3b652b --- /dev/null +++ b/03_13/script.js @@ -0,0 +1,20 @@ +/** + * Use the global Date() object to transform dates. + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST" +); + +console.log("The everydayPack object:", everydayPack); +console.log("Date acquired:", everydayPack.dateAcquired); diff --git a/03_13e/Backpack.js b/03_13e/Backpack.js new file mode 100755 index 00000000..47022deb --- /dev/null +++ b/03_13e/Backpack.js @@ -0,0 +1,39 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired + ) { + this.name = name; + this.volume = volume; + this.color = color; + this.pocketNum = pocketNum; + this.strapLength = { + left: strapLengthL, + right: strapLengthR, + }; + this.lidOpen = lidOpen; + this.dateAcquired = dateAcquired; + } + 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 default Backpack; diff --git a/03_13e/index.html b/03_13e/index.html new file mode 100755 index 00000000..a2156f39 --- /dev/null +++ b/03_13e/index.html @@ -0,0 +1,11 @@ + + + + + + Classes + + + + + diff --git a/03_13e/script.js b/03_13e/script.js new file mode 100755 index 00000000..e4903913 --- /dev/null +++ b/03_13e/script.js @@ -0,0 +1,21 @@ +/** + * Use the global Date() object to transform dates. + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST" +); + +console.log("The everydayPack object:", everydayPack); +console.log("The pocketNum value:", everydayPack.pocketNum); +console.log("Days since aquired:", everydayPack.backpackAge()); diff --git a/03_14/Backpack.js b/03_14/Backpack.js new file mode 100755 index 00000000..47022deb --- /dev/null +++ b/03_14/Backpack.js @@ -0,0 +1,39 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired + ) { + this.name = name; + this.volume = volume; + this.color = color; + this.pocketNum = pocketNum; + this.strapLength = { + left: strapLengthL, + right: strapLengthR, + }; + this.lidOpen = lidOpen; + this.dateAcquired = dateAcquired; + } + 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 default Backpack; diff --git a/03_14/index.html b/03_14/index.html new file mode 100755 index 00000000..edd1ae74 --- /dev/null +++ b/03_14/index.html @@ -0,0 +1,11 @@ + + + + + + Challenge: Create a new object type + + + + + diff --git a/03_14/script.js b/03_14/script.js new file mode 100755 index 00000000..969fda49 --- /dev/null +++ b/03_14/script.js @@ -0,0 +1,23 @@ +/** + * Challenge: Create a new object type + * + * - Create a new object type "Book" using a class or an object constructor function. + * - Add at least 5 book objects. + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST" +); + +console.log("The everydayPack object:", everydayPack); +console.log("The pocketNum value:", everydayPack.pocketNum); +console.log("Days since aquired:", everydayPack.backpackAge()); diff --git a/03_15/Backpack.js b/03_15/Backpack.js new file mode 100755 index 00000000..47022deb --- /dev/null +++ b/03_15/Backpack.js @@ -0,0 +1,39 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired + ) { + this.name = name; + this.volume = volume; + this.color = color; + this.pocketNum = pocketNum; + this.strapLength = { + left: strapLengthL, + right: strapLengthR, + }; + this.lidOpen = lidOpen; + this.dateAcquired = dateAcquired; + } + 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 default Backpack; diff --git a/03_15/Book.js b/03_15/Book.js new file mode 100644 index 00000000..32354243 --- /dev/null +++ b/03_15/Book.js @@ -0,0 +1,28 @@ +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; + } + } + + export default Book; + \ No newline at end of file diff --git a/03_15/index.html b/03_15/index.html new file mode 100755 index 00000000..83a32598 --- /dev/null +++ b/03_15/index.html @@ -0,0 +1,12 @@ + + + + + + Challenge: Create a new object type + + + + + + diff --git a/03_15/script.js b/03_15/script.js new file mode 100755 index 00000000..3c1e8920 --- /dev/null +++ b/03_15/script.js @@ -0,0 +1,80 @@ +/** + * Solution: Create a new object type + * + * - Create a new object type "Book" using a class or an object constructor function. + * - Add at least 5 book objects. + */ + +import Backpack from "./Backpack.js"; +import Book from "./Book.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST" +); + +console.log("The everydayPack object:", everydayPack); +console.log("The pocketNum value:", everydayPack.pocketNum); +console.log("Days since aquired:", everydayPack.backpackAge()); + +// Book param order: title, author, ISBN, pubYear, pageNumber, currentPage, readStatus +const surveillanceCapitalism = new Book( + "The Age of Surveillance Capitalism", + "Shoshana Zuboff", + 9781610395694, + "2019", + 691, + 691, + "Finished" +); +console.log(surveillanceCapitalism) + +const consciousCreative = new Book( + "The Conscious Creative", + "Kelly Small", + 9781487008024, + "2020", + 216, + 216, + "Finished" +); +console.log(consciousCreative) + +const techVirtues = new Book( + "Technology and the Virtues", + "Shannon Vallor", + 9780190905286, + "2016", + 309, + 138, + "Reading" +) +console.log(techVirtues); + +const poohPhil = new Book( + "Pooh and the Philosophers", + "John Tyerman Williams", + 9780749320706, + "1995", + 192, + 108, + "Reading" +) +console.log(poohPhil); + +const zen = new Book( + "Zen and the Art of Motorcycle Maintenance", + "Robert M. Pirsig", + 9780060958329, + "1974", + 449, + 449, + "Finished" +) +console.log(zen); \ No newline at end of file diff --git a/04_01/Backpack.js b/04_01/Backpack.js new file mode 100755 index 00000000..47022deb --- /dev/null +++ b/04_01/Backpack.js @@ -0,0 +1,39 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired + ) { + this.name = name; + this.volume = volume; + this.color = color; + this.pocketNum = pocketNum; + this.strapLength = { + left: strapLengthL, + right: strapLengthR, + }; + this.lidOpen = lidOpen; + this.dateAcquired = dateAcquired; + } + 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 default Backpack; diff --git a/04_01/index.html b/04_01/index.html new file mode 100755 index 00000000..727e8b26 --- /dev/null +++ b/04_01/index.html @@ -0,0 +1,26 @@ + + + + + + String output + + + + +
+
+

Everyday Backpack

+ +
+
+ + diff --git a/04_01/script.js b/04_01/script.js new file mode 100755 index 00000000..e0c6fb4a --- /dev/null +++ b/04_01/script.js @@ -0,0 +1,21 @@ +/** + * Use template literals to output HTML + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals + * + */ +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST" +); + +console.log("The everydayPack object:", everydayPack); +console.log("The pocketNum value:", everydayPack.pocketNum); +console.log("Days since aquired:", everydayPack.backpackAge()); diff --git a/04_01e/Backpack.js b/04_01e/Backpack.js new file mode 100755 index 00000000..47022deb --- /dev/null +++ b/04_01e/Backpack.js @@ -0,0 +1,39 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired + ) { + this.name = name; + this.volume = volume; + this.color = color; + this.pocketNum = pocketNum; + this.strapLength = { + left: strapLengthL, + right: strapLengthR, + }; + this.lidOpen = lidOpen; + this.dateAcquired = dateAcquired; + } + 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 default Backpack; diff --git a/04_01e/index.html b/04_01e/index.html new file mode 100755 index 00000000..47f10920 --- /dev/null +++ b/04_01e/index.html @@ -0,0 +1,11 @@ + + + + + + String output + + + + + diff --git a/04_01e/script.js b/04_01e/script.js new file mode 100755 index 00000000..6d713ebc --- /dev/null +++ b/04_01e/script.js @@ -0,0 +1,40 @@ +/** + * Use template literals to output HTML + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals + * + */ +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Pack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST" +); + +const content = ` +
+
+

${everydayPack.name}

+ +
+
+`; + +document.body.innerHTML = content; + +console.log("The everydayPack object:", everydayPack); +console.log("The pocketNum value:", everydayPack.pocketNum); +console.log("Days since aquired:", everydayPack.backpackAge()); diff --git a/04_02/Backpack.js b/04_02/Backpack.js new file mode 100755 index 00000000..47022deb --- /dev/null +++ b/04_02/Backpack.js @@ -0,0 +1,39 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired + ) { + this.name = name; + this.volume = volume; + this.color = color; + this.pocketNum = pocketNum; + this.strapLength = { + left: strapLengthL, + right: strapLengthR, + }; + this.lidOpen = lidOpen; + this.dateAcquired = dateAcquired; + } + 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 default Backpack; diff --git a/04_02/index.html b/04_02/index.html new file mode 100755 index 00000000..47f10920 --- /dev/null +++ b/04_02/index.html @@ -0,0 +1,11 @@ + + + + + + String output + + + + + diff --git a/04_02/script.js b/04_02/script.js new file mode 100755 index 00000000..6d713ebc --- /dev/null +++ b/04_02/script.js @@ -0,0 +1,40 @@ +/** + * Use template literals to output HTML + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals + * + */ +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Pack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST" +); + +const content = ` +
+
+

${everydayPack.name}

+ +
+
+`; + +document.body.innerHTML = content; + +console.log("The everydayPack object:", everydayPack); +console.log("The pocketNum value:", everydayPack.pocketNum); +console.log("Days since aquired:", everydayPack.backpackAge()); diff --git a/04_02e/Backpack.js b/04_02e/Backpack.js new file mode 100755 index 00000000..47022deb --- /dev/null +++ b/04_02e/Backpack.js @@ -0,0 +1,39 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired + ) { + this.name = name; + this.volume = volume; + this.color = color; + this.pocketNum = pocketNum; + this.strapLength = { + left: strapLengthL, + right: strapLengthR, + }; + this.lidOpen = lidOpen; + this.dateAcquired = dateAcquired; + } + 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 default Backpack; diff --git a/04_02e/index.html b/04_02e/index.html new file mode 100755 index 00000000..47f10920 --- /dev/null +++ b/04_02e/index.html @@ -0,0 +1,11 @@ + + + + + + String output + + + + + diff --git a/04_02e/script.js b/04_02e/script.js new file mode 100755 index 00000000..872c593e --- /dev/null +++ b/04_02e/script.js @@ -0,0 +1,25 @@ +/** + * Use template literals to output HTML + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals + * + */ +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Pack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST" +); + +const content = "

" + everydayPack.name + "

"; + +document.body.innerHTML = content; + +console.log("The everydayPack object:", everydayPack); +console.log("The pocketNum value:", everydayPack.pocketNum); +console.log("Days since aquired:", everydayPack.backpackAge()); diff --git a/05_02/Backpack.js b/05_02/Backpack.js new file mode 100755 index 00000000..a178234d --- /dev/null +++ b/05_02/Backpack.js @@ -0,0 +1,41 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired, + image + ) { + 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 default Backpack; diff --git a/05_02/index.html b/05_02/index.html new file mode 100755 index 00000000..986c5777 --- /dev/null +++ b/05_02/index.html @@ -0,0 +1,33 @@ + + + + + + BackpackPacker + + + + + + +
+
BackpackPacker
+
All backpack packing, all the time.
+
+
+ + + diff --git a/05_02/script.js b/05_02/script.js new file mode 100755 index 00000000..2f786e44 --- /dev/null +++ b/05_02/script.js @@ -0,0 +1,51 @@ +/** + * Traverse the DOM tree using querySelector() and querySelectorAll() + * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector + * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST", + "../assets/images/everyday.svg" +); + +const main = document.querySelector(".maincontent"); + +const content = ` +
+
+ +
+

${everydayPack.name}

+ +
+`; + +main.innerHTML = content; diff --git a/05_03/Backpack.js b/05_03/Backpack.js new file mode 100755 index 00000000..a178234d --- /dev/null +++ b/05_03/Backpack.js @@ -0,0 +1,41 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired, + image + ) { + 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 default Backpack; diff --git a/05_03/index.html b/05_03/index.html new file mode 100755 index 00000000..986c5777 --- /dev/null +++ b/05_03/index.html @@ -0,0 +1,33 @@ + + + + + + BackpackPacker + + + + + + +
+
BackpackPacker
+
All backpack packing, all the time.
+
+
+ + + diff --git a/05_03/script.js b/05_03/script.js new file mode 100755 index 00000000..0e02c35b --- /dev/null +++ b/05_03/script.js @@ -0,0 +1,53 @@ +/** + * Traverse the DOM tree using querySelector() and querySelectorAll() + * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector + * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST", + "../assets/images/everyday.svg" +); + +const main = document.querySelector(".maincontent"); + +const content = ` +
+
+ +
+

${everydayPack.name}

+ +
+`; + +main.innerHTML = content; diff --git a/05_05/Backpack.js b/05_05/Backpack.js new file mode 100755 index 00000000..a178234d --- /dev/null +++ b/05_05/Backpack.js @@ -0,0 +1,41 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired, + image + ) { + 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 default Backpack; diff --git a/05_05/index.html b/05_05/index.html new file mode 100755 index 00000000..986c5777 --- /dev/null +++ b/05_05/index.html @@ -0,0 +1,33 @@ + + + + + + BackpackPacker + + + + + + +
+
BackpackPacker
+
All backpack packing, all the time.
+
+
+ + + diff --git a/05_05/script.js b/05_05/script.js new file mode 100755 index 00000000..0e02c35b --- /dev/null +++ b/05_05/script.js @@ -0,0 +1,53 @@ +/** + * Traverse the DOM tree using querySelector() and querySelectorAll() + * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector + * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST", + "../assets/images/everyday.svg" +); + +const main = document.querySelector(".maincontent"); + +const content = ` +
+
+ +
+

${everydayPack.name}

+ +
+`; + +main.innerHTML = content; diff --git a/05_06/Backpack.js b/05_06/Backpack.js new file mode 100755 index 00000000..a178234d --- /dev/null +++ b/05_06/Backpack.js @@ -0,0 +1,41 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired, + image + ) { + 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 default Backpack; diff --git a/05_06/index.html b/05_06/index.html new file mode 100755 index 00000000..986c5777 --- /dev/null +++ b/05_06/index.html @@ -0,0 +1,33 @@ + + + + + + BackpackPacker + + + + + + +
+
BackpackPacker
+
All backpack packing, all the time.
+
+
+ + + diff --git a/05_06/script.js b/05_06/script.js new file mode 100755 index 00000000..0e02c35b --- /dev/null +++ b/05_06/script.js @@ -0,0 +1,53 @@ +/** + * Traverse the DOM tree using querySelector() and querySelectorAll() + * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector + * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST", + "../assets/images/everyday.svg" +); + +const main = document.querySelector(".maincontent"); + +const content = ` +
+
+ +
+

${everydayPack.name}

+ +
+`; + +main.innerHTML = content; diff --git a/05_07/Backpack.js b/05_07/Backpack.js new file mode 100755 index 00000000..a178234d --- /dev/null +++ b/05_07/Backpack.js @@ -0,0 +1,41 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired, + image + ) { + 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 default Backpack; diff --git a/05_07/index.html b/05_07/index.html new file mode 100755 index 00000000..7d110a13 --- /dev/null +++ b/05_07/index.html @@ -0,0 +1,33 @@ + + + + + + BackpackPacker + + + + + + +
+
BackpackPacker
+
All backpack packing, all the time.
+
+
+ + + diff --git a/05_07/script.js b/05_07/script.js new file mode 100755 index 00000000..0e02c35b --- /dev/null +++ b/05_07/script.js @@ -0,0 +1,53 @@ +/** + * Traverse the DOM tree using querySelector() and querySelectorAll() + * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector + * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST", + "../assets/images/everyday.svg" +); + +const main = document.querySelector(".maincontent"); + +const content = ` +
+
+ +
+

${everydayPack.name}

+ +
+`; + +main.innerHTML = content; diff --git a/05_09/Backpack.js b/05_09/Backpack.js new file mode 100755 index 00000000..a178234d --- /dev/null +++ b/05_09/Backpack.js @@ -0,0 +1,41 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired, + image + ) { + 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 default Backpack; diff --git a/05_09/index.html b/05_09/index.html new file mode 100755 index 00000000..1ba951b9 --- /dev/null +++ b/05_09/index.html @@ -0,0 +1,44 @@ + + + + + + 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/05_09/script.js b/05_09/script.js new file mode 100755 index 00000000..31e52a1b --- /dev/null +++ b/05_09/script.js @@ -0,0 +1,53 @@ +/** + * Traverse the DOM tree using querySelector() and querySelectorAll() + * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector + * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST", + "../assets/images/everyday.svg" +); + +const content = ` +
+
+ +
+

${everydayPack.name}

+ +
+`; + +const main = document.querySelector(".maincontent"); + +main.innerHTML = content; diff --git a/05_09e/Backpack.js b/05_09e/Backpack.js new file mode 100755 index 00000000..a178234d --- /dev/null +++ b/05_09e/Backpack.js @@ -0,0 +1,41 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired, + image + ) { + 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 default Backpack; diff --git a/05_09e/index.html b/05_09e/index.html new file mode 100755 index 00000000..1ba951b9 --- /dev/null +++ b/05_09e/index.html @@ -0,0 +1,44 @@ + + + + + + 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/05_09e/script.js b/05_09e/script.js new file mode 100755 index 00000000..83db8e65 --- /dev/null +++ b/05_09e/script.js @@ -0,0 +1,58 @@ +/** + * Traverse the DOM tree using querySelector() and querySelectorAll() + * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector + * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST", + "../assets/images/everyday.svg" +); + +const content = ` + +
+ +
+

${everydayPack.name}

+ + +`; + +const main = document.querySelector(".maincontent"); + +const newArticle = document.createElement("article"); +newArticle.classList.add("backpack"); +newArticle.setAttribute("id", "everyday"); +newArticle.innerHTML = content; + +main.append(newArticle); diff --git a/05_10/Backpack.js b/05_10/Backpack.js new file mode 100755 index 00000000..a178234d --- /dev/null +++ b/05_10/Backpack.js @@ -0,0 +1,41 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired, + image + ) { + 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 default Backpack; diff --git a/05_10/index.html b/05_10/index.html new file mode 100755 index 00000000..1ba951b9 --- /dev/null +++ b/05_10/index.html @@ -0,0 +1,44 @@ + + + + + + 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/05_10/script.js b/05_10/script.js new file mode 100755 index 00000000..84768771 --- /dev/null +++ b/05_10/script.js @@ -0,0 +1,62 @@ +/** + * Challenge: Add a new element + * - In JavaScript, create a new element to hold a navigation menu + * - Add an unordered list and a series of no less than five links to the list + * - Use single words like “home”, “about”, etc for the list items and set the src attribute to # for simplicity + * - Add the new navigation element to the DOM directly after the header + * - Write basic CSS and add classes as necessary to create a horizontal layout for the menu. + * - A tip: Use either display flex or display grid to create the horizontal menu. + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST", + "../assets/images/everyday.svg" +); + +const content = ` + +
+ +
+

Everyday Backpack

+ + +`; + +const main = document.querySelector(".maincontent"); + +const newArticle = document.createElement("article"); +newArticle.classList.add("backpack"); +newArticle.setAttribute("id", "everyday"); +newArticle.innerHTML = content; + +main.append(newArticle); diff --git a/05_11/Backpack.js b/05_11/Backpack.js new file mode 100755 index 00000000..a178234d --- /dev/null +++ b/05_11/Backpack.js @@ -0,0 +1,41 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired, + image + ) { + 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 default Backpack; diff --git a/05_11/index.html b/05_11/index.html new file mode 100755 index 00000000..ddd19670 --- /dev/null +++ b/05_11/index.html @@ -0,0 +1,61 @@ + + + + + + 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/05_11/script.js b/05_11/script.js new file mode 100755 index 00000000..5878fd8c --- /dev/null +++ b/05_11/script.js @@ -0,0 +1,81 @@ +/** + * Solution: Add a new element + * - In JavaScript, create a new element to hold a navigation menu + * - Add an unordered list and a series of no less than five links to the list + * - Use single words like “home”, “about”, etc for the list items and set the src attribute to # for simplicity + * - Add the new navigation element to the DOM directly after the header + * - Write basic CSS and add classes as necessary to create a horizontal layout for the menu. + * - A tip: Use either display flex or display grid to create the horizontal menu. + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST", + "../assets/images/everyday.svg" +); + +const content = ` + +
+ +
+

Everyday Backpack

+ + +`; + +const main = document.querySelector(".maincontent"); + +const newArticle = document.createElement("article"); +newArticle.classList.add("backpack"); +newArticle.setAttribute("id", "everyday"); +newArticle.innerHTML = content; + +main.append(newArticle); + +/** + * Add a navigation section to the DOM + */ +const navContent = ` +
  • Home
    • +
  • About
    • +
  • Backpacks
    • +
  • Other things
    • +
  • Contact
    • +`; + +const mainNav = document.createElement("nav") +mainNav.classList.add("main-navigation"); +const navList = document.createElement("ul") +navList.innerHTML = navContent +mainNav.append(navList) + +document.querySelector(".siteheader").append(mainNav) diff --git a/06_02/index.html b/06_02/index.html new file mode 100755 index 00000000..321b97c0 --- /dev/null +++ b/06_02/index.html @@ -0,0 +1,10 @@ + + + + + + Console demo + + + + diff --git a/06_02/script.js b/06_02/script.js new file mode 100755 index 00000000..4333a9a4 --- /dev/null +++ b/06_02/script.js @@ -0,0 +1,4 @@ +/** + * The var statement + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var + */ diff --git a/06_03/index.html b/06_03/index.html new file mode 100755 index 00000000..ff462a14 --- /dev/null +++ b/06_03/index.html @@ -0,0 +1,53 @@ + + + + + + Console demo + + + + +
    +

    When var and scope collide!

    +
    color: green
    +
    color: green
    +
    + + diff --git a/06_03/script.js b/06_03/script.js new file mode 100755 index 00000000..3db30fa6 --- /dev/null +++ b/06_03/script.js @@ -0,0 +1,19 @@ +/** + * Scope and the var statement + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var + */ + +var color = "purple"; + +document.querySelector(".left").style.backgroundColor = color; +document.querySelector(".left .color-value").innerHTML = color; + +document.querySelector(".right").style.backgroundColor = color; +document.querySelector(".right .color-value").innerHTML = color; + +function headingColor() { + color = "blue"; + document.querySelector(".title").style.color = color; +} + +headingColor(); diff --git a/06_04/index.html b/06_04/index.html new file mode 100755 index 00000000..9acc46e2 --- /dev/null +++ b/06_04/index.html @@ -0,0 +1,52 @@ + + + + + + Console demo + + + + +
    +

    When var and scope collide!

    +
    color: green
    +
    color: green
    +
    + + diff --git a/06_04/script.js b/06_04/script.js new file mode 100755 index 00000000..8c012590 --- /dev/null +++ b/06_04/script.js @@ -0,0 +1,21 @@ +/** + * The let statement + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let + */ + +var color = "purple"; + +document.querySelector(".left").style.backgroundColor = color; +document.querySelector(".left .color-value").innerHTML = color; + +color = "skyblue"; + +function headingColor() { + color = "blue"; + document.querySelector(".title").style.color = color; +} + +headingColor(); + +document.querySelector(".right").style.backgroundColor = color; +document.querySelector(".right .color-value").innerHTML = color; diff --git a/06_05/index.html b/06_05/index.html new file mode 100755 index 00000000..9acc46e2 --- /dev/null +++ b/06_05/index.html @@ -0,0 +1,52 @@ + + + + + + Console demo + + + + +
    +

    When var and scope collide!

    +
    color: green
    +
    color: green
    +
    + + diff --git a/06_05/script.js b/06_05/script.js new file mode 100755 index 00000000..a0bef97f --- /dev/null +++ b/06_05/script.js @@ -0,0 +1,21 @@ +/** + * The const statement + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const + */ + +let color = "purple"; + +document.querySelector(".left").style.backgroundColor = color; +document.querySelector(".left .color-value").innerHTML = color; + +color = "skyblue"; + +function headingColor() { + let color = "blue"; + document.querySelector(".title").style.color = color; +} + +headingColor(); + +document.querySelector(".right").style.backgroundColor = color; +document.querySelector(".right .color-value").innerHTML = color; diff --git a/06_06/index.html b/06_06/index.html new file mode 100755 index 00000000..321b97c0 --- /dev/null +++ b/06_06/index.html @@ -0,0 +1,10 @@ + + + + + + Console demo + + + + diff --git a/06_06/script.js b/06_06/script.js new file mode 100755 index 00000000..0c1cebc5 --- /dev/null +++ b/06_06/script.js @@ -0,0 +1,41 @@ +/** + * Data types in JavaScript + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures + */ + +// String: +let stringDemo = "A string of text."; +console.log("String:", stringDemo); + +// Numbes: +let integerDemo = 4; +console.log("Integer:", integerDemo); + +let floatDemo = 5.6; +console.log("Floating point number:", floatDemo); + +// Boolean: +let booleanDemo = true; +console.log("Boolean value:", booleanDemo); + +// Null value (nothing): +let nullDemo = null; +console.log("Null value:", nullDemo); + +// Undefined: +let undefinedDemo; +console.log("Undefined:", undefinedDemo); + +let undefinedAssignedDemo = undefined; +console.log("Undefined assigned:", undefinedAssignedDemo); + +// Object: +const objectDemo = { + dance: "Mambo", + number: 5, +}; +console.log("Object:", objectDemo); + +// Array: +const arrayDemo = ["tango", "foxtrot", "waltz", "rumba", "bolero"]; +console.log("Array:", arrayDemo); diff --git a/06_07/index.html b/06_07/index.html new file mode 100755 index 00000000..321b97c0 --- /dev/null +++ b/06_07/index.html @@ -0,0 +1,10 @@ + + + + + + Console demo + + + + diff --git a/06_07/script.js b/06_07/script.js new file mode 100755 index 00000000..7aee6853 --- /dev/null +++ b/06_07/script.js @@ -0,0 +1,16 @@ +/** + * Assignment vs comparison + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#Relational_operators + */ + +let a = 5; +let b = 4; + +console.log(`let a: ${a} (${typeof a})`); +console.log(`let b: ${b} (${typeof b})`); + +if (a == b) { + console.log(`Match! let a and let b are the same value.`); +} else { + console.error(`No match: let a and let b are NOT same value.`); +} diff --git a/06_08/index.html b/06_08/index.html new file mode 100755 index 00000000..321b97c0 --- /dev/null +++ b/06_08/index.html @@ -0,0 +1,10 @@ + + + + + + Console demo + + + + diff --git a/06_08/script.js b/06_08/script.js new file mode 100755 index 00000000..8bb0f68a --- /dev/null +++ b/06_08/script.js @@ -0,0 +1,16 @@ +/** + * Arithmetic operators + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#Arithmetic_operators + */ + +let a = 5; +let b = 4; +let c = 3.2; + +console.log(`let a: ${a} (${typeof a})`); +console.log(`let b: ${b} (${typeof b})`); +console.log(`let c: ${c} (${typeof c})`); + +let result = a + b; + +console.log("Result: ", result); diff --git a/07_02/index.html b/07_02/index.html new file mode 100755 index 00000000..321b97c0 --- /dev/null +++ b/07_02/index.html @@ -0,0 +1,10 @@ + + + + + + Console demo + + + + diff --git a/07_02/script.js b/07_02/script.js new file mode 100755 index 00000000..3d3050fb --- /dev/null +++ b/07_02/script.js @@ -0,0 +1,10 @@ +/** + * Working with arrays + * @link https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays + */ + +let item = "flashlight"; + +const collection = ["Piggy", item, 5, true]; + +console.log(collection); diff --git a/07_03/index.html b/07_03/index.html new file mode 100755 index 00000000..321b97c0 --- /dev/null +++ b/07_03/index.html @@ -0,0 +1,10 @@ + + + + + + Console demo + + + + diff --git a/07_03/script.js b/07_03/script.js new file mode 100755 index 00000000..d0859f29 --- /dev/null +++ b/07_03/script.js @@ -0,0 +1,20 @@ +/** + * Working with array methods + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Instance_methods + */ + +let backpackContents = ["piggy", "headlamp", "pen"]; + +console.log(backpackContents); + +// backpackContents.forEach(function (item) { +// item = `
  • ${item}
    • `; +// console.log(item); +// }); + +// let longItems = backpackContents.find(function (item) { +// if (item.length >= 5) { +// return item; +// } +// }); +// console.log("longItems:", longItems); diff --git a/07_04/index.html b/07_04/index.html new file mode 100755 index 00000000..2d54e553 --- /dev/null +++ b/07_04/index.html @@ -0,0 +1,10 @@ + + + + + + Challenge: Build and modify an array + + + + diff --git a/07_04/script.js b/07_04/script.js new file mode 100755 index 00000000..41919cf9 --- /dev/null +++ b/07_04/script.js @@ -0,0 +1,11 @@ +/** + * Challenge: 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 + * - 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. + */ + + diff --git a/07_05/index.html b/07_05/index.html new file mode 100755 index 00000000..2d54e553 --- /dev/null +++ b/07_05/index.html @@ -0,0 +1,10 @@ + + + + + + Challenge: Build and modify an array + + + + diff --git a/07_05/script.js b/07_05/script.js new file mode 100755 index 00000000..743a7803 --- /dev/null +++ b/07_05/script.js @@ -0,0 +1,39 @@ +/** + * 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 + * - 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) + +// 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) + +// Add last item as the firs 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) + +// 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) + +// 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) + +// 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 diff --git a/08_02/index.html b/08_02/index.html new file mode 100755 index 00000000..321b97c0 --- /dev/null +++ b/08_02/index.html @@ -0,0 +1,10 @@ + + + + + + Console demo + + + + diff --git a/08_02/script.js b/08_02/script.js new file mode 100755 index 00000000..7c7213a4 --- /dev/null +++ b/08_02/script.js @@ -0,0 +1,27 @@ +/** + * Working with functions + * @link https://developer.mozilla.org/en-US/docs/Glossary/Function + */ + +// Function declaration: +function doSomeMath(a, b) { + let c = a + b; + return c; +} + +// Function expression: +const doMoreMath = function (a = 3, b = 2) { + let c = a * b; + return c; +}; + +console.log("Do some math:", doSomeMath(5, 6)); +console.log("Do more math:", doMoreMath(5, 6)); + +// Immediately Invoked Function Expression (IIFE) +// (function () { +// let a = 4; +// let b = 6; +// let c = doSomeMath(a, b); +// console.log(`The sum of a and b is: ${c}`); +// })(); diff --git a/08_03/index.html b/08_03/index.html new file mode 100755 index 00000000..860cb0ac --- /dev/null +++ b/08_03/index.html @@ -0,0 +1,14 @@ + + + + + + Console demo + + + +
    +
    +
    + + diff --git a/08_03/script.js b/08_03/script.js new file mode 100755 index 00000000..e7b89804 --- /dev/null +++ b/08_03/script.js @@ -0,0 +1,27 @@ +/** + * A standard function + * @link https://developer.mozilla.org/en-US/docs/Glossary/Function + */ + +const greenPack = { + name: "Frog Pack", + color: "green", + volume: 8, + pocketNum: 3, +}; + +const addPack = function (currentPack) { + const newArticle = document.createElement("article"); + newArticle.innerHTML = ` +

    ${currentPack.name}

    + + `; + return newArticle; +}; + +const main = document.querySelector("main"); +main.append(addPack(greenPack)); diff --git a/08_04/index.html b/08_04/index.html new file mode 100755 index 00000000..860cb0ac --- /dev/null +++ b/08_04/index.html @@ -0,0 +1,14 @@ + + + + + + Console demo + + + +
    +
    +
    + + diff --git a/08_04/script.js b/08_04/script.js new file mode 100755 index 00000000..978b68ea --- /dev/null +++ b/08_04/script.js @@ -0,0 +1,27 @@ +/** + * The arrow function + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions + */ + +const greenPack = { + name: "Frog Pack", + color: "green", + volume: 8, + pocketNum: 3, +}; + +const addPack = (currentPack) => { + const newArticle = document.createElement("article"); + newArticle.innerHTML = ` +

    ${currentPack.name}

    + + `; + return newArticle; +}; + +const main = document.querySelector("main"); +main.append(addPack(greenPack)); diff --git a/08_05/index.html b/08_05/index.html new file mode 100755 index 00000000..860cb0ac --- /dev/null +++ b/08_05/index.html @@ -0,0 +1,14 @@ + + + + + + Console demo + + + +
    +
    +
    + + diff --git a/08_05/script.js b/08_05/script.js new file mode 100755 index 00000000..4237d988 --- /dev/null +++ b/08_05/script.js @@ -0,0 +1,25 @@ +/** + * How arrow functions help us with scoping. + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#this_and_Arrow_Functions + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this + */ + +// Define a default volume for the window (the entire DOM): +window.volume = 20; + +const greenPack = { + name: "Frog Pack", + color: "green", + volume: 8, + pocketNum: 3, + newVolume: function (volume) { + console.log("this.volume in the method:", this.volume); + this.volume = volume; + console.log("this.volume after update:", this.volume); + // (function () { + // console.log("this.volume in nested function:", this.volume); + // })(); + }, +}; + +console.log(greenPack.newVolume(5)); diff --git a/08_05e/index.html b/08_05e/index.html new file mode 100755 index 00000000..860cb0ac --- /dev/null +++ b/08_05e/index.html @@ -0,0 +1,14 @@ + + + + + + Console demo + + + +
    +
    +
    + + diff --git a/08_05e/script.js b/08_05e/script.js new file mode 100755 index 00000000..e1fa764d --- /dev/null +++ b/08_05e/script.js @@ -0,0 +1,28 @@ +/** + * How arrow functions help us with scoping. + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#this_and_Arrow_Functions + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this + */ + +// Define a default volume for the window (the entire DOM): +window.volume = 20; + +const greenPack = { + name: "Frog Pack", + color: "green", + volume: 8, + pocketNum: 3, + newVolume: function (volume) { + console.log("this.volume in the method:", this.volume); + this.volume = volume; + console.log("this.volume after update:", this.volume); + (function () { + console.log("this.volume in nested function:", this.volume); + })(); + (() => { + console.log("this.volume in arrow function:", this.volume); + })(); + }, +}; + +console.log(greenPack.newVolume(5)); diff --git a/08_07/index.html b/08_07/index.html new file mode 100755 index 00000000..860cb0ac --- /dev/null +++ b/08_07/index.html @@ -0,0 +1,14 @@ + + + + + + Console demo + + + +
    +
    +
    + + diff --git a/08_07/script.js b/08_07/script.js new file mode 100755 index 00000000..c337c3bb --- /dev/null +++ b/08_07/script.js @@ -0,0 +1,19 @@ +/** + * Passing data to functions through parameters. + * @link https://developer.mozilla.org/en-US/docs/Glossary/Function + */ + +const tipCalculator = () => { + let sum = 29.95; + let percentage = 18; + let tip = sum * (percentage / 100); + let total = sum + tip; + console.log(` + Sum before tip: ${sum} + Tip percentage: ${percentage}% + Tip: ${tip.toFixed(2)} + Total: ${total.toFixed(2)} +`); +}; + +tipCalculator(); diff --git a/08_07e/index.html b/08_07e/index.html new file mode 100755 index 00000000..860cb0ac --- /dev/null +++ b/08_07e/index.html @@ -0,0 +1,14 @@ + + + + + + Console demo + + + +
    +
    +
    + + diff --git a/08_07e/script.js b/08_07e/script.js new file mode 100755 index 00000000..8f26031a --- /dev/null +++ b/08_07e/script.js @@ -0,0 +1,26 @@ +/** + * Passing data to functions through parameters. + * @link https://developer.mozilla.org/en-US/docs/Glossary/Function + */ + +const tipCalculator = (sum, percentage, currency, prefix) => { + let tip = sum * (percentage / 100); + let total = sum + tip; + if (prefix) { + console.log(` + Sum before tip: ${currency}${sum} + Tip percentage: ${percentage}% + Tip: ${currency}${tip.toFixed(2)} + Total: ${currency}${total.toFixed(2)} + `); + } else { + console.log(` + Sum before tip: ${sum}${currency} + Tip percentage: ${percentage}% + Tip: ${tip.toFixed(2)}${currency} + Total: ${total.toFixed(2)}${currency} + `); + } +}; + +tipCalculator(29.95, 18, "kr", false); diff --git a/08_08/index.html b/08_08/index.html new file mode 100755 index 00000000..860cb0ac --- /dev/null +++ b/08_08/index.html @@ -0,0 +1,14 @@ + + + + + + Console demo + + + +
    +
    +
    + + diff --git a/08_08/script.js b/08_08/script.js new file mode 100755 index 00000000..ae0f469a --- /dev/null +++ b/08_08/script.js @@ -0,0 +1,22 @@ +/** + * Passing data to functions through parameters. + * @link https://developer.mozilla.org/en-US/docs/Glossary/Function + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat + * + * + * List of ISO language codes: + * @link http://www.lingoes.net/en/translator/langcode.htm + */ + +const tipCalculator = (sum, percentage) => { + let tip = sum * (percentage / 100); + let total = sum + tip; + console.log(` + Sum before tip: ${sum} + Tip percentage: ${percentage}% + Tip: ${tip.toFixed(2)} + Total: ${total.toFixed(2)} + `); +}; + +tipCalculator(29.95, 18); diff --git a/08_08e/index.html b/08_08e/index.html new file mode 100755 index 00000000..860cb0ac --- /dev/null +++ b/08_08e/index.html @@ -0,0 +1,14 @@ + + + + + + Console demo + + + +
    +
    +
    + + diff --git a/08_08e/script.js b/08_08e/script.js new file mode 100755 index 00000000..96b492e8 --- /dev/null +++ b/08_08e/script.js @@ -0,0 +1,31 @@ +/** + * Passing data to functions through parameters. + * @link https://developer.mozilla.org/en-US/docs/Glossary/Function + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat + * + * List of ISO language codes: + * @link http://www.lingoes.net/en/translator/langcode.htm + */ + +const formatter = (locale = "en-US", currency = "USD", value) => { + let formattedValue = new Intl.NumberFormat(locale, { + style: "currency", + currency: currency, + }).format(value); + + return formattedValue; +}; + +const tipCalculator = (sum, percentage, locale, currency) => { + let tip = sum * (percentage / 100); + let total = sum + tip; + + console.log(` + Sum before tip: ${formatter(locale, currency, sum)} + Tip percentage: ${percentage}% + Tip: ${formatter(locale, currency, tip)} + Total: ${formatter(locale, currency, total)} + `); +}; + +tipCalculator(29.95, 18, "de-DE", "EUR"); diff --git a/08_10/index.html b/08_10/index.html new file mode 100755 index 00000000..860cb0ac --- /dev/null +++ b/08_10/index.html @@ -0,0 +1,14 @@ + + + + + + Console demo + + + +
    +
    +
    + + diff --git a/08_10/script.js b/08_10/script.js new file mode 100755 index 00000000..f3cca78c --- /dev/null +++ b/08_10/script.js @@ -0,0 +1,53 @@ +/** + * Using a callback function. + * @link https://developer.mozilla.org/en-US/docs/Glossary/Callback_function + */ + +// Helper function to format currency numbers. Used by tipCalculator +const formatter = (locale = "en-US", currency = "USD", value) => { + let formattedValue = new Intl.NumberFormat(locale, { + style: "currency", + currency: currency, + }).format(value); + + return formattedValue; +}; + +// Callback receives finalTip object, creates and outputs table on the DOM. +const printHTML = (finalTip) => { + const tipTable = document.createElement("table"); + tipTable.innerHTML = ` + + Sum before tip: + ${finalTip.sum} + + + Tip percentage: + ${finalTip.percentage} + + + Tip: + ${finalTip.tip} + + + Total: + ${finalTip.total} + + `; + document.querySelector("main").append(tipTable); +}; + +// Create a finalTip object with all the data. Send it to the printHTML callback. +const tipCalculator = (sum, percentage, locale, currency) => { + let tip = sum * (percentage / 100); + let total = sum + tip; + + const finalTip = { + sum: formatter(locale, currency, sum), + percentage: percentage + "%", + tip: formatter(locale, currency, tip), + total: formatter(locale, currency, total), + }; +}; + +tipCalculator(29.95, 18, "de-DE", "EUR"); diff --git a/08_10e/index.html b/08_10e/index.html new file mode 100755 index 00000000..860cb0ac --- /dev/null +++ b/08_10e/index.html @@ -0,0 +1,14 @@ + + + + + + Console demo + + + +
    +
    +
    + + diff --git a/08_10e/script.js b/08_10e/script.js new file mode 100755 index 00000000..ab7b6341 --- /dev/null +++ b/08_10e/script.js @@ -0,0 +1,55 @@ +/** + * Using a callback function. + * @link https://developer.mozilla.org/en-US/docs/Glossary/Callback_function + */ + +// Helper function to format currency numbers. Used by tipCalculator +const formatter = (locale = "en-US", currency = "USD", value) => { + let formattedValue = new Intl.NumberFormat(locale, { + style: "currency", + currency: currency, + }).format(value); + + return formattedValue; +}; + +// Callback receives finalTip object, creates and outputs table on the DOM. +const printHTML = (finalTip) => { + const tipTable = document.createElement("table"); + tipTable.innerHTML = ` + + Sum before tip: + ${finalTip.sum} + + + Tip percentage: + ${finalTip.percentage} + + + Tip: + ${finalTip.tip} + + + Total: + ${finalTip.total} + + `; + document.querySelector("main").append(tipTable); +}; + +// Create a finalTip object with all the data. Send it to the printHTML callback. +const tipCalculator = (sum, percentage, locale, currency, printHTML) => { + let tip = sum * (percentage / 100); + let total = sum + tip; + + const finalTip = { + sum: formatter(locale, currency, sum), + percentage: percentage + "%", + tip: formatter(locale, currency, tip), + total: formatter(locale, currency, total), + }; + + printHTML(finalTip); +}; + +tipCalculator(29.95, 18, "de-DE", "EUR", printHTML); diff --git a/08_11/Backpack.js b/08_11/Backpack.js new file mode 100755 index 00000000..a178234d --- /dev/null +++ b/08_11/Backpack.js @@ -0,0 +1,41 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired, + image + ) { + 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 default Backpack; diff --git a/08_11/index.html b/08_11/index.html new file mode 100755 index 00000000..1ba951b9 --- /dev/null +++ b/08_11/index.html @@ -0,0 +1,44 @@ + + + + + + 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/08_11/script.js b/08_11/script.js new file mode 100755 index 00000000..45560f38 --- /dev/null +++ b/08_11/script.js @@ -0,0 +1,56 @@ +/** + * Create a new element and append it to the
    element. + * @link https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement + * @link https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST", + "../assets/images/everyday.svg" +); + +const content = ` +
    + +
    +

    ${everydayPack.name}

    + +`; + +const main = document.querySelector(".maincontent"); + +const newArticle = document.createElement("article"); +newArticle.classList.add("backpack"); +newArticle.setAttribute("id", "everyday"); +newArticle.innerHTML = content; + +main.append(newArticle); diff --git a/08_11e/Backpack.js b/08_11e/Backpack.js new file mode 100755 index 00000000..a178234d --- /dev/null +++ b/08_11e/Backpack.js @@ -0,0 +1,41 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired, + image + ) { + 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 default Backpack; diff --git a/08_11e/index.html b/08_11e/index.html new file mode 100755 index 00000000..1ba951b9 --- /dev/null +++ b/08_11e/index.html @@ -0,0 +1,44 @@ + + + + + + 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/08_11e/script.js b/08_11e/script.js new file mode 100755 index 00000000..1bb9447f --- /dev/null +++ b/08_11e/script.js @@ -0,0 +1,56 @@ +/** + * Create a new element and append it to the
    element. + * @link https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement + * @link https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST", + "../assets/images/everyday.svg" +); + +const content = ` +
    + +
    +

    ${everydayPack.name}

    + + `; + +const main = document.querySelector(".maincontent"); + +const newArticle = document.createElement("article"); +newArticle.classList.add("backpack"); +newArticle.setAttribute("id", "everyday"); +newArticle.innerHTML = content; + +main.append(newArticle); diff --git a/08_12/Backpack.js b/08_12/Backpack.js new file mode 100755 index 00000000..a178234d --- /dev/null +++ b/08_12/Backpack.js @@ -0,0 +1,41 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired, + image + ) { + 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 default Backpack; diff --git a/08_12/index.html b/08_12/index.html new file mode 100755 index 00000000..1ba951b9 --- /dev/null +++ b/08_12/index.html @@ -0,0 +1,44 @@ + + + + + + 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. +

    +
    +
    +
    +

    + Demo project for JavaScript Essential Training, a LinkedIn Learning + course. +

    +
    + + diff --git a/08_12/script.js b/08_12/script.js new file mode 100755 index 00000000..3fa728d7 --- /dev/null +++ b/08_12/script.js @@ -0,0 +1,62 @@ +/** + * Create a new element and append it to the
    element. + * @link https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement + * @link https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST", + "../assets/images/everyday.svg" +); + +const content = ` +
    + +
    +

    ${everydayPack.name}

    +
      +
    • Volume: ${ + everydayPack.volume + }l
      • +
    • Color: ${ + everydayPack.color + }
      • +
    • Age: ${everydayPack.backpackAge()} days old
      • +
    • Number of pockets: ${ + everydayPack.pocketNum + }
      • +
    • Left strap length: ${ + everydayPack.strapLength.left + } inches
      • +
    • Right strap length: ${ + everydayPack.strapLength.right + } inches
      • +
    • Lid status: ${ + everydayPack.lidOpen ? "open" : "closed" + }
      • +
    + `; + +const main = document.querySelector(".maincontent"); + +const newArticle = document.createElement("article"); +newArticle.classList.add("backpack"); +newArticle.setAttribute("id", "everyday"); +newArticle.innerHTML = content; + +main.append(newArticle); + +if (everydayPack.backpackAge() >= 30) { + console.log("Backpack is used") +} else { + console.log("Backpack is new") +} \ No newline at end of file diff --git a/08_13/Backpack.js b/08_13/Backpack.js new file mode 100755 index 00000000..a178234d --- /dev/null +++ b/08_13/Backpack.js @@ -0,0 +1,41 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired, + image + ) { + 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 default Backpack; diff --git a/08_13/index.html b/08_13/index.html new file mode 100755 index 00000000..1ba951b9 --- /dev/null +++ b/08_13/index.html @@ -0,0 +1,44 @@ + + + + + + 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. +

    +
    +
    +
    +

    + Demo project for JavaScript Essential Training, a LinkedIn Learning + course. +

    +
    + + diff --git a/08_13/script.js b/08_13/script.js new file mode 100755 index 00000000..4bf4dffa --- /dev/null +++ b/08_13/script.js @@ -0,0 +1,80 @@ +/** + * Switch statement + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST", + "../assets/images/everyday.svg" +); + +const content = ` +
    + +
    +

    ${everydayPack.name}

    +
      +
    • Volume: ${ + everydayPack.volume + }l
      • +
    • Color: ${ + everydayPack.color + }
      • +
    • Age: ${everydayPack.backpackAge()} days old
      • +
    • Number of pockets: ${ + everydayPack.pocketNum + }
      • +
    • Left strap length: ${ + everydayPack.strapLength.left + } inches
      • +
    • Right strap length: ${ + everydayPack.strapLength.right + } inches
      • +
    • Lid status: ${ + everydayPack.lidOpen ? "open" : "closed" + }
      • +
    + `; + +const main = document.querySelector(".maincontent"); + +const newArticle = document.createElement("article"); +newArticle.classList.add("backpack"); +newArticle.setAttribute("id", "everyday"); +newArticle.innerHTML = content; + +main.append(newArticle); + +const usedStatus = () => { + let age = everydayPack.backpackAge(); + let description; + if (age >= 30) { + if (age >= 365) { + if (age >= 1095) { + description = "old"; + } else { + description = "used"; + } + } else { + description = "lightly used"; + } + } else { + description = "new"; + } + + console.log(` + Age: ${age} days + Status: ${description} + `); +}; + +usedStatus() diff --git a/08_13e/Backpack.js b/08_13e/Backpack.js new file mode 100755 index 00000000..a178234d --- /dev/null +++ b/08_13e/Backpack.js @@ -0,0 +1,41 @@ +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired, + image + ) { + 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 default Backpack; diff --git a/08_13e/index.html b/08_13e/index.html new file mode 100755 index 00000000..1ba951b9 --- /dev/null +++ b/08_13e/index.html @@ -0,0 +1,44 @@ + + + + + + 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. +

    +
    +
    +
    +

    + Demo project for JavaScript Essential Training, a LinkedIn Learning + course. +

    +
    + + diff --git a/08_13e/script.js b/08_13e/script.js new file mode 100755 index 00000000..e0b92af2 --- /dev/null +++ b/08_13e/script.js @@ -0,0 +1,85 @@ +/** + * Switch statement + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch + */ + +import Backpack from "./Backpack.js"; + +const everydayPack = new Backpack( + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST", + "../assets/images/everyday.svg" +); + +const content = ` +
    + +
    +

    ${everydayPack.name}

    +
      +
    • Volume: ${ + everydayPack.volume + }l
      • +
    • Color: ${ + everydayPack.color + }
      • +
    • Age: ${everydayPack.backpackAge()} days old
      • +
    • Number of pockets: ${ + everydayPack.pocketNum + }
      • +
    • Left strap length: ${ + everydayPack.strapLength.left + } inches
      • +
    • Right strap length: ${ + everydayPack.strapLength.right + } inches
      • +
    • Lid status: ${ + everydayPack.lidOpen ? "open" : "closed" + }
      • +
    + `; + +const main = document.querySelector(".maincontent"); + +const newArticle = document.createElement("article"); +newArticle.classList.add("backpack"); +newArticle.setAttribute("id", "everyday"); +newArticle.innerHTML = content; + +main.append(newArticle); + +const usedStatus = () => { + let age = everydayPack.backpackAge(); + age = 1095 + let description; + + switch (true) { + case age < 30: + description = "new" + break; + case age >= 30 && age < 365: + description = "lightly used" + break; + case age >= 365 && age < 1095: + description ="used" + break; + case age >= 1095: + description = "old" + break; + default: + console.log(`There is no description for ${age}.`) + } + + console.log(` + Age: ${age} days + Status: ${description} + `); +}; + +usedStatus() diff --git a/08_14/index.html b/08_14/index.html new file mode 100755 index 00000000..860cb0ac --- /dev/null +++ b/08_14/index.html @@ -0,0 +1,14 @@ + + + + + + Console demo + + + +
    +
    +
    + + diff --git a/08_14/script.js b/08_14/script.js new file mode 100755 index 00000000..b6a44c64 --- /dev/null +++ b/08_14/script.js @@ -0,0 +1,86 @@ +/** + * Loops Aplenty! + * @link https://developer.mozilla.org/en-US/docs/Glossary/Callback_function + */ + +const stuff = ["piggy", "headlamp", "pen", "pencil", "eraser", "water bottle"]; + +const nestedObjects = { + item01: { + name: "piggy", + type: "toy", + weight: 30, + }, + item02: { + name: "headlamp", + type: "equipment", + weight: 120, + }, + item03: { + name: "pen", + type: "tool", + weight: 30, + }, + item04: { + name: "pencil", + type: "tool", + weight: 30, + }, + item05: { + name: "eraser", + type: "tool", + weight: 40, + }, + item03: { + name: "water bottle", + type: "equipment", + weight: 1300, + }, +}; + +const article = document.querySelector("article"); +let stuffList = document.createElement("ul"); + + +/** + * for loop + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for + */ +for (let i = 0; i < stuff.length; i++) { + let listItem = document.createElement("li"); + listItem.innerHTML = stuff[i]; + stuffList.append(listItem); +} + +/** + * for...of loop and arrays + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of + */ +// for (const item of stuff) { +// let listItem = document.createElement("li"); +// listItem.innerHTML = item; +// stuffList.append(listItem); +// } + +/** + * foreach array method + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach + */ +// stuff.forEach((item) => { +// let listItem = document.createElement("li"); +// listItem.innerHTML = item; +// stuffList.append(listItem); +// }); + +/** + * for...in loop and objects + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of + */ +// for (const singleObject in nestedObjects) { +// let listItem = document.createElement("li"); +// listItem.innerHTML = `Name: ${nestedObjects[singleObject].name}`; +// stuffList.append(listItem); +// } + + +article.append(stuffList); diff --git a/08_15/index.html b/08_15/index.html new file mode 100755 index 00000000..860cb0ac --- /dev/null +++ b/08_15/index.html @@ -0,0 +1,14 @@ + + + + + + Console demo + + + +
    +
    +
    + + diff --git a/08_15/script.js b/08_15/script.js new file mode 100755 index 00000000..a9ae23c6 --- /dev/null +++ b/08_15/script.js @@ -0,0 +1,18 @@ +/** + * The map() array method. + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map + */ + +const stuff = ["piggy", "headlamp", "pen", "pencil", "eraser", "water bottle"]; + +const article = document.querySelector("article"); +let stuffList = document.createElement("ul"); + +// forEach() array method +stuff.forEach((item) => { + let listItem = document.createElement("li"); + listItem.innerHTML = item; + stuffList.append(listItem); +}); + +article.append(stuffList) \ No newline at end of file diff --git a/08_15e/index.html b/08_15e/index.html new file mode 100755 index 00000000..860cb0ac --- /dev/null +++ b/08_15e/index.html @@ -0,0 +1,14 @@ + + + + + + Console demo + + + +
    +
    +
    + + diff --git a/08_15e/script.js b/08_15e/script.js new file mode 100755 index 00000000..24c9cbfc --- /dev/null +++ b/08_15e/script.js @@ -0,0 +1,24 @@ +/** + * The map() array method. + * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map + */ + +const stuff = ["piggy", "headlamp", "pen", "pencil", "eraser", "water bottle"]; + +const article = document.querySelector("article"); +let stuffList = document.createElement("ul"); + +// map() through the stuff array to make a new stuffItems array. +const stuffItems = stuff.map((item) => { + let listItem = document.createElement("li"); + listItem.innerHTML = item; + return listItem; +}); + +// Append each element from the stuffItems array to the stuffList
      +stuffItems.forEach((item) => { + stuffList.append(item); +}); + +// Append stuffList to the
      +article.append(stuffList); diff --git a/08_16/components/Backpack.js b/08_16/components/Backpack.js new file mode 100755 index 00000000..65236404 --- /dev/null +++ b/08_16/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/08_16/components/data.js b/08_16/components/data.js new file mode 100755 index 00000000..4c16376f --- /dev/null +++ b/08_16/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/08_16/index.html b/08_16/index.html new file mode 100755 index 00000000..c3c0235f --- /dev/null +++ b/08_16/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. +

      +
      +
      +
      +

      + Demo project for JavaScript Essential Training, a LinkedIn Learning + course. +

      +
      + + diff --git a/08_16/script.js b/08_16/script.js new file mode 100755 index 00000000..3b166464 --- /dev/null +++ b/08_16/script.js @@ -0,0 +1,60 @@ +/** + * Challenge: Create an advanced function. + * - Loop through backpackObjectArray to create an article with the class "backpack". + * - Give the article the ID of the current backpack object. + * - Set the inner HTML of the article to the existing HTML output provided in const content. + * - Append each backpack object to the
      element. + */ +import Backpack from "./components/Backpack.js"; + +const everydayPack = new Backpack( + "pack01", + "Everyday Backpack", + 30, + "grey", + 15, + 26, + 26, + false, + "December 5, 2018 15:00:00 PST", + "../assets/images/everyday.svg" +); + +const content = ` + +
      + +
      +

      ${everydayPack.name}

      +
        +
      • Volume: ${ + everydayPack.volume + }l
        • +
      • Color: ${ + everydayPack.color + }
        • +
      • Age: ${everydayPack.backpackAge()} days old
        • +
      • Number of pockets: ${ + everydayPack.pocketNum + }
        • +
      • Left strap length: ${ + everydayPack.strapLength.left + } inches
        • +
      • Right strap length: ${ + everydayPack.strapLength.right + } inches
        • +
      • Lid status: ${ + everydayPack.lidOpen ? "open" : "closed" + }
        • +
      + +`; + +const main = document.querySelector(".maincontent"); + +const newArticle = document.createElement("article"); +newArticle.classList.add("backpack"); +newArticle.setAttribute("id", "everyday"); +newArticle.innerHTML = content; + +main.append(newArticle); diff --git a/08_17/components/Backpack.js b/08_17/components/Backpack.js new file mode 100755 index 00000000..65236404 --- /dev/null +++ b/08_17/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/08_17/components/data.js b/08_17/components/data.js new file mode 100755 index 00000000..4c16376f --- /dev/null +++ b/08_17/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/08_17/index.html b/08_17/index.html new file mode 100755 index 00000000..c3c0235f --- /dev/null +++ b/08_17/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. +

      +
      +
      +
      +

      + Demo project for JavaScript Essential Training, a LinkedIn Learning + course. +

      +
      + + diff --git a/08_17/script.js b/08_17/script.js new file mode 100755 index 00000000..298740cf --- /dev/null +++ b/08_17/script.js @@ -0,0 +1,49 @@ +/** + * Solution: Create an advanced function. + * - Loop through backpackObjectArray to create an article with the class "backpack". + * - Give the article the ID of the current backpack object. + * - Set the inner HTML of the article to the existing HTML output provided in const content. + * - Append each backpack object to the
      element. + */ +import backpackObjectArray from "./components/data.js"; + +const main = document.querySelector(".maincontent"); + +const content = 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
        • +
      • Lid status: ${ + backpack.lidOpen ? "open" : "closed" + }
        • +
      + `; + return backpackArticle; +}); + +content.forEach((backpack) => { + main.append(backpack); +}); diff --git a/09_02/index.html b/09_02/index.html new file mode 100755 index 00000000..ead2d5b4 --- /dev/null +++ b/09_02/index.html @@ -0,0 +1,71 @@ + + + + + + Events Aplenty + + + + +
      +
      +

      Events: A Demonstration

      + +
      +
      X:
      +
      Y:
      +
      +
      +
      + + diff --git a/09_02/script.js b/09_02/script.js new file mode 100755 index 00000000..9c0e4e92 --- /dev/null +++ b/09_02/script.js @@ -0,0 +1,40 @@ +/** + * Events aplenty. + * @link https://developer.mozilla.org/en-US/docs/Web/Events + */ + +const container = document.querySelector(".container"); +const button = document.querySelector(".cta-button"); +const posX = document.querySelector(".posX span"); +const posY = document.querySelector(".posY span"); + +// Log when the button is clicked in the console. +button.addEventListener("click", () => { + button.classList.toggle("active"); + console.log("Button was clicked!"); +}, false); + +// Update the x and y displays to show the current mouse position. +const mousePosition = (event) => { + posX.innerText = event.pageX; + posY.innerText = event.pageY; +}; + +window.addEventListener("mousemove", mousePosition, false); + +// Change the color of the box when the mouse enters. +container.addEventListener( + "mouseenter", + () => { + container.classList.add("blue"); + }, + false +); + +container.addEventListener( + "mouseleave", + () => { + container.classList.remove("blue"); + }, + false +); diff --git a/09_03/components/Backpack.js b/09_03/components/Backpack.js new file mode 100755 index 00000000..65236404 --- /dev/null +++ b/09_03/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/09_03/components/data.js b/09_03/components/data.js new file mode 100755 index 00000000..4c16376f --- /dev/null +++ b/09_03/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/09_03/index.html b/09_03/index.html new file mode 100755 index 00000000..c3c0235f --- /dev/null +++ b/09_03/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. +

      +
      +
      +
      +

      + Demo project for JavaScript Essential Training, a LinkedIn Learning + course. +

      +
      + + diff --git a/09_03/script.js b/09_03/script.js new file mode 100755 index 00000000..df80b460 --- /dev/null +++ b/09_03/script.js @@ -0,0 +1,49 @@ +/** + * Event listeners + * @link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener + * @link https://developer.mozilla.org/en-US/docs/Web/Events + */ +import backpackObjectArray from "./components/data.js"; + +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
        • +
      • Lid status: ${ + backpack.lidOpen ? "open" : "closed" + }
        • +
      + + `; + + return backpackArticle; +}); + +const main = document.querySelector(".maincontent"); + +backpackList.forEach((backpack) => { + main.append(backpack); +}); diff --git a/09_03e/components/Backpack.js b/09_03e/components/Backpack.js new file mode 100755 index 00000000..65236404 --- /dev/null +++ b/09_03e/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/09_03e/components/data.js b/09_03e/components/data.js new file mode 100755 index 00000000..4c16376f --- /dev/null +++ b/09_03e/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/09_03e/index.html b/09_03e/index.html new file mode 100755 index 00000000..c3c0235f --- /dev/null +++ b/09_03e/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. +

      +
      +
      +
      +

      + Demo project for JavaScript Essential Training, a LinkedIn Learning + course. +

      +
      + + diff --git a/09_03e/script.js b/09_03e/script.js new file mode 100755 index 00000000..cb5d6698 --- /dev/null +++ b/09_03e/script.js @@ -0,0 +1,57 @@ +/** + * Event listeners + * @link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener + * @link https://developer.mozilla.org/en-US/docs/Web/Events + */ +import backpackObjectArray from "./components/data.js"; + +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
        • +
      • Lid status: ${ + backpack.lidOpen ? "open" : "closed" + }
        • +
      + + `; + + const button = backpackArticle.querySelector(".lid-toggle") + const status = backpackArticle.querySelector(".backpack__lid span") + + button.addEventListener("click", (event) => { + console.log(event) + status.innerText === "open" ? status.innerText = "closed" : status.innerText = "open" + }) + + return backpackArticle; +}); + +const main = document.querySelector(".maincontent"); + +backpackList.forEach((backpack) => { + main.append(backpack); +}); diff --git a/09_05/components/Backpack.js b/09_05/components/Backpack.js new file mode 100755 index 00000000..65236404 --- /dev/null +++ b/09_05/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/09_05/components/data.js b/09_05/components/data.js new file mode 100755 index 00000000..4c16376f --- /dev/null +++ b/09_05/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/09_05/index.html b/09_05/index.html new file mode 100755 index 00000000..c3c0235f --- /dev/null +++ b/09_05/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. +

      +
      +
      +
      +

      + Demo project for JavaScript Essential Training, a LinkedIn Learning + course. +

      +
      + + diff --git a/09_05/script.js b/09_05/script.js new file mode 100755 index 00000000..0f1dc9f0 --- /dev/null +++ b/09_05/script.js @@ -0,0 +1,87 @@ +/** + * Event listeners + * @link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener + * @link https://developer.mozilla.org/en-US/docs/Web/Events + */ +import backpackObjectArray from "./components/data.js"; + +/** + * Add event listener to the lid-toggle button. + */ +const lidToggle = function () { + + // Find the current backpack object in backpackObjectArray + let backpackObject = backpackObjectArray.find( ({ id }) => id === this.parentElement.id ); + + // Toggle lidOpen status + backpackObject.lidOpen == true + ? backpackObject.lidOpen = false + : backpackObject.lidOpen = true; + + // Toggle button text + this.innerText == "Open lid" + ? this.innerText = "Close lid" + : this.innerText = "Open lid"; + + // Set visible property status text + let status = this.parentElement.querySelector(".backpack__lid span"); + status.innerText == "closed" + ? (status.innerText = "open") + : (status.innerText = "closed"); +} + +/** + * - Loop through backpackObjectArray + * - create article for each entry + * - add articles back to backpackList array + */ +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
        • +
      • Lid status: ${ + backpack.lidOpen ? "open" : "closed" + }
        • +
      + + `; + + const button = backpackArticle.querySelector(".lid-toggle") + const status = backpackArticle.querySelector(".backpack__lid span") + + button.addEventListener("click", (event) => { + console.log(event) + status.innerText === "open" ? status.innerText = "closed" : status.innerText = "open" + }) + + return backpackArticle; +}); + +const main = document.querySelector(".maincontent"); + +backpackList.forEach((backpack) => { + main.append(backpack); +}); diff --git a/09_05e/components/Backpack.js b/09_05e/components/Backpack.js new file mode 100755 index 00000000..65236404 --- /dev/null +++ b/09_05e/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/09_05e/components/data.js b/09_05e/components/data.js new file mode 100755 index 00000000..4c16376f --- /dev/null +++ b/09_05e/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/09_05e/index.html b/09_05e/index.html new file mode 100755 index 00000000..c3c0235f --- /dev/null +++ b/09_05e/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. +

      +
      +
      +
      +

      + Demo project for JavaScript Essential Training, a LinkedIn Learning + course. +

      +
      + + diff --git a/09_05e/script.js b/09_05e/script.js new file mode 100755 index 00000000..91740b64 --- /dev/null +++ b/09_05e/script.js @@ -0,0 +1,83 @@ +/** + * Event listeners + * @link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener + * @link https://developer.mozilla.org/en-US/docs/Web/Events + */ +import backpackObjectArray from "./components/data.js"; + +/** + * Add event listener to the lid-toggle button. + */ +const lidToggle = function () { + + // Find the current backpack object in backpackObjectArray + let backpackObject = backpackObjectArray.find( ({ id }) => id === this.parentElement.id ); + + // Toggle lidOpen status + backpackObject.lidOpen == true + ? backpackObject.lidOpen = false + : backpackObject.lidOpen = true; + + // Toggle button text + this.innerText == "Open lid" + ? this.innerText = "Close lid" + : this.innerText = "Open lid"; + + // Set visible property status text + let status = this.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); + + 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
        • +
      • Lid status: ${ + backpack.lidOpen ? "open" : "closed" + }
        • +
      + + `; + + let button = backpackArticle.querySelector(".lid-toggle"); + + // Add event listener + button.addEventListener("click", lidToggle) + + return backpackArticle; +}); + +// Append each backpack item to the main +const main = document.querySelector(".maincontent"); + +backpackList.forEach((backpack) => { + main.append(backpack); +}); + + diff --git a/09_06/components/Backpack.js b/09_06/components/Backpack.js new file mode 100755 index 00000000..65236404 --- /dev/null +++ b/09_06/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/09_06/components/data.js b/09_06/components/data.js new file mode 100755 index 00000000..4c16376f --- /dev/null +++ b/09_06/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/09_06/index.html b/09_06/index.html new file mode 100755 index 00000000..c3c0235f --- /dev/null +++ b/09_06/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. +

      +
      +
      +
      +

      + Demo project for JavaScript Essential Training, a LinkedIn Learning + course. +

      +
      + + diff --git a/09_06/script.js b/09_06/script.js new file mode 100755 index 00000000..024ac3e6 --- /dev/null +++ b/09_06/script.js @@ -0,0 +1,88 @@ +/** + * Event listeners + * @link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener + * @link https://developer.mozilla.org/en-US/docs/Web/Events + */ +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"); +} + +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
        • +
      • Lid status: ${ + backpack.lidOpen ? "open" : "closed" + }
        • +
      + + `; + + let button = backpackArticle.querySelector(".lid-toggle"); + let newArg = "The argument I want to pass to the callback function!" + + // Add event listener + button.addEventListener("click", (event) => { + lidToggle(event, button, newArg) + }) + + return backpackArticle; +}); + +// Append each backpack item to the main +const main = document.querySelector(".maincontent"); + +backpackList.forEach((backpack) => { + main.append(backpack); +}); + + diff --git a/09_07/components/Backpack.js b/09_07/components/Backpack.js new file mode 100755 index 00000000..65236404 --- /dev/null +++ b/09_07/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/09_07/components/data.js b/09_07/components/data.js new file mode 100755 index 00000000..4c16376f --- /dev/null +++ b/09_07/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/09_07/index.html b/09_07/index.html new file mode 100755 index 00000000..c3c0235f --- /dev/null +++ b/09_07/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. +

      +
      +
      +
      +

      + Demo project for JavaScript Essential Training, a LinkedIn Learning + course. +

      +
      + + diff --git a/09_07/script-advanced.js b/09_07/script-advanced.js new file mode 100755 index 00000000..f2415652 --- /dev/null +++ b/09_07/script-advanced.js @@ -0,0 +1,92 @@ +/** + * 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 + * - 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"; + +/** + * 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"); +} + +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
        • +
      • Lid status: ${ + backpack.lidOpen ? "open" : "closed" + }
        • +
      + + `; + + let button = backpackArticle.querySelector(".lid-toggle"); + let newArg = "The argument I want to pass to the callback function!" + + // Add event listener + button.addEventListener("click", (event) => { + lidToggle(event, button, newArg) + }) + + return backpackArticle; +}); + +// Append each backpack item to the main +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 new file mode 100755 index 00000000..38eceace --- /dev/null +++ b/09_07/script-intermediate.js @@ -0,0 +1,117 @@ +/** + * 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) => { + + // Loop through each element on the list + strapArray.forEach( listElement => { + + // Get what side we are working with + let side = listElement.getAttribute("data-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 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
        • +
      • Lid status: ${ + backpack.lidOpen ? "open" : "closed" + }
        • +
      + + `; + + 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!" + + // Add event listener + button.addEventListener("click", (event) => { + lidToggle(event, button, newArg) + }) + + return backpackArticle; +}); + +// Append each backpack item to the main +const main = document.querySelector(".maincontent"); + +backpackList.forEach((backpack) => { + main.append(backpack); +}); + + diff --git a/09_08/components/Backpack.js b/09_08/components/Backpack.js new file mode 100755 index 00000000..65236404 --- /dev/null +++ b/09_08/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/09_08/components/data.js b/09_08/components/data.js new file mode 100755 index 00000000..4c16376f --- /dev/null +++ b/09_08/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/09_08/index.html b/09_08/index.html new file mode 100755 index 00000000..c3c0235f --- /dev/null +++ b/09_08/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. +

      +
      +
      +
      +

      + Demo project for JavaScript Essential Training, a LinkedIn Learning + course. +

      +
      + + diff --git a/09_08/script.js b/09_08/script.js new file mode 100755 index 00000000..198926dc --- /dev/null +++ b/09_08/script.js @@ -0,0 +1,133 @@ +/** + * 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) => { + + // Loop through each element on the list + strapArray.forEach( listElement => { + + // Get what side we are working with + let side = listElement.getAttribute("data-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
        • +
      • Lid status: ${ + backpack.lidOpen ? "open" : "closed" + }
        • +
      + + `; + + 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!" + + // Add event listener + button.addEventListener("click", (event) => { + lidToggle(event, button, newArg) + }) + + return backpackArticle; +}); + +// Append each backpack item to the main +const main = document.querySelector(".maincontent"); + +backpackList.forEach((backpack) => { + main.append(backpack); +}); + + diff --git a/Practice/03_07 - making objects/index.html b/Practice/03_07 - making objects/index.html new file mode 100755 index 00000000..a33b7251 --- /dev/null +++ b/Practice/03_07 - making objects/index.html @@ -0,0 +1,10 @@ + + + + + + Practice: Making Objects + + + + diff --git a/Practice/03_07 - making objects/script.js b/Practice/03_07 - making objects/script.js new file mode 100755 index 00000000..691dce02 --- /dev/null +++ b/Practice/03_07 - making objects/script.js @@ -0,0 +1,9 @@ +/** + * Practice: Making objects + * + * - Pick real-life objects. + * - Give each object an identifiable name. + * - Create properties to describe the objects and set their values. + * - Create a nested object. + * - Test your objects in the browser console by accessing the entire object and its specific properties. + */ diff --git a/Practice/03_09 - making methods/index.html b/Practice/03_09 - making methods/index.html new file mode 100755 index 00000000..907a3d7d --- /dev/null +++ b/Practice/03_09 - making methods/index.html @@ -0,0 +1,10 @@ + + + + + + Practice: Making methods + + + + diff --git a/Practice/03_09 - making methods/script.js b/Practice/03_09 - making methods/script.js new file mode 100755 index 00000000..1dd07f08 --- /dev/null +++ b/Practice/03_09 - making methods/script.js @@ -0,0 +1,26 @@ +/** + * Practice: Making methods + * + * - Create a method for each object property. + * - The method receives a value to match the property to be changed. + * - Create a simple function to replace the current property value with the received value. + * - Test the method by sending new values and checking the properties in the console. + */ + +const backpack = { + name: "Everyday Backpack", + volume: 30, + color: "grey", + pocketNum: 15, + strapLength: { + left: 26, + right: 26, + }, + toggleLid: function (lidStatus) { + this.lidOpen = lidStatus; + }, + newStrapLength: function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + }, +}; diff --git a/Practice/03_12 - making classes/index.html b/Practice/03_12 - making classes/index.html new file mode 100755 index 00000000..6fe95f2a --- /dev/null +++ b/Practice/03_12 - making classes/index.html @@ -0,0 +1,10 @@ + + + + + + Practice: Making classes and objects + + + + diff --git a/Practice/03_12 - making classes/script.js b/Practice/03_12 - making classes/script.js new file mode 100755 index 00000000..9bcfa1f4 --- /dev/null +++ b/Practice/03_12 - making classes/script.js @@ -0,0 +1,8 @@ +/** + * Practice: Making classes and objects + * + * - Find a type of object you have more than one of in your house (eg. clothing, writing tools, etc). + * - Create a class describing this object type - its properties and methods. + * - Create several objects using the class. + * - Test the objecs by calling their properties and using their methods in the console. + */ diff --git a/assets/images/everyday.svg b/assets/images/everyday.svg new file mode 100755 index 00000000..969dcf47 --- /dev/null +++ b/assets/images/everyday.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/frog.svg b/assets/images/frog.svg new file mode 100755 index 00000000..04645a45 --- /dev/null +++ b/assets/images/frog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/style.css b/assets/style.css new file mode 100755 index 00000000..f0e5cefe --- /dev/null +++ b/assets/style.css @@ -0,0 +1,148 @@ +body { + margin: 0; + font-family: "Work Sans", sans-serif; + font-size: 1.6rem; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Oswald", sans-serif; +} + +figure { + margin: 0; +} + +.siteheader { + display: flex; + flex-direction: column; + align-items: center; + padding: 2rem; +} + +.site-title { + margin-top: 1rem; + margin-bottom: 1rem; + font-family: "Oswald", sans-serif; + font-size: 5rem; + font-weight: 200; +} + +.siteheader:after { + display: block; + margin: 4rem 0; + content: "⚍⚌⚍"; +} + +.maincontent { + margin: 0 auto; + padding: 0 1rem; + max-width: 60rem; +} + +.page-header { + margin-bottom: 3rem; +} + +.page-header__heading { + margin-top: -1rem; + text-align: center; +} + +.page-header:after { + margin: 4rem auto; + display: block; + content: ""; + border-bottom: 3px solid black; + width: 4rem; +} + +.backpack { + margin-bottom: 4rem; + /* padding-bottom: rem; */ + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto 1fr; + gap: 0 3rem; +} + +.backpack:after { + margin: 0 auto; + padding-top: 4rem; + display: block; + grid-column: span 2; + content: ""; + border-bottom: 3px solid black; + width: 4rem; +} + +.backpack__image { + grid-row: span 2; +} + +.backpack__name { + margin-top: 2rem; + margin-bottom: 0; + padding-bottom: 2rem; + font-size: 5rem; + line-height: 1; + text-transform: uppercase; + border-bottom: 3px solid black; +} + +.backpack__features { + margin: 0; + padding: 2rem 0 0 0; + list-style-type: none; +} + +.backpack__features li { + padding: 0.2rem 0; +} + +/* Subgrid. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid */ +@supports (grid-template-columns: subgrid) { + .backpack__features { + display: grid; + grid-template-columns: auto 1fr; + gap: 0 1rem; + } + + .backpack__features li { + display: grid; + grid-column: span 2; + grid-template-columns: subgrid; + } +} + +.lid-toggle { + display: inline-block; + border: 3px solid black; + border-radius: 0.3rem; + padding: 2rem; + font-size: 1.6rem; + cursor: pointer; + background-color: white; +} +.lid-toggle:hover, +.lid-toggle:focus { + background-color: hsl(0, 0%, 95%); +} + +.lid-toggle:active { + background-color: black; + color: white; +} + +.sitefooter { + margin-top: 8rem; + padding: 2rem; + display: flex; + justify-content: center; + background: black; + color: white; +} diff --git a/package-lock.json b/package-lock.json new file mode 100755 index 00000000..1296e83c --- /dev/null +++ b/package-lock.json @@ -0,0 +1,1534 @@ +{ + "name": "javascript-essential-training-exercise-files", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@babel/code-frame": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", + "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==", + "dev": true, + "requires": { + "@babel/highlight": "^7.10.4" + } + }, + "@babel/helper-validator-identifier": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", + "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==", + "dev": true + }, + "@babel/highlight": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz", + "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==", + "dev": true, + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + }, + "dependencies": { + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + } + } + }, + "@eslint/eslintrc": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.1.3.tgz", + "integrity": "sha512-4YVwPkANLeNtRjMekzux1ci8hIaH5eGKktGqR0d3LWsKNn5B2X/1Z6Trxy7jQXl9EBGE6Yj02O+t09FMeRllaA==", + "dev": true, + "requires": { + "ajv": "^6.12.4", + "debug": "^4.1.1", + "espree": "^7.3.0", + "globals": "^12.1.0", + "ignore": "^4.0.6", + "import-fresh": "^3.2.1", + "js-yaml": "^3.13.1", + "lodash": "^4.17.19", + "minimatch": "^3.0.4", + "strip-json-comments": "^3.1.1" + } + }, + "@types/color-name": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", + "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==", + "dev": true + }, + "@types/json5": { + "version": "0.0.29", + "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", + "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", + "dev": true + }, + "acorn": { + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz", + "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==", + "dev": true + }, + "acorn-jsx": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz", + "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==", + "dev": true + }, + "ajv": { + "version": "6.12.5", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz", + "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==", + "dev": true, + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, + "ansi-colors": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", + "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==", + "dev": true + }, + "ansi-regex": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", + "dev": true + }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "dev": true, + "requires": { + "sprintf-js": "~1.0.2" + } + }, + "array-includes": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.1.tgz", + "integrity": "sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0", + "is-string": "^1.0.5" + } + }, + "array.prototype.flat": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz", + "integrity": "sha512-gBlRZV0VSmfPIeWfuuy56XZMvbVfbEUnOXUvt3F/eUUUSyzlgLxhEX4YAEpxNAogRGehPSnfXyPtYyKAhkzQhQ==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0-next.1" + } + }, + "astral-regex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz", + "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==", + "dev": true + }, + "balanced-match": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "dev": true + }, + "brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "requires": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true + }, + "chalk": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", + "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", + "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", + "dev": true, + "requires": { + "@types/color-name": "^1.1.1", + "color-convert": "^2.0.1" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true + }, + "concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "dev": true + }, + "contains-path": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz", + "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=", + "dev": true + }, + "cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "requires": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + } + }, + "debug": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz", + "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==", + "dev": true, + "requires": { + "ms": "2.1.2" + } + }, + "deep-is": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz", + "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=", + "dev": true + }, + "define-properties": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz", + "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==", + "dev": true, + "requires": { + "object-keys": "^1.0.12" + } + }, + "doctrine": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", + "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", + "dev": true, + "requires": { + "esutils": "^2.0.2" + } + }, + "emoji-regex": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", + "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==", + "dev": true + }, + "enquirer": { + "version": "2.3.6", + "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz", + "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==", + "dev": true, + "requires": { + "ansi-colors": "^4.1.1" + } + }, + "error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dev": true, + "requires": { + "is-arrayish": "^0.2.1" + } + }, + "es-abstract": { + "version": "1.17.6", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz", + "integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==", + "dev": true, + "requires": { + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1", + "is-callable": "^1.2.0", + "is-regex": "^1.1.0", + "object-inspect": "^1.7.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.0", + "string.prototype.trimend": "^1.0.1", + "string.prototype.trimstart": "^1.0.1" + } + }, + "es-to-primitive": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", + "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", + "dev": true, + "requires": { + "is-callable": "^1.1.4", + "is-date-object": "^1.0.1", + "is-symbol": "^1.0.2" + } + }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true + }, + "eslint": { + "version": "7.9.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.9.0.tgz", + "integrity": "sha512-V6QyhX21+uXp4T+3nrNfI3hQNBDa/P8ga7LoQOenwrlEFXrEnUEE+ok1dMtaS3b6rmLXhT1TkTIsG75HMLbknA==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "@eslint/eslintrc": "^0.1.3", + "ajv": "^6.10.0", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.2", + "debug": "^4.0.1", + "doctrine": "^3.0.0", + "enquirer": "^2.3.5", + "eslint-scope": "^5.1.0", + "eslint-utils": "^2.1.0", + "eslint-visitor-keys": "^1.3.0", + "espree": "^7.3.0", + "esquery": "^1.2.0", + "esutils": "^2.0.2", + "file-entry-cache": "^5.0.1", + "functional-red-black-tree": "^1.0.1", + "glob-parent": "^5.0.0", + "globals": "^12.1.0", + "ignore": "^4.0.6", + "import-fresh": "^3.0.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "js-yaml": "^3.13.1", + "json-stable-stringify-without-jsonify": "^1.0.1", + "levn": "^0.4.1", + "lodash": "^4.17.19", + "minimatch": "^3.0.4", + "natural-compare": "^1.4.0", + "optionator": "^0.9.1", + "progress": "^2.0.0", + "regexpp": "^3.1.0", + "semver": "^7.2.1", + "strip-ansi": "^6.0.0", + "strip-json-comments": "^3.1.0", + "table": "^5.2.3", + "text-table": "^0.2.0", + "v8-compile-cache": "^2.0.3" + } + }, + "eslint-config-standard": { + "version": "14.1.1", + "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-14.1.1.tgz", + "integrity": "sha512-Z9B+VR+JIXRxz21udPTL9HpFMyoMUEeX1G251EQ6e05WD9aPVtVBn09XUmZ259wCMlCDmYDSZG62Hhm+ZTJcUg==", + "dev": true + }, + "eslint-import-resolver-node": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz", + "integrity": "sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==", + "dev": true, + "requires": { + "debug": "^2.6.9", + "resolve": "^1.13.1" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + } + } + }, + "eslint-module-utils": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz", + "integrity": "sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==", + "dev": true, + "requires": { + "debug": "^2.6.9", + "pkg-dir": "^2.0.0" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + } + } + }, + "eslint-plugin-es": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-es/-/eslint-plugin-es-3.0.1.tgz", + "integrity": "sha512-GUmAsJaN4Fc7Gbtl8uOBlayo2DqhwWvEzykMHSCZHU3XdJ+NSzzZcVhXh3VxX5icqQ+oQdIEawXX8xkR3mIFmQ==", + "dev": true, + "requires": { + "eslint-utils": "^2.0.0", + "regexpp": "^3.0.0" + } + }, + "eslint-plugin-import": { + "version": "2.22.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.22.0.tgz", + "integrity": "sha512-66Fpf1Ln6aIS5Gr/55ts19eUuoDhAbZgnr6UxK5hbDx6l/QgQgx61AePq+BV4PP2uXQFClgMVzep5zZ94qqsxg==", + "dev": true, + "requires": { + "array-includes": "^3.1.1", + "array.prototype.flat": "^1.2.3", + "contains-path": "^0.1.0", + "debug": "^2.6.9", + "doctrine": "1.5.0", + "eslint-import-resolver-node": "^0.3.3", + "eslint-module-utils": "^2.6.0", + "has": "^1.0.3", + "minimatch": "^3.0.4", + "object.values": "^1.1.1", + "read-pkg-up": "^2.0.0", + "resolve": "^1.17.0", + "tsconfig-paths": "^3.9.0" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "doctrine": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz", + "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=", + "dev": true, + "requires": { + "esutils": "^2.0.2", + "isarray": "^1.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", + "dev": true + } + } + }, + "eslint-plugin-node": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz", + "integrity": "sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==", + "dev": true, + "requires": { + "eslint-plugin-es": "^3.0.0", + "eslint-utils": "^2.0.0", + "ignore": "^5.1.1", + "minimatch": "^3.0.4", + "resolve": "^1.10.1", + "semver": "^6.1.0" + }, + "dependencies": { + "ignore": { + "version": "5.1.8", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz", + "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==", + "dev": true + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + } + } + }, + "eslint-plugin-promise": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-4.2.1.tgz", + "integrity": "sha512-VoM09vT7bfA7D+upt+FjeBO5eHIJQBUWki1aPvB+vbNiHS3+oGIJGIeyBtKQTME6UPXXy3vV07OL1tHd3ANuDw==", + "dev": true + }, + "eslint-plugin-standard": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-standard/-/eslint-plugin-standard-4.0.1.tgz", + "integrity": "sha512-v/KBnfyaOMPmZc/dmc6ozOdWqekGp7bBGq4jLAecEfPGmfKiWS4sA8sC0LqiV9w5qmXAtXVn4M3p1jSyhY85SQ==", + "dev": true + }, + "eslint-scope": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", + "dev": true, + "requires": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + } + }, + "eslint-utils": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz", + "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==", + "dev": true, + "requires": { + "eslint-visitor-keys": "^1.1.0" + } + }, + "eslint-visitor-keys": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", + "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", + "dev": true + }, + "espree": { + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.0.tgz", + "integrity": "sha512-dksIWsvKCixn1yrEXO8UosNSxaDoSYpq9reEjZSbHLpT5hpaCAKTLBwq0RHtLrIr+c0ByiYzWT8KTMRzoRCNlw==", + "dev": true, + "requires": { + "acorn": "^7.4.0", + "acorn-jsx": "^5.2.0", + "eslint-visitor-keys": "^1.3.0" + } + }, + "esprima": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", + "dev": true + }, + "esquery": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.3.1.tgz", + "integrity": "sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==", + "dev": true, + "requires": { + "estraverse": "^5.1.0" + }, + "dependencies": { + "estraverse": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz", + "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==", + "dev": true + } + } + }, + "esrecurse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", + "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", + "dev": true, + "requires": { + "estraverse": "^5.2.0" + }, + "dependencies": { + "estraverse": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz", + "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==", + "dev": true + } + } + }, + "estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", + "dev": true + }, + "esutils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "dev": true + }, + "fast-deep-equal": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true + }, + "fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "dev": true + }, + "fast-levenshtein": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", + "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", + "dev": true + }, + "file-entry-cache": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz", + "integrity": "sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==", + "dev": true, + "requires": { + "flat-cache": "^2.0.1" + } + }, + "find-up": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", + "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", + "dev": true, + "requires": { + "locate-path": "^2.0.0" + } + }, + "flat-cache": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz", + "integrity": "sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==", + "dev": true, + "requires": { + "flatted": "^2.0.0", + "rimraf": "2.6.3", + "write": "1.0.3" + } + }, + "flatted": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz", + "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==", + "dev": true + }, + "fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", + "dev": true + }, + "function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "dev": true + }, + "functional-red-black-tree": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz", + "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", + "dev": true + }, + "glob": { + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", + "dev": true, + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + }, + "glob-parent": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz", + "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==", + "dev": true, + "requires": { + "is-glob": "^4.0.1" + } + }, + "globals": { + "version": "12.4.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz", + "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==", + "dev": true, + "requires": { + "type-fest": "^0.8.1" + } + }, + "graceful-fs": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz", + "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==", + "dev": true + }, + "has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dev": true, + "requires": { + "function-bind": "^1.1.1" + } + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true + }, + "has-symbols": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz", + "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==", + "dev": true + }, + "hosted-git-info": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", + "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==", + "dev": true + }, + "ignore": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", + "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", + "dev": true + }, + "import-fresh": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz", + "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==", + "dev": true, + "requires": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + } + }, + "imurmurhash": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", + "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", + "dev": true + }, + "inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", + "dev": true, + "requires": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true + }, + "is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", + "dev": true + }, + "is-callable": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz", + "integrity": "sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==", + "dev": true + }, + "is-date-object": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz", + "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==", + "dev": true + }, + "is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", + "dev": true + }, + "is-fullwidth-code-point": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", + "dev": true + }, + "is-glob": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", + "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", + "dev": true, + "requires": { + "is-extglob": "^2.1.1" + } + }, + "is-negative-zero": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.0.tgz", + "integrity": "sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=", + "dev": true + }, + "is-regex": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz", + "integrity": "sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==", + "dev": true, + "requires": { + "has-symbols": "^1.0.1" + } + }, + "is-string": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz", + "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==", + "dev": true + }, + "is-symbol": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz", + "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==", + "dev": true, + "requires": { + "has-symbols": "^1.0.1" + } + }, + "isarray": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", + "dev": true + }, + "isexe": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", + "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", + "dev": true + }, + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true + }, + "js-yaml": { + "version": "3.14.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz", + "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==", + "dev": true, + "requires": { + "argparse": "^1.0.7", + "esprima": "^4.0.0" + } + }, + "json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "json-stable-stringify-without-jsonify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", + "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=", + "dev": true + }, + "json5": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", + "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "dev": true, + "requires": { + "minimist": "^1.2.0" + } + }, + "levn": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", + "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", + "dev": true, + "requires": { + "prelude-ls": "^1.2.1", + "type-check": "~0.4.0" + } + }, + "load-json-file": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", + "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=", + "dev": true, + "requires": { + "graceful-fs": "^4.1.2", + "parse-json": "^2.2.0", + "pify": "^2.0.0", + "strip-bom": "^3.0.0" + } + }, + "locate-path": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", + "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", + "dev": true, + "requires": { + "p-locate": "^2.0.0", + "path-exists": "^3.0.0" + } + }, + "lodash": { + "version": "4.17.20", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", + "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==", + "dev": true + }, + "minimatch": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "dev": true, + "requires": { + "brace-expansion": "^1.1.7" + } + }, + "minimist": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", + "dev": true + }, + "mkdirp": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", + "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", + "dev": true, + "requires": { + "minimist": "^1.2.5" + } + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, + "natural-compare": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", + "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=", + "dev": true + }, + "normalize-package-data": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", + "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==", + "dev": true, + "requires": { + "hosted-git-info": "^2.1.4", + "resolve": "^1.10.0", + "semver": "2 || 3 || 4 || 5", + "validate-npm-package-license": "^3.0.1" + }, + "dependencies": { + "semver": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", + "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", + "dev": true + } + } + }, + "object-inspect": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz", + "integrity": "sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==", + "dev": true + }, + "object-keys": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", + "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", + "dev": true + }, + "object.assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.1.tgz", + "integrity": "sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.18.0-next.0", + "has-symbols": "^1.0.1", + "object-keys": "^1.1.1" + }, + "dependencies": { + "es-abstract": { + "version": "1.18.0-next.0", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.0.tgz", + "integrity": "sha512-elZXTZXKn51hUBdJjSZGYRujuzilgXo8vSPQzjGYXLvSlGiCo8VO8ZGV3kjo9a0WNJJ57hENagwbtlRuHuzkcQ==", + "dev": true, + "requires": { + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1", + "is-callable": "^1.2.0", + "is-negative-zero": "^2.0.0", + "is-regex": "^1.1.1", + "object-inspect": "^1.8.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.0", + "string.prototype.trimend": "^1.0.1", + "string.prototype.trimstart": "^1.0.1" + } + } + } + }, + "object.values": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.1.tgz", + "integrity": "sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0-next.1", + "function-bind": "^1.1.1", + "has": "^1.0.3" + } + }, + "once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "dev": true, + "requires": { + "wrappy": "1" + } + }, + "optionator": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", + "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==", + "dev": true, + "requires": { + "deep-is": "^0.1.3", + "fast-levenshtein": "^2.0.6", + "levn": "^0.4.1", + "prelude-ls": "^1.2.1", + "type-check": "^0.4.0", + "word-wrap": "^1.2.3" + } + }, + "p-limit": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", + "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==", + "dev": true, + "requires": { + "p-try": "^1.0.0" + } + }, + "p-locate": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz", + "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=", + "dev": true, + "requires": { + "p-limit": "^1.1.0" + } + }, + "p-try": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz", + "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=", + "dev": true + }, + "parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "requires": { + "callsites": "^3.0.0" + } + }, + "parse-json": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz", + "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=", + "dev": true, + "requires": { + "error-ex": "^1.2.0" + } + }, + "path-exists": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", + "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", + "dev": true + }, + "path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", + "dev": true + }, + "path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true + }, + "path-parse": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", + "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", + "dev": true + }, + "path-type": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz", + "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=", + "dev": true, + "requires": { + "pify": "^2.0.0" + } + }, + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "dev": true + }, + "pkg-dir": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz", + "integrity": "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=", + "dev": true, + "requires": { + "find-up": "^2.1.0" + } + }, + "prelude-ls": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", + "dev": true + }, + "prettier": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz", + "integrity": "sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==", + "dev": true + }, + "progress": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", + "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", + "dev": true + }, + "punycode": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", + "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", + "dev": true + }, + "read-pkg": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", + "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=", + "dev": true, + "requires": { + "load-json-file": "^2.0.0", + "normalize-package-data": "^2.3.2", + "path-type": "^2.0.0" + } + }, + "read-pkg-up": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz", + "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=", + "dev": true, + "requires": { + "find-up": "^2.0.0", + "read-pkg": "^2.0.0" + } + }, + "regexpp": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz", + "integrity": "sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==", + "dev": true + }, + "resolve": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz", + "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==", + "dev": true, + "requires": { + "path-parse": "^1.0.6" + } + }, + "resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true + }, + "rimraf": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", + "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + }, + "semver": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", + "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", + "dev": true + }, + "shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "requires": { + "shebang-regex": "^3.0.0" + } + }, + "shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true + }, + "slice-ansi": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz", + "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.0", + "astral-regex": "^1.0.0", + "is-fullwidth-code-point": "^2.0.0" + } + }, + "spdx-correct": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz", + "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==", + "dev": true, + "requires": { + "spdx-expression-parse": "^3.0.0", + "spdx-license-ids": "^3.0.0" + } + }, + "spdx-exceptions": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz", + "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==", + "dev": true + }, + "spdx-expression-parse": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz", + "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==", + "dev": true, + "requires": { + "spdx-exceptions": "^2.1.0", + "spdx-license-ids": "^3.0.0" + } + }, + "spdx-license-ids": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.6.tgz", + "integrity": "sha512-+orQK83kyMva3WyPf59k1+Y525csj5JejicWut55zeTWANuN17qSiSLUXWtzHeNWORSvT7GLDJ/E/XiIWoXBTw==", + "dev": true + }, + "sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", + "dev": true + }, + "string-width": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", + "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", + "dev": true, + "requires": { + "emoji-regex": "^7.0.1", + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^5.1.0" + }, + "dependencies": { + "ansi-regex": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "dev": true + }, + "strip-ansi": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", + "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "dev": true, + "requires": { + "ansi-regex": "^4.1.0" + } + } + } + }, + "string.prototype.trimend": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz", + "integrity": "sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.5" + } + }, + "string.prototype.trimstart": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz", + "integrity": "sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.5" + } + }, + "strip-ansi": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", + "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", + "dev": true, + "requires": { + "ansi-regex": "^5.0.0" + } + }, + "strip-bom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", + "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", + "dev": true + }, + "strip-json-comments": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", + "dev": true + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + }, + "table": { + "version": "5.4.6", + "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", + "integrity": "sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==", + "dev": true, + "requires": { + "ajv": "^6.10.2", + "lodash": "^4.17.14", + "slice-ansi": "^2.1.0", + "string-width": "^3.0.0" + } + }, + "text-table": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", + "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", + "dev": true + }, + "tsconfig-paths": { + "version": "3.9.0", + "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz", + "integrity": "sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==", + "dev": true, + "requires": { + "@types/json5": "^0.0.29", + "json5": "^1.0.1", + "minimist": "^1.2.0", + "strip-bom": "^3.0.0" + } + }, + "type-check": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", + "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", + "dev": true, + "requires": { + "prelude-ls": "^1.2.1" + } + }, + "type-fest": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", + "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", + "dev": true + }, + "uri-js": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.0.tgz", + "integrity": "sha512-B0yRTzYdUCCn9n+F4+Gh4yIDtMQcaJsmYBDsTSG8g/OejKBodLQ2IHfN3bM7jUsRXndopT7OIXWdYqc1fjmV6g==", + "dev": true, + "requires": { + "punycode": "^2.1.0" + } + }, + "v8-compile-cache": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz", + "integrity": "sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==", + "dev": true + }, + "validate-npm-package-license": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", + "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==", + "dev": true, + "requires": { + "spdx-correct": "^3.0.0", + "spdx-expression-parse": "^3.0.0" + } + }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "requires": { + "isexe": "^2.0.0" + } + }, + "word-wrap": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", + "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", + "dev": true + }, + "wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "dev": true + }, + "write": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/write/-/write-1.0.3.tgz", + "integrity": "sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==", + "dev": true, + "requires": { + "mkdirp": "^0.5.1" + } + } + } +} diff --git a/package.json b/package.json new file mode 100755 index 00000000..c0e13761 --- /dev/null +++ b/package.json @@ -0,0 +1,17 @@ +{ + "name": "javascript-essential-training-exercise-files", + "version": "1.0.0", + "description": "Repository for exercise files used in the LinkedIn Learning course \"JavaScript Essential Training\" instructed by Morten Rand-Hendriksen and published 2020.", + "main": "index.html", + "author": "Morten Rand-Hendriksen", + "license": "SEE LICENSE IN LICENSE", + "devDependencies": { + "eslint": "^7.9.0", + "eslint-config-standard": "^14.1.1", + "eslint-plugin-import": "^2.22.0", + "eslint-plugin-node": "^11.1.0", + "eslint-plugin-promise": "^4.2.1", + "eslint-plugin-standard": "^4.0.1", + "prettier": "^2.1.2" + } +}