diff --git a/README.md b/README.md index a3a32bc..8078c6b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ # learn-js JavaScript tutorial repo -### REPLACE WITH YOUR FULL NAME +### Katie Saslow diff --git a/quiz/arrow.html b/quiz/arrow.html index d877db1..668a0a4 100644 --- a/quiz/arrow.html +++ b/quiz/arrow.html @@ -12,15 +12,17 @@ diff --git a/quiz/scripts/addEvent.js b/quiz/scripts/addEvent.js index 53ed60e..eb0f203 100644 --- a/quiz/scripts/addEvent.js +++ b/quiz/scripts/addEvent.js @@ -1,18 +1,24 @@ window.onload = function() { let x = document.getElementById('myBtn'); - x.addEventListener('mouseover', myFunction('Moused over!')); + x.addEventListener('mouseover', myFunction('Moused over!')); // now these functions take input parameters! x.addEventListener('click', mySecondFunction('Clicked!')); x.addEventListener('mouseout', myThirdFunction('Moused out!')); } function myFunction(msg) { - document.getElementById('demo').textContent = msg; + return () => document.getElementById('demo').textContent = msg; } function mySecondFunction(msg) { - document.getElementById('demo').textContent = msg; + return () => document.getElementById('demo').textContent = msg; } function myThirdFunction(msg) { - document.getElementById('demo').textContent = msg; + return () => document.getElementById('demo').textContent = msg; } + +// why doesnt this work as expected? What changed now that the functions in EventListeners take parameters? +// maybe that the functions to be handled don't return anything? +// the functions need to return CLOSURES! +// How do we do this? Convert the function into arrow function at line 3 +// OR return closures below in the individual functions! (done KS) \ No newline at end of file diff --git a/quiz/scripts/closure.js b/quiz/scripts/closure.js index 627414d..32dfa06 100644 --- a/quiz/scripts/closure.js +++ b/quiz/scripts/closure.js @@ -1,9 +1,11 @@ function setColor(set) { let changeColor = set; - if(changeColor) { + return () => { // added (KS), need to return a closure! could do either return () => OR return fucntion() + if(changeColor) { let userColor = document.getElementById('color').value; document.getElementById('myPara').style.color = userColor; } + } } @@ -11,3 +13,8 @@ window.onload = function() { let toggle = true; document.getElementById('btn').onclick = setColor(toggle); } + + +// error: the function setColor is not actually returning anything! +// fix: need the function to execute when the click happens. To do this, we need to create a nested function, aka a closure!! +// added line 3 to add the arrow func \ No newline at end of file diff --git a/quiz/scripts/javascript.js b/quiz/scripts/javascript.js new file mode 100644 index 0000000..831efd2 --- /dev/null +++ b/quiz/scripts/javascript.js @@ -0,0 +1 @@ +let sum \ No newline at end of file diff --git a/quiz/scripts/js b/quiz/scripts/js new file mode 100644 index 0000000..e69de29 diff --git a/quiz/scripts/logger.js b/quiz/scripts/logger.js index 5d03eb6..575ef4a 100644 --- a/quiz/scripts/logger.js +++ b/quiz/scripts/logger.js @@ -1 +1,11 @@ // Define a JavaScript function called logMsg() that can be used to log an error message for any object that contains the property errMsg. + +function logMsg() { + console.log(`Error message: ${this.errMsg}`); +}; + +const o1 = { + errMsg: '01' +}; + +logMsg.call(o1) \ No newline at end of file diff --git a/quiz/scripts/test_code.js b/quiz/scripts/test_code.js new file mode 100644 index 0000000..e69de29 diff --git a/quiz/vars1.html b/quiz/vars1.html index 3e4b023..731994c 100644 --- a/quiz/vars1.html +++ b/quiz/vars1.html @@ -2,12 +2,12 @@ diff --git a/quiz/vars3.html b/quiz/vars3.html index 5b2d10d..63e9b17 100644 --- a/quiz/vars3.html +++ b/quiz/vars3.html @@ -2,11 +2,12 @@ +
@@ -17,6 +12,11 @@

Demo JavaScript in Body

Placeholder ...

- + \ No newline at end of file