Skip to content

Commit 8cd03b7

Browse files
anisharma07anisharma07
committed
fix: backToTop & connectFour Extensions
1 parent 6c0ca72 commit 8cd03b7

File tree

6 files changed

+200
-210
lines changed

6 files changed

+200
-210
lines changed

‎Back To Top/index.html‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Back to Top Button</title>
7-
<link rel="stylesheet" href="styles.css">
8-
</head>
9-
<body>
10-
<div style="height: 1500px; padding: 10px;">
11-
Scroll down to see the "Back to Top" button.
12-
</div>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Back to Top Button</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<div style="height: 1500px; padding: 10px;">
11+
Scroll down to see the "Back to Top" button.
12+
</div>
1313

14-
<button class="Btn" onclick="topFunction()">
15-
<svg height="1.2em" class="arrow" viewBox="0 0 512 512">
16-
<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>
17-
</svg>
18-
<p class="text">Back to Top</p>
19-
</button>
14+
<button class="back-to-top-btn">
15+
<svg height="1.2em" class="arrow" viewBox="0 0 512 512">
16+
<path
17+
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"
18+
></path>
19+
</svg>
20+
<p class="text">Back to Top</p>
21+
</button>
2022

21-
<script src="script.js"></script>
22-
</body>
23+
<script src="./script.js"></script>
24+
</body>
2325
</html>

‎Back To Top/manifest.json‎

Lines changed: 7 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,10 @@
11
{
2-
"short_name": "BackToTop",
3-
"name": "Back to Top Button Example",
4-
"icons": [
5-
{
6-
"src": "icons/icon-192x192.png",
7-
"type": "image/png",
8-
"sizes": "192x192"
9-
},
10-
{
11-
"src": "icons/icon-512x512.png",
12-
"type": "image/png",
13-
"sizes": "512x512"
14-
}
15-
],
16-
"start_url": "/index.html",
17-
"display": "standalone",
18-
"background_color": "#ffffff",
19-
"theme_color": "#44ea76",
2+
"manifest_version": 3,
3+
"name": "BackToTop",
4+
"version": "1.0",
205
"description": "A web application with a 'Back to Top' button example.",
21-
"shortcuts": [
22-
{
23-
"name": "Scroll to Top",
24-
"short_name": "Top",
25-
"description": "Scroll to the top of the page",
26-
"url": "/index.html#top",
27-
"icons": [
28-
{
29-
"src": "icons/shortcut-icon.png",
30-
"sizes": "192x192"
31-
}
32-
]
33-
}
34-
]
6+
"action": {
7+
"default_popup": "index.html"
8+
},
9+
"permissions": []
3510
}

‎Back To Top/script.js‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1-
// Get the button
2-
let mybutton = document.querySelector(".Btn");
1+
// Assuming .Btn is the class for the button you want to attach the event to
2+
let mybutton = document.querySelector(".back-to-top-btn");
33

4-
// When the user scrolls down 20px from the top of the document, show the button
5-
window.onscroll = function() {
6-
scrollFunction();
7-
};
4+
document.addEventListener("DOMContentLoaded", (event) => {
5+
if (mybutton) {
6+
mybutton.addEventListener("click", topFunction);
7+
}
8+
9+
window.onscroll = function () {
10+
scrollFunction();
11+
};
12+
});
813

914
function scrollFunction() {
1015
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
@@ -14,8 +19,7 @@ function scrollFunction() {
1419
}
1520
}
1621

17-
// When the user clicks on the button, scroll to the top of the document
1822
function topFunction() {
19-
document.body.scrollTop = 0; // For Safari
20-
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
23+
document.body.scrollTop = 0;
24+
document.documentElement.scrollTop = 0;
2125
}

