Create floating_boat.js

i-archit-gupta · Oct 9, 2021 · 426ce53 · 426ce53
1 parent f572aeb
commit 426ce53
Showing 1 changed file with 57 additions and 0 deletions.
diff --git a/Iron Octo/floating_boat.js b/Iron Octo/floating_boat.js
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <style>
+ #boat {
+ margin-left: 0;
+ cursor: pointer;
+ transition: margin-left 3s ease-in-out;
+}
+
+/* flipping the picture with CSS */
+.back {
+ transform: scaleX(-1);
+ filter: fliph;
+}
+
+ </style>
+ <title>Floating Boat</title>
+</head>
+
+<body>
+
+ <img src="boat.png" id="boat">
+
+ <script>
+ boat.onclick = function() {
+
+ this.onclick = null; 
+
+ let times = 1;
+
+ function go() {
+ if (times % 2) {
+ boat.classList.remove('back');
+ boat.style.marginLeft = 100 * times + 200 + 'px';
+ } else {
+ boat.classList.add('back');
+ boat.style.marginLeft = 100 * times - 200 + 'px';
+ }
+
+ }
+
+ go();
+
+ boat.addEventListener('transitionend', function() {
+ times++;
+ go();
+ });
+ }
+ </script>
+
+
+</body>
+
+</html>