From 589f5636d64a6305ff5e0167c0513fa0d0950436 Mon Sep 17 00:00:00 2001
From: Andrej Rasevic <andrej@rasevicengineering.com>
Date: Wed, 16 Jun 2021 08:23:14 -0400
Subject: [PATCH] updating code examples
---
CodeExamples/Week3/eventDelegation.html | 28 +++++++++++
CodeExamples/Week3/newUnderTheHood.js | 62 +++++++++++++++++++++++++
2 files changed, 90 insertions(+)
create mode 100644 CodeExamples/Week3/eventDelegation.html
create mode 100644 CodeExamples/Week3/newUnderTheHood.js
diff --git a/CodeExamples/Week3/eventDelegation.html b/CodeExamples/Week3/eventDelegation.html
new file mode 100644
index 0000000..50b31fc
--- /dev/null
+++ b/CodeExamples/Week3/eventDelegation.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width">
+ <style>
+ .completed {text-decoration: line-through;}
+ </style>
+ <title>Event Bubbling</title>
+</head>
+<body>
+ <ol class="list">
+ <li class="item">Complete Exercise 6</li>
+ <li class="item">Complete Project 4</li>
+ <li class="item">Complete Final Part 1</li>
+ <li class="item">Complete Final Part 2</li>
+ </ol>
+
+ <script>
+ const list = document.querySelector(".list");
+
+ list.addEventListener("click", e => {
+ e.target.classList.toggle("completed")
+ console.log(e.currentTarget)
+ })
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/CodeExamples/Week3/newUnderTheHood.js b/CodeExamples/Week3/newUnderTheHood.js
new file mode 100644
index 0000000..710a006
--- /dev/null
+++ b/CodeExamples/Week3/newUnderTheHood.js
@@ -0,0 +1,62 @@
+// What does new do under the hood
+// Let's create our own new
+// function customNew(constructor) {}
+
+
+
+// 1. create an empty object
+// var obj = {}
+
+// 2. set the prototype
+// Object.setPrototypeOf(obj, constructor.prototype)
+
+// 3. execute constructor with this
+
+// ES6 syntax
+// var argsArray = Array.from(arguments).slice(1)
+//constructor.apply(obj, argsArray)
+
+// Vanilla JS/ES5 syntax
+// var argsArray = Array.prototype.slice.call(arguments)
+
+// constructor.apply(obj, argsArray.slice(1))
+
+// 4. Return the created object
+// Returns this if the function doesn't return an object
+
+// first attempt - return obj
+// edge case correction
+// return object from function or this
+
+function Car(make, model, year) {
+ this.make = make
+ this.model = model
+ this.year = year
+ //return {
+ //mindBlown: true
+ //}
+}
+
+Car.prototype.getMake = function() {
+ console.log(`I am a ${this.make}`)
+}
+
+
+function customNew(constructor) {
+ var obj = {}
+ Object.setPrototypeOf(obj, constructor.prototype)
+ console.log(arguments)
+ //var argsArray = Array.from(arguments).slice(1)
+ var argsArray = Array.prototype.slice.call(arguments)
+ //constructor.apply(obj, argsArray.slice(1))
+ //return obj
+ return constructor.apply(obj, argsArray.slice(1)) || obj
+}
+
+var tesla = customNew(Car, 'tesla', 'ugly truck from superbowl', 2099)
+
+//var foo = ['one', 'two', 'three']
+//console.log(Array.prototype.slice.call(foo))
+//console.log(foo)
+console.log(tesla)
+tesla.getMake()
\ No newline at end of file
--
GitLab