From a757a8fc08a631e89399114a5ad1dca9ce864a46 Mon Sep 17 00:00:00 2001 From: Morten Rand-Hendriksen Date: Tue, 20 Oct 2020 15:54:17 -0700 Subject: [PATCH] Update with practice files --- .eslintrc.js | 23 ++-- 09_05e/script.js | 28 ++-- Practice/03_07 - making objects/script.js | 9 -- .../index.html | 0 Practice/03_07/script.js | 10 ++ .../index.html | 0 .../script.js | 0 Practice/03_12/Backpack.js | 40 ++++++ Practice/03_12/index.html | 11 ++ .../script.js | 0 Practice/05_04/index.html | 121 ++++++++++++++++++ Practice/05_08/index.html | 121 ++++++++++++++++++ .../index.html | 6 +- Practice/08_06/script.js | 7 + Practice/08_09/index.html | 12 ++ Practice/08_09/script-example.js | 94 ++++++++++++++ Practice/08_09/script.js | 59 +++++++++ Practice/09_04/index.html | 44 +++++++ Practice/09_04/script-example.js | 67 ++++++++++ Practice/09_04/script.js | 7 + Practice/09_04/style.css | 24 ++++ 21 files changed, 644 insertions(+), 39 deletions(-) delete mode 100755 Practice/03_07 - making objects/script.js rename Practice/{03_07 - making objects => 03_07}/index.html (100%) create mode 100755 Practice/03_07/script.js rename Practice/{03_09 - making methods => 03_09}/index.html (100%) rename Practice/{03_09 - making methods => 03_09}/script.js (100%) create mode 100755 Practice/03_12/Backpack.js create mode 100755 Practice/03_12/index.html rename Practice/{03_12 - making classes => 03_12}/script.js (100%) create mode 100644 Practice/05_04/index.html create mode 100644 Practice/05_08/index.html rename Practice/{03_12 - making classes => 08_06}/index.html (71%) create mode 100755 Practice/08_06/script.js create mode 100755 Practice/08_09/index.html create mode 100755 Practice/08_09/script-example.js create mode 100755 Practice/08_09/script.js create mode 100644 Practice/09_04/index.html create mode 100644 Practice/09_04/script-example.js create mode 100644 Practice/09_04/script.js create mode 100644 Practice/09_04/style.css diff --git a/.eslintrc.js b/.eslintrc.js index b9a064fe..f4585458 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,15 +1,12 @@ module.exports = { - "env": { - "browser": true, - "es2021": true - }, - "extends": [ - "standard" - ], - "parserOptions": { - "ecmaVersion": 12, - "sourceType": "module" - }, - "rules": { - } + env: { + browser: true, + es2021: true, + }, + extends: "eslint:recommended", + parserOptions: { + ecmaVersion: 12, + sourceType: "module", + }, + rules: {}, }; diff --git a/09_05e/script.js b/09_05e/script.js index 91740b64..cd22ec04 100755 --- a/09_05e/script.js +++ b/09_05e/script.js @@ -9,29 +9,29 @@ import backpackObjectArray from "./components/data.js"; * Add event listener to the lid-toggle button. */ const lidToggle = function () { - // Find the current backpack object in backpackObjectArray - let backpackObject = backpackObjectArray.find( ({ id }) => id === this.parentElement.id ); - + let backpackObject = backpackObjectArray.find( + ({ id }) => id === this.parentElement.id + ); + // Toggle lidOpen status - backpackObject.lidOpen == true - ? backpackObject.lidOpen = false - : backpackObject.lidOpen = true; + backpackObject.lidOpen == true + ? (backpackObject.lidOpen = false) + : (backpackObject.lidOpen = true); // Toggle button text - this.innerText == "Open lid" - ? this.innerText = "Close lid" - : this.innerText = "Open lid"; + this.innerText == "Open lid" + ? (this.innerText = "Close lid") + : (this.innerText = "Open lid"); // Set visible property status text let status = this.parentElement.querySelector(".backpack__lid span"); status.innerText == "closed" ? (status.innerText = "open") : (status.innerText = "closed"); -} +}; const backpackList = backpackObjectArray.map((backpack) => { - let backpackArticle = document.createElement("article"); backpackArticle.classList.add("backpack"); backpackArticle.setAttribute("id", backpack.id); @@ -64,11 +64,11 @@ const backpackList = backpackObjectArray.map((backpack) => { `; - + let button = backpackArticle.querySelector(".lid-toggle"); // Add event listener - button.addEventListener("click", lidToggle) + button.addEventListener("click", lidToggle); return backpackArticle; }); @@ -79,5 +79,3 @@ const main = document.querySelector(".maincontent"); backpackList.forEach((backpack) => { main.append(backpack); }); - - diff --git a/Practice/03_07 - making objects/script.js b/Practice/03_07 - making objects/script.js deleted file mode 100755 index 691dce02..00000000 --- a/Practice/03_07 - making objects/script.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Practice: Making objects - * - * - Pick real-life objects. - * - Give each object an identifiable name. - * - Create properties to describe the objects and set their values. - * - Create a nested object. - * - Test your objects in the browser console by accessing the entire object and its specific properties. - */ diff --git a/Practice/03_07 - making objects/index.html b/Practice/03_07/index.html similarity index 100% rename from Practice/03_07 - making objects/index.html rename to Practice/03_07/index.html diff --git a/Practice/03_07/script.js b/Practice/03_07/script.js new file mode 100755 index 00000000..7c19b174 --- /dev/null +++ b/Practice/03_07/script.js @@ -0,0 +1,10 @@ +/** + * Practice: Building functions + * + * - Create a basic function declaration - you’ll remember that’s where we say “function” followed by the name of the function. + * - In the body of the function declaration, do something to an element in the DOM. For this you can use any of the techniques we’ve covered earlier - finding an element using querySelector, adding a class, whatever you like. + * - Call the function declaration so the action takes place. + * - Create a basic function expression - that’s when you define a variable and place an anonymous function inside + * - Do the same as above - find an element, make a change to it, call the function, make sure it works. + * - Finally, create an arrow function, make it do something, and call it. + */ diff --git a/Practice/03_09 - making methods/index.html b/Practice/03_09/index.html similarity index 100% rename from Practice/03_09 - making methods/index.html rename to Practice/03_09/index.html diff --git a/Practice/03_09 - making methods/script.js b/Practice/03_09/script.js similarity index 100% rename from Practice/03_09 - making methods/script.js rename to Practice/03_09/script.js diff --git a/Practice/03_12/Backpack.js b/Practice/03_12/Backpack.js new file mode 100755 index 00000000..cca45eb3 --- /dev/null +++ b/Practice/03_12/Backpack.js @@ -0,0 +1,40 @@ +/** + * Creating classes: + * + * Class declaration: class Name {} + * Class expression: const Name = class {} + */ + +class Backpack { + constructor( + // Defines parameters: + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen + ) { + // Define properties: + this.name = name; + this.volume = volume; + this.color = color; + this.pocketNum = pocketNum; + this.strapLength = { + left: strapLengthL, + right: strapLengthR, + }; + this.lidOpen = lidOpen; + } + // Add methods like normal functions: + toggleLid(lidStatus) { + this.lidOpen = lidStatus; + } + newStrapLength(lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + } +} + +export default Backpack; diff --git a/Practice/03_12/index.html b/Practice/03_12/index.html new file mode 100755 index 00000000..a082a72d --- /dev/null +++ b/Practice/03_12/index.html @@ -0,0 +1,11 @@ + + + + + + Practice: Making classes and objects + + + + + diff --git a/Practice/03_12 - making classes/script.js b/Practice/03_12/script.js similarity index 100% rename from Practice/03_12 - making classes/script.js rename to Practice/03_12/script.js diff --git a/Practice/05_04/index.html b/Practice/05_04/index.html new file mode 100644 index 00000000..c13b202a --- /dev/null +++ b/Practice/05_04/index.html @@ -0,0 +1,121 @@ + + + + + BackpackPacker + + + + + + + +
+
BackpackPacker
+
All backpack packing, all the time.
+
+
+
+

A pack for every purpose

+

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

+
+
+
+ +
+

Everyday Backpack

+
    +
  • Volume: 30l
    • +
  • Color: grey
    • +
  • Age: 684 days old
    • +
  • + Number of pockets: 15 +
    • +
  • + Left strap length: 26 inches +
    + + +
    +
    • +
  • + Right strap length: 26 inches +
    + + +
    +
    • +
  • Lid status: closed
    • +
+ +
+
+
+ +
+

Frog Backpack

+
    +
  • Volume: 8l
    • +
  • Color: green
    • +
  • Age: 369 days old
    • +
  • + Number of pockets: 3 +
    • +
  • + Left strap length: 10 inches +
    + + +
    +
    • +
  • + Right strap length: 10 inches +
    + + +
    +
    • +
  • Lid status: closed
    • +
+ +
+
+ + + + diff --git a/Practice/05_08/index.html b/Practice/05_08/index.html new file mode 100644 index 00000000..c13b202a --- /dev/null +++ b/Practice/05_08/index.html @@ -0,0 +1,121 @@ + + + + + BackpackPacker + + + + + + + +
+
BackpackPacker
+
All backpack packing, all the time.
+
+
+
+

A pack for every purpose

+

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

+
+
+
+ +
+

Everyday Backpack

+
    +
  • Volume: 30l
    • +
  • Color: grey
    • +
  • Age: 684 days old
    • +
  • + Number of pockets: 15 +
    • +
  • + Left strap length: 26 inches +
    + + +
    +
    • +
  • + Right strap length: 26 inches +
    + + +
    +
    • +
  • Lid status: closed
    • +
+ +
+
+
+ +
+

Frog Backpack

+
    +
  • Volume: 8l
    • +
  • Color: green
    • +
  • Age: 369 days old
    • +
  • + Number of pockets: 3 +
    • +
  • + Left strap length: 10 inches +
    + + +
    +
    • +
  • + Right strap length: 10 inches +
    + + +
    +
    • +
  • Lid status: closed
    • +
+ +
+
+ + + + diff --git a/Practice/03_12 - making classes/index.html b/Practice/08_06/index.html similarity index 71% rename from Practice/03_12 - making classes/index.html rename to Practice/08_06/index.html index 6fe95f2a..8ede1452 100755 --- a/Practice/03_12 - making classes/index.html +++ b/Practice/08_06/index.html @@ -3,8 +3,10 @@ - Practice: Making classes and objects + Practice: Building functions - + +
+ diff --git a/Practice/08_06/script.js b/Practice/08_06/script.js new file mode 100755 index 00000000..8b335a7e --- /dev/null +++ b/Practice/08_06/script.js @@ -0,0 +1,7 @@ +/** + * Practice: Pass values between functions + * + * - Create two functions + * - Main function creates article element with data from object + * - Helper function creates. + */ diff --git a/Practice/08_09/index.html b/Practice/08_09/index.html new file mode 100755 index 00000000..d95e63e0 --- /dev/null +++ b/Practice/08_09/index.html @@ -0,0 +1,12 @@ + + + + + + Practice: Pass values between functions + + + +
+ + diff --git a/Practice/08_09/script-example.js b/Practice/08_09/script-example.js new file mode 100755 index 00000000..a29327dc --- /dev/null +++ b/Practice/08_09/script-example.js @@ -0,0 +1,94 @@ +/** + * Practice: Pass values between functions + * + * Create two functions: + * - Main function + * - Creates new
element + * - Populates
with content (see const content below) + * - Returns
element to where function is called + * - Helper image function + * - Creates new
element + * - Adds markup pointing to frogpack.image + * - Adds
element with image description + * - Returns
element to where function is called + */ + +const frogpack = { + name: "Frog Backpack", + volume: 8, + color: "green", + pocketNum: 3, + strapLength: { + left: 10, + right: 10, + }, + lidOpen: false, + image: "../../assets/images/frog.svg", + description: + "A green kids backpack designed to make the lid look like the face of a frog sticking out its tongue.", + toggleLid: function (lidStatus) { + this.lidOpen = lidStatus; + }, + newStrapLength: function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + }, +}; + +// Baseline HTML output +const content = ` +

