├── .eslintrc.js ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .vscode └── settings.json ├── 01_01 └── Photo.js ├── 01_04 ├── index.html └── script.js ├── 01_05 ├── index.html └── script.js ├── 01_06 ├── index.html └── script.js ├── 02_01 └── index.html ├── 02_02 ├── index.html └── script.js ├── 02_03 ├── index.html └── script.js ├── 02_04 ├── backpack.js ├── index.html └── script.js ├── 03_02 ├── index.html └── script.js ├── 03_03 ├── index.html └── script.js ├── 03_04 ├── index.html └── script.js ├── 03_05 ├── index.html └── script.js ├── 03_06 ├── index.html └── script.js ├── 03_08 ├── index.html └── script.js ├── 03_08e ├── index.html └── script.js ├── 03_10 ├── Backpack.js ├── index.html └── script.js ├── 03_11 ├── index.html └── script.js ├── 03_13 ├── Backpack.js ├── index.html └── script.js ├── 03_13e ├── Backpack.js ├── index.html └── script.js ├── 03_14 ├── Backpack.js ├── index.html └── script.js ├── 03_15 ├── Backpack.js ├── Book.js ├── index.html └── script.js ├── 04_01 ├── Backpack.js ├── index.html └── script.js ├── 04_01e ├── Backpack.js ├── index.html └── script.js ├── 04_02 ├── Backpack.js ├── index.html └── script.js ├── 04_02e ├── Backpack.js ├── index.html └── script.js ├── 05_02 ├── Backpack.js ├── index.html └── script.js ├── 05_03 ├── Backpack.js ├── index.html └── script.js ├── 05_05 ├── Backpack.js ├── index.html └── script.js ├── 05_06 ├── Backpack.js ├── index.html └── script.js ├── 05_07 ├── Backpack.js ├── index.html └── script.js ├── 05_09 ├── Backpack.js ├── index.html └── script.js ├── 05_09e ├── Backpack.js ├── index.html └── script.js ├── 05_10 ├── Backpack.js ├── index.html └── script.js ├── 05_11 ├── Backpack.js ├── index.html └── script.js ├── 06_02 ├── index.html └── script.js ├── 06_03 ├── index.html └── script.js ├── 06_04 ├── index.html └── script.js ├── 06_05 ├── index.html └── script.js ├── 06_06 ├── index.html └── script.js ├── 06_07 ├── index.html └── script.js ├── 06_08 ├── index.html └── script.js ├── 07_02 ├── index.html └── script.js ├── 07_03 ├── index.html └── script.js ├── 07_04 ├── index.html └── script.js ├── 07_05 ├── index.html └── script.js ├── 08_02 ├── index.html └── script.js ├── 08_03 ├── index.html └── script.js ├── 08_04 ├── index.html └── script.js ├── 08_05 ├── index.html └── script.js ├── 08_05e ├── index.html └── script.js ├── 08_07 ├── index.html └── script.js ├── 08_07e ├── index.html └── script.js ├── 08_08 ├── index.html └── script.js ├── 08_08e ├── index.html └── script.js ├── 08_10 ├── index.html └── script.js ├── 08_10e ├── index.html └── script.js ├── 08_11 ├── Backpack.js ├── index.html └── script.js ├── 08_11e ├── Backpack.js ├── index.html └── script.js ├── 08_12 ├── Backpack.js ├── index.html └── script.js ├── 08_13 ├── Backpack.js ├── index.html └── script.js ├── 08_13e ├── Backpack.js ├── index.html └── script.js ├── 08_14 ├── index.html └── script.js ├── 08_15 ├── index.html └── script.js ├── 08_15e ├── index.html └── script.js ├── 08_16 ├── components │ ├── Backpack.js │ └── data.js ├── index.html └── script.js ├── 08_17 ├── components │ ├── Backpack.js │ └── data.js ├── index.html └── script.js ├── 09_02 ├── index.html └── script.js ├── 09_03 ├── components │ ├── Backpack.js │ └── data.js ├── index.html └── script.js ├── 09_03e ├── components │ ├── Backpack.js │ └── data.js ├── index.html └── script.js ├── 09_05 ├── components │ ├── Backpack.js │ └── data.js ├── index.html └── script.js ├── 09_05e ├── components │ ├── Backpack.js │ └── data.js ├── index.html └── script.js ├── 09_06 ├── components │ ├── Backpack.js │ └── data.js ├── index.html └── script.js ├── 09_07 ├── components │ ├── Backpack.js │ └── data.js ├── index.html ├── script-advanced.js └── script-intermediate.js ├── 09_08 ├── components │ ├── Backpack.js │ └── data.js ├── index.html └── script.js ├── 10_01 ├── components │ ├── Backpack.js │ └── data.js ├── index.html └── script.js ├── 10_02 └── Photo.js ├── CONTRIBUTING.md ├── JavaScript Essential Training Resources.pdf ├── LICENSE ├── NOTICE ├── Practice ├── 03_07 │ ├── index.html │ └── script.js ├── 03_09 │ ├── index.html │ └── script.js ├── 03_12 │ ├── Backpack.js │ ├── index.html │ └── script.js ├── 05_04 │ ├── index.html │ └── script.js ├── 05_08 │ ├── index.html │ └── script.js ├── 08_06 │ ├── index.html │ └── script.js ├── 08_09 │ ├── index.html │ ├── script-example.js │ └── script.js └── 09_04 │ ├── index.html │ ├── script-example.js │ ├── script.js │ └── style.css ├── README.md ├── assets ├── images │ ├── everyday.svg │ └── frog.svg └── style.css ├── package-lock.json └── package.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | }, 6 | extends: "eslint:recommended", 7 | parserOptions: { 8 | ecmaVersion: 12, 9 | sourceType: "module", 10 | }, 11 | rules: {}, 12 | }; 13 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # Codeowners for these exercise files: 2 | # * (asterisk) deotes "all files and folders" 3 | # Example: * @producer @instructor 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | ## Issue Overview 9 | 10 | 11 | ## Describe your environment 12 | 13 | 14 | ## Steps to Reproduce 15 | 16 | 1. 17 | 2. 18 | 3. 19 | 4. 20 | 21 | ## Expected Behavior 22 | 23 | 24 | ## Current Behavior 25 | 26 | 27 | ## Possible Solution 28 | 29 | 30 | ## Screenshots / Video 31 | 32 | 33 | ## Related Issues 34 | 35 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .tmp 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.defaultFormatter": "esbenp.prettier-vscode" 4 | } -------------------------------------------------------------------------------- /01_01/Photo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Fragment from React Photo Gallery component. 3 | * By Sandra Gonzales @neptunian 4 | * @link https://github.com/neptunian/react-photo-gallery 5 | * The MIT License (MIT) 6 | * Copyright (c) 2015-2018 Sandra Gonzales 7 | */ 8 | 9 | import React from "react"; 10 | import PropTypes from "prop-types"; 11 | 12 | const imgWithClick = { cursor: "pointer" }; 13 | 14 | const Photo = ({ 15 | index, 16 | onClick, 17 | photo, 18 | margin, 19 | direction, 20 | top, 21 | left, 22 | key, 23 | }) => { 24 | const imgStyle = { margin: margin, display: "block" }; 25 | if (direction === "column") { 26 | imgStyle.position = "absolute"; 27 | imgStyle.left = left; 28 | imgStyle.top = top; 29 | } 30 | 31 | const handleClick = (event) => { 32 | onClick(event, { photo, index }); 33 | }; 34 | 35 | return ( 36 | 42 | ); 43 | }; 44 | 45 | export const photoPropType = PropTypes.shape({ 46 | key: PropTypes.string, 47 | src: PropTypes.string.isRequired, 48 | width: PropTypes.number.isRequired, 49 | height: PropTypes.number.isRequired, 50 | alt: PropTypes.string, 51 | title: PropTypes.string, 52 | srcSet: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), 53 | sizes: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), 54 | }); 55 | 56 | Photo.propTypes = { 57 | index: PropTypes.number.isRequired, 58 | onClick: PropTypes.func, 59 | photo: photoPropType.isRequired, 60 | margin: PropTypes.number, 61 | top: (props) => { 62 | if (props.direction === "column" && typeof props.top !== "number") { 63 | return new Error( 64 | "top is a required number when direction is set to `column`" 65 | ); 66 | } 67 | }, 68 | left: (props) => { 69 | if (props.direction === "column" && typeof props.left !== "number") { 70 | return new Error( 71 | "left is a required number when direction is set to `column`" 72 | ); 73 | } 74 | }, 75 | direction: PropTypes.string, 76 | }; 77 | 78 | export default Photo; 79 | -------------------------------------------------------------------------------- /01_04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /01_04/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a Backpack object, populate some HTML to display its properties. 3 | */ 4 | 5 | // Single line comment 6 | 7 | /* Multi-line comment 8 | See! this line is also commented out! */ 9 | 10 | const updateBackpack = (update) => { 11 | let main = document.querySelector("main"); // main is an element 12 | main.innerHTML = markup(backpack); 13 | console.info(update); 14 | }; 15 | 16 | const backpack = { 17 | name: "Everyday Backpack", 18 | volume: 30, 19 | color: "grey", 20 | pocketNum: 15, 21 | strapLength: { 22 | left: 26, 23 | right: 26, 24 | }, 25 | lidOpen: false, 26 | toggleLid: function (lidStatus) { 27 | this.lidOpen = lidStatus; 28 | updateBackpack(`Lid status changed.`); 29 | }, 30 | newStrapLength: function (lengthLeft, lengthRight) { 31 | this.strapLength.left = lengthLeft; 32 | this.strapLength.right = lengthRight; 33 | updateBackpack(`Strap lengths updated.`); 34 | }, 35 | }; 36 | 37 | const markup = (backpack) => { 38 | return ` 39 |
40 |

${backpack.name}

41 | 50 |
51 | `; 52 | }; 53 | 54 | const main = document.createElement("main"); 55 | main.innerHTML = markup(backpack); 56 | document.body.appendChild(main); 57 | -------------------------------------------------------------------------------- /01_05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /01_05/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a Backpack object, populate some HTML to display its properties. 3 | */ 4 | 5 | // Single line comment 6 | 7 | /* Multi-line comment 8 | See! this line is also commented out! */ 9 | 10 | const updateBackpack = (update) => { 11 | let main = document.querySelector("main"); // main is an element 12 | main.innerHTML = markup(backpack); 13 | console.info(update); 14 | }; 15 | 16 | const backpack = { 17 | name: "Everyday Backpack", 18 | volume: 30, 19 | color: "grey", 20 | pocketNum: 15, 21 | strapLength: { 22 | left: 26, 23 | right: 26, 24 | }, 25 | lidOpen: false, 26 | toggleLid: function (lidStatus) { 27 | this.lidOpen = lidStatus; 28 | updateBackpack(`Lid status changed.`); 29 | }, 30 | newStrapLength: function (lengthLeft, lengthRight) { 31 | this.strapLength.left = lengthLeft; 32 | this.strapLength.right = lengthRight; 33 | updateBackpack(`Strap lengths updated.`); 34 | }, 35 | }; 36 | 37 | const markup = (backpack) => { 38 | return ` 39 |
40 |

${backpack.name}

41 | 50 |
51 | `; 52 | }; 53 | 54 | const main = document.createElement("main"); 55 | main.innerHTML = markup(backpack); 56 | document.body.appendChild(main); 57 | -------------------------------------------------------------------------------- /01_06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /01_06/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a Backpack object, populate some HTML to display its properties. 3 | */ 4 | 5 | // Single line comment 6 | 7 | /* Multi-line comment 8 | See! this line is also commented out! */ 9 | 10 | const updateBackpack = (update) => { 11 | let main = document.querySelector("main"); // main is an element 12 | main.innerHTML = markup(backpack); 13 | console.info(update); 14 | }; 15 | 16 | const backpack = { 17 | name: "Everyday Backpack", 18 | volume: 30, 19 | color: "grey", 20 | pocketNum: 15, 21 | strapLength: { 22 | left: 26, 23 | right: 26, 24 | }, 25 | lidOpen: false, 26 | toggleLid: function (lidStatus) { 27 | this.lidOpen = lidStatus; 28 | updateBackpack(`Lid status changed.`); 29 | }, 30 | newStrapLength: function (lengthLeft, lengthRight) { 31 | this.strapLength.left = lengthLeft; 32 | this.strapLength.right = lengthRight; 33 | updateBackpack(`Strap lengths updated.`); 34 | }, 35 | }; 36 | 37 | const markup = (backpack) => { 38 | return ` 39 |
40 |

${backpack.name}

41 | 50 |
51 | `; 52 | }; 53 | 54 | const main = document.createElement("main"); 55 | main.innerHTML = markup(backpack); 56 | document.body.appendChild(main); 57 | -------------------------------------------------------------------------------- /02_01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Inline JavaScript 7 | 32 | 33 | 34 |
35 |
36 |

Inline JavaScript

37 |

38 | You can write JavaScript directly inside an HTML document using the 39 | script element. The element can be added in the 40 | head section or inside the body element. 41 |

42 |
43 |
44 | 45 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /02_02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Module demo 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /02_02/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a Backpack object, populate some HTML to display its properties. 3 | */ 4 | const updateBackpack = (update) => { 5 | let main = document.querySelector("main"); 6 | main.innerHTML = markup(backpack); 7 | console.info(update); 8 | }; 9 | 10 | const backpack = { 11 | name: "Everyday Backpack", 12 | volume: 30, 13 | color: "grey", 14 | pocketNum: 15, 15 | strapLength: { 16 | left: 26, 17 | right: 26, 18 | }, 19 | lidOpen: false, 20 | toggleLid: function (lidStatus) { 21 | this.lidOpen = lidStatus; 22 | updateBackpack(`Lid status changed.`); 23 | }, 24 | newStrapLength: function (lengthLeft, lengthRight) { 25 | this.strapLength.left = lengthLeft; 26 | this.strapLength.right = lengthRight; 27 | updateBackpack(`Strap lengths updated.`); 28 | }, 29 | }; 30 | 31 | const markup = (backpack) => { 32 | return ` 33 |
34 |

${backpack.name}

35 | 44 |
45 | `; 46 | }; 47 | 48 | const main = document.createElement("main"); 49 | main.innerHTML = markup(backpack); 50 | document.body.appendChild(main); 51 | -------------------------------------------------------------------------------- /02_03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Module demo 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /02_03/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a Backpack object, populate some HTML to display its properties. 3 | */ 4 | const updateBackpack = (update) => { 5 | let main = document.querySelector("main"); 6 | main.innerHTML = markup(backpack); 7 | console.info(update); 8 | }; 9 | 10 | const backpack = { 11 | name: "Everyday Backpack", 12 | volume: 30, 13 | color: "grey", 14 | pocketNum: 15, 15 | strapLength: { 16 | left: 26, 17 | right: 26, 18 | }, 19 | lidOpen: false, 20 | toggleLid: function (lidStatus) { 21 | this.lidOpen = lidStatus; 22 | updateBackpack(`Lid status changed.`); 23 | }, 24 | newStrapLength: function (lengthLeft, lengthRight) { 25 | this.strapLength.left = lengthLeft; 26 | this.strapLength.right = lengthRight; 27 | updateBackpack(`Strap lengths updated.`); 28 | }, 29 | }; 30 | 31 | const markup = (backpack) => { 32 | return ` 33 |
34 |

${backpack.name}

35 | 44 |
45 | `; 46 | }; 47 | 48 | const main = document.createElement("main"); 49 | main.innerHTML = markup(backpack); 50 | document.body.appendChild(main); 51 | -------------------------------------------------------------------------------- /02_04/backpack.js: -------------------------------------------------------------------------------- 1 | const updateBackpack = (update) => { 2 | let main = document.querySelector("main"); 3 | main.innerHTML = markup(backpack); 4 | console.info(update); 5 | }; 6 | 7 | const backpack = { 8 | name: "Everyday Backpack", 9 | volume: 30, 10 | color: "grey", 11 | pocketNum: 15, 12 | strapLength: { 13 | left: 26, 14 | right: 26, 15 | }, 16 | lidOpen: false, 17 | toggleLid: function (lidStatus) { 18 | this.lidOpen = lidStatus; 19 | updateBackpack(`Lid status changed.`); 20 | }, 21 | newStrapLength: function (lengthLeft, lengthRight) { 22 | this.strapLength.left = lengthLeft; 23 | this.strapLength.right = lengthRight; 24 | updateBackpack(`Strap lengths updated.`); 25 | }, 26 | }; 27 | 28 | export default backpack; 29 | -------------------------------------------------------------------------------- /02_04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Module demo 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /02_04/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a Backpack object, populate some HTML to display its properties. 3 | */ 4 | import backpack from "./backpack.js"; 5 | 6 | const markup = (backpack) => { 7 | return ` 8 |
9 |

${backpack.name}

