diff --git a/02_02/index.html b/02_02/index.html index 39f25a28..216b38ca 100755 --- a/02_02/index.html +++ b/02_02/index.html @@ -4,7 +4,7 @@ Module demo - + diff --git a/03_05/script.js b/03_05/script.js index 84bf41d4..0203772a 100755 --- a/03_05/script.js +++ b/03_05/script.js @@ -20,3 +20,5 @@ const backpack = { this.strapLength.right = lengthRight; }, }; + +console.log("The backpack object:", backpack); diff --git a/03_06/script.js b/03_06/script.js index 0203772a..b4edf39a 100755 --- a/03_06/script.js +++ b/03_06/script.js @@ -22,3 +22,9 @@ const backpack = { }; console.log("The backpack object:", backpack); +console.log("The pocketNum:", backpack.pocketNum); +console.log("Strap length:", backpack.strapLength); + +let query = "pocketNum"; + +console.log("The pocketNum:", backpack[query]); diff --git a/03_08/script.js b/03_08/script.js index e38d752d..7dfe71d3 100755 --- a/03_08/script.js +++ b/03_08/script.js @@ -23,3 +23,9 @@ const backpack = { console.log("The backpack object:", backpack); console.log("The pocketNum value:", backpack.pocketNum); + +console.log("Left before:", backpack.strapLength.left); + +backpack.newStrapLength(10, 15); + +console.log("Left after:", backpack.strapLength.left); diff --git a/03_13/script.js b/03_13/script.js index 7c3b652b..99f6576e 100755 --- a/03_13/script.js +++ b/03_13/script.js @@ -18,3 +18,4 @@ const everydayPack = new Backpack( console.log("The everydayPack object:", everydayPack); console.log("Date acquired:", everydayPack.dateAcquired); +console.log("Days since aquired:", everydayPack.backpackAge(), "Days old"); diff --git a/04_01/index.html b/04_01/index.html index 727e8b26..84e3792c 100755 --- a/04_01/index.html +++ b/04_01/index.html @@ -8,19 +8,6 @@ -
-
-

Everyday Backpack

- -
-
+ diff --git a/04_01/script.js b/04_01/script.js index e0c6fb4a..620168c6 100755 --- a/04_01/script.js +++ b/04_01/script.js @@ -16,6 +16,26 @@ const everydayPack = new Backpack( "December 5, 2018 15:00:00 PST" ); + +const content = ` +
+
+

${everydayPack.name}

+ +
+
+`; + +document.body.innerHTML = content; + console.log("The everydayPack object:", everydayPack); console.log("The pocketNum value:", everydayPack.pocketNum); -console.log("Days since aquired:", everydayPack.backpackAge()); +console.log("Days since aquired:", everydayPack.backpackAge()); \ No newline at end of file diff --git a/04_02/script.js b/04_02/script.js index 6d713ebc..872c593e 100755 --- a/04_02/script.js +++ b/04_02/script.js @@ -16,22 +16,7 @@ const everydayPack = new Backpack( "December 5, 2018 15:00:00 PST" ); -const content = ` -
-
-

${everydayPack.name}

- -
-
-`; +const content = "

" + everydayPack.name + "

"; document.body.innerHTML = content; diff --git a/05_09/script.js b/05_09/script.js index 31e52a1b..7fb13d68 100755 --- a/05_09/script.js +++ b/05_09/script.js @@ -19,7 +19,6 @@ const everydayPack = new Backpack( ); const content = ` -
@@ -45,9 +44,13 @@ const content = ` everydayPack.lidOpen } -
`; const main = document.querySelector(".maincontent"); -main.innerHTML = content; +const newArticle = document.createElement("article"); +newArticle.classList.add("backpack"); +newArticle.setAttribute("id", "everyday"); +newArticle.innerHTML = content; + +main.append(newArticle); diff --git a/06_03/script.js b/06_03/script.js index c0fc66de..b6984f19 100755 --- a/06_03/script.js +++ b/06_03/script.js @@ -8,12 +8,14 @@ var color = "purple"; document.querySelector(".left").style.backgroundColor = color; document.querySelector(".left .color-value").innerHTML = color; +color = "skyblue"; + document.querySelector(".right").style.backgroundColor = color; document.querySelector(".right .color-value").innerHTML = color; -// function headingColor() { -// color = "blue"; -// document.querySelector(".title").style.color = color; -// } +function headingColor() { + color = "blue"; + document.querySelector(".title").style.color = color; +} -// headingColor(); +headingColor(); diff --git a/06_04/script.js b/06_04/script.js index 8c012590..88f8066e 100755 --- a/06_04/script.js +++ b/06_04/script.js @@ -3,7 +3,7 @@ * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let */ -var color = "purple"; +let color = "purple"; document.querySelector(".left").style.backgroundColor = color; document.querySelector(".left .color-value").innerHTML = color; @@ -11,8 +11,9 @@ document.querySelector(".left .color-value").innerHTML = color; color = "skyblue"; function headingColor() { - color = "blue"; + let titleColor = "blue"; document.querySelector(".title").style.color = color; + console.log("inside:", titleColor); } headingColor(); diff --git a/06_05/script.js b/06_05/script.js index a0bef97f..07cbca75 100755 --- a/06_05/script.js +++ b/06_05/script.js @@ -3,12 +3,13 @@ * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const */ -let color = "purple"; +const color = "purple"; document.querySelector(".left").style.backgroundColor = color; document.querySelector(".left .color-value").innerHTML = color; -color = "skyblue"; +// will stop rendering, can't reasign to a const +// color = "skyblue"; function headingColor() { let color = "blue"; diff --git a/06_06/script.js b/06_06/script.js index 0c1cebc5..6a741401 100755 --- a/06_06/script.js +++ b/06_06/script.js @@ -16,7 +16,7 @@ console.log("Floating point number:", floatDemo); // Boolean: let booleanDemo = true; -console.log("Boolean value:", booleanDemo); +console.log("Boolean value:", typeof booleanDemo); // Null value (nothing): let nullDemo = null; diff --git a/06_07/script.js b/06_07/script.js index 7aee6853..75bc9033 100755 --- a/06_07/script.js +++ b/06_07/script.js @@ -9,7 +9,7 @@ let b = 4; console.log(`let a: ${a} (${typeof a})`); console.log(`let b: ${b} (${typeof b})`); -if (a == b) { +if (a != b) { console.log(`Match! let a and let b are the same value.`); } else { console.error(`No match: let a and let b are NOT same value.`); diff --git a/06_08/script.js b/06_08/script.js index 8bb0f68a..216a1bd8 100755 --- a/06_08/script.js +++ b/06_08/script.js @@ -3,14 +3,14 @@ * @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#Arithmetic_operators */ -let a = 5; -let b = 4; +let a = 15; +let b = "4"; let c = 3.2; console.log(`let a: ${a} (${typeof a})`); console.log(`let b: ${b} (${typeof b})`); console.log(`let c: ${c} (${typeof c})`); -let result = a + b; +let result = a - b; console.log("Result: ", result); diff --git a/Practice/03_07/script.js b/Practice/03_07/script.js index 9a82c281..7d4fa20f 100755 --- a/Practice/03_07/script.js +++ b/Practice/03_07/script.js @@ -7,3 +7,17 @@ * - Find an object that has another object inside of it to create a nested object. * - Test your objects in the browser console by accessing the entire object and its specific properties. */ + +const car = { + name: "Subaru Crosstrek", + color: "blue", + passengers: 5, + awd: true, +}; + +console.log(car); +console.log("The kind of vehicle:", car.name); +console.log("How many passengers can it hold:", car.passengers); + +let color = "color"; +console.log("What is the color:", car[color]); diff --git a/Practice/03_09/script.js b/Practice/03_09/script.js index 1dd07f08..b252169a 100755 --- a/Practice/03_09/script.js +++ b/Practice/03_09/script.js @@ -23,4 +23,23 @@ const backpack = { this.strapLength.left = lengthLeft; this.strapLength.right = lengthRight; }, + + newBackpack: function (nameChange) { + this.name = nameChange; + }, + + newColor: function (colorChange) { + this.color = colorChange; + }, }; + +console.log("The backpack object:", backpack); + +console.log("Today I will take the", backpack.name); + +backpack.newBackpack("Adventure Backpack"); + +console.log("I'm going on a hike and will take", backpack.name); + +backpack.newColor("blue"); +console.log("and the color will be", backpack.color); diff --git a/Practice/03_12/car.js b/Practice/03_12/car.js new file mode 100644 index 00000000..8de66815 --- /dev/null +++ b/Practice/03_12/car.js @@ -0,0 +1,24 @@ +/** + * Creating classes: + * + * Class declaration: class Name {} + * Class expression: const Name = class {} + */ + +class car { + constructor(name, year, color, passengers, doors, doorsOpen) { + this.name = name; + this.year = year; + this.color = color; + this.passengers = passengers; + this.doors = doors; + this.doorsOpen = doorsOpen; + } + + // method to open the door + toggleDoors(doorChange) { + this.doorsOpen = doorChange; + } +} + +export default car; diff --git a/Practice/03_12/index.html b/Practice/03_12/index.html index a082a72d..cf90fc37 100755 --- a/Practice/03_12/index.html +++ b/Practice/03_12/index.html @@ -4,7 +4,7 @@ Practice: Making classes and objects - + diff --git a/Practice/03_12/script.js b/Practice/03_12/script.js index 9bcfa1f4..6e742485 100755 --- a/Practice/03_12/script.js +++ b/Practice/03_12/script.js @@ -6,3 +6,18 @@ * - Create several objects using the class. * - Test the objecs by calling their properties and using their methods in the console. */ + +import car from "./car.js"; + +const subaruCar = new car("Crosstrek", 2018, "blue", 4, 4, false); + +console.log("The car I currently drive is:", subaruCar.name); +console.log("The doors are currently:", subaruCar.doorsOpen); + +subaruCar.toggleDoors(true); + +console.log("The doors are currently:", subaruCar.doorsOpen); + +const toyotaCar = new car("Corolla", 2020, "red", 4, 4, false); +console.log("The car I currently drive is:", toyotaCar.name); +console.log("What year is the car:", toyotaCar.year); diff --git a/Practice/03_12/Backpack.js b/Practice/05_04/Backpack.js old mode 100755 new mode 100644 similarity index 60% rename from Practice/03_12/Backpack.js rename to Practice/05_04/Backpack.js index cca45eb3..3a469572 --- a/Practice/03_12/Backpack.js +++ b/Practice/05_04/Backpack.js @@ -1,40 +1,41 @@ -/** - * 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; +class Backpack { + constructor( + name, + volume, + color, + pocketNum, + strapLengthL, + strapLengthR, + lidOpen, + dateAcquired, + image + ) { + this.name = name; + this.volume = volume; + this.color = color; + this.pocketNum = pocketNum; + this.strapLength = { + left: strapLengthL, + right: strapLengthR, + }; + this.lidOpen = lidOpen; + this.dateAcquired = dateAcquired; + this.image = image; + } + toggleLid(lidStatus) { + this.lidOpen = lidStatus; + } + newStrapLength(lengthLeft, lengthRight) { + this.strapLength.left = lengthLeft; + this.strapLength.right = lengthRight; + } + backpackAge() { + let now = new Date(); + let acquired = new Date(this.dateAcquired); + let elapsed = now - acquired; // elapsed time in milliseconds + let daysSinceAcquired = Math.floor(elapsed / (1000 * 3600 * 24)); + return daysSinceAcquired; + } +} + +export default Backpack; diff --git a/Practice/05_04/index.html b/Practice/05_04/index.html index 56f5937a..23565352 100644 --- a/Practice/05_04/index.html +++ b/Practice/05_04/index.html @@ -20,94 +20,7 @@
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

- - -
-
-
- -
-

Frog Backpack

- - -
-
+