fix: backToTop & connectFour Extensions

Archiesachin · Jul 10, 2024 · 8cd03b7 · 8cd03b7
1 parent 6c0ca72
commit 8cd03b7
Show file tree

Hide file tree

Showing 6 changed files with 200 additions and 210 deletions.
diff --git a/Back To Top/index.html b/Back To Top/index.html
@@ -1,23 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Back to Top Button</title>
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <div style="height: 1500px; padding: 10px;">
-    Scroll down to see the "Back to Top" button.
-  </div>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Back to Top Button</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div style="height: 1500px; padding: 10px;">
+      Scroll down to see the "Back to Top" button.
+    </div>
 
-  <button class="Btn" onclick="topFunction()">
-    <svg height="1.2em" class="arrow" viewBox="0 0 512 512">
-      <path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"></path>
-    </svg>
-    <p class="text">Back to Top</p>
-  </button>
+    <button class="back-to-top-btn">
+      <svg height="1.2em" class="arrow" viewBox="0 0 512 512">
+        <path
+          d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"
+        ></path>
+      </svg>
+      <p class="text">Back to Top</p>
+    </button>
 
-  <script src="script.js"></script>
-</body>
+    <script src="./script.js"></script>
+  </body>
 </html>
diff --git a/Back To Top/manifest.json b/Back To Top/manifest.json
@@ -1,35 +1,10 @@
 {
-  "short_name": "BackToTop",
-  "name": "Back to Top Button Example",
-  "icons": [
-    {
-      "src": "icons/icon-192x192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "icons/icon-512x512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": "/index.html",
-  "display": "standalone",
-  "background_color": "#ffffff",
-  "theme_color": "#44ea76",
+  "manifest_version": 3,
+  "name": "BackToTop",
+  "version": "1.0",
   "description": "A web application with a 'Back to Top' button example.",
-  "shortcuts": [
-    {
-      "name": "Scroll to Top",
-      "short_name": "Top",
-      "description": "Scroll to the top of the page",
-      "url": "/index.html#top",
-      "icons": [
-        {
-          "src": "icons/shortcut-icon.png",
-          "sizes": "192x192"
-        }
-      ]
-    }
-  ]
+  "action": {
+    "default_popup": "index.html"
+  },
+  "permissions": []
 }
diff --git a/Back To Top/script.js b/Back To Top/script.js
@@ -1,10 +1,15 @@
-// Get the button
-let mybutton = document.querySelector(".Btn");
+// Assuming .Btn is the class for the button you want to attach the event to
+let mybutton = document.querySelector(".back-to-top-btn");
 
-// When the user scrolls down 20px from the top of the document, show the button
-window.onscroll = function() {
-  scrollFunction();
-};
+document.addEventListener("DOMContentLoaded", (event) => {
+  if (mybutton) {
+    mybutton.addEventListener("click", topFunction);
+  }
+
+  window.onscroll = function () {
+    scrollFunction();
+  };
+});
 
 function scrollFunction() {
   if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
@@ -14,8 +19,7 @@ function scrollFunction() {
   }
 }
 
-// When the user clicks on the button, scroll to the top of the document
 function topFunction() {
-  document.body.scrollTop = 0; // For Safari
-  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+  document.body.scrollTop = 0;
+  document.documentElement.scrollTop = 0;
 }
diff --git a/Back To Top/styles.css b/Back To Top/styles.css
@@ -1,55 +1,57 @@
 /* Style the button */
-.Btn {
-    width: 45px;
-    height: 45px;
-    background: linear-gradient(#44ea76, #39fad7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    cursor: pointer;
-    position: fixed; /* Fixed position */
-    bottom: 20px; /* Place the button at the bottom */
-    right: 30px; /* Place the button 30px from the right */
-    z-index: 99; /* Make sure it does not overlap */
-    border: none; /* Remove borders */
-  }
-
-  .arrow path {
-    fill: white;
-  }
-
-  .text {
-    font-size: 0.7em;
-    width: 100px;
-    position: absolute;
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    bottom: -18px;
+body {
+  min-width: 400px;
+}
+.back-to-top-btn {
+  width: 45px;
+  height: 45px;
+  background: linear-gradient(#44ea76, #39fad7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+  position: fixed; /* Fixed position */
+  bottom: 20px; /* Place the button at the bottom */
+  right: 30px; /* Place the button 30px from the right */
+  z-index: 99; /* Make sure it does not overlap */
+  border: none; /* Remove borders */
+}
+
+.arrow path {
+  fill: white;
+}
+
+.text {
+  font-size: 0.7em;
+  width: 100px;
+  position: absolute;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  bottom: -18px;
+  opacity: 0;
+  transition-duration: 0.7s;
+}
+
+.back-to-top-btn:hover .text {
+  opacity: 1;
+  transition-duration: 0.7s;
+}
+
+.back-to-top-btn:hover .arrow {
+  animation: slide-in-bottom 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+@keyframes slide-in-bottom {
+  0% {
+    transform: translateY(10px);
     opacity: 0;
-    transition-duration: .7s;
   }
-
-  .Btn:hover .text {
+
+  100% {
+    transform: translateY(0);
     opacity: 1;
-    transition-duration: .7s;
-  }
-
-  .Btn:hover .arrow {
-    animation: slide-in-bottom .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-  }
-
-  @keyframes slide-in-bottom {
-    0% {
-      transform: translateY(10px);
-      opacity: 0;
-    }
-
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
   }
-  
+}
diff --git a/Connect Four Game Extension/manifest.json b/Connect Four Game Extension/manifest.json
@@ -1,23 +1,16 @@
 {
-    "manifest_version": 3,
-    "name": "Connect Four Game Extension",
-    "version": "1.0",
-    "description": "Four in a row, the ultimate glow! Who's ready for Connect 4?",
-    "permissions": [
-        "storage"
-    ],
-    "optional-permissions" : ["tabs"],
-    "action": {
-        "default_popup": "index.html"
-    },
-    "web_accessible_resources": [
-        {
-            "resources": [
-                "index.html"
-            ],
-            "matches": [
-                "<all_urls>"
-            ]
-        }
-    ]
-}
+  "manifest_version": 3,
+  "name": "Connect Four Game Extension",
+  "version": "1.0",
+  "description": "Four in a row, the ultimate glow! Who's ready for Connect 4?",
+  "permissions": ["storage"],
+  "action": {
+    "default_popup": "index.html"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": ["index.html"],
+      "matches": ["<all_urls>"]
+    }
+  ]
+}