10 | 19 |
20 | `; 21 | }; 22 | 23 | const main = document.createElement("main"); 24 | main.innerHTML = markup(backpack); 25 | document.body.appendChild(main); 26 | -------------------------------------------------------------------------------- /03_02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Building a JavaScript object from scratch 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /03_02/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a Backpack object. 3 | */ 4 | 5 | const backpack = { 6 | name: "Everyday Backpack", 7 | volume: 30, 8 | color: "grey", 9 | pocketNum: 15, 10 | strapLength: { 11 | left: 26, 12 | right: 26, 13 | }, 14 | lidOpen: false, 15 | toggleLid: function (lidStatus) { 16 | this.lidOpen = lidStatus; 17 | }, 18 | newStrapLength: function (lengthLeft, lengthRight) { 19 | this.strapLength.left = lengthLeft; 20 | this.strapLength.right = lengthRight; 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /03_03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Object container 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /03_03/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a Backpack object. 3 | */ 4 | 5 | const backpack = { 6 | name: "Everyday Backpack", 7 | volume: 30, 8 | color: "grey", 9 | pocketNum: 15, 10 | strapLength: { 11 | left: 26, 12 | right: 26, 13 | }, 14 | lidOpen: false, 15 | toggleLid: function (lidStatus) { 16 | this.lidOpen = lidStatus; 17 | }, 18 | newStrapLength: function (lengthLeft, lengthRight) { 19 | this.strapLength.left = lengthLeft; 20 | this.strapLength.right = lengthRight; 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /03_04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Object properties 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /03_04/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a Backpack object. 3 | */ 4 | 5 | const backpack = { 6 | name: "Everyday Backpack", 7 | volume: 30, 8 | color: "grey", 9 | pocketNum: 15, 10 | strapLength: { 11 | left: 26, 12 | right: 26, 13 | }, 14 | lidOpen: false, 15 | toggleLid: function (lidStatus) { 16 | this.lidOpen = lidStatus; 17 | }, 18 | newStrapLength: function (lengthLeft, lengthRight) { 19 | this.strapLength.left = lengthLeft; 20 | this.strapLength.right = lengthRight; 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /03_05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Accessing objects 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /03_05/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a Backpack object. 3 | */ 4 | 5 | const backpack = { 6 | name: "Everyday Backpack", 7 | volume: 30, 8 | color: "grey", 9 | pocketNum: 15, 10 | strapLength: { 11 | left: 26, 12 | right: 26, 13 | }, 14 | lidOpen: false, 15 | toggleLid: function (lidStatus) { 16 | this.lidOpen = lidStatus; 17 | }, 18 | newStrapLength: function (lengthLeft, lengthRight) { 19 | this.strapLength.left = lengthLeft; 20 | this.strapLength.right = lengthRight; 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /03_06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Accessing object properties 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /03_06/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a Backpack object. 3 | */ 4 | 5 | const backpack = { 6 | name: "Everyday Backpack", 7 | volume: 30, 8 | color: "grey", 9 | pocketNum: 15, 10 | strapLength: { 11 | left: 26, 12 | right: 26, 13 | }, 14 | lidOpen: false, 15 | toggleLid: function (lidStatus) { 16 | this.lidOpen = lidStatus; 17 | }, 18 | newStrapLength: function (lengthLeft, lengthRight) { 19 | this.strapLength.left = lengthLeft; 20 | this.strapLength.right = lengthRight; 21 | }, 22 | }; 23 | 24 | console.log("The backpack object:", backpack); 25 | -------------------------------------------------------------------------------- /03_08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Object methods 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /03_08/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a Backpack object. 3 | */ 4 | 5 | const backpack = { 6 | name: "Everyday Backpack", 7 | volume: 30, 8 | color: "grey", 9 | pocketNum: 15, 10 | strapLength: { 11 | left: 26, 12 | right: 26, 13 | }, 14 | lidOpen: false, 15 | toggleLid: function (lidStatus) { 16 | this.lidOpen = lidStatus; 17 | }, 18 | newStrapLength: function (lengthLeft, lengthRight) { 19 | this.strapLength.left = lengthLeft; 20 | this.strapLength.right = lengthRight; 21 | }, 22 | }; 23 | 24 | console.log("The backpack object:", backpack); 25 | console.log("The pocketNum value:", backpack.pocketNum); 26 | -------------------------------------------------------------------------------- /03_08e/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Object methods 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /03_08e/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a Backpack object. 3 | */ 4 | 5 | const backpack = { 6 | name: "Everyday Backpack", 7 | volume: 30, 8 | color: "grey", 9 | pocketNum: 15, 10 | strapLength: { 11 | left: 26, 12 | right: 26, 13 | }, 14 | lidOpen: false, 15 | toggleLid: function (lidStatus) { 16 | this.lidOpen = lidStatus; 17 | }, 18 | newStrapLength: function (lengthLeft, lengthRight) { 19 | this.strapLength.left = lengthLeft; 20 | this.strapLength.right = lengthRight; 21 | }, 22 | }; 23 | 24 | console.log("The backpack object:", backpack); 25 | console.log("The pocketNum value:", backpack.pocketNum); 26 | 27 | console.log("Left before:", backpack.strapLength.left); 28 | 29 | backpack.newStrapLength(10, 15); 30 | 31 | console.log("Left after:", backpack.strapLength.left); 32 | -------------------------------------------------------------------------------- /03_10/Backpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Creating classes: 3 | * 4 | * Class declaration: class Name {} 5 | * Class expression: const Name = class {} 6 | */ 7 | 8 | class Backpack { 9 | constructor( 10 | // Defines parameters: 11 | name, 12 | volume, 13 | color, 14 | pocketNum, 15 | strapLengthL, 16 | strapLengthR, 17 | lidOpen 18 | ) { 19 | // Define properties: 20 | this.name = name; 21 | this.volume = volume; 22 | this.color = color; 23 | this.pocketNum = pocketNum; 24 | this.strapLength = { 25 | left: strapLengthL, 26 | right: strapLengthR, 27 | }; 28 | this.lidOpen = lidOpen; 29 | } 30 | // Add methods like normal functions: 31 | toggleLid(lidStatus) { 32 | this.lidOpen = lidStatus; 33 | } 34 | newStrapLength(lengthLeft, lengthRight) { 35 | this.strapLength.left = lengthLeft; 36 | this.strapLength.right = lengthRight; 37 | } 38 | } 39 | 40 | export default Backpack; 41 | -------------------------------------------------------------------------------- /03_10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Classes 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /03_10/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a class for the Backpack object type. 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes 4 | */ 5 | import Backpack from "./Backpack.js"; 6 | 7 | const everydayPack = new Backpack( 8 | "Everyday Backpack", 9 | 30, 10 | "grey", 11 | 15, 12 | 26, 13 | 26, 14 | false 15 | ); 16 | 17 | console.log("The everydayPack object:", everydayPack); 18 | console.log("The pocketNum value:", everydayPack.pocketNum); 19 | -------------------------------------------------------------------------------- /03_11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Classes 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /03_11/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create an object constructor function for the Backpack object type. 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new 4 | */ 5 | 6 | function Backpack( 7 | name, 8 | volume, 9 | color, 10 | pocketNum, 11 | strapLengthL, 12 | strapLengthR, 13 | lidOpen 14 | ) { 15 | this.name = name; 16 | this.volume = volume; 17 | this.color = color; 18 | this.pocketNum = pocketNum; 19 | this.strapLength = { 20 | left: strapLengthL, 21 | right: strapLengthR, 22 | }; 23 | this.lidOpen = lidOpen; 24 | this.toggleLid = function (lidStatus) { 25 | this.lidOpen = lidStatus; 26 | }; 27 | this.newStrapLength = function (lengthLeft, lengthRight) { 28 | this.strapLength.left = lengthLeft; 29 | this.strapLength.right = lengthRight; 30 | }; 31 | } 32 | 33 | const everydayPack = new Backpack( 34 | "Everyday Backpack", 35 | 30, 36 | "grey", 37 | 15, 38 | 26, 39 | 26, 40 | false 41 | ); 42 | -------------------------------------------------------------------------------- /03_13/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired 11 | ) { 12 | this.name = name; 13 | this.volume = volume; 14 | this.color = color; 15 | this.pocketNum = pocketNum; 16 | this.strapLength = { 17 | left: strapLengthL, 18 | right: strapLengthR, 19 | }; 20 | this.lidOpen = lidOpen; 21 | this.dateAcquired = dateAcquired; 22 | } 23 | toggleLid(lidStatus) { 24 | this.lidOpen = lidStatus; 25 | } 26 | newStrapLength(lengthLeft, lengthRight) { 27 | this.strapLength.left = lengthLeft; 28 | this.strapLength.right = lengthRight; 29 | } 30 | backpackAge() { 31 | let now = new Date(); 32 | let acquired = new Date(this.dateAcquired); 33 | let elapsed = now - acquired; // elapsed time in milliseconds 34 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 35 | return daysSinceAcquired; 36 | } 37 | } 38 | 39 | export default Backpack; 40 | -------------------------------------------------------------------------------- /03_13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Classes 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /03_13/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Use the global Date() object to transform dates. 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date 4 | */ 5 | 6 | import Backpack from "./Backpack.js"; 7 | 8 | const everydayPack = new Backpack( 9 | "Everyday Backpack", 10 | 30, 11 | "grey", 12 | 15, 13 | 26, 14 | 26, 15 | false, 16 | "December 5, 2018 15:00:00 PST" 17 | ); 18 | 19 | console.log("The everydayPack object:", everydayPack); 20 | console.log("Date acquired:", everydayPack.dateAcquired); 21 | -------------------------------------------------------------------------------- /03_13e/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired 11 | ) { 12 | this.name = name; 13 | this.volume = volume; 14 | this.color = color; 15 | this.pocketNum = pocketNum; 16 | this.strapLength = { 17 | left: strapLengthL, 18 | right: strapLengthR, 19 | }; 20 | this.lidOpen = lidOpen; 21 | this.dateAcquired = dateAcquired; 22 | } 23 | toggleLid(lidStatus) { 24 | this.lidOpen = lidStatus; 25 | } 26 | newStrapLength(lengthLeft, lengthRight) { 27 | this.strapLength.left = lengthLeft; 28 | this.strapLength.right = lengthRight; 29 | } 30 | backpackAge() { 31 | let now = new Date(); 32 | let acquired = new Date(this.dateAcquired); 33 | let elapsed = now - acquired; // elapsed time in milliseconds 34 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 35 | return daysSinceAcquired; 36 | } 37 | } 38 | 39 | export default Backpack; 40 | -------------------------------------------------------------------------------- /03_13e/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Classes 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /03_13e/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Use the global Date() object to transform dates. 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date 4 | */ 5 | 6 | import Backpack from "./Backpack.js"; 7 | 8 | const everydayPack = new Backpack( 9 | "Everyday Backpack", 10 | 30, 11 | "grey", 12 | 15, 13 | 26, 14 | 26, 15 | false, 16 | "December 5, 2018 15:00:00 PST" 17 | ); 18 | 19 | console.log("The everydayPack object:", everydayPack); 20 | console.log("The pocketNum value:", everydayPack.pocketNum); 21 | console.log("Days since aquired:", everydayPack.backpackAge()); 22 | -------------------------------------------------------------------------------- /03_14/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired 11 | ) { 12 | this.name = name; 13 | this.volume = volume; 14 | this.color = color; 15 | this.pocketNum = pocketNum; 16 | this.strapLength = { 17 | left: strapLengthL, 18 | right: strapLengthR, 19 | }; 20 | this.lidOpen = lidOpen; 21 | this.dateAcquired = dateAcquired; 22 | } 23 | toggleLid(lidStatus) { 24 | this.lidOpen = lidStatus; 25 | } 26 | newStrapLength(lengthLeft, lengthRight) { 27 | this.strapLength.left = lengthLeft; 28 | this.strapLength.right = lengthRight; 29 | } 30 | backpackAge() { 31 | let now = new Date(); 32 | let acquired = new Date(this.dateAcquired); 33 | let elapsed = now - acquired; // elapsed time in milliseconds 34 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 35 | return daysSinceAcquired; 36 | } 37 | } 38 | 39 | export default Backpack; 40 | -------------------------------------------------------------------------------- /03_14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Challenge: Create a new object type 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /03_14/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Challenge: Create a new object type 3 | * 4 | * - Create a new object type "Book" using a class or an object constructor function. 5 | * - Add at least 5 book objects. 6 | */ 7 | 8 | import Backpack from "./Backpack.js"; 9 | 10 | const everydayPack = new Backpack( 11 | "Everyday Backpack", 12 | 30, 13 | "grey", 14 | 15, 15 | 26, 16 | 26, 17 | false, 18 | "December 5, 2018 15:00:00 PST" 19 | ); 20 | 21 | console.log("The everydayPack object:", everydayPack); 22 | console.log("The pocketNum value:", everydayPack.pocketNum); 23 | console.log("Days since aquired:", everydayPack.backpackAge()); 24 | -------------------------------------------------------------------------------- /03_15/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired 11 | ) { 12 | this.name = name; 13 | this.volume = volume; 14 | this.color = color; 15 | this.pocketNum = pocketNum; 16 | this.strapLength = { 17 | left: strapLengthL, 18 | right: strapLengthR, 19 | }; 20 | this.lidOpen = lidOpen; 21 | this.dateAcquired = dateAcquired; 22 | } 23 | toggleLid(lidStatus) { 24 | this.lidOpen = lidStatus; 25 | } 26 | newStrapLength(lengthLeft, lengthRight) { 27 | this.strapLength.left = lengthLeft; 28 | this.strapLength.right = lengthRight; 29 | } 30 | backpackAge() { 31 | let now = new Date(); 32 | let acquired = new Date(this.dateAcquired); 33 | let elapsed = now - acquired; // elapsed time in milliseconds 34 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 35 | return daysSinceAcquired; 36 | } 37 | } 38 | 39 | export default Backpack; 40 | -------------------------------------------------------------------------------- /03_15/Book.js: -------------------------------------------------------------------------------- 1 | class Book { 2 | constructor( 3 | title, 4 | author, 5 | ISBN, 6 | pubYear, 7 | pageNumber, 8 | currentPage, 9 | readStatus 10 | ) { 11 | this.title = title; 12 | this.author = author; 13 | this.ISBN = ISBN; 14 | this.pubYear = pubYear; 15 | this.pageNumber = pageNumber; 16 | this.currentPage = currentPage; 17 | this.readStatus = readStatus; 18 | } 19 | updateCurrentPage(newCurrentPage) { 20 | this.currentPage = newCurrentPage; 21 | } 22 | updateReadStatus(newReadStatus) { 23 | this.readStatus = newReadStatus; 24 | } 25 | } 26 | 27 | export default Book; 28 | -------------------------------------------------------------------------------- /03_15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Challenge: Create a new object type 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03_15/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Solution: Create a new object type 3 | * 4 | * - Create a new object type "Book" using a class or an object constructor function. 5 | * - Add at least 5 book objects. 6 | */ 7 | 8 | import Backpack from "./Backpack.js"; 9 | import Book from "./Book.js"; 10 | 11 | const everydayPack = new Backpack( 12 | "Everyday Backpack", 13 | 30, 14 | "grey", 15 | 15, 16 | 26, 17 | 26, 18 | false, 19 | "December 5, 2018 15:00:00 PST" 20 | ); 21 | 22 | console.log("The everydayPack object:", everydayPack); 23 | console.log("The pocketNum value:", everydayPack.pocketNum); 24 | console.log("Days since aquired:", everydayPack.backpackAge()); 25 | 26 | // Book param order: title, author, ISBN, pubYear, pageNumber, currentPage, readStatus 27 | const surveillanceCapitalism = new Book( 28 | "The Age of Surveillance Capitalism", 29 | "Shoshana Zuboff", 30 | 9781610395694, 31 | "2019", 32 | 691, 33 | 691, 34 | "Finished" 35 | ); 36 | console.log(surveillanceCapitalism); 37 | 38 | const consciousCreative = new Book( 39 | "The Conscious Creative", 40 | "Kelly Small", 41 | 9781487008024, 42 | "2020", 43 | 216, 44 | 216, 45 | "Finished" 46 | ); 47 | console.log(consciousCreative); 48 | 49 | const techVirtues = new Book( 50 | "Technology and the Virtues", 51 | "Shannon Vallor", 52 | 9780190905286, 53 | "2016", 54 | 309, 55 | 138, 56 | "Reading" 57 | ) 58 | console.log(techVirtues); 59 | 60 | const poohPhil = new Book( 61 | "Pooh and the Philosophers", 62 | "John Tyerman Williams", 63 | 9780749320706, 64 | "1995", 65 | 192, 66 | 108, 67 | "Reading" 68 | ) 69 | console.log(poohPhil); 70 | 71 | const zen = new Book( 72 | "Zen and the Art of Motorcycle Maintenance", 73 | "Robert M. Pirsig", 74 | 9780060958329, 75 | "1974", 76 | 449, 77 | 449, 78 | "Finished" 79 | ) 80 | console.log(zen); -------------------------------------------------------------------------------- /04_01/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired 11 | ) { 12 | this.name = name; 13 | this.volume = volume; 14 | this.color = color; 15 | this.pocketNum = pocketNum; 16 | this.strapLength = { 17 | left: strapLengthL, 18 | right: strapLengthR, 19 | }; 20 | this.lidOpen = lidOpen; 21 | this.dateAcquired = dateAcquired; 22 | } 23 | toggleLid(lidStatus) { 24 | this.lidOpen = lidStatus; 25 | } 26 | newStrapLength(lengthLeft, lengthRight) { 27 | this.strapLength.left = lengthLeft; 28 | this.strapLength.right = lengthRight; 29 | } 30 | backpackAge() { 31 | let now = new Date(); 32 | let acquired = new Date(this.dateAcquired); 33 | let elapsed = now - acquired; // elapsed time in milliseconds 34 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 35 | return daysSinceAcquired; 36 | } 37 | } 38 | 39 | export default Backpack; 40 | -------------------------------------------------------------------------------- /04_01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | String output 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Everyday Backpack

14 | 23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /04_01/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Use template literals to output HTML 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals 4 | * 5 | */ 6 | import Backpack from "./Backpack.js"; 7 | 8 | const everydayPack = new Backpack( 9 | "Everyday Backpack", 10 | 30, 11 | "grey", 12 | 15, 13 | 26, 14 | 26, 15 | false, 16 | "December 5, 2018 15:00:00 PST" 17 | ); 18 | 19 | console.log("The everydayPack object:", everydayPack); 20 | console.log("The pocketNum value:", everydayPack.pocketNum); 21 | console.log("Days since aquired:", everydayPack.backpackAge()); 22 | -------------------------------------------------------------------------------- /04_01e/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired 11 | ) { 12 | this.name = name; 13 | this.volume = volume; 14 | this.color = color; 15 | this.pocketNum = pocketNum; 16 | this.strapLength = { 17 | left: strapLengthL, 18 | right: strapLengthR, 19 | }; 20 | this.lidOpen = lidOpen; 21 | this.dateAcquired = dateAcquired; 22 | } 23 | toggleLid(lidStatus) { 24 | this.lidOpen = lidStatus; 25 | } 26 | newStrapLength(lengthLeft, lengthRight) { 27 | this.strapLength.left = lengthLeft; 28 | this.strapLength.right = lengthRight; 29 | } 30 | backpackAge() { 31 | let now = new Date(); 32 | let acquired = new Date(this.dateAcquired); 33 | let elapsed = now - acquired; // elapsed time in milliseconds 34 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 35 | return daysSinceAcquired; 36 | } 37 | } 38 | 39 | export default Backpack; 40 | -------------------------------------------------------------------------------- /04_01e/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | String output 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /04_01e/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Use template literals to output HTML 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals 4 | * 5 | */ 6 | import Backpack from "./Backpack.js"; 7 | 8 | const everydayPack = new Backpack( 9 | "Everyday Pack", 10 | 30, 11 | "grey", 12 | 15, 13 | 26, 14 | 26, 15 | false, 16 | "December 5, 2018 15:00:00 PST" 17 | ); 18 | 19 | const content = ` 20 |
21 |
22 |