${frogpack.name}

+
    +
  • Volume: ${ + frogpack.volume + }l
    • +
  • Color: ${ + frogpack.color + }
    • +
  • Number of pockets: ${ + frogpack.pocketNum + }
    • +
  • Left strap length: ${ + frogpack.strapLength.left + } inches
    • +
  • Right strap length: ${ + frogpack.strapLength.right + } inches
    • +
  • Lid status: ${ + frogpack.lidOpen ? "open" : "closed" + }
    • +
+`; + +/** + * addFigure function + * - Receives dataObj + * - Creates
+ * - Returns
+ */ +const addFigure = (dataObj) => { + let newFigure = document.createElement("figure"); + let newImg = document.createElement("img"); + newImg.setAttribute("src", dataObj.image); + newImg.setAttribute("alt", ""); + let newDesc = document.createElement("figcaption"); + newDesc.innerText = dataObj.description; + newFigure.append(newImg, newDesc); + return newFigure; +}; + +/** + * createArticle function + * - Receives backpack object + * - Creates
+ * - Calls addFigure() + * - Returns
+ */ +const createArticle = (frogpack) => { + let newArticle = document.createElement("article"); + newArticle.innerHTML = content; + newArticle.prepend(addFigure(frogpack)); + return newArticle; +}; + +document.querySelector("main").append(createArticle(frogpack)); diff --git a/Practice/08_09/script.js b/Practice/08_09/script.js new file mode 100755 index 00000000..6a9e9fd1 --- /dev/null +++ b/Practice/08_09/script.js @@ -0,0 +1,59 @@ +/** + * Practice: Pass values between functions + * + * Create two functions: + * - Main function + * - Creates new
element + * - Populates
with content (see const content below) + * - Returns
element to where function is called + * - Helper image function + * - Creates new
element + * - Adds markup pointing to frogpack.image + * - Adds
element with image description + * - Returns
element to where function is called + */ + +const frogpack = { + name: "Frog Backpack", + volume: 8, + color: "green", + pocketNum: 3, + strapLength: { + left: 10, + right: 10, + }, + lidOpen: false, + image: "../../assets/images/frog.svg", + toggleLid: function (lidStatus) { + this.lidOpen = lidStatus; + }, + newStrapLength: function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + }, +}; + +// Baseline HTML output +const content = ` +