‎Back To Top/styles.css‎

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,57 @@
11
/* Style the button */
2-
.Btn {
3-
width: 45px;
4-
height: 45px;
5-
background: linear-gradient(#44ea76, #39fad7);
6-
display: flex;
7-
align-items: center;
8-
justify-content: center;
9-
border-radius: 50%;
10-
cursor: pointer;
11-
position: fixed; /* Fixed position */
12-
bottom: 20px; /* Place the button at the bottom */
13-
right: 30px; /* Place the button 30px from the right */
14-
z-index: 99; /* Make sure it does not overlap */
15-
border: none; /* Remove borders */
16-
}
17-
18-
.arrow path {
19-
fill: white;
20-
}
21-
22-
.text {
23-
font-size: 0.7em;
24-
width: 100px;
25-
position: absolute;
26-
color: white;
27-
display: flex;
28-
align-items: center;
29-
justify-content: center;
30-
bottom: -18px;
2+
body {
3+
min-width: 400px;
4+
}
5+
.back-to-top-btn {
6+
width: 45px;
7+
height: 45px;
8+
background: linear-gradient(#44ea76, #39fad7);
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
border-radius: 50%;
13+
cursor: pointer;
14+
position: fixed; /* Fixed position */
15+
bottom: 20px; /* Place the button at the bottom */
16+
right: 30px; /* Place the button 30px from the right */
17+
z-index: 99; /* Make sure it does not overlap */
18+
border: none; /* Remove borders */
19+
}
20+
21+
.arrow path {
22+
fill: white;
23+
}
24+
25+
.text {
26+
font-size: 0.7em;
27+
width: 100px;
28+
position: absolute;
29+
color: white;
30+
display: flex;
31+
align-items: center;
32+
justify-content: center;
33+
bottom: -18px;
34+
opacity: 0;
35+
transition-duration: 0.7s;
36+
}
37+
38+
.back-to-top-btn:hover .text {
39+
opacity: 1;
40+
transition-duration: 0.7s;
41+
}
42+
43+
.back-to-top-btn:hover .arrow {
44+
animation: slide-in-bottom 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
45+
}
46+
47+
@keyframes slide-in-bottom {
48+
0% {
49+
transform: translateY(10px);
3150
opacity: 0;
32-
transition-duration: .7s;
3351
}
34-
35-
.Btn:hover .text {
52+
53+
100% {
54+
transform: translateY(0);
3655
opacity: 1;
37-
transition-duration: .7s;
38-
}
39-
40-
.Btn:hover .arrow {
41-
animation: slide-in-bottom .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
42-
}
43-
44-
@keyframes slide-in-bottom {
45-
0% {
46-
transform: translateY(10px);
47-
opacity: 0;
48-
}
49-
50-
100% {
51-
transform: translateY(0);
52-
opacity: 1;
53-
}
5456
}
55-
57+
}

‎Connect Four Game Extension/manifest.json‎

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,16 @@
11
{
2-
"manifest_version": 3,
3-
"name": "Connect Four Game Extension",
4-
"version": "1.0",
5-
"description": "Four in a row, the ultimate glow! Who's ready for Connect 4?",
6-
"permissions": [
7-
"storage"
8-
],
9-
"optional-permissions" : ["tabs"],
10-
"action": {
11-
"default_popup": "index.html"
12-
},
13-
"web_accessible_resources": [
14-
{
15-
"resources": [
16-
"index.html"
17-
],
18-
"matches": [
19-
"<all_urls>"
20-
]
21-
}
22-
]
23-
}
2+
"manifest_version": 3,
3+
"name": "Connect Four Game Extension",
4+
"version": "1.0",
5+
"description": "Four in a row, the ultimate glow! Who's ready for Connect 4?",
6+
"permissions": ["storage"],
7+
"action": {
8+
"default_popup": "index.html"
9+
},
10+
"web_accessible_resources": [
11+
{
12+
"resources": ["index.html"],
13+
"matches": ["<all_urls>"]
14+
}
15+
]
16+
}

0 commit comments

Comments
 (0)