diff --git a/01_06/index.html b/01_06/index.html new file mode 100755 index 00000000..321b97c0 --- /dev/null +++ b/01_06/index.html @@ -0,0 +1,10 @@ + + + + + + Console demo + + + + diff --git a/01_06/script.js b/01_06/script.js new file mode 100755 index 00000000..84fbede2 --- /dev/null +++ b/01_06/script.js @@ -0,0 +1,56 @@ +/** + * Create a Backpack object, populate some HTML to display its properties. + */ + +// Single line comment + +/* Multi-line comment +See! this line is also commented out! */ + +const updateBackpack = (update) => { + let main = document.querySelector("main"); // main is an element + main.innerHTML = markup(backpack); + console.info(update); +}; + +const backpack = { + name: "Everyday Backpack", + volume: 30, + color: "grey", + pocketNum: 15, + strapLength: { + left: 26, + right: 26, + }, + lidOpen: false, + toggleLid: function (lidStatus) { + this.lidOpen = lidStatus; + updateBackpack(`Lid status changed.`); + }, + newStrapLength: function (lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + updateBackpack(`Strap lengths updated.`); + }, +}; + +const markup = (backpack) => { + return ` +
+

${backpack.name}

+ +
+`; +}; + +const main = document.createElement("main"); +main.innerHTML = markup(backpack); +document.body.appendChild(main);