diff --git a/index.html b/index.html
index 63789ec..bedb260 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,9 @@
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
-<head> <!-- header begins here -->
+
+<head>
+  <!-- header begins here -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
@@ -32,9 +34,11 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-  <img id ="myImage" src="./img/ship.png" height="100px" width ="100px">
-  <div style ="text-align:center; width:480px;">
+
+<body>
+  <!-- body begins here -->
+  <img id="myImage" src="./img/ship.png" height="100px" width="100px">
+  <div style="text-align:center; width:480px;">
     <button id="KeyW">Up</button><br><br>
     <button id="KeyA">Left</button>
     <button id="KeyD">Right</button><br><br>
@@ -47,7 +51,7 @@
   <!-- ====================================================== -->
   <footer>
     <!-- footer of page begins here -->
-    <script type="text/javascript" src="./js/manual-animation.js"></script>
+    <script type="text/javascript" src="./js/automated-animation.js"></script>
     <!-- <script type="text/javascript" src="./js/footer-functions.js"></script> -->
   </footer> <!-- footer of page ends here -->
   <!-- ====================================================== -->
diff --git a/js/automated-animation.js b/js/automated-animation.js
new file mode 100644
index 0000000..a362668
--- /dev/null
+++ b/js/automated-animation.js
@@ -0,0 +1,66 @@
+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;
+        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); });
+
+
+}
+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";
+    }
+
+    if (direction === 'KeyW') {
+        imgObjStyle.top = (topVal - 30) + "px";
+    }
+
+    if (direction === 'KeyD') {
+        imgObjStyle.left = (leftVal + 30) + "px";
+    }
+
+
+    if (direction === 'KeyS') {
+        imgObjStyle.top = (topVal + 30) + "px";
+    }
+
+
+}
+
+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
diff --git a/js/manual-animation.js b/js/manual-animation.js
index b52e5c7..47c68fa 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<buttons.length;i++) {
+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))
+    currentButton.addEventListener('click', () => moveImage(event.target.id))
 }
 
 function changeToCoral(eventTarget) {
@@ -15,7 +15,7 @@ function changeToWhite() {
 }
 
 function backToNormal(eventTarget) {
-    eventTarget.style.backgroundColor='';
+    eventTarget.style.backgroundColor = '';
 }
 
 function moveImage(direction) {
@@ -23,20 +23,20 @@ function moveImage(direction) {
     let topVal = parseInt(imgObjStyle.top, 10);
     let leftVal = parseInt(imgObjStyle.left, 10);
 
-    if(direction === 'KeyA') {
+    if (direction === 'KeyA') {
         imgObjStyle.left = (leftVal - 30) + "px";
-    } 
+    }
 
-    if(direction === 'KeyW') {
+    if (direction === 'KeyW') {
         imgObjStyle.top = (topVal - 30) + "px";
     }
 
-    if(direction === 'KeyD') {        
+    if (direction === 'KeyD') {
         imgObjStyle.left = (leftVal + 30) + "px";
     }
 
-    
-    if(direction === 'KeyS') {
+
+    if (direction === 'KeyS') {
         imgObjStyle.top = (topVal + 30) + "px";
     }
 }