${everydayPack.name}

23 | 32 |
33 |
34 | `; 35 | 36 | document.body.innerHTML = content; 37 | 38 | console.log("The everydayPack object:", everydayPack); 39 | console.log("The pocketNum value:", everydayPack.pocketNum); 40 | console.log("Days since aquired:", everydayPack.backpackAge()); 41 | -------------------------------------------------------------------------------- /04_02/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired 11 | ) { 12 | this.name = name; 13 | this.volume = volume; 14 | this.color = color; 15 | this.pocketNum = pocketNum; 16 | this.strapLength = { 17 | left: strapLengthL, 18 | right: strapLengthR, 19 | }; 20 | this.lidOpen = lidOpen; 21 | this.dateAcquired = dateAcquired; 22 | } 23 | toggleLid(lidStatus) { 24 | this.lidOpen = lidStatus; 25 | } 26 | newStrapLength(lengthLeft, lengthRight) { 27 | this.strapLength.left = lengthLeft; 28 | this.strapLength.right = lengthRight; 29 | } 30 | backpackAge() { 31 | let now = new Date(); 32 | let acquired = new Date(this.dateAcquired); 33 | let elapsed = now - acquired; // elapsed time in milliseconds 34 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 35 | return daysSinceAcquired; 36 | } 37 | } 38 | 39 | export default Backpack; 40 | -------------------------------------------------------------------------------- /04_02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | String output 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /04_02/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Use template literals to output HTML 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals 4 | * 5 | */ 6 | import Backpack from "./Backpack.js"; 7 | 8 | const everydayPack = new Backpack( 9 | "Everyday Pack", 10 | 30, 11 | "grey", 12 | 15, 13 | 26, 14 | 26, 15 | false, 16 | "December 5, 2018 15:00:00 PST" 17 | ); 18 | 19 | const content = ` 20 |
21 |
22 |

${everydayPack.name}

23 | 32 |
33 |
34 | `; 35 | 36 | document.body.innerHTML = content; 37 | 38 | console.log("The everydayPack object:", everydayPack); 39 | console.log("The pocketNum value:", everydayPack.pocketNum); 40 | console.log("Days since aquired:", everydayPack.backpackAge()); 41 | -------------------------------------------------------------------------------- /04_02e/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired 11 | ) { 12 | this.name = name; 13 | this.volume = volume; 14 | this.color = color; 15 | this.pocketNum = pocketNum; 16 | this.strapLength = { 17 | left: strapLengthL, 18 | right: strapLengthR, 19 | }; 20 | this.lidOpen = lidOpen; 21 | this.dateAcquired = dateAcquired; 22 | } 23 | toggleLid(lidStatus) { 24 | this.lidOpen = lidStatus; 25 | } 26 | newStrapLength(lengthLeft, lengthRight) { 27 | this.strapLength.left = lengthLeft; 28 | this.strapLength.right = lengthRight; 29 | } 30 | backpackAge() { 31 | let now = new Date(); 32 | let acquired = new Date(this.dateAcquired); 33 | let elapsed = now - acquired; // elapsed time in milliseconds 34 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 35 | return daysSinceAcquired; 36 | } 37 | } 38 | 39 | export default Backpack; 40 | -------------------------------------------------------------------------------- /04_02e/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | String output 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /04_02e/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Use template literals to output HTML 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals 4 | * 5 | */ 6 | import Backpack from "./Backpack.js"; 7 | 8 | const everydayPack = new Backpack( 9 | "Everyday Pack", 10 | 30, 11 | "grey", 12 | 15, 13 | 26, 14 | 26, 15 | false, 16 | "December 5, 2018 15:00:00 PST" 17 | ); 18 | 19 | const content = "

" + everydayPack.name + "

"; 20 | 21 | document.body.innerHTML = content; 22 | 23 | console.log("The everydayPack object:", everydayPack); 24 | console.log("The pocketNum value:", everydayPack.pocketNum); 25 | console.log("Days since aquired:", everydayPack.backpackAge()); 26 | -------------------------------------------------------------------------------- /05_02/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired, 11 | image 12 | ) { 13 | this.name = name; 14 | this.volume = volume; 15 | this.color = color; 16 | this.pocketNum = pocketNum; 17 | this.strapLength = { 18 | left: strapLengthL, 19 | right: strapLengthR, 20 | }; 21 | this.lidOpen = lidOpen; 22 | this.dateAcquired = dateAcquired; 23 | this.image = image; 24 | } 25 | toggleLid(lidStatus) { 26 | this.lidOpen = lidStatus; 27 | } 28 | newStrapLength(lengthLeft, lengthRight) { 29 | this.strapLength.left = lengthLeft; 30 | this.strapLength.right = lengthRight; 31 | } 32 | backpackAge() { 33 | let now = new Date(); 34 | let acquired = new Date(this.dateAcquired); 35 | let elapsed = now - acquired; // elapsed time in milliseconds 36 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 37 | return daysSinceAcquired; 38 | } 39 | } 40 | 41 | export default Backpack; 42 | -------------------------------------------------------------------------------- /05_02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 |
22 |
BackpackPacker
23 |
All backpack packing, all the time.
24 |
25 |
26 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /05_02/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Traverse the DOM tree using querySelector() and querySelectorAll() 3 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector 4 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll 5 | */ 6 | 7 | import Backpack from "./Backpack.js"; 8 | 9 | const everydayPack = new Backpack( 10 | "Everyday Backpack", 11 | 30, 12 | "grey", 13 | 15, 14 | 26, 15 | 26, 16 | false, 17 | "December 5, 2018 15:00:00 PST", 18 | "../assets/images/everyday.svg" 19 | ); 20 | 21 | const main = document.querySelector(".maincontent"); 22 | 23 | const content = ` 24 |
25 |
26 | 27 |
28 |

${everydayPack.name}

29 | 48 |
49 | `; 50 | 51 | main.innerHTML = content; 52 | -------------------------------------------------------------------------------- /05_03/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired, 11 | image 12 | ) { 13 | this.name = name; 14 | this.volume = volume; 15 | this.color = color; 16 | this.pocketNum = pocketNum; 17 | this.strapLength = { 18 | left: strapLengthL, 19 | right: strapLengthR, 20 | }; 21 | this.lidOpen = lidOpen; 22 | this.dateAcquired = dateAcquired; 23 | this.image = image; 24 | } 25 | toggleLid(lidStatus) { 26 | this.lidOpen = lidStatus; 27 | } 28 | newStrapLength(lengthLeft, lengthRight) { 29 | this.strapLength.left = lengthLeft; 30 | this.strapLength.right = lengthRight; 31 | } 32 | backpackAge() { 33 | let now = new Date(); 34 | let acquired = new Date(this.dateAcquired); 35 | let elapsed = now - acquired; // elapsed time in milliseconds 36 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 37 | return daysSinceAcquired; 38 | } 39 | } 40 | 41 | export default Backpack; 42 | -------------------------------------------------------------------------------- /05_03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 |
22 |
BackpackPacker
23 |
All backpack packing, all the time.
24 |
25 |
26 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /05_03/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Traverse the DOM tree using querySelector() and querySelectorAll() 3 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector 4 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll 5 | */ 6 | 7 | import Backpack from "./Backpack.js"; 8 | 9 | const everydayPack = new Backpack( 10 | "Everyday Backpack", 11 | 30, 12 | "grey", 13 | 15, 14 | 26, 15 | 26, 16 | false, 17 | "December 5, 2018 15:00:00 PST", 18 | "../assets/images/everyday.svg" 19 | ); 20 | 21 | const main = document.querySelector(".maincontent"); 22 | 23 | const content = ` 24 |
25 |
26 | 27 |
28 |

${everydayPack.name}

29 | 50 |
51 | `; 52 | 53 | main.innerHTML = content; 54 | -------------------------------------------------------------------------------- /05_05/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired, 11 | image 12 | ) { 13 | this.name = name; 14 | this.volume = volume; 15 | this.color = color; 16 | this.pocketNum = pocketNum; 17 | this.strapLength = { 18 | left: strapLengthL, 19 | right: strapLengthR, 20 | }; 21 | this.lidOpen = lidOpen; 22 | this.dateAcquired = dateAcquired; 23 | this.image = image; 24 | } 25 | toggleLid(lidStatus) { 26 | this.lidOpen = lidStatus; 27 | } 28 | newStrapLength(lengthLeft, lengthRight) { 29 | this.strapLength.left = lengthLeft; 30 | this.strapLength.right = lengthRight; 31 | } 32 | backpackAge() { 33 | let now = new Date(); 34 | let acquired = new Date(this.dateAcquired); 35 | let elapsed = now - acquired; // elapsed time in milliseconds 36 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 37 | return daysSinceAcquired; 38 | } 39 | } 40 | 41 | export default Backpack; 42 | -------------------------------------------------------------------------------- /05_05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 |
22 |
BackpackPacker
23 |
All backpack packing, all the time.
24 |
25 |
26 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /05_05/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Traverse the DOM tree using querySelector() and querySelectorAll() 3 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector 4 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll 5 | */ 6 | 7 | import Backpack from "./Backpack.js"; 8 | 9 | const everydayPack = new Backpack( 10 | "Everyday Backpack", 11 | 30, 12 | "grey", 13 | 15, 14 | 26, 15 | 26, 16 | false, 17 | "December 5, 2018 15:00:00 PST", 18 | "../assets/images/everyday.svg" 19 | ); 20 | 21 | const main = document.querySelector(".maincontent"); 22 | 23 | const content = ` 24 |
25 |
26 | 27 |
28 |

${everydayPack.name}

29 | 50 |
51 | `; 52 | 53 | main.innerHTML = content; 54 | -------------------------------------------------------------------------------- /05_06/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired, 11 | image 12 | ) { 13 | this.name = name; 14 | this.volume = volume; 15 | this.color = color; 16 | this.pocketNum = pocketNum; 17 | this.strapLength = { 18 | left: strapLengthL, 19 | right: strapLengthR, 20 | }; 21 | this.lidOpen = lidOpen; 22 | this.dateAcquired = dateAcquired; 23 | this.image = image; 24 | } 25 | toggleLid(lidStatus) { 26 | this.lidOpen = lidStatus; 27 | } 28 | newStrapLength(lengthLeft, lengthRight) { 29 | this.strapLength.left = lengthLeft; 30 | this.strapLength.right = lengthRight; 31 | } 32 | backpackAge() { 33 | let now = new Date(); 34 | let acquired = new Date(this.dateAcquired); 35 | let elapsed = now - acquired; // elapsed time in milliseconds 36 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 37 | return daysSinceAcquired; 38 | } 39 | } 40 | 41 | export default Backpack; 42 | -------------------------------------------------------------------------------- /05_06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 |
22 |
BackpackPacker
23 |
All backpack packing, all the time.
24 |
25 |
26 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /05_06/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Traverse the DOM tree using querySelector() and querySelectorAll() 3 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector 4 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll 5 | */ 6 | 7 | import Backpack from "./Backpack.js"; 8 | 9 | const everydayPack = new Backpack( 10 | "Everyday Backpack", 11 | 30, 12 | "grey", 13 | 15, 14 | 26, 15 | 26, 16 | false, 17 | "December 5, 2018 15:00:00 PST", 18 | "../assets/images/everyday.svg" 19 | ); 20 | 21 | const main = document.querySelector(".maincontent"); 22 | 23 | const content = ` 24 |
25 |
26 | 27 |
28 |

${everydayPack.name}

29 | 50 |
51 | `; 52 | 53 | main.innerHTML = content; 54 | -------------------------------------------------------------------------------- /05_07/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired, 11 | image 12 | ) { 13 | this.name = name; 14 | this.volume = volume; 15 | this.color = color; 16 | this.pocketNum = pocketNum; 17 | this.strapLength = { 18 | left: strapLengthL, 19 | right: strapLengthR, 20 | }; 21 | this.lidOpen = lidOpen; 22 | this.dateAcquired = dateAcquired; 23 | this.image = image; 24 | } 25 | toggleLid(lidStatus) { 26 | this.lidOpen = lidStatus; 27 | } 28 | newStrapLength(lengthLeft, lengthRight) { 29 | this.strapLength.left = lengthLeft; 30 | this.strapLength.right = lengthRight; 31 | } 32 | backpackAge() { 33 | let now = new Date(); 34 | let acquired = new Date(this.dateAcquired); 35 | let elapsed = now - acquired; // elapsed time in milliseconds 36 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 37 | return daysSinceAcquired; 38 | } 39 | } 40 | 41 | export default Backpack; 42 | -------------------------------------------------------------------------------- /05_07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 |
22 |
BackpackPacker
23 |
All backpack packing, all the time.
24 |
25 |
26 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /05_07/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Traverse the DOM tree using querySelector() and querySelectorAll() 3 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector 4 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll 5 | */ 6 | 7 | import Backpack from "./Backpack.js"; 8 | 9 | const everydayPack = new Backpack( 10 | "Everyday Backpack", 11 | 30, 12 | "grey", 13 | 15, 14 | 26, 15 | 26, 16 | false, 17 | "December 5, 2018 15:00:00 PST", 18 | "../assets/images/everyday.svg" 19 | ); 20 | 21 | const main = document.querySelector(".maincontent"); 22 | 23 | const content = ` 24 |
25 |
26 | 27 |
28 |

${everydayPack.name}

29 | 50 |
51 | `; 52 | 53 | main.innerHTML = content; 54 | -------------------------------------------------------------------------------- /05_09/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired, 11 | image 12 | ) { 13 | this.name = name; 14 | this.volume = volume; 15 | this.color = color; 16 | this.pocketNum = pocketNum; 17 | this.strapLength = { 18 | left: strapLengthL, 19 | right: strapLengthR, 20 | }; 21 | this.lidOpen = lidOpen; 22 | this.dateAcquired = dateAcquired; 23 | this.image = image; 24 | } 25 | toggleLid(lidStatus) { 26 | this.lidOpen = lidStatus; 27 | } 28 | newStrapLength(lengthLeft, lengthRight) { 29 | this.strapLength.left = lengthLeft; 30 | this.strapLength.right = lengthRight; 31 | } 32 | backpackAge() { 33 | let now = new Date(); 34 | let acquired = new Date(this.dateAcquired); 35 | let elapsed = now - acquired; // elapsed time in milliseconds 36 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 37 | return daysSinceAcquired; 38 | } 39 | } 40 | 41 | export default Backpack; 42 | -------------------------------------------------------------------------------- /05_09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 |
22 |
BackpackPacker
23 |
All backpack packing, all the time.
24 |
25 |
26 |
27 |

A pack for every purpose

28 |

29 | If you're carrying a heavy load, you can't find a better tool than a 30 | backpack. Distributing the weight evenly across your shoulders, back, 31 | and hips, the backpack lets you use the natural frame of your body to 32 | literally shoulder the weight while your legs do the 33 | carrying. 34 |

35 |
36 |
37 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /05_09/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Traverse the DOM tree using querySelector() and querySelectorAll() 3 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector 4 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll 5 | */ 6 | 7 | import Backpack from "./Backpack.js"; 8 | 9 | const everydayPack = new Backpack( 10 | "Everyday Backpack", 11 | 30, 12 | "grey", 13 | 15, 14 | 26, 15 | 26, 16 | false, 17 | "December 5, 2018 15:00:00 PST", 18 | "../assets/images/everyday.svg" 19 | ); 20 | 21 | const content = ` 22 |
23 |
24 | 25 |
26 |

${everydayPack.name}

27 | 48 |
49 | `; 50 | 51 | const main = document.querySelector(".maincontent"); 52 | 53 | main.innerHTML = content; 54 | -------------------------------------------------------------------------------- /05_09e/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired, 11 | image 12 | ) { 13 | this.name = name; 14 | this.volume = volume; 15 | this.color = color; 16 | this.pocketNum = pocketNum; 17 | this.strapLength = { 18 | left: strapLengthL, 19 | right: strapLengthR, 20 | }; 21 | this.lidOpen = lidOpen; 22 | this.dateAcquired = dateAcquired; 23 | this.image = image; 24 | } 25 | toggleLid(lidStatus) { 26 | this.lidOpen = lidStatus; 27 | } 28 | newStrapLength(lengthLeft, lengthRight) { 29 | this.strapLength.left = lengthLeft; 30 | this.strapLength.right = lengthRight; 31 | } 32 | backpackAge() { 33 | let now = new Date(); 34 | let acquired = new Date(this.dateAcquired); 35 | let elapsed = now - acquired; // elapsed time in milliseconds 36 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 37 | return daysSinceAcquired; 38 | } 39 | } 40 | 41 | export default Backpack; 42 | -------------------------------------------------------------------------------- /05_09e/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 |
22 |
BackpackPacker
23 |
All backpack packing, all the time.
24 |
25 |
26 |
27 |

A pack for every purpose

28 |

29 | If you're carrying a heavy load, you can't find a better tool than a 30 | backpack. Distributing the weight evenly across your shoulders, back, 31 | and hips, the backpack lets you use the natural frame of your body to 32 | literally shoulder the weight while your legs do the 33 | carrying. 34 |

35 |
36 |
37 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /05_09e/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Traverse the DOM tree using querySelector() and querySelectorAll() 3 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector 4 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll 5 | */ 6 | 7 | import Backpack from "./Backpack.js"; 8 | 9 | const everydayPack = new Backpack( 10 | "Everyday Backpack", 11 | 30, 12 | "grey", 13 | 15, 14 | 26, 15 | 26, 16 | false, 17 | "December 5, 2018 15:00:00 PST", 18 | "../assets/images/everyday.svg" 19 | ); 20 | 21 | const content = ` 22 | 23 |
24 | 25 |
26 |

${everydayPack.name}