${frogpack.name}

+
    +
  • Volume: ${ + frogpack.volume + }l
    • +
  • Color: ${ + frogpack.color + }
    • +
  • Number of pockets: ${ + frogpack.pocketNum + }
    • +
  • Left strap length: ${ + frogpack.strapLength.left + } inches
    • +
  • Right strap length: ${ + frogpack.strapLength.right + } inches
    • +
  • Lid status: ${ + frogpack.lidOpen ? "open" : "closed" + }
    • +
+`; diff --git a/Practice/09_04/index.html b/Practice/09_04/index.html new file mode 100644 index 00000000..02b7df47 --- /dev/null +++ b/Practice/09_04/index.html @@ -0,0 +1,44 @@ + + + + + + Practice: Play with event listeners + + + + +
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
+
+ + diff --git a/Practice/09_04/script-example.js b/Practice/09_04/script-example.js new file mode 100644 index 00000000..abe6fefc --- /dev/null +++ b/Practice/09_04/script-example.js @@ -0,0 +1,67 @@ +/** + * Practice: Play with event listeners + * - 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. + * - Add an event listener to each grid cell to highlight that cell when you hover your mouse over it. + * - Add an event listener to each grid cell to change its background color when it is clicked. + * - 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. + */ + +const gridContainer = document.querySelector(".grid"); + +gridContainer.addEventListener("mouseenter", () => { + gridContainer.style.outline = "6px solid red"; +}); + +gridContainer.addEventListener("mouseleave", () => { + gridContainer.style.outline = ""; +}); + +/** + * Function to generate random hex color + */ +const randColor = () => { + let hexColor = Math.floor(Math.random() * 16777215).toString(16); + return hexColor; +}; + +// Get all cells +const gridCells = document.querySelectorAll(".cell"); + +// For each cell, add eventlisteners aplenty +gridCells.forEach((cell) => { + // Set outline when cell is hovered + cell.addEventListener("mouseenter", (e) => { + console.log(e); + cell.style.outline = "2px solid red"; + }); + + // Remove outline when cell is exited + cell.addEventListener("mouseleave", () => { + cell.style.outline = ""; + }); + + // Set/remove random background color on click + cell.addEventListener("click", () => { + if (cell.style.backgroundColor) { + cell.style.backgroundColor = ""; + } else { + cell.style.backgroundColor = `#${randColor()}`; + } + }); +}); + +/** + * Set page background using the "d" key on the keyboard + */ +const body = document.body; +body.addEventListener("keydown", (event) => { + // event.code holds the current key pressed: + console.log(event.code); + + // Test for KeyD (the "d" key) + if (event.code === "KeyD") { + body.style.backgroundColor === "" + ? (body.style.backgroundColor = "hsl(201, 34%, 13%)") + : (body.style.backgroundColor = ""); + } +}); diff --git a/Practice/09_04/script.js b/Practice/09_04/script.js new file mode 100644 index 00000000..de61e8a7 --- /dev/null +++ b/Practice/09_04/script.js @@ -0,0 +1,7 @@ +/** + * Practice: Play with event listeners + * - 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. + * - Add an event listener to each grid cell to highlight that cell when you hover your mouse over it. + * - Add an event listener to each grid cell to change its background color when it is clicked. + * - 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. + */ diff --git a/Practice/09_04/style.css b/Practice/09_04/style.css new file mode 100644 index 00000000..76f84132 --- /dev/null +++ b/Practice/09_04/style.css @@ -0,0 +1,24 @@ +body { + margin: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.grid { + margin: 0; + padding: 1rem; + display: grid; + grid-template-columns: repeat(7, 6rem); + gap: 1rem; + list-style-type: none; + border-radius: 0.5rem; +} + +.cell { + display: block; + width: 6rem; + height: 6rem; + background-color: hsl(0, 0%, 90%); +}