From 936e1f0431d5636d6ec37dd75e96bb512420d808 Mon Sep 17 00:00:00 2001 From: AnjaliG927 Date: Mon, 6 Jul 2020 14:36:22 -0400 Subject: [PATCH 1/5] early --- js/manual-animation.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/js/manual-animation.js b/js/manual-animation.js index 1a1f0f4..74ea704 100644 --- a/js/manual-animation.js +++ b/js/manual-animation.js @@ -1,9 +1,9 @@ const buttons = document.querySelectorAll("button"); -for(var i=0; i changeToCoral(event.target)); currentButton.addEventListener('mouseleave', () => backToNormal(event.target)); - currentButton.addEventListener('click', ()=> moveImage(event.target.id)) + currentButton.addEventListener('click', () => moveImage(event.target.id)) } function changeToCoral(eventTarget) { @@ -15,30 +15,30 @@ function changeToWhite() { } function backToNormal(eventTarget) { - eventTarget.style.backgroundColor=''; + eventTarget.style.backgroundColor = ''; } function moveImage(direction) { let imgObjStyle = imgObj.style; let imgObjStyleDirection; - if(direction === 'KeyD') { + if (direction === 'KeyD') { imgObjStyleDirection = imgObjStyle.left; imgObjStyleDirection = parseInt(imgObjStyleDirection) + 10 + 'px'; } - if(direction === 'KeyA') { + if (direction === 'KeyA') { imgObjStyleDirection = imgObjStyle.left; imgObjStyleDirection = parseInt(imgObjStyleDirection) - 10 + 'px'; } - if(direction === 'KeyW') { + if (direction === 'KeyW') { imgObjStyleDirection = imgObjStyle.top; imgObjStyleDirection = parseInt(imgObjStyleDirection) - 10 + 'px'; } - - if(direction === 'KeyS') { + + if (direction === 'KeyS') { imgObjStyleDirection = imgObjStyle.top; imgObjStyleDirection = parseInt(imgObjStyleDirection) + 10 + 'px'; } From 9f7124038e4d639d3f8e880564cfd7495edd3e2d Mon Sep 17 00:00:00 2001 From: AnjaliG927 Date: Mon, 6 Jul 2020 15:48:02 -0400 Subject: [PATCH 2/5] slide 45 --- index.html | 14 ++++++---- js/automated-animation.js | 55 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 5 deletions(-) create mode 100644 js/automated-animation.js diff --git a/index.html b/index.html index 63789ec..bedb260 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,9 @@ - + + + @@ -32,9 +34,11 @@ - - -
+ + + + +




@@ -47,7 +51,7 @@
- +
diff --git a/js/automated-animation.js b/js/automated-animation.js new file mode 100644 index 0000000..20bee26 --- /dev/null +++ b/js/automated-animation.js @@ -0,0 +1,55 @@ +var animate; +const buttons = document.querySelectorAll("button"); +for (var i = 0; i < buttons.length; i++) { + let currentButton = buttons[i]; + // currentButton.addEventListener('mouseenter', () => changeToCoral(event.target)); + // currentButton.addEventListener('mouseleave', () => backToNormal(event.target)); + currentButton.addEventListener('click', () => moveImage(event.target.id)) + document.addEventListener('mouseup', function () { }); +} + +function changeToCoral(eventTarget) { + eventTarget.style.backgroundColor = "coral"; +} + +function changeToWhite() { + eventTarget.style.backgroundColor = "white"; +} + +function backToNormal(eventTarget) { + eventTarget.style.backgroundColor = ''; +} + +function moveImage(direction) { + let imgObjStyle = imgObj.style; + let topVal = parseInt(imgObjStyle.top, 10); + let leftVal = parseInt(imgObjStyle.left, 10); + + if (direction === 'KeyA') { + imgObjStyle.left = (leftVal - 30) + "px"; + } + + if (direction === 'KeyW') { + imgObjStyle.top = (topVal - 30) + "px"; + } + + if (direction === 'KeyD') { + imgObjStyle.left = (leftVal + 30) + "px"; + } + + + if (direction === 'KeyS') { + imgObjStyle.top = (topVal + 30) + "px"; + } + animate = setTimeout(function () { moveImage(direction) }, 20); +} + +function init() { + imgObj = document.getElementById('myImage'); + imgObj.style.position = 'relative'; + imgObj.style.left = '0px'; + imgObj.style.top = '0px'; +} + + +window.onload = init; \ No newline at end of file From 45b04dc5b96cfbca0e24987fdc8f45e3e211fa63 Mon Sep 17 00:00:00 2001 From: AnjaliG927 Date: Mon, 6 Jul 2020 15:57:41 -0400 Subject: [PATCH 3/5] slide 46 --- js/automated-animation.js | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/js/automated-animation.js b/js/automated-animation.js index 20bee26..d5d1ea3 100644 --- a/js/automated-animation.js +++ b/js/automated-animation.js @@ -2,22 +2,13 @@ var animate; const buttons = document.querySelectorAll("button"); for (var i = 0; i < buttons.length; i++) { let currentButton = buttons[i]; - // currentButton.addEventListener('mouseenter', () => changeToCoral(event.target)); - // currentButton.addEventListener('mouseleave', () => backToNormal(event.target)); - currentButton.addEventListener('click', () => moveImage(event.target.id)) - document.addEventListener('mouseup', function () { }); -} -function changeToCoral(eventTarget) { - eventTarget.style.backgroundColor = "coral"; -} + currentButton.addEventListener('click', () => { + var direction = event.target.id; + animate = setInterval(function () { moveImage(direction); }, 60); + }); + document.addEventListener('mouseup', function () { clearInterval(animate); }); -function changeToWhite() { - eventTarget.style.backgroundColor = "white"; -} - -function backToNormal(eventTarget) { - eventTarget.style.backgroundColor = ''; } function moveImage(direction) { @@ -41,7 +32,7 @@ function moveImage(direction) { if (direction === 'KeyS') { imgObjStyle.top = (topVal + 30) + "px"; } - animate = setTimeout(function () { moveImage(direction) }, 20); + } function init() { From f8ce190f9689cdbdc93433493fdfe5850830428a Mon Sep 17 00:00:00 2001 From: AnjaliG927 Date: Mon, 6 Jul 2020 17:27:30 -0400 Subject: [PATCH 4/5] slide 47/part1 --- js/automated-animation.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/js/automated-animation.js b/js/automated-animation.js index d5d1ea3..8b9514e 100644 --- a/js/automated-animation.js +++ b/js/automated-animation.js @@ -2,20 +2,23 @@ var animate; const buttons = document.querySelectorAll("button"); for (var i = 0; i < buttons.length; i++) { let currentButton = buttons[i]; - currentButton.addEventListener('click', () => { var direction = event.target.id; animate = setInterval(function () { moveImage(direction); }, 60); }); document.addEventListener('mouseup', function () { clearInterval(animate); }); + } +document.addEventListener('keydown', () => moveImage(event.code)); function moveImage(direction) { let imgObjStyle = imgObj.style; let topVal = parseInt(imgObjStyle.top, 10); let leftVal = parseInt(imgObjStyle.left, 10); + + if (direction === 'KeyA') { imgObjStyle.left = (leftVal - 30) + "px"; } @@ -33,6 +36,7 @@ function moveImage(direction) { imgObjStyle.top = (topVal + 30) + "px"; } + } function init() { From cc9a6e1d7c5f890e659de9c1ab635990eec844d7 Mon Sep 17 00:00:00 2001 From: AnjaliG927 Date: Mon, 6 Jul 2020 19:13:37 -0400 Subject: [PATCH 5/5] slide 47 completed --- js/automated-animation.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/js/automated-animation.js b/js/automated-animation.js index 8b9514e..a362668 100644 --- a/js/automated-animation.js +++ b/js/automated-animation.js @@ -1,11 +1,25 @@ var animate; const buttons = document.querySelectorAll("button"); for (var i = 0; i < buttons.length; i++) { + let currentButton = buttons[i]; currentButton.addEventListener('click', () => { var direction = event.target.id; - animate = setInterval(function () { moveImage(direction); }, 60); + let start = Date.now(); + + animate = setInterval(function () { + moveImage(direction); + + let timepassed = Date.now() - start; + if (timepassed >= 3000) { + clearInterval(animate); + } + + }, 100); + }); + // animateStop = setTimeout(() => { clearInterval(animate); }, 3000); + document.addEventListener('mouseup', function () { clearInterval(animate); }); @@ -19,6 +33,8 @@ function moveImage(direction) { + + if (direction === 'KeyA') { imgObjStyle.left = (leftVal - 30) + "px"; }