27 | 48 | 49 | `; 50 | 51 | const main = document.querySelector(".maincontent"); 52 | 53 | const newArticle = document.createElement("article"); 54 | newArticle.classList.add("backpack"); 55 | newArticle.setAttribute("id", "everyday"); 56 | newArticle.innerHTML = content; 57 | 58 | main.append(newArticle); 59 | -------------------------------------------------------------------------------- /05_10/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired, 11 | image 12 | ) { 13 | this.name = name; 14 | this.volume = volume; 15 | this.color = color; 16 | this.pocketNum = pocketNum; 17 | this.strapLength = { 18 | left: strapLengthL, 19 | right: strapLengthR, 20 | }; 21 | this.lidOpen = lidOpen; 22 | this.dateAcquired = dateAcquired; 23 | this.image = image; 24 | } 25 | toggleLid(lidStatus) { 26 | this.lidOpen = lidStatus; 27 | } 28 | newStrapLength(lengthLeft, lengthRight) { 29 | this.strapLength.left = lengthLeft; 30 | this.strapLength.right = lengthRight; 31 | } 32 | backpackAge() { 33 | let now = new Date(); 34 | let acquired = new Date(this.dateAcquired); 35 | let elapsed = now - acquired; // elapsed time in milliseconds 36 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 37 | return daysSinceAcquired; 38 | } 39 | } 40 | 41 | export default Backpack; 42 | -------------------------------------------------------------------------------- /05_10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 |
22 |
BackpackPacker
23 |
All backpack packing, all the time.
24 |
25 |
26 |
27 |

A pack for every purpose

28 |

29 | If you're carrying a heavy load, you can't find a better tool than a 30 | backpack. Distributing the weight evenly across your shoulders, back, 31 | and hips, the backpack lets you use the natural frame of your body to 32 | literally shoulder the weight while your legs do the 33 | carrying. 34 |

35 |
36 |
37 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /05_10/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Challenge: Add a new element 3 | * - In JavaScript, create a new element to hold a navigation menu 4 | * - Add an unordered list and a series of no less than five links to the list 5 | * - Use single words like “home”, “about”, etc for the list items and set the src attribute to # for simplicity 6 | * - Add the new navigation element to the DOM directly after the header 7 | * - Write basic CSS and add classes as necessary to create a horizontal layout for the menu. 8 | * - A tip: Use either display flex or display grid to create the horizontal menu. 9 | */ 10 | 11 | import Backpack from "./Backpack.js"; 12 | 13 | const everydayPack = new Backpack( 14 | "Everyday Backpack", 15 | 30, 16 | "grey", 17 | 15, 18 | 26, 19 | 26, 20 | false, 21 | "December 5, 2018 15:00:00 PST", 22 | "../assets/images/everyday.svg" 23 | ); 24 | 25 | const content = ` 26 | 27 |
28 | 29 |
30 |

Everyday Backpack

31 | 52 | 53 | `; 54 | 55 | const main = document.querySelector(".maincontent"); 56 | 57 | const newArticle = document.createElement("article"); 58 | newArticle.classList.add("backpack"); 59 | newArticle.setAttribute("id", "everyday"); 60 | newArticle.innerHTML = content; 61 | 62 | main.append(newArticle); 63 | -------------------------------------------------------------------------------- /05_11/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired, 11 | image 12 | ) { 13 | this.name = name; 14 | this.volume = volume; 15 | this.color = color; 16 | this.pocketNum = pocketNum; 17 | this.strapLength = { 18 | left: strapLengthL, 19 | right: strapLengthR, 20 | }; 21 | this.lidOpen = lidOpen; 22 | this.dateAcquired = dateAcquired; 23 | this.image = image; 24 | } 25 | toggleLid(lidStatus) { 26 | this.lidOpen = lidStatus; 27 | } 28 | newStrapLength(lengthLeft, lengthRight) { 29 | this.strapLength.left = lengthLeft; 30 | this.strapLength.right = lengthRight; 31 | } 32 | backpackAge() { 33 | let now = new Date(); 34 | let acquired = new Date(this.dateAcquired); 35 | let elapsed = now - acquired; // elapsed time in milliseconds 36 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 37 | return daysSinceAcquired; 38 | } 39 | } 40 | 41 | export default Backpack; 42 | -------------------------------------------------------------------------------- /05_11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 33 | 34 | 35 | 36 | 37 | 38 |
39 |
BackpackPacker
40 |
All backpack packing, all the time.
41 |
42 |
43 |
44 |

A pack for every purpose

45 |

46 | If you're carrying a heavy load, you can't find a better tool than a 47 | backpack. Distributing the weight evenly across your shoulders, back, 48 | and hips, the backpack lets you use the natural frame of your body to 49 | literally shoulder the weight while your legs do the 50 | carrying. 51 |

52 |
53 |
54 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /06_02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /06_02/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * The var statement 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var 4 | */ 5 | -------------------------------------------------------------------------------- /06_03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 44 | 45 | 46 | 47 |
48 |

When var and scope collide!

49 |
color: green
50 |
color: green
51 |
52 | 53 | 54 | -------------------------------------------------------------------------------- /06_03/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Scope and the var statement 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var 4 | */ 5 | 6 | var color = "purple"; 7 | 8 | document.querySelector(".left").style.backgroundColor = color; 9 | document.querySelector(".left .color-value").innerHTML = color; 10 | 11 | document.querySelector(".right").style.backgroundColor = color; 12 | document.querySelector(".right .color-value").innerHTML = color; 13 | 14 | // function headingColor() { 15 | // color = "blue"; 16 | // document.querySelector(".title").style.color = color; 17 | // } 18 | 19 | // headingColor(); 20 | -------------------------------------------------------------------------------- /06_04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 43 | 44 | 45 | 46 |
47 |

When var and scope collide!

48 |
color: green
49 |
color: green
50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /06_04/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * The let statement 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let 4 | */ 5 | 6 | var color = "purple"; 7 | 8 | document.querySelector(".left").style.backgroundColor = color; 9 | document.querySelector(".left .color-value").innerHTML = color; 10 | 11 | color = "skyblue"; 12 | 13 | function headingColor() { 14 | color = "blue"; 15 | document.querySelector(".title").style.color = color; 16 | } 17 | 18 | headingColor(); 19 | 20 | document.querySelector(".right").style.backgroundColor = color; 21 | document.querySelector(".right .color-value").innerHTML = color; 22 | -------------------------------------------------------------------------------- /06_05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 43 | 44 | 45 | 46 |
47 |

When var and scope collide!

48 |
color: green
49 |
color: green
50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /06_05/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * The const statement 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const 4 | */ 5 | 6 | let color = "purple"; 7 | 8 | document.querySelector(".left").style.backgroundColor = color; 9 | document.querySelector(".left .color-value").innerHTML = color; 10 | 11 | color = "skyblue"; 12 | 13 | function headingColor() { 14 | let color = "blue"; 15 | document.querySelector(".title").style.color = color; 16 | } 17 | 18 | headingColor(); 19 | 20 | document.querySelector(".right").style.backgroundColor = color; 21 | document.querySelector(".right .color-value").innerHTML = color; 22 | -------------------------------------------------------------------------------- /06_06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /06_06/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Data types in JavaScript 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures 4 | */ 5 | 6 | // String: 7 | let stringDemo = "A string of text."; 8 | console.log("String:", stringDemo); 9 | 10 | // Numbes: 11 | let integerDemo = 4; 12 | console.log("Integer:", integerDemo); 13 | 14 | let floatDemo = 5.6; 15 | console.log("Floating point number:", floatDemo); 16 | 17 | // Boolean: 18 | let booleanDemo = true; 19 | console.log("Boolean value:", booleanDemo); 20 | 21 | // Null value (nothing): 22 | let nullDemo = null; 23 | console.log("Null value:", nullDemo); 24 | 25 | // Undefined: 26 | let undefinedDemo; 27 | console.log("Undefined:", undefinedDemo); 28 | 29 | let undefinedAssignedDemo = undefined; 30 | console.log("Undefined assigned:", undefinedAssignedDemo); 31 | 32 | // Object: 33 | const objectDemo = { 34 | dance: "Mambo", 35 | number: 5, 36 | }; 37 | console.log("Object:", objectDemo); 38 | 39 | // Array: 40 | const arrayDemo = ["tango", "foxtrot", "waltz", "rumba", "bolero"]; 41 | console.log("Array:", arrayDemo); 42 | -------------------------------------------------------------------------------- /06_07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /06_07/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Assignment vs comparison 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#Relational_operators 4 | */ 5 | 6 | let a = 5; 7 | let b = 4; 8 | 9 | console.log(`let a: ${a} (${typeof a})`); 10 | console.log(`let b: ${b} (${typeof b})`); 11 | 12 | if (a == b) { 13 | console.log(`Match! let a and let b are the same value.`); 14 | } else { 15 | console.error(`No match: let a and let b are NOT same value.`); 16 | } 17 | -------------------------------------------------------------------------------- /06_08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /06_08/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Arithmetic operators 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#Arithmetic_operators 4 | */ 5 | 6 | let a = 5; 7 | let b = 4; 8 | let c = 3.2; 9 | 10 | console.log(`let a: ${a} (${typeof a})`); 11 | console.log(`let b: ${b} (${typeof b})`); 12 | console.log(`let c: ${c} (${typeof c})`); 13 | 14 | let result = a + b; 15 | 16 | console.log("Result: ", result); 17 | -------------------------------------------------------------------------------- /07_02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /07_02/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Working with arrays 3 | * @link https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays 4 | */ 5 | 6 | let item = "flashlight"; 7 | 8 | const collection = ["Piggy", item, 5, true]; 9 | 10 | console.log(collection); 11 | -------------------------------------------------------------------------------- /07_03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /07_03/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Working with array methods 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Instance_methods 4 | */ 5 | 6 | let backpackContents = ["piggy", "headlamp", "pen"]; 7 | 8 | console.log(backpackContents); 9 | 10 | // backpackContents.forEach(function (item) { 11 | // item = `
  • ${item}
    • `; 12 | // console.log(item); 13 | // }); 14 | 15 | // let longItems = backpackContents.find(function (item) { 16 | // if (item.length >= 5) { 17 | // return item; 18 | // } 19 | // }); 20 | // console.log("longItems:", longItems); 21 | -------------------------------------------------------------------------------- /07_04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Challenge: Build and modify an array 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /07_04/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Challenge: Build and modify an array 3 | * - Build an array with 8 items 4 | * - Remove the last item 5 | * - Add the last item as the first item on the array 6 | * - Sort the items by alphabetical order 7 | * - Use the find() method to find a specific item in the array 8 | * - Remove the item you found using the find method from the array. 9 | */ 10 | 11 | 12 | -------------------------------------------------------------------------------- /07_05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Challenge: Build and modify an array 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /07_05/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Solution: Build and modify an array 3 | * - Build an array with 8 items 4 | * - Remove the last item 5 | * - Add the last item as the first item on the array 6 | * - Sort the items by alphabetical order 7 | * - Use the find() method to find a specific item in the array 8 | * - Remove the item you found using the find method from the array. 9 | */ 10 | 11 | const deskArray = [ 12 | "pen", 13 | "camera", 14 | "phone", 15 | "notebook", 16 | "headphones", 17 | "lightbulb", 18 | "usb drive", 19 | ]; 20 | console.log("Original array:", deskArray); 21 | 22 | // Remove the last item: 23 | // @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop 24 | // deskArray.pop(); 25 | // console.log("New array:", deskArray); 26 | 27 | // Add last item as the first item on the array: 28 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift 29 | // deskArray.unshift(deskArray.pop()); 30 | // console.log("Last item is now first:", deskArray); 31 | 32 | // Sort items by alphabetical order: 33 | // @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort 34 | // deskArray.sort(); 35 | // console.log("Sorted array:", deskArray); 36 | 37 | // Find "notebook": 38 | // @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find 39 | // const foundItem = deskArray.find((item) => item === "notebook"); 40 | // console.log("Found item:", foundItem); 41 | 42 | // Find and remove an item: 43 | // @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice 44 | // @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf 45 | // let remove = "notebook"; 46 | // deskArray.splice(deskArray.indexOf(remove), 1); 47 | // console.log(`Array with "${remove}" removed:`, deskArray); 48 | -------------------------------------------------------------------------------- /08_02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /08_02/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Working with functions 3 | * @link https://developer.mozilla.org/en-US/docs/Glossary/Function 4 | */ 5 | 6 | // Function declaration: 7 | function doSomeMath(a, b) { 8 | let c = a + b; 9 | return c; 10 | } 11 | 12 | // Function expression: 13 | const doMoreMath = function (a = 3, b = 2) { 14 | let c = a * b; 15 | return c; 16 | }; 17 | 18 | console.log("Do some math:", doSomeMath(5, 6)); 19 | console.log("Do more math:", doMoreMath(5, 6)); 20 | 21 | // Immediately Invoked Function Expression (IIFE) 22 | // (function () { 23 | // let a = 4; 24 | // let b = 6; 25 | // let c = doSomeMath(a, b); 26 | // console.log(`The sum of a and b is: ${c}`); 27 | // })(); 28 | -------------------------------------------------------------------------------- /08_03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 |
    11 |
    12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /08_03/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A standard function 3 | * @link https://developer.mozilla.org/en-US/docs/Glossary/Function 4 | */ 5 | 6 | const greenPack = { 7 | name: "Frog Pack", 8 | color: "green", 9 | volume: 8, 10 | pocketNum: 3, 11 | }; 12 | 13 | const addPack = function (currentPack) { 14 | const newArticle = document.createElement("article"); 15 | newArticle.innerHTML = ` 16 |

    ${currentPack.name}

    17 | 22 | `; 23 | return newArticle; 24 | }; 25 | 26 | const main = document.querySelector("main"); 27 | main.append(addPack(greenPack)); 28 | -------------------------------------------------------------------------------- /08_04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 |
    11 |
    12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /08_04/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * The arrow function 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions 4 | */ 5 | 6 | const greenPack = { 7 | name: "Frog Pack", 8 | color: "green", 9 | volume: 8, 10 | pocketNum: 3, 11 | }; 12 | 13 | const addPack = (currentPack) => { 14 | const newArticle = document.createElement("article"); 15 | newArticle.innerHTML = ` 16 |

    ${currentPack.name}

    17 | 22 | `; 23 | return newArticle; 24 | }; 25 | 26 | const main = document.querySelector("main"); 27 | main.append(addPack(greenPack)); 28 | -------------------------------------------------------------------------------- /08_05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 |
    11 |
    12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /08_05/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * How arrow functions help us with scoping. 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#this_and_Arrow_Functions 4 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this 5 | */ 6 | 7 | // Define a default volume for the window (the entire DOM): 8 | window.volume = 20; 9 | 10 | const greenPack = { 11 | name: "Frog Pack", 12 | color: "green", 13 | volume: 8, 14 | pocketNum: 3, 15 | newVolume: function (volume) { 16 | console.log("this.volume in the method:", this.volume); 17 | this.volume = volume; 18 | console.log("this.volume after update:", this.volume); 19 | // (function () { 20 | // console.log("this.volume in nested function:", this.volume); 21 | // })(); 22 | }, 23 | }; 24 | 25 | console.log(greenPack.newVolume(5)); 26 | -------------------------------------------------------------------------------- /08_05e/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 |
    11 |
    12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /08_05e/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * How arrow functions help us with scoping. 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#this_and_Arrow_Functions 4 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this 5 | */ 6 | 7 | // Define a default volume for the window (the entire DOM): 8 | window.volume = 20; 9 | 10 | const greenPack = { 11 | name: "Frog Pack", 12 | color: "green", 13 | volume: 8, 14 | pocketNum: 3, 15 | newVolume: function (volume) { 16 | console.log("this.volume in the method:", this.volume); 17 | this.volume = volume; 18 | console.log("this.volume after update:", this.volume); 19 | (function () { 20 | console.log("this.volume in nested function:", this.volume); 21 | })(); 22 | (() => { 23 | console.log("this.volume in arrow function:", this.volume); 24 | })(); 25 | }, 26 | }; 27 | 28 | console.log(greenPack.newVolume(5)); 29 | -------------------------------------------------------------------------------- /08_07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 |
    11 |
    12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /08_07/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Passing data to functions through parameters. 3 | * @link https://developer.mozilla.org/en-US/docs/Glossary/Function 4 | */ 5 | 6 | const tipCalculator = () => { 7 | let sum = 29.95; 8 | let percentage = 18; 9 | let tip = sum * (percentage / 100); 10 | let total = sum + tip; 11 | console.log(` 12 | Sum before tip: ${sum} 13 | Tip percentage: ${percentage}% 14 | Tip: ${tip.toFixed(2)} 15 | Total: ${total.toFixed(2)} 16 | `); 17 | }; 18 | 19 | tipCalculator(); 20 | -------------------------------------------------------------------------------- /08_07e/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 |
    11 |
    12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /08_07e/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Passing data to functions through parameters. 3 | * @link https://developer.mozilla.org/en-US/docs/Glossary/Function 4 | */ 5 | 6 | const tipCalculator = (sum, percentage, currency, prefix) => { 7 | let tip = sum * (percentage / 100); 8 | let total = sum + tip; 9 | if (prefix) { 10 | console.log(` 11 | Sum before tip: ${currency}${sum} 12 | Tip percentage: ${percentage}% 13 | Tip: ${currency}${tip.toFixed(2)} 14 | Total: ${currency}${total.toFixed(2)} 15 | `); 16 | } else { 17 | console.log(` 18 | Sum before tip: ${sum}${currency} 19 | Tip percentage: ${percentage}% 20 | Tip: ${tip.toFixed(2)}${currency} 21 | Total: ${total.toFixed(2)}${currency} 22 | `); 23 | } 24 | }; 25 | 26 | tipCalculator(29.95, 18, "kr", false); 27 | -------------------------------------------------------------------------------- /08_08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 |
    11 |
    12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /08_08/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Passing data to functions through parameters. 3 | * @link https://developer.mozilla.org/en-US/docs/Glossary/Function 4 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat 5 | * 6 | * 7 | * List of ISO language codes: 8 | * @link http://www.lingoes.net/en/translator/langcode.htm 9 | */ 10 | 11 | const tipCalculator = (sum, percentage) => { 12 | let tip = sum * (percentage / 100); 13 | let total = sum + tip; 14 | console.log(` 15 | Sum before tip: ${sum} 16 | Tip percentage: ${percentage}% 17 | Tip: ${tip.toFixed(2)} 18 | Total: ${total.toFixed(2)} 19 | `); 20 | }; 21 | 22 | tipCalculator(29.95, 18); 23 | -------------------------------------------------------------------------------- /08_08e/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 |
    11 |
    12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /08_08e/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Passing data to functions through parameters. 3 | * @link https://developer.mozilla.org/en-US/docs/Glossary/Function 4 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat 5 | * 6 | * List of ISO language codes: 7 | * @link http://www.lingoes.net/en/translator/langcode.htm 8 | */ 9 | 10 | const formatter = (locale = "en-US", currency = "USD", value) => { 11 | let formattedValue = new Intl.NumberFormat(locale, { 12 | style: "currency", 13 | currency: currency, 14 | }).format(value); 15 | 16 | return formattedValue; 17 | }; 18 | 19 | const tipCalculator = (sum, percentage, locale, currency) => { 20 | let tip = sum * (percentage / 100); 21 | let total = sum + tip; 22 | 23 | console.log(` 24 | Sum before tip: ${formatter(locale, currency, sum)} 25 | Tip percentage: ${percentage}% 26 | Tip: ${formatter(locale, currency, tip)} 27 | Total: ${formatter(locale, currency, total)} 28 | `); 29 | }; 30 | 31 | tipCalculator(29.95, 18, "de-DE", "EUR"); 32 | -------------------------------------------------------------------------------- /08_10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 |
    11 |
    12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /08_10/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Using a callback function. 3 | * @link https://developer.mozilla.org/en-US/docs/Glossary/Callback_function 4 | */ 5 | 6 | // Helper function to format currency numbers. Used by tipCalculator 7 | const formatter = (locale = "en-US", currency = "USD", value) => { 8 | let formattedValue = new Intl.NumberFormat(locale, { 9 | style: "currency", 10 | currency: currency, 11 | }).format(value); 12 | 13 | return formattedValue; 14 | }; 15 | 16 | // Callback receives finalTip object, creates and outputs table on the DOM. 17 | const printHTML = (finalTip) => { 18 | const tipTable = document.createElement("table"); 19 | tipTable.innerHTML = ` 20 | 21 | Sum before tip: 22 | ${finalTip.sum} 23 | 24 | 25 | Tip percentage: 26 | ${finalTip.percentage} 27 | 28 | 29 | Tip: 30 | ${finalTip.tip} 31 | 32 | 33 | Total: 34 | ${finalTip.total} 35 | 36 | `; 37 | document.querySelector("main").append(tipTable); 38 | }; 39 | 40 | // Create a finalTip object with all the data. Send it to the printHTML callback. 41 | const tipCalculator = (sum, percentage, locale, currency) => { 42 | let tip = sum * (percentage / 100); 43 | let total = sum + tip; 44 | 45 | const finalTip = { 46 | sum: formatter(locale, currency, sum), 47 | percentage: percentage + "%", 48 | tip: formatter(locale, currency, tip), 49 | total: formatter(locale, currency, total), 50 | }; 51 | }; 52 | 53 | tipCalculator(29.95, 18, "de-DE", "EUR"); 54 | -------------------------------------------------------------------------------- /08_10e/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 |
    11 |
    12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /08_10e/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Using a callback function. 3 | * @link https://developer.mozilla.org/en-US/docs/Glossary/Callback_function 4 | */ 5 | 6 | // Helper function to format currency numbers. Used by tipCalculator 7 | const formatter = (locale = "en-US", currency = "USD", value) => { 8 | let formattedValue = new Intl.NumberFormat(locale, { 9 | style: "currency", 10 | currency: currency, 11 | }).format(value); 12 | 13 | return formattedValue; 14 | }; 15 | 16 | // Callback receives finalTip object, creates and outputs table on the DOM. 17 | const printHTML = (finalTip) => { 18 | const tipTable = document.createElement("table"); 19 | tipTable.innerHTML = ` 20 | 21 | Sum before tip: 22 | ${finalTip.sum} 23 | 24 | 25 | Tip percentage: 26 | ${finalTip.percentage} 27 | 28 | 29 | Tip: 30 | ${finalTip.tip} 31 | 32 | 33 | Total: 34 | ${finalTip.total} 35 | 36 | `; 37 | document.querySelector("main").append(tipTable); 38 | }; 39 | 40 | // Create a finalTip object with all the data. Send it to the printHTML callback. 41 | const tipCalculator = (sum, percentage, locale, currency, printHTML) => { 42 | let tip = sum * (percentage / 100); 43 | let total = sum + tip; 44 | 45 | const finalTip = { 46 | sum: formatter(locale, currency, sum), 47 | percentage: percentage + "%", 48 | tip: formatter(locale, currency, tip), 49 | total: formatter(locale, currency, total), 50 | }; 51 | 52 | printHTML(finalTip); 53 | }; 54 | 55 | tipCalculator(29.95, 18, "de-DE", "EUR", printHTML); 56 | -------------------------------------------------------------------------------- /08_11/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired, 11 | image 12 | ) { 13 | this.name = name; 14 | this.volume = volume; 15 | this.color = color; 16 | this.pocketNum = pocketNum; 17 | this.strapLength = { 18 | left: strapLengthL, 19 | right: strapLengthR, 20 | }; 21 | this.lidOpen = lidOpen; 22 | this.dateAcquired = dateAcquired; 23 | this.image = image; 24 | } 25 | toggleLid(lidStatus) { 26 | this.lidOpen = lidStatus; 27 | } 28 | newStrapLength(lengthLeft, lengthRight) { 29 | this.strapLength.left = lengthLeft; 30 | this.strapLength.right = lengthRight; 31 | } 32 | backpackAge() { 33 | let now = new Date(); 34 | let acquired = new Date(this.dateAcquired); 35 | let elapsed = now - acquired; // elapsed time in milliseconds 36 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 37 | return daysSinceAcquired; 38 | } 39 | } 40 | 41 | export default Backpack; 42 | -------------------------------------------------------------------------------- /08_11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 |
    22 |
    BackpackPacker
    23 |
    All backpack packing, all the time.
    24 |
    25 |
    26 |
    27 |

    A pack for every purpose

    28 |

    29 | If you're carrying a heavy load, you can't find a better tool than a 30 | backpack. Distributing the weight evenly across your shoulders, back, 31 | and hips, the backpack lets you use the natural frame of your body to 32 | literally shoulder the weight while your legs do the 33 | carrying. 34 |

    35 |
    36 |
    37 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /08_11/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a new element and append it to the
    element. 3 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement 4 | * @link https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append 5 | */ 6 | 7 | import Backpack from "./Backpack.js"; 8 | 9 | const everydayPack = new Backpack( 10 | "Everyday Backpack", 11 | 30, 12 | "grey", 13 | 15, 14 | 26, 15 | 26, 16 | false, 17 | "December 5, 2018 15:00:00 PST", 18 | "../assets/images/everyday.svg" 19 | ); 20 | 21 | const content = ` 22 |
    23 | 24 |
    25 |

    ${everydayPack.name}

    26 | 47 | `; 48 | 49 | const main = document.querySelector(".maincontent"); 50 | 51 | const newArticle = document.createElement("article"); 52 | newArticle.classList.add("backpack"); 53 | newArticle.setAttribute("id", "everyday"); 54 | newArticle.innerHTML = content; 55 | 56 | main.append(newArticle); 57 | -------------------------------------------------------------------------------- /08_11e/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired, 11 | image 12 | ) { 13 | this.name = name; 14 | this.volume = volume; 15 | this.color = color; 16 | this.pocketNum = pocketNum; 17 | this.strapLength = { 18 | left: strapLengthL, 19 | right: strapLengthR, 20 | }; 21 | this.lidOpen = lidOpen; 22 | this.dateAcquired = dateAcquired; 23 | this.image = image; 24 | } 25 | toggleLid(lidStatus) { 26 | this.lidOpen = lidStatus; 27 | } 28 | newStrapLength(lengthLeft, lengthRight) { 29 | this.strapLength.left = lengthLeft; 30 | this.strapLength.right = lengthRight; 31 | } 32 | backpackAge() { 33 | let now = new Date(); 34 | let acquired = new Date(this.dateAcquired); 35 | let elapsed = now - acquired; // elapsed time in milliseconds 36 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 37 | return daysSinceAcquired; 38 | } 39 | } 40 | 41 | export default Backpack; 42 | -------------------------------------------------------------------------------- /08_11e/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 |
    22 |
    BackpackPacker
    23 |
    All backpack packing, all the time.
    24 |
    25 |
    26 |
    27 |

    A pack for every purpose

    28 |

    29 | If you're carrying a heavy load, you can't find a better tool than a 30 | backpack. Distributing the weight evenly across your shoulders, back, 31 | and hips, the backpack lets you use the natural frame of your body to 32 | literally shoulder the weight while your legs do the 33 | carrying. 34 |

    35 |
    36 |
    37 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /08_11e/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a new element and append it to the
    element. 3 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement 4 | * @link https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append 5 | */ 6 | 7 | import Backpack from "./Backpack.js"; 8 | 9 | const everydayPack = new Backpack( 10 | "Everyday Backpack", 11 | 30, 12 | "grey", 13 | 15, 14 | 26, 15 | 26, 16 | false, 17 | "December 5, 2018 15:00:00 PST", 18 | "../assets/images/everyday.svg" 19 | ); 20 | 21 | const content = ` 22 |
    23 | 24 |
    25 |

    ${everydayPack.name}

    26 | 47 | `; 48 | 49 | const main = document.querySelector(".maincontent"); 50 | 51 | const newArticle = document.createElement("article"); 52 | newArticle.classList.add("backpack"); 53 | newArticle.setAttribute("id", "everyday"); 54 | newArticle.innerHTML = content; 55 | 56 | main.append(newArticle); 57 | -------------------------------------------------------------------------------- /08_12/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired, 11 | image 12 | ) { 13 | this.name = name; 14 | this.volume = volume; 15 | this.color = color; 16 | this.pocketNum = pocketNum; 17 | this.strapLength = { 18 | left: strapLengthL, 19 | right: strapLengthR, 20 | }; 21 | this.lidOpen = lidOpen; 22 | this.dateAcquired = dateAcquired; 23 | this.image = image; 24 | } 25 | toggleLid(lidStatus) { 26 | this.lidOpen = lidStatus; 27 | } 28 | newStrapLength(lengthLeft, lengthRight) { 29 | this.strapLength.left = lengthLeft; 30 | this.strapLength.right = lengthRight; 31 | } 32 | backpackAge() { 33 | let now = new Date(); 34 | let acquired = new Date(this.dateAcquired); 35 | let elapsed = now - acquired; // elapsed time in milliseconds 36 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 37 | return daysSinceAcquired; 38 | } 39 | } 40 | 41 | export default Backpack; 42 | -------------------------------------------------------------------------------- /08_12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 |
    22 |
    BackpackPacker
    23 |
    All backpack packing, all the time.
    24 |
    25 |
    26 |
    27 |

    A pack for every purpose

    28 |

    29 | If you're carrying a heavy load, you can't find a better tool than a 30 | backpack. Distributing the weight evenly across your shoulders, back, 31 | and hips, the backpack lets you use the natural frame of your body to 32 | literally shoulder the weight while your legs do the 33 | carrying. 34 |

    35 |
    36 |
    37 |
    38 |

    39 | Demo project for JavaScript Essential Training, a LinkedIn Learning 40 | course. 41 |

    42 |
    43 | 44 | 45 | -------------------------------------------------------------------------------- /08_12/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a new element and append it to the
    element. 3 | * @link https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement 4 | * @link https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append 5 | */ 6 | 7 | import Backpack from "./Backpack.js"; 8 | 9 | const everydayPack = new Backpack( 10 | "Everyday Backpack", 11 | 30, 12 | "grey", 13 | 15, 14 | 26, 15 | 26, 16 | false, 17 | "December 5, 2018 15:00:00 PST", 18 | "../assets/images/everyday.svg" 19 | ); 20 | 21 | const content = ` 22 |
    23 | 24 |
    25 |

    ${everydayPack.name}

    26 |
      27 |
    • Volume: ${ 28 | everydayPack.volume 29 | }l
      • 30 |
    • Color: ${ 31 | everydayPack.color 32 | }
      • 33 |
    • Age: ${everydayPack.backpackAge()} days old
      • 34 |
    • Number of pockets: ${ 35 | everydayPack.pocketNum 36 | }
      • 37 |
    • Left strap length: ${ 38 | everydayPack.strapLength.left 39 | } inches
      • 40 |
    • Right strap length: ${ 41 | everydayPack.strapLength.right 42 | } inches
      • 43 |
    • Lid status: ${ 44 | everydayPack.lidOpen ? "open" : "closed" 45 | }
      • 46 |
    47 | `; 48 | 49 | const main = document.querySelector(".maincontent"); 50 | 51 | const newArticle = document.createElement("article"); 52 | newArticle.classList.add("backpack"); 53 | newArticle.setAttribute("id", "everyday"); 54 | newArticle.innerHTML = content; 55 | 56 | main.append(newArticle); 57 | 58 | if (everydayPack.backpackAge() >= 30) { 59 | console.log("Backpack is used") 60 | } else { 61 | console.log("Backpack is new") 62 | } -------------------------------------------------------------------------------- /08_13/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired, 11 | image 12 | ) { 13 | this.name = name; 14 | this.volume = volume; 15 | this.color = color; 16 | this.pocketNum = pocketNum; 17 | this.strapLength = { 18 | left: strapLengthL, 19 | right: strapLengthR, 20 | }; 21 | this.lidOpen = lidOpen; 22 | this.dateAcquired = dateAcquired; 23 | this.image = image; 24 | } 25 | toggleLid(lidStatus) { 26 | this.lidOpen = lidStatus; 27 | } 28 | newStrapLength(lengthLeft, lengthRight) { 29 | this.strapLength.left = lengthLeft; 30 | this.strapLength.right = lengthRight; 31 | } 32 | backpackAge() { 33 | let now = new Date(); 34 | let acquired = new Date(this.dateAcquired); 35 | let elapsed = now - acquired; // elapsed time in milliseconds 36 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 37 | return daysSinceAcquired; 38 | } 39 | } 40 | 41 | export default Backpack; 42 | -------------------------------------------------------------------------------- /08_13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 |
    22 |
    BackpackPacker
    23 |
    All backpack packing, all the time.
    24 |
    25 |
    26 |
    27 |

    A pack for every purpose

    28 |

    29 | If you're carrying a heavy load, you can't find a better tool than a 30 | backpack. Distributing the weight evenly across your shoulders, back, 31 | and hips, the backpack lets you use the natural frame of your body to 32 | literally shoulder the weight while your legs do the 33 | carrying. 34 |

    35 |
    36 |
    37 |
    38 |

    39 | Demo project for JavaScript Essential Training, a LinkedIn Learning 40 | course. 41 |

    42 |
    43 | 44 | 45 | -------------------------------------------------------------------------------- /08_13e/Backpack.js: -------------------------------------------------------------------------------- 1 | class Backpack { 2 | constructor( 3 | name, 4 | volume, 5 | color, 6 | pocketNum, 7 | strapLengthL, 8 | strapLengthR, 9 | lidOpen, 10 | dateAcquired, 11 | image 12 | ) { 13 | this.name = name; 14 | this.volume = volume; 15 | this.color = color; 16 | this.pocketNum = pocketNum; 17 | this.strapLength = { 18 | left: strapLengthL, 19 | right: strapLengthR, 20 | }; 21 | this.lidOpen = lidOpen; 22 | this.dateAcquired = dateAcquired; 23 | this.image = image; 24 | } 25 | toggleLid(lidStatus) { 26 | this.lidOpen = lidStatus; 27 | } 28 | newStrapLength(lengthLeft, lengthRight) { 29 | this.strapLength.left = lengthLeft; 30 | this.strapLength.right = lengthRight; 31 | } 32 | backpackAge() { 33 | let now = new Date(); 34 | let acquired = new Date(this.dateAcquired); 35 | let elapsed = now - acquired; // elapsed time in milliseconds 36 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 37 | return daysSinceAcquired; 38 | } 39 | } 40 | 41 | export default Backpack; 42 | -------------------------------------------------------------------------------- /08_13e/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 |
    22 |
    BackpackPacker
    23 |
    All backpack packing, all the time.
    24 |
    25 |
    26 |
    27 |

    A pack for every purpose

    28 |

    29 | If you're carrying a heavy load, you can't find a better tool than a 30 | backpack. Distributing the weight evenly across your shoulders, back, 31 | and hips, the backpack lets you use the natural frame of your body to 32 | literally shoulder the weight while your legs do the 33 | carrying. 34 |

    35 |
    36 |
    37 |
    38 |

    39 | Demo project for JavaScript Essential Training, a LinkedIn Learning 40 | course. 41 |

    42 |
    43 | 44 | 45 | -------------------------------------------------------------------------------- /08_14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 |
    11 |
    12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /08_14/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Loops Aplenty! 3 | * @link https://developer.mozilla.org/en-US/docs/Glossary/Callback_function 4 | */ 5 | 6 | const stuff = ["piggy", "headlamp", "pen", "pencil", "eraser", "water bottle"]; 7 | 8 | const nestedObjects = { 9 | item01: { 10 | name: "piggy", 11 | type: "toy", 12 | weight: 30, 13 | }, 14 | item02: { 15 | name: "headlamp", 16 | type: "equipment", 17 | weight: 120, 18 | }, 19 | item03: { 20 | name: "pen", 21 | type: "tool", 22 | weight: 30, 23 | }, 24 | item04: { 25 | name: "pencil", 26 | type: "tool", 27 | weight: 30, 28 | }, 29 | item05: { 30 | name: "eraser", 31 | type: "tool", 32 | weight: 40, 33 | }, 34 | item03: { 35 | name: "water bottle", 36 | type: "equipment", 37 | weight: 1300, 38 | }, 39 | }; 40 | 41 | const article = document.querySelector("article"); 42 | let stuffList = document.createElement("ul"); 43 | 44 | 45 | /** 46 | * for loop 47 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for 48 | */ 49 | for (let i = 0; i < stuff.length; i++) { 50 | let listItem = document.createElement("li"); 51 | listItem.innerHTML = stuff[i]; 52 | stuffList.append(listItem); 53 | } 54 | 55 | /** 56 | * for...of loop and arrays 57 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of 58 | */ 59 | // for (const item of stuff) { 60 | // let listItem = document.createElement("li"); 61 | // listItem.innerHTML = item; 62 | // stuffList.append(listItem); 63 | // } 64 | 65 | /** 66 | * foreach array method 67 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach 68 | */ 69 | // stuff.forEach((item) => { 70 | // let listItem = document.createElement("li"); 71 | // listItem.innerHTML = item; 72 | // stuffList.append(listItem); 73 | // }); 74 | 75 | /** 76 | * for...in loop and objects 77 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of 78 | */ 79 | // for (const singleObject in nestedObjects) { 80 | // let listItem = document.createElement("li"); 81 | // listItem.innerHTML = `Name: ${nestedObjects[singleObject].name}`; 82 | // stuffList.append(listItem); 83 | // } 84 | 85 | 86 | article.append(stuffList); 87 | -------------------------------------------------------------------------------- /08_15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 |
    11 |
    12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /08_15/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * The map() array method. 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map 4 | */ 5 | 6 | const stuff = ["piggy", "headlamp", "pen", "pencil", "eraser", "water bottle"]; 7 | 8 | const article = document.querySelector("article"); 9 | let stuffList = document.createElement("ul"); 10 | 11 | // forEach() array method 12 | stuff.forEach((item) => { 13 | let listItem = document.createElement("li"); 14 | listItem.innerHTML = item; 15 | stuffList.append(listItem); 16 | }); 17 | 18 | article.append(stuffList) -------------------------------------------------------------------------------- /08_15e/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console demo 7 | 8 | 9 | 10 |
    11 |
    12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /08_15e/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * The map() array method. 3 | * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map 4 | */ 5 | 6 | const stuff = ["piggy", "headlamp", "pen", "pencil", "eraser", "water bottle"]; 7 | 8 | const article = document.querySelector("article"); 9 | let stuffList = document.createElement("ul"); 10 | 11 | // map() through the stuff array to make a new stuffItems array. 12 | const stuffItems = stuff.map((item) => { 13 | let listItem = document.createElement("li"); 14 | listItem.innerHTML = item; 15 | return listItem; 16 | }); 17 | 18 | // Append each element from the stuffItems array to the stuffList
      19 | stuffItems.forEach((item) => { 20 | stuffList.append(item); 21 | }); 22 | 23 | // Append stuffList to the
      24 | article.append(stuffList); 25 | -------------------------------------------------------------------------------- /08_16/components/Backpack.js: -------------------------------------------------------------------------------- 1 | // Set up the Backpack class 2 | class Backpack { 3 | constructor( 4 | id, 5 | name, 6 | volume, 7 | color, 8 | pocketNum, 9 | strapLengthL, 10 | strapLengthR, 11 | lidOpen, 12 | dateAcquired, 13 | image 14 | ) { 15 | this.id = id; 16 | this.name = name; 17 | this.volume = volume; 18 | this.color = color; 19 | this.pocketNum = pocketNum; 20 | this.strapLength = { 21 | left: strapLengthL, 22 | right: strapLengthR, 23 | }; 24 | this.lidOpen = lidOpen; 25 | this.dateAcquired = dateAcquired; 26 | this.image = image; 27 | } 28 | toggleLid(lidStatus) { 29 | this.lidOpen = lidStatus; 30 | } 31 | newStrapLength(lengthLeft, lengthRight) { 32 | this.strapLength.left = lengthLeft; 33 | this.strapLength.right = lengthRight; 34 | } 35 | backpackAge() { 36 | let now = new Date(); 37 | let acquired = new Date(this.dateAcquired); 38 | let elapsed = now - acquired; // elapsed time in milliseconds 39 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 40 | return daysSinceAcquired; 41 | } 42 | } 43 | 44 | // Export the Backpack class to be used by other files 45 | export default Backpack; 46 | -------------------------------------------------------------------------------- /08_16/components/data.js: -------------------------------------------------------------------------------- 1 | // Import the Backpack class so we can make new Backpack objects. 2 | import Backpack from "./Backpack.js"; 3 | 4 | // Create new Backpack object 5 | const everydayPack = new Backpack( 6 | "pack01", 7 | "Everyday Backpack", 8 | 30, 9 | "grey", 10 | 15, 11 | 26, 12 | 26, 13 | false, 14 | "December 5, 2018 15:00:00 PST", 15 | "../assets/images/everyday.svg" 16 | ); 17 | 18 | // Create new Backpack object 19 | const frogPack = new Backpack( 20 | "pack02", 21 | "Frog Backpack", 22 | 8, 23 | "green", 24 | 3, 25 | 10, 26 | 10, 27 | false, 28 | "October 16, 2019 15:00:00 PST", 29 | "../assets/images/frog.svg" 30 | ); 31 | 32 | // Add Backpack objects into an array 33 | const backpackObjectArray = [everydayPack, frogPack]; 34 | 35 | // Export the array to be used in other files 36 | export default backpackObjectArray; 37 | -------------------------------------------------------------------------------- /08_16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 | 22 |
      23 |
      BackpackPacker
      24 |
      All backpack packing, all the time.
      25 |
      26 |
      27 |
      28 |

      A pack for every purpose

      29 |

      30 | If you're carrying a heavy load, you can't find a better tool than a 31 | backpack. Distributing the weight evenly across your shoulders, back, 32 | and hips, the backpack lets you use the natural frame of your body to 33 | literally shoulder the weight while your legs do the 34 | carrying. 35 |

      36 |
      37 |
      38 |
      39 |

      40 | Demo project for JavaScript Essential Training, a LinkedIn Learning 41 | course. 42 |

      43 |
      44 | 45 | 46 | -------------------------------------------------------------------------------- /08_16/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Challenge: Create an advanced function. 3 | * - Loop through backpackObjectArray to create an article with the class "backpack". 4 | * - Give the article the ID of the current backpack object. 5 | * - Set the inner HTML of the article to the existing HTML output provided in const content. 6 | * - Append each backpack object to the
      element. 7 | */ 8 | import Backpack from "./components/Backpack.js"; 9 | 10 | const everydayPack = new Backpack( 11 | "pack01", 12 | "Everyday Backpack", 13 | 30, 14 | "grey", 15 | 15, 16 | 26, 17 | 26, 18 | false, 19 | "December 5, 2018 15:00:00 PST", 20 | "../assets/images/everyday.svg" 21 | ); 22 | 23 | const content = ` 24 |
      25 | 26 |
      27 |

      ${everydayPack.name}

      28 |
        29 |
      • Volume: ${ 30 | everydayPack.volume 31 | }l
        • 32 |
      • Color: ${ 33 | everydayPack.color 34 | }
        • 35 |
      • Age: ${everydayPack.backpackAge()} days old
        • 36 |
      • Number of pockets: ${ 37 | everydayPack.pocketNum 38 | }
        • 39 |
      • Left strap length: ${ 40 | everydayPack.strapLength.left 41 | } inches
        • 42 |
      • Right strap length: ${ 43 | everydayPack.strapLength.right 44 | } inches
        • 45 |
      • Lid status: ${ 46 | everydayPack.lidOpen ? "open" : "closed" 47 | }
        • 48 |
      49 | 50 | `; 51 | 52 | const main = document.querySelector(".maincontent"); 53 | 54 | const newArticle = document.createElement("article"); 55 | newArticle.classList.add("backpack"); 56 | newArticle.setAttribute("id", "everyday"); 57 | newArticle.innerHTML = content; 58 | 59 | main.append(newArticle); 60 | -------------------------------------------------------------------------------- /08_17/components/Backpack.js: -------------------------------------------------------------------------------- 1 | // Set up the Backpack class 2 | class Backpack { 3 | constructor( 4 | id, 5 | name, 6 | volume, 7 | color, 8 | pocketNum, 9 | strapLengthL, 10 | strapLengthR, 11 | lidOpen, 12 | dateAcquired, 13 | image 14 | ) { 15 | this.id = id; 16 | this.name = name; 17 | this.volume = volume; 18 | this.color = color; 19 | this.pocketNum = pocketNum; 20 | this.strapLength = { 21 | left: strapLengthL, 22 | right: strapLengthR, 23 | }; 24 | this.lidOpen = lidOpen; 25 | this.dateAcquired = dateAcquired; 26 | this.image = image; 27 | } 28 | toggleLid(lidStatus) { 29 | this.lidOpen = lidStatus; 30 | } 31 | newStrapLength(lengthLeft, lengthRight) { 32 | this.strapLength.left = lengthLeft; 33 | this.strapLength.right = lengthRight; 34 | } 35 | backpackAge() { 36 | let now = new Date(); 37 | let acquired = new Date(this.dateAcquired); 38 | let elapsed = now - acquired; // elapsed time in milliseconds 39 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 40 | return daysSinceAcquired; 41 | } 42 | } 43 | 44 | // Export the Backpack class to be used by other files 45 | export default Backpack; 46 | -------------------------------------------------------------------------------- /08_17/components/data.js: -------------------------------------------------------------------------------- 1 | // Import the Backpack class so we can make new Backpack objects. 2 | import Backpack from "./Backpack.js"; 3 | 4 | // Create new Backpack object 5 | const everydayPack = new Backpack( 6 | "pack01", 7 | "Everyday Backpack", 8 | 30, 9 | "grey", 10 | 15, 11 | 26, 12 | 26, 13 | false, 14 | "December 5, 2018 15:00:00 PST", 15 | "../assets/images/everyday.svg" 16 | ); 17 | 18 | // Create new Backpack object 19 | const frogPack = new Backpack( 20 | "pack02", 21 | "Frog Backpack", 22 | 8, 23 | "green", 24 | 3, 25 | 10, 26 | 10, 27 | false, 28 | "October 16, 2019 15:00:00 PST", 29 | "../assets/images/frog.svg" 30 | ); 31 | 32 | // Add Backpack objects into an array 33 | const backpackObjectArray = [everydayPack, frogPack]; 34 | 35 | // Export the array to be used in other files 36 | export default backpackObjectArray; 37 | -------------------------------------------------------------------------------- /08_17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 | 22 |
      23 |
      BackpackPacker
      24 |
      All backpack packing, all the time.
      25 |
      26 |
      27 |
      28 |

      A pack for every purpose

      29 |

      30 | If you're carrying a heavy load, you can't find a better tool than a 31 | backpack. Distributing the weight evenly across your shoulders, back, 32 | and hips, the backpack lets you use the natural frame of your body to 33 | literally shoulder the weight while your legs do the 34 | carrying. 35 |

      36 |
      37 |
      38 |
      39 |

      40 | Demo project for JavaScript Essential Training, a LinkedIn Learning 41 | course. 42 |

      43 |
      44 | 45 | 46 | -------------------------------------------------------------------------------- /09_02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Events Aplenty 7 | 57 | 58 | 59 | 60 |
      61 |
      62 |

      Events: A Demonstration

      63 | 64 |
      65 |
      X:
      66 |
      Y:
      67 |
      68 |
      69 |
      70 | 71 | 72 | -------------------------------------------------------------------------------- /09_02/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Events aplenty. 3 | * @link https://developer.mozilla.org/en-US/docs/Web/Events 4 | */ 5 | 6 | const container = document.querySelector(".container"); 7 | const button = document.querySelector(".cta-button"); 8 | const posX = document.querySelector(".posX span"); 9 | const posY = document.querySelector(".posY span"); 10 | 11 | // Log when the button is clicked in the console. 12 | button.addEventListener("click", () => { 13 | button.classList.toggle("active"); 14 | console.log("Button was clicked!"); 15 | }, false); 16 | 17 | // Update the x and y displays to show the current mouse position. 18 | const mousePosition = (event) => { 19 | posX.innerText = event.pageX; 20 | posY.innerText = event.pageY; 21 | }; 22 | 23 | window.addEventListener("mousemove", mousePosition, false); 24 | 25 | // Change the color of the box when the mouse enters. 26 | container.addEventListener( 27 | "mouseenter", 28 | () => { 29 | container.classList.add("blue"); 30 | }, 31 | false 32 | ); 33 | 34 | container.addEventListener( 35 | "mouseleave", 36 | () => { 37 | container.classList.remove("blue"); 38 | }, 39 | false 40 | ); 41 | -------------------------------------------------------------------------------- /09_03/components/Backpack.js: -------------------------------------------------------------------------------- 1 | // Set up the Backpack class 2 | class Backpack { 3 | constructor( 4 | id, 5 | name, 6 | volume, 7 | color, 8 | pocketNum, 9 | strapLengthL, 10 | strapLengthR, 11 | lidOpen, 12 | dateAcquired, 13 | image 14 | ) { 15 | this.id = id; 16 | this.name = name; 17 | this.volume = volume; 18 | this.color = color; 19 | this.pocketNum = pocketNum; 20 | this.strapLength = { 21 | left: strapLengthL, 22 | right: strapLengthR, 23 | }; 24 | this.lidOpen = lidOpen; 25 | this.dateAcquired = dateAcquired; 26 | this.image = image; 27 | } 28 | toggleLid(lidStatus) { 29 | this.lidOpen = lidStatus; 30 | } 31 | newStrapLength(lengthLeft, lengthRight) { 32 | this.strapLength.left = lengthLeft; 33 | this.strapLength.right = lengthRight; 34 | } 35 | backpackAge() { 36 | let now = new Date(); 37 | let acquired = new Date(this.dateAcquired); 38 | let elapsed = now - acquired; // elapsed time in milliseconds 39 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 40 | return daysSinceAcquired; 41 | } 42 | } 43 | 44 | // Export the Backpack class to be used by other files 45 | export default Backpack; 46 | -------------------------------------------------------------------------------- /09_03/components/data.js: -------------------------------------------------------------------------------- 1 | // Import the Backpack class so we can make new Backpack objects. 2 | import Backpack from "./Backpack.js"; 3 | 4 | // Create new Backpack object 5 | const everydayPack = new Backpack( 6 | "pack01", 7 | "Everyday Backpack", 8 | 30, 9 | "grey", 10 | 15, 11 | 26, 12 | 26, 13 | false, 14 | "December 5, 2018 15:00:00 PST", 15 | "../assets/images/everyday.svg" 16 | ); 17 | 18 | // Create new Backpack object 19 | const frogPack = new Backpack( 20 | "pack02", 21 | "Frog Backpack", 22 | 8, 23 | "green", 24 | 3, 25 | 10, 26 | 10, 27 | false, 28 | "October 16, 2019 15:00:00 PST", 29 | "../assets/images/frog.svg" 30 | ); 31 | 32 | // Add Backpack objects into an array 33 | const backpackObjectArray = [everydayPack, frogPack]; 34 | 35 | // Export the array to be used in other files 36 | export default backpackObjectArray; 37 | -------------------------------------------------------------------------------- /09_03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 | 22 |
      23 |
      BackpackPacker
      24 |
      All backpack packing, all the time.
      25 |
      26 |
      27 |
      28 |

      A pack for every purpose

      29 |

      30 | If you're carrying a heavy load, you can't find a better tool than a 31 | backpack. Distributing the weight evenly across your shoulders, back, 32 | and hips, the backpack lets you use the natural frame of your body to 33 | literally shoulder the weight while your legs do the 34 | carrying. 35 |

      36 |
      37 |
      38 |
      39 |

      40 | Demo project for JavaScript Essential Training, a LinkedIn Learning 41 | course. 42 |

      43 |
      44 | 45 | 46 | -------------------------------------------------------------------------------- /09_03/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Event listeners 3 | * @link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener 4 | * @link https://developer.mozilla.org/en-US/docs/Web/Events 5 | */ 6 | import backpackObjectArray from "./components/data.js"; 7 | 8 | const backpackList = backpackObjectArray.map((backpack) => { 9 | let backpackArticle = document.createElement("article"); 10 | backpackArticle.classList.add("backpack"); 11 | backpackArticle.setAttribute("id", backpack.id); 12 | 13 | backpackArticle.innerHTML = ` 14 |
      15 | 16 |
      17 |

      ${backpack.name}

      18 |
        19 |
      • Volume: ${ 20 | backpack.volume 21 | }l
        • 22 |
      • Color: ${ 23 | backpack.color 24 | }
        • 25 |
      • Age: ${backpack.backpackAge()} days old
        • 26 |
      • Number of pockets: ${ 27 | backpack.pocketNum 28 | }
        • 29 |
      • Left strap length: ${ 30 | backpack.strapLength.left 31 | } inches
        • 32 |
      • Right strap length: ${ 33 | backpack.strapLength.right 34 | } inches
        • 35 |
      • Lid status: ${ 36 | backpack.lidOpen ? "open" : "closed" 37 | }
        • 38 |
      39 | 40 | `; 41 | 42 | return backpackArticle; 43 | }); 44 | 45 | const main = document.querySelector(".maincontent"); 46 | 47 | backpackList.forEach((backpack) => { 48 | main.append(backpack); 49 | }); 50 | -------------------------------------------------------------------------------- /09_03e/components/Backpack.js: -------------------------------------------------------------------------------- 1 | // Set up the Backpack class 2 | class Backpack { 3 | constructor( 4 | id, 5 | name, 6 | volume, 7 | color, 8 | pocketNum, 9 | strapLengthL, 10 | strapLengthR, 11 | lidOpen, 12 | dateAcquired, 13 | image 14 | ) { 15 | this.id = id; 16 | this.name = name; 17 | this.volume = volume; 18 | this.color = color; 19 | this.pocketNum = pocketNum; 20 | this.strapLength = { 21 | left: strapLengthL, 22 | right: strapLengthR, 23 | }; 24 | this.lidOpen = lidOpen; 25 | this.dateAcquired = dateAcquired; 26 | this.image = image; 27 | } 28 | toggleLid(lidStatus) { 29 | this.lidOpen = lidStatus; 30 | } 31 | newStrapLength(lengthLeft, lengthRight) { 32 | this.strapLength.left = lengthLeft; 33 | this.strapLength.right = lengthRight; 34 | } 35 | backpackAge() { 36 | let now = new Date(); 37 | let acquired = new Date(this.dateAcquired); 38 | let elapsed = now - acquired; // elapsed time in milliseconds 39 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 40 | return daysSinceAcquired; 41 | } 42 | } 43 | 44 | // Export the Backpack class to be used by other files 45 | export default Backpack; 46 | -------------------------------------------------------------------------------- /09_03e/components/data.js: -------------------------------------------------------------------------------- 1 | // Import the Backpack class so we can make new Backpack objects. 2 | import Backpack from "./Backpack.js"; 3 | 4 | // Create new Backpack object 5 | const everydayPack = new Backpack( 6 | "pack01", 7 | "Everyday Backpack", 8 | 30, 9 | "grey", 10 | 15, 11 | 26, 12 | 26, 13 | false, 14 | "December 5, 2018 15:00:00 PST", 15 | "../assets/images/everyday.svg" 16 | ); 17 | 18 | // Create new Backpack object 19 | const frogPack = new Backpack( 20 | "pack02", 21 | "Frog Backpack", 22 | 8, 23 | "green", 24 | 3, 25 | 10, 26 | 10, 27 | false, 28 | "October 16, 2019 15:00:00 PST", 29 | "../assets/images/frog.svg" 30 | ); 31 | 32 | // Add Backpack objects into an array 33 | const backpackObjectArray = [everydayPack, frogPack]; 34 | 35 | // Export the array to be used in other files 36 | export default backpackObjectArray; 37 | -------------------------------------------------------------------------------- /09_03e/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 | 22 |
      23 |
      BackpackPacker
      24 |
      All backpack packing, all the time.
      25 |
      26 |
      27 |
      28 |

      A pack for every purpose

      29 |

      30 | If you're carrying a heavy load, you can't find a better tool than a 31 | backpack. Distributing the weight evenly across your shoulders, back, 32 | and hips, the backpack lets you use the natural frame of your body to 33 | literally shoulder the weight while your legs do the 34 | carrying. 35 |

      36 |
      37 |
      38 |
      39 |

      40 | Demo project for JavaScript Essential Training, a LinkedIn Learning 41 | course. 42 |

      43 |
      44 | 45 | 46 | -------------------------------------------------------------------------------- /09_03e/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Event listeners 3 | * @link https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener 4 | * @link https://developer.mozilla.org/en-US/docs/Web/Events 5 | */ 6 | import backpackObjectArray from "./components/data.js"; 7 | 8 | const backpackList = backpackObjectArray.map((backpack) => { 9 | let backpackArticle = document.createElement("article"); 10 | backpackArticle.classList.add("backpack"); 11 | backpackArticle.setAttribute("id", backpack.id); 12 | 13 | backpackArticle.innerHTML = ` 14 |
      15 | 16 |
      17 |

      ${backpack.name}

      18 |
        19 |
      • Volume: ${ 20 | backpack.volume 21 | }l
        • 22 |
      • Color: ${ 23 | backpack.color 24 | }
        • 25 |
      • Age: ${backpack.backpackAge()} days old
        • 26 |
      • Number of pockets: ${ 27 | backpack.pocketNum 28 | }
        • 29 |
      • Left strap length: ${ 30 | backpack.strapLength.left 31 | } inches
        • 32 |
      • Right strap length: ${ 33 | backpack.strapLength.right 34 | } inches
        • 35 |
      • Lid status: ${ 36 | backpack.lidOpen ? "open" : "closed" 37 | }
        • 38 |
      39 | 40 | `; 41 | 42 | const button = backpackArticle.querySelector(".lid-toggle") 43 | const status = backpackArticle.querySelector(".backpack__lid span") 44 | 45 | button.addEventListener("click", (event) => { 46 | console.log(event) 47 | status.innerText === "open" ? status.innerText = "closed" : status.innerText = "open" 48 | }) 49 | 50 | return backpackArticle; 51 | }); 52 | 53 | const main = document.querySelector(".maincontent"); 54 | 55 | backpackList.forEach((backpack) => { 56 | main.append(backpack); 57 | }); 58 | -------------------------------------------------------------------------------- /09_05/components/Backpack.js: -------------------------------------------------------------------------------- 1 | // Set up the Backpack class 2 | class Backpack { 3 | constructor( 4 | id, 5 | name, 6 | volume, 7 | color, 8 | pocketNum, 9 | strapLengthL, 10 | strapLengthR, 11 | lidOpen, 12 | dateAcquired, 13 | image 14 | ) { 15 | this.id = id; 16 | this.name = name; 17 | this.volume = volume; 18 | this.color = color; 19 | this.pocketNum = pocketNum; 20 | this.strapLength = { 21 | left: strapLengthL, 22 | right: strapLengthR, 23 | }; 24 | this.lidOpen = lidOpen; 25 | this.dateAcquired = dateAcquired; 26 | this.image = image; 27 | } 28 | toggleLid(lidStatus) { 29 | this.lidOpen = lidStatus; 30 | } 31 | newStrapLength(lengthLeft, lengthRight) { 32 | this.strapLength.left = lengthLeft; 33 | this.strapLength.right = lengthRight; 34 | } 35 | backpackAge() { 36 | let now = new Date(); 37 | let acquired = new Date(this.dateAcquired); 38 | let elapsed = now - acquired; // elapsed time in milliseconds 39 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 40 | return daysSinceAcquired; 41 | } 42 | } 43 | 44 | // Export the Backpack class to be used by other files 45 | export default Backpack; 46 | -------------------------------------------------------------------------------- /09_05/components/data.js: -------------------------------------------------------------------------------- 1 | // Import the Backpack class so we can make new Backpack objects. 2 | import Backpack from "./Backpack.js"; 3 | 4 | // Create new Backpack object 5 | const everydayPack = new Backpack( 6 | "pack01", 7 | "Everyday Backpack", 8 | 30, 9 | "grey", 10 | 15, 11 | 26, 12 | 26, 13 | false, 14 | "December 5, 2018 15:00:00 PST", 15 | "../assets/images/everyday.svg" 16 | ); 17 | 18 | // Create new Backpack object 19 | const frogPack = new Backpack( 20 | "pack02", 21 | "Frog Backpack", 22 | 8, 23 | "green", 24 | 3, 25 | 10, 26 | 10, 27 | false, 28 | "October 16, 2019 15:00:00 PST", 29 | "../assets/images/frog.svg" 30 | ); 31 | 32 | // Add Backpack objects into an array 33 | const backpackObjectArray = [everydayPack, frogPack]; 34 | 35 | // Export the array to be used in other files 36 | export default backpackObjectArray; 37 | -------------------------------------------------------------------------------- /09_05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 | 22 |
      23 |
      BackpackPacker
      24 |
      All backpack packing, all the time.
      25 |
      26 |
      27 |
      28 |

      A pack for every purpose

      29 |

      30 | If you're carrying a heavy load, you can't find a better tool than a 31 | backpack. Distributing the weight evenly across your shoulders, back, 32 | and hips, the backpack lets you use the natural frame of your body to 33 | literally shoulder the weight while your legs do the 34 | carrying. 35 |

      36 |
      37 |
      38 |
      39 |

      40 | Demo project for JavaScript Essential Training, a LinkedIn Learning 41 | course. 42 |

      43 |
      44 | 45 | 46 | -------------------------------------------------------------------------------- /09_05e/components/Backpack.js: -------------------------------------------------------------------------------- 1 | // Set up the Backpack class 2 | class Backpack { 3 | constructor( 4 | id, 5 | name, 6 | volume, 7 | color, 8 | pocketNum, 9 | strapLengthL, 10 | strapLengthR, 11 | lidOpen, 12 | dateAcquired, 13 | image 14 | ) { 15 | this.id = id; 16 | this.name = name; 17 | this.volume = volume; 18 | this.color = color; 19 | this.pocketNum = pocketNum; 20 | this.strapLength = { 21 | left: strapLengthL, 22 | right: strapLengthR, 23 | }; 24 | this.lidOpen = lidOpen; 25 | this.dateAcquired = dateAcquired; 26 | this.image = image; 27 | } 28 | toggleLid(lidStatus) { 29 | this.lidOpen = lidStatus; 30 | } 31 | newStrapLength(lengthLeft, lengthRight) { 32 | this.strapLength.left = lengthLeft; 33 | this.strapLength.right = lengthRight; 34 | } 35 | backpackAge() { 36 | let now = new Date(); 37 | let acquired = new Date(this.dateAcquired); 38 | let elapsed = now - acquired; // elapsed time in milliseconds 39 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 40 | return daysSinceAcquired; 41 | } 42 | } 43 | 44 | // Export the Backpack class to be used by other files 45 | export default Backpack; 46 | -------------------------------------------------------------------------------- /09_05e/components/data.js: -------------------------------------------------------------------------------- 1 | // Import the Backpack class so we can make new Backpack objects. 2 | import Backpack from "./Backpack.js"; 3 | 4 | // Create new Backpack object 5 | const everydayPack = new Backpack( 6 | "pack01", 7 | "Everyday Backpack", 8 | 30, 9 | "grey", 10 | 15, 11 | 26, 12 | 26, 13 | false, 14 | "December 5, 2018 15:00:00 PST", 15 | "../assets/images/everyday.svg" 16 | ); 17 | 18 | // Create new Backpack object 19 | const frogPack = new Backpack( 20 | "pack02", 21 | "Frog Backpack", 22 | 8, 23 | "green", 24 | 3, 25 | 10, 26 | 10, 27 | false, 28 | "October 16, 2019 15:00:00 PST", 29 | "../assets/images/frog.svg" 30 | ); 31 | 32 | // Add Backpack objects into an array 33 | const backpackObjectArray = [everydayPack, frogPack]; 34 | 35 | // Export the array to be used in other files 36 | export default backpackObjectArray; 37 | -------------------------------------------------------------------------------- /09_05e/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 | 22 |
      23 |
      BackpackPacker
      24 |
      All backpack packing, all the time.
      25 |
      26 |
      27 |
      28 |

      A pack for every purpose

      29 |

      30 | If you're carrying a heavy load, you can't find a better tool than a 31 | backpack. Distributing the weight evenly across your shoulders, back, 32 | and hips, the backpack lets you use the natural frame of your body to 33 | literally shoulder the weight while your legs do the 34 | carrying. 35 |

      36 |
      37 |
      38 |
      39 |

      40 | Demo project for JavaScript Essential Training, a LinkedIn Learning 41 | course. 42 |

      43 |
      44 | 45 | 46 | -------------------------------------------------------------------------------- /09_06/components/Backpack.js: -------------------------------------------------------------------------------- 1 | // Set up the Backpack class 2 | class Backpack { 3 | constructor( 4 | id, 5 | name, 6 | volume, 7 | color, 8 | pocketNum, 9 | strapLengthL, 10 | strapLengthR, 11 | lidOpen, 12 | dateAcquired, 13 | image 14 | ) { 15 | this.id = id; 16 | this.name = name; 17 | this.volume = volume; 18 | this.color = color; 19 | this.pocketNum = pocketNum; 20 | this.strapLength = { 21 | left: strapLengthL, 22 | right: strapLengthR, 23 | }; 24 | this.lidOpen = lidOpen; 25 | this.dateAcquired = dateAcquired; 26 | this.image = image; 27 | } 28 | toggleLid(lidStatus) { 29 | this.lidOpen = lidStatus; 30 | } 31 | newStrapLength(lengthLeft, lengthRight) { 32 | this.strapLength.left = lengthLeft; 33 | this.strapLength.right = lengthRight; 34 | } 35 | backpackAge() { 36 | let now = new Date(); 37 | let acquired = new Date(this.dateAcquired); 38 | let elapsed = now - acquired; // elapsed time in milliseconds 39 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 40 | return daysSinceAcquired; 41 | } 42 | } 43 | 44 | // Export the Backpack class to be used by other files 45 | export default Backpack; 46 | -------------------------------------------------------------------------------- /09_06/components/data.js: -------------------------------------------------------------------------------- 1 | // Import the Backpack class so we can make new Backpack objects. 2 | import Backpack from "./Backpack.js"; 3 | 4 | // Create new Backpack object 5 | const everydayPack = new Backpack( 6 | "pack01", 7 | "Everyday Backpack", 8 | 30, 9 | "grey", 10 | 15, 11 | 26, 12 | 26, 13 | false, 14 | "December 5, 2018 15:00:00 PST", 15 | "../assets/images/everyday.svg" 16 | ); 17 | 18 | // Create new Backpack object 19 | const frogPack = new Backpack( 20 | "pack02", 21 | "Frog Backpack", 22 | 8, 23 | "green", 24 | 3, 25 | 10, 26 | 10, 27 | false, 28 | "October 16, 2019 15:00:00 PST", 29 | "../assets/images/frog.svg" 30 | ); 31 | 32 | // Add Backpack objects into an array 33 | const backpackObjectArray = [everydayPack, frogPack]; 34 | 35 | // Export the array to be used in other files 36 | export default backpackObjectArray; 37 | -------------------------------------------------------------------------------- /09_06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 | 22 |
      23 |
      BackpackPacker
      24 |
      All backpack packing, all the time.
      25 |
      26 |
      27 |
      28 |

      A pack for every purpose

      29 |

      30 | If you're carrying a heavy load, you can't find a better tool than a 31 | backpack. Distributing the weight evenly across your shoulders, back, 32 | and hips, the backpack lets you use the natural frame of your body to 33 | literally shoulder the weight while your legs do the 34 | carrying. 35 |

      36 |
      37 |
      38 |
      39 |

      40 | Demo project for JavaScript Essential Training, a LinkedIn Learning 41 | course. 42 |

      43 |
      44 | 45 | 46 | -------------------------------------------------------------------------------- /09_07/components/Backpack.js: -------------------------------------------------------------------------------- 1 | // Set up the Backpack class 2 | class Backpack { 3 | constructor( 4 | id, 5 | name, 6 | volume, 7 | color, 8 | pocketNum, 9 | strapLengthL, 10 | strapLengthR, 11 | lidOpen, 12 | dateAcquired, 13 | image 14 | ) { 15 | this.id = id; 16 | this.name = name; 17 | this.volume = volume; 18 | this.color = color; 19 | this.pocketNum = pocketNum; 20 | this.strapLength = { 21 | left: strapLengthL, 22 | right: strapLengthR, 23 | }; 24 | this.lidOpen = lidOpen; 25 | this.dateAcquired = dateAcquired; 26 | this.image = image; 27 | } 28 | toggleLid(lidStatus) { 29 | this.lidOpen = lidStatus; 30 | } 31 | newStrapLength(lengthLeft, lengthRight) { 32 | this.strapLength.left = lengthLeft; 33 | this.strapLength.right = lengthRight; 34 | } 35 | backpackAge() { 36 | let now = new Date(); 37 | let acquired = new Date(this.dateAcquired); 38 | let elapsed = now - acquired; // elapsed time in milliseconds 39 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 40 | return daysSinceAcquired; 41 | } 42 | } 43 | 44 | // Export the Backpack class to be used by other files 45 | export default Backpack; 46 | -------------------------------------------------------------------------------- /09_07/components/data.js: -------------------------------------------------------------------------------- 1 | // Import the Backpack class so we can make new Backpack objects. 2 | import Backpack from "./Backpack.js"; 3 | 4 | // Create new Backpack object 5 | const everydayPack = new Backpack( 6 | "pack01", 7 | "Everyday Backpack", 8 | 30, 9 | "grey", 10 | 15, 11 | 26, 12 | 26, 13 | false, 14 | "December 5, 2018 15:00:00 PST", 15 | "../assets/images/everyday.svg" 16 | ); 17 | 18 | // Create new Backpack object 19 | const frogPack = new Backpack( 20 | "pack02", 21 | "Frog Backpack", 22 | 8, 23 | "green", 24 | 3, 25 | 10, 26 | 10, 27 | false, 28 | "October 16, 2019 15:00:00 PST", 29 | "../assets/images/frog.svg" 30 | ); 31 | 32 | // Add Backpack objects into an array 33 | const backpackObjectArray = [everydayPack, frogPack]; 34 | 35 | // Export the array to be used in other files 36 | export default backpackObjectArray; 37 | -------------------------------------------------------------------------------- /09_07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 | 22 |
      23 |
      BackpackPacker
      24 |
      All backpack packing, all the time.
      25 |
      26 |
      27 |
      28 |

      A pack for every purpose

      29 |

      30 | If you're carrying a heavy load, you can't find a better tool than a 31 | backpack. Distributing the weight evenly across your shoulders, back, 32 | and hips, the backpack lets you use the natural frame of your body to 33 | literally shoulder the weight while your legs do the 34 | carrying. 35 |

      36 |
      37 |
      38 |
      39 |

      40 | Demo project for JavaScript Essential Training, a LinkedIn Learning 41 | course. 42 |

      43 |
      44 | 45 | 46 | -------------------------------------------------------------------------------- /09_08/components/Backpack.js: -------------------------------------------------------------------------------- 1 | // Set up the Backpack class 2 | class Backpack { 3 | constructor( 4 | id, 5 | name, 6 | volume, 7 | color, 8 | pocketNum, 9 | strapLengthL, 10 | strapLengthR, 11 | lidOpen, 12 | dateAcquired, 13 | image 14 | ) { 15 | this.id = id; 16 | this.name = name; 17 | this.volume = volume; 18 | this.color = color; 19 | this.pocketNum = pocketNum; 20 | this.strapLength = { 21 | left: strapLengthL, 22 | right: strapLengthR, 23 | }; 24 | this.lidOpen = lidOpen; 25 | this.dateAcquired = dateAcquired; 26 | this.image = image; 27 | } 28 | toggleLid(lidStatus) { 29 | this.lidOpen = lidStatus; 30 | } 31 | newStrapLength(lengthLeft, lengthRight) { 32 | this.strapLength.left = lengthLeft; 33 | this.strapLength.right = lengthRight; 34 | } 35 | backpackAge() { 36 | let now = new Date(); 37 | let acquired = new Date(this.dateAcquired); 38 | let elapsed = now - acquired; // elapsed time in milliseconds 39 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 40 | return daysSinceAcquired; 41 | } 42 | } 43 | 44 | // Export the Backpack class to be used by other files 45 | export default Backpack; 46 | -------------------------------------------------------------------------------- /09_08/components/data.js: -------------------------------------------------------------------------------- 1 | // Import the Backpack class so we can make new Backpack objects. 2 | import Backpack from "./Backpack.js"; 3 | 4 | // Create new Backpack object 5 | const everydayPack = new Backpack( 6 | "pack01", 7 | "Everyday Backpack", 8 | 30, 9 | "grey", 10 | 15, 11 | 26, 12 | 26, 13 | false, 14 | "December 5, 2018 15:00:00 PST", 15 | "../assets/images/everyday.svg" 16 | ); 17 | 18 | // Create new Backpack object 19 | const frogPack = new Backpack( 20 | "pack02", 21 | "Frog Backpack", 22 | 8, 23 | "green", 24 | 3, 25 | 10, 26 | 10, 27 | false, 28 | "October 16, 2019 15:00:00 PST", 29 | "../assets/images/frog.svg" 30 | ); 31 | 32 | // Add Backpack objects into an array 33 | const backpackObjectArray = [everydayPack, frogPack]; 34 | 35 | // Export the array to be used in other files 36 | export default backpackObjectArray; 37 | -------------------------------------------------------------------------------- /09_08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 | 22 |
      23 |
      BackpackPacker
      24 |
      All backpack packing, all the time.
      25 |
      26 |
      27 |
      28 |

      A pack for every purpose

      29 |

      30 | If you're carrying a heavy load, you can't find a better tool than a 31 | backpack. Distributing the weight evenly across your shoulders, back, 32 | and hips, the backpack lets you use the natural frame of your body to 33 | literally shoulder the weight while your legs do the 34 | carrying. 35 |

      36 |
      37 |
      38 |
      39 |

      40 | Demo project for JavaScript Essential Training, a LinkedIn Learning 41 | course. 42 |

      43 |
      44 | 45 | 46 | -------------------------------------------------------------------------------- /10_01/components/Backpack.js: -------------------------------------------------------------------------------- 1 | // Set up the Backpack class 2 | class Backpack { 3 | constructor( 4 | id, 5 | name, 6 | volume, 7 | color, 8 | pocketNum, 9 | strapLengthL, 10 | strapLengthR, 11 | lidOpen, 12 | dateAcquired, 13 | image 14 | ) { 15 | this.id = id; 16 | this.name = name; 17 | this.volume = volume; 18 | this.color = color; 19 | this.pocketNum = pocketNum; 20 | this.strapLength = { 21 | left: strapLengthL, 22 | right: strapLengthR, 23 | }; 24 | this.lidOpen = lidOpen; 25 | this.dateAcquired = dateAcquired; 26 | this.image = image; 27 | } 28 | toggleLid(lidStatus) { 29 | this.lidOpen = lidStatus; 30 | } 31 | newStrapLength(lengthLeft, lengthRight) { 32 | this.strapLength.left = lengthLeft; 33 | this.strapLength.right = lengthRight; 34 | } 35 | backpackAge() { 36 | let now = new Date(); 37 | let acquired = new Date(this.dateAcquired); 38 | let elapsed = now - acquired; // elapsed time in milliseconds 39 | let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); 40 | return daysSinceAcquired; 41 | } 42 | } 43 | 44 | // Export the Backpack class to be used by other files 45 | export default Backpack; 46 | -------------------------------------------------------------------------------- /10_01/components/data.js: -------------------------------------------------------------------------------- 1 | // Import the Backpack class so we can make new Backpack objects. 2 | import Backpack from "./Backpack.js"; 3 | 4 | // Create new Backpack object 5 | const everydayPack = new Backpack( 6 | "pack01", 7 | "Everyday Backpack", 8 | 30, 9 | "grey", 10 | 15, 11 | 26, 12 | 26, 13 | false, 14 | "December 5, 2018 15:00:00 PST", 15 | "../assets/images/everyday.svg" 16 | ); 17 | 18 | // Create new Backpack object 19 | const frogPack = new Backpack( 20 | "pack02", 21 | "Frog Backpack", 22 | 8, 23 | "green", 24 | 3, 25 | 10, 26 | 10, 27 | false, 28 | "October 16, 2019 15:00:00 PST", 29 | "../assets/images/frog.svg" 30 | ); 31 | 32 | // Add Backpack objects into an array 33 | const backpackObjectArray = [everydayPack, frogPack]; 34 | 35 | // Export the array to be used in other files 36 | export default backpackObjectArray; 37 | -------------------------------------------------------------------------------- /10_01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BackpackPacker 7 | 11 | 17 | 18 | 19 | 20 | 21 | 22 |
      23 |
      BackpackPacker
      24 |
      All backpack packing, all the time.
      25 |
      26 |
      27 |
      28 |

      A pack for every purpose

      29 |

      30 | If you're carrying a heavy load, you can't find a better tool than a 31 | backpack. Distributing the weight evenly across your shoulders, back, 32 | and hips, the backpack lets you use the natural frame of your body to 33 | literally shoulder the weight while your legs do the 34 | carrying. 35 |

      36 |
      37 |
      38 |
      39 |

      40 | Demo project for JavaScript Essential Training, a LinkedIn Learning 41 | course. 42 |

      43 |
      44 | 45 | 46 | -------------------------------------------------------------------------------- /10_02/Photo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Fragment from React Photo Gallery component. 3 | * By Sandra Gonzales @neptunian 4 | * @link https://github.com/neptunian/react-photo-gallery 5 | * The MIT License (MIT) 6 | * Copyright (c) 2015-2018 Sandra Gonzales 7 | */ 8 | 9 | import React from "react"; 10 | import PropTypes from "prop-types"; 11 | 12 | const imgWithClick = { cursor: "pointer" }; 13 | 14 | const Photo = ({ 15 | index, 16 | onClick, 17 | photo, 18 | margin, 19 | direction, 20 | top, 21 | left, 22 | key, 23 | }) => { 24 | const imgStyle = { margin: margin, display: "block" }; 25 | if (direction === "column") { 26 | imgStyle.position = "absolute"; 27 | imgStyle.left = left; 28 | imgStyle.top = top; 29 | } 30 | 31 | const handleClick = (event) => { 32 | onClick(event, { photo, index }); 33 | }; 34 | 35 | return ( 36 | 42 | ); 43 | }; 44 | 45 | export const photoPropType = PropTypes.shape({ 46 | key: PropTypes.string, 47 | src: PropTypes.string.isRequired, 48 | width: PropTypes.number.isRequired, 49 | height: PropTypes.number.isRequired, 50 | alt: PropTypes.string, 51 | title: PropTypes.string, 52 | srcSet: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), 53 | sizes: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), 54 | }); 55 | 56 | Photo.propTypes = { 57 | index: PropTypes.number.isRequired, 58 | onClick: PropTypes.func, 59 | photo: photoPropType.isRequired, 60 | margin: PropTypes.number, 61 | top: (props) => { 62 | if (props.direction === "column" && typeof props.top !== "number") { 63 | return new Error( 64 | "top is a required number when direction is set to `column`" 65 | ); 66 | } 67 | }, 68 | left: (props) => { 69 | if (props.direction === "column" && typeof props.left !== "number") { 70 | return new Error( 71 | "left is a required number when direction is set to `column`" 72 | ); 73 | } 74 | }, 75 | direction: PropTypes.string, 76 | }; 77 | 78 | export default Photo; 79 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | Contribution Agreement 3 | ====================== 4 | 5 | This repository does not accept pull requests (PRs). All pull requests will be closed. 6 | 7 | However, if any contributions (through pull requests, issues, feedback or otherwise) are provided, as a contributor, you represent that the code you submit is your original work or that of your employer (in which case you represent you have the right to bind your employer). By submitting code (or otherwise providing feedback), you (and, if applicable, your employer) are licensing the submitted code (and/or feedback) to LinkedIn and the open source community subject to the BSD 2-Clause license. 8 | -------------------------------------------------------------------------------- /JavaScript Essential Training Resources.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LinkedInLearning/javascript-essential-training-2832077/4828e5face4efbd2e737b9826c193784ddabf139/JavaScript Essential Training Resources.pdf -------------------------------------------------------------------------------- /Practice/03_07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Practice: Making Objects 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Practice/03_07/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Practice: Building objects 3 | * 4 | * - Create JavaScript objects based on objects in your current environment. 5 | * - Give each object an identifiable name. 6 | * - Create properties to describe the objects and set their values. 7 | * - Find an object that has another object inside of it to create a nested object. 8 | * - Test your objects in the browser console by accessing the entire object and its specific properties. 9 | */ 10 | -------------------------------------------------------------------------------- /Practice/03_09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Practice: Making methods 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Practice/03_09/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Practice: Making methods 3 | * 4 | * - Create a method for each object property. 5 | * - The method receives a value to match the property to be changed. 6 | * - Create a simple function to replace the current property value with the received value. 7 | * - Test the method by sending new values and checking the properties in the console. 8 | */ 9 | 10 | const backpack = { 11 | name: "Everyday Backpack", 12 | volume: 30, 13 | color: "grey", 14 | pocketNum: 15, 15 | strapLength: { 16 | left: 26, 17 | right: 26, 18 | }, 19 | toggleLid: function (lidStatus) { 20 | this.lidOpen = lidStatus; 21 | }, 22 | newStrapLength: function (lengthLeft, lengthRight) { 23 | this.strapLength.left = lengthLeft; 24 | this.strapLength.right = lengthRight; 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /Practice/03_12/Backpack.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Creating classes: 3 | * 4 | * Class declaration: class Name {} 5 | * Class expression: const Name = class {} 6 | */ 7 | 8 | class Backpack { 9 | constructor( 10 | // Defines parameters: 11 | name, 12 | volume, 13 | color, 14 | pocketNum, 15 | strapLengthL, 16 | strapLengthR, 17 | lidOpen 18 | ) { 19 | // Define properties: 20 | this.name = name; 21 | this.volume = volume; 22 | this.color = color; 23 | this.pocketNum = pocketNum; 24 | this.strapLength = { 25 | left: strapLengthL, 26 | right: strapLengthR, 27 | }; 28 | this.lidOpen = lidOpen; 29 | } 30 | // Add methods like normal functions: 31 | toggleLid(lidStatus) { 32 | this.lidOpen = lidStatus; 33 | } 34 | newStrapLength(lengthLeft, lengthRight) { 35 | this.strapLength.left = lengthLeft; 36 | this.strapLength.right = lengthRight; 37 | } 38 | } 39 | 40 | export default Backpack; 41 | -------------------------------------------------------------------------------- /Practice/03_12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Practice: Making classes and objects 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Practice/03_12/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Practice: Making classes and objects 3 | * 4 | * - Find a type of object you have more than one of in your house (eg. clothing, writing tools, etc). 5 | * - Create a class describing this object type - its properties and methods. 6 | * - Create several objects using the class. 7 | * - Test the objecs by calling their properties and using their methods in the console. 8 | */ 9 | -------------------------------------------------------------------------------- /Practice/05_04/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Note: This file is intentionally empty. 3 | * You can use it to test your skills at traversing the DOM using JavaScript. 4 | */ 5 | -------------------------------------------------------------------------------- /Practice/05_08/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Note: This file is intentionally empty. 3 | * You can use it to test your skills at adding, removing, or modifying 4 | * attributes, classes, and inline styles on elements. 5 | */ 6 | -------------------------------------------------------------------------------- /Practice/08_06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Practice: Building functions 7 | 8 | 9 | 10 |
      11 | 12 | 13 | -------------------------------------------------------------------------------- /Practice/08_06/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Practice: Pass values between functions 3 | * 4 | * - Create two functions 5 | * - Main function creates article element with data from object 6 | * - Helper function creates. 7 | */ 8 | -------------------------------------------------------------------------------- /Practice/08_09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Practice: Pass values between functions 7 | 8 | 9 | 10 |
      11 | 12 | 13 | -------------------------------------------------------------------------------- /Practice/08_09/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Practice: Pass values between functions 3 | * 4 | * Create two functions: 5 | * - Main function 6 | * - Creates new
      element 7 | * - Populates
      with content (see const content below) 8 | * - Returns
      element to where function is called 9 | * - Helper image function 10 | * - Creates new
      element 11 | * - Adds markup pointing to frogpack.image 12 | * - Adds
      element with image description 13 | * - Returns
      element to where function is called 14 | */ 15 | 16 | const frogpack = { 17 | name: "Frog Backpack", 18 | volume: 8, 19 | color: "green", 20 | pocketNum: 3, 21 | strapLength: { 22 | left: 10, 23 | right: 10, 24 | }, 25 | lidOpen: false, 26 | image: "../../assets/images/frog.svg", 27 | toggleLid: function (lidStatus) { 28 | this.lidOpen = lidStatus; 29 | }, 30 | newStrapLength: function (lengthLeft, lengthRight) { 31 | this.strapLength.left = lengthLeft; 32 | this.strapLength.right = lengthRight; 33 | }, 34 | }; 35 | 36 | // Baseline HTML output 37 | const content = ` 38 |

      ${frogpack.name}

      39 |
        40 |
      • Volume: ${ 41 | frogpack.volume 42 | }l
        • 43 |
      • Color: ${ 44 | frogpack.color 45 | }
        • 46 |
      • Number of pockets: ${ 47 | frogpack.pocketNum 48 | }
        • 49 |
      • Left strap length: ${ 50 | frogpack.strapLength.left 51 | } inches
        • 52 |
      • Right strap length: ${ 53 | frogpack.strapLength.right 54 | } inches
        • 55 |
      • Lid status: ${ 56 | frogpack.lidOpen ? "open" : "closed" 57 | }
        • 58 |
      59 | `; 60 | -------------------------------------------------------------------------------- /Practice/09_04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Practice: Play with event listeners 7 | 8 | 9 | 10 | 11 |
      12 |
        13 |
      • 14 |
      • 15 |
      • 16 |
      • 17 |
      • 18 |
      • 19 |
      • 20 |
      • 21 |
      • 22 |
      • 23 |
      • 24 |
      • 25 |
      • 26 |
      • 27 |
      • 28 |
      • 29 |
      • 30 |
      • 31 |
      • 32 |
      • 33 |
      • 34 |
      • 35 |
      • 36 |
      • 37 |
      • 38 |
      • 39 |
      • 40 |
      • 41 |
      42 |
      43 | 44 | 45 | -------------------------------------------------------------------------------- /Practice/09_04/script-example.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Practice: Play with event listeners 3 | * - Use an event listener and CSS either inline or through an added class to draw a highlight around the entire grid when you hover over it with your mouse. 4 | * - Add an event listener to each grid cell to highlight that cell when you hover your mouse over it. 5 | * - Add an event listener to each grid cell to change its background color when it is clicked. 6 | * - Add an event listener to a specific key on the keyboard to change the background color of the whole page - from dark to light and back again. 7 | */ 8 | 9 | const gridContainer = document.querySelector(".grid"); 10 | 11 | gridContainer.addEventListener("mouseenter", () => { 12 | gridContainer.style.outline = "6px solid red"; 13 | }); 14 | 15 | gridContainer.addEventListener("mouseleave", () => { 16 | gridContainer.style.outline = ""; 17 | }); 18 | 19 | /** 20 | * Function to generate random hex color 21 | */ 22 | const randColor = () => { 23 | let hexColor = Math.floor(Math.random() * 16777215).toString(16); 24 | return hexColor; 25 | }; 26 | 27 | // Get all cells 28 | const gridCells = document.querySelectorAll(".cell"); 29 | 30 | // For each cell, add eventlisteners aplenty 31 | gridCells.forEach((cell) => { 32 | // Set outline when cell is hovered 33 | cell.addEventListener("mouseenter", (e) => { 34 | console.log(e); 35 | cell.style.outline = "2px solid red"; 36 | }); 37 | 38 | // Remove outline when cell is exited 39 | cell.addEventListener("mouseleave", () => { 40 | cell.style.outline = ""; 41 | }); 42 | 43 | // Set/remove random background color on click 44 | cell.addEventListener("click", () => { 45 | if (cell.style.backgroundColor) { 46 | cell.style.backgroundColor = ""; 47 | } else { 48 | cell.style.backgroundColor = `#${randColor()}`; 49 | } 50 | }); 51 | }); 52 | 53 | /** 54 | * Set page background using the "d" key on the keyboard 55 | */ 56 | const body = document.body; 57 | body.addEventListener("keydown", (event) => { 58 | // event.code holds the current key pressed: 59 | console.log(event.code); 60 | 61 | // Test for KeyD (the "d" key) 62 | if (event.code === "KeyD") { 63 | body.style.backgroundColor === "" 64 | ? (body.style.backgroundColor = "hsl(201, 34%, 13%)") 65 | : (body.style.backgroundColor = ""); 66 | } 67 | }); 68 | -------------------------------------------------------------------------------- /Practice/09_04/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Practice: Play with event listeners 3 | * - Use an event listener and CSS either inline or through an added class to draw a highlight around the entire grid when you hover over it with your mouse. 4 | * - Add an event listener to each grid cell to highlight that cell when you hover your mouse over it. 5 | * - Add an event listener to each grid cell to change its background color when it is clicked. 6 | * - Add an event listener to a specific key on the keyboard to change the background color of the whole page - from dark to light and back again. 7 | */ 8 | -------------------------------------------------------------------------------- /Practice/09_04/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | height: 100vh; 7 | } 8 | 9 | .grid { 10 | margin: 0; 11 | padding: 1rem; 12 | display: grid; 13 | grid-template-columns: repeat(7, 6rem); 14 | gap: 1rem; 15 | list-style-type: none; 16 | border-radius: 0.5rem; 17 | } 18 | 19 | .cell { 20 | display: block; 21 | width: 6rem; 22 | height: 6rem; 23 | background-color: hsl(0, 0%, 90%); 24 | } 25 | -------------------------------------------------------------------------------- /assets/images/everyday.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/frog.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "javascript-essential-training-exercise-files", 3 | "version": "1.0.0", 4 | "description": "Repository for exercise files used in the LinkedIn Learning course `JavaScript Essential Training` instructed by Morten Rand-Hendriksen and published 2020.", 5 | "main": "index.html", 6 | "author": "Morten Rand-Hendriksen", 7 | "license": "SEE LICENSE IN LICENSE", 8 | "devDependencies": { 9 | "eslint": "^7.11.0", 10 | "eslint-config-standard": "^14.1.1", 11 | "eslint-plugin-import": "^2.22.0", 12 | "eslint-plugin-node": "^11.1.0", 13 | "eslint-plugin-promise": "^4.2.1", 14 | "eslint-plugin-standard": "^4.0.1", 15 | "prettier": "^2.1.2" 16 | } 17 | } 18 | --------------------------------------------------------------------------------