Skip to content

Commit 27367c6

Browse files
aminoxixaminoxix
committed
style: 🎨 clean: code structuring & styling
Signed-off-by: Anshumaan Kumar Prasad <[email protected]>
1 parent d9b6d32 commit 27367c6

File tree

10 files changed

+415
-357
lines changed

10 files changed

+415
-357
lines changed

‎README.md

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div align="center">
22
<h1>🔂 अहन्य - A browser extension on a daily basis</h1>
3-
<img src="./images/logo.png" width="210px" />
3+
<img src="./images/op.png" width="100%" />
44
<p>It eliminates the agony of utilizing many tools to track the productivity at different times while we've something that you can use in a site every day, and effortlessly integrates it into your browser.</p>
55
</div>
66

@@ -40,7 +40,7 @@ Wanna contribute to our project, but don't know how to start? Check out our [**c
4040

4141
## 🛠 Building
4242

43-
- `Go Live at bottom` — It automatically run the website locally
43+
- `Go Live 'at bottom of Visual Studio Code'` — It run the website locally in your browser (PORT: http://localhost:5500)
4444

4545
<br />
4646

@@ -50,4 +50,7 @@ Wanna contribute to our project, but don't know how to start? Check out our [**c
5050
5151
<hr>
5252

53-
> **YouTube** <a href="https://www.youtube.com/devstrons" target="_blank" rel="noopener">@devstrons</a> &nbsp;&middot;&nbsp; > **Instagram** <a href="https://www.instagram.com/devstrons" target="_blank" rel="noopener">@devstrons</a> &nbsp;&middot;&nbsp; > **Discord** <a href="https://discord.com/invite/MVujzTBqed" target="_blank" rel="noopener">DEVSTRONS'</a> &nbsp;&middot;&nbsp; > **Twitter** <a href="https://twitter.com/devstrons" target="_blank" rel="noopener">@devstrons</a>
53+
> **YouTube** <a href="https://www.youtube.com/devstrons" target="_blank" rel="noopener">@devstrons</a> &nbsp;&middot;&nbsp;
54+
> **Instagram** <a href="https://www.instagram.com/devstrons" target="_blank" rel="noopener">@devstrons</a> &nbsp;&middot;&nbsp;
55+
> **Discord** <a href="https://discord.com/invite/MVujzTBqed" target="_blank" rel="noopener">DEVSTRONS'</a> &nbsp;&middot;&nbsp;
56+
> **Twitter** <a href="https://twitter.com/devstrons" target="_blank" rel="noopener">@devstrons</a>

‎features/bookmarks.js

+173
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
import {
2+
generateRandomId,
3+
generateRandomColorForBookmarks,
4+
} from "../utils/general.js";
5+
import { timestamp } from "../utils/timestamp.js";
6+
7+
const bookmarksList = document.getElementById("bookmarks-list");
8+
const bookmarkForm = document.getElementById("bookmark-form");
9+
const bookmarkLink = document.getElementById("bookmark-link");
10+
const bookmarkPurpose = document.getElementById("bookmark-purpose");
11+
const bookmarkURL = document.getElementById("get-current-url");
12+
13+
const bookmarksArray = JSON.parse(localStorage.getItem("bookmarks")) || [
14+
{
15+
id: 1,
16+
link: "https://www.aminoxix.me",
17+
purpose: "Creator 1 Portfolio",
18+
time: timestamp,
19+
color: "#E55089",
20+
},
21+
{
22+
id: 2,
23+
link: "https://curios.vercel.app",
24+
purpose: "Creator 2 Portfolio",
25+
time: timestamp,
26+
color: "#E4CEAF",
27+
},
28+
{
29+
id: 3,
30+
link: "https://devstrons.org",
31+
purpose: "devstrons official website",
32+
time: timestamp,
33+
color: "#6FB8D3",
34+
},
35+
];
36+
37+
function editBookmarkPurpose(ev, id) {
38+
for (let i = 0; i < bookmarksArray.length; i++) {
39+
if (bookmarksArray[i].id == id) {
40+
let newBookmarkPurpose = prompt(
41+
"Enter the latest purpose here..",
42+
bookmarksArray[i].purpose
43+
);
44+
if (newBookmarkPurpose != null) {
45+
bookmarksArray[i].purpose = newBookmarkPurpose;
46+
}
47+
}
48+
}
49+
renderForm();
50+
}
51+
52+
function removeBookmark(ev, id) {
53+
for (let i = 0; i < bookmarksArray.length; i++) {
54+
if (bookmarksArray[i].id == id) {
55+
bookmarksArray.splice(i, 1);
56+
}
57+
}
58+
renderForm();
59+
}
60+
61+
export function renderForm() {
62+
localStorage.setItem("bookmarks", JSON.stringify(bookmarksArray));
63+
64+
bookmarksList.innerHTML = "";
65+
bookmarkLink.value = "";
66+
bookmarkPurpose.value = "";
67+
68+
bookmarksArray.map((bookmark) => {
69+
bookmarksList.innerHTML += `
70+
<div id="bookmark-paper" bookmark-paper>
71+
<div class="corner">
72+
<div class="triangle"></div>
73+
</div>
74+
<div class="bookmark-cross" data-remove>✖</div>
75+
<div id="bookmark-pattern">
76+
<div id="bookmark-text">
77+
<div class="flex-column justify-center date-time-gap">
78+
<p class="date-time-title">Created at:</p>
79+
<div class="date-time" date-time>${bookmark.time}</div>
80+
</div>
81+
<br />
82+
<a class="bookmark-link" href="${bookmark.link}">
83+
${bookmark.link}
84+
</a>
85+
<br />
86+
<br />
87+
${bookmark.purpose}
88+
<i class="fa-solid fa-pen-to-square" data-edit></i>
89+
<br />
90+
<br />
91+
<br />
92+
</div>
93+
</div>
94+
</div>
95+
`;
96+
});
97+
98+
const bookmarkPaper = document.querySelectorAll("[bookmark-paper]");
99+
const dateTime = document.querySelectorAll("[date-time]");
100+
for (let i = 0; i < bookmarksArray.length; i++) {
101+
bookmarkPaper[i].style.backgroundColor = bookmarksArray[i].color;
102+
dateTime[i].style.backgroundColor = bookmarksArray[i].color;
103+
}
104+
105+
const removeBookmarkBtns = document.querySelectorAll("[data-remove]");
106+
for (let i = 0; i < removeBookmarkBtns.length; i++) {
107+
removeBookmarkBtns[i].addEventListener("click", (e) =>
108+
removeBookmark(e, bookmarksArray[i].id)
109+
);
110+
}
111+
112+
const editBookmarkBtns = document.querySelectorAll("[data-edit]");
113+
for (let i = 0; i < editBookmarkBtns.length; i++) {
114+
editBookmarkBtns[i].addEventListener("click", (e) =>
115+
editBookmarkPurpose(e, bookmarksArray[i].id)
116+
);
117+
}
118+
}
119+
120+
bookmarkForm.addEventListener("click", (e) => {
121+
if (e != null) {
122+
if (bookmarkLink.value) {
123+
bookmarksArray.unshift({
124+
time: timestamp,
125+
id: generateRandomId(),
126+
link: bookmarkLink.value,
127+
purpose:
128+
bookmarkPurpose.value ||
129+
"write your purpose of bookmark this url here..",
130+
color: generateRandomColorForBookmarks(),
131+
});
132+
} else return e.preventDefault();
133+
}
134+
135+
e.preventDefault();
136+
renderForm();
137+
});
138+
139+
bookmarkURL.addEventListener("click", (e) => {
140+
if (
141+
window.location.href == "http://127.0.0.1:5500/" ||
142+
"http://localhost:5500/" ||
143+
"https://devstrons.github.io/ahanya" ||
144+
"http://devstrons.github.io/ahanya"
145+
) {
146+
bookmarksArray.unshift({
147+
time: timestamp,
148+
id: generateRandomId(),
149+
link: window.location.href,
150+
purpose:
151+
prompt("Define your purpose to bookmarking URL..") ||
152+
"write your purpose of bookmark this url here..",
153+
color: generateRandomColorForBookmarks(),
154+
});
155+
renderForm();
156+
} else {
157+
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
158+
bookmarksArray.unshift({
159+
time: timestamp,
160+
id: generateRandomId(),
161+
link: tabs[0].url,
162+
purpose:
163+
prompt("Define your purpose to bookmarking URL..") ||
164+
"write your purpose of bookmark this url here..",
165+
color: generateRandomColorForBookmarks(),
166+
});
167+
renderForm();
168+
});
169+
}
170+
});
171+
172+
// render form
173+
renderForm();

‎features/navbar.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// tab
2+
3+
const welcomeContent = document.getElementById("welcome-content");
4+
const notesContent = document.getElementById("notes-content");
5+
const bookmarksContent = document.getElementById("bookmarks-content");
6+
const todosContent = document.getElementById("todos-content");
7+
8+
document
9+
.querySelector("[data-welcome]")
10+
.addEventListener("click", (event) => openTab(event, welcomeContent));
11+
document
12+
.querySelector("[data-notes]")
13+
.addEventListener("click", (event) => openTab(event, notesContent));
14+
document
15+
.querySelector("[data-bookmarks]")
16+
.addEventListener("click", (event) => openTab(event, bookmarksContent));
17+
document
18+
.querySelector("[data-todos]")
19+
.addEventListener("click", (event) => openTab(event, todosContent));
20+
21+
document.getElementById("defaultOpen").click();
22+
23+
function openTab(ev, tab) {
24+
// Get all elements with class="tab-content" and hide them
25+
const tabContent = document.getElementsByClassName("tab-content");
26+
for (let i = 0; i < tabContent.length; i++) {
27+
tabContent[i].style.display = "none";
28+
}
29+
30+
// Get all elements with class="tab-links" and remove the class "active"
31+
const tabLinks = document.getElementsByClassName("tab-links");
32+
for (let i = 0; i < tabLinks.length; i++) {
33+
tabLinks[i].className = tabLinks[i].className.replace(" active", "");
34+
}
35+
// Show the current tab, and add an "active" class to the button that opened the tab
36+
tab.style.display = "block";
37+
ev.currentTarget.className += " active";
38+
}

‎features/notes.js

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import {
2+
generateRandomId,
3+
generateRandomColorForNotes,
4+
} from "../utils/general.js";
5+
6+
const saveNotes = document.getElementById("save-notes");
7+
const note = document.getElementById("note");
8+
// const notesList = document.getElementById("notes-list");
9+
10+
const notesArray = JSON.parse(localStorage.getItem("notes")) || [
11+
{
12+
id: 1,
13+
message: `It's not a bug; it's an undocumented feature.`,
14+
color: "#E4ACCE",
15+
},
16+
{
17+
id: 2,
18+
message: `while(!(succeed = try()));`,
19+
color: "#5B88C4",
20+
},
21+
{
22+
id: 3,
23+
message: `Software is like sex: it's better when its free. - L.T.`,
24+
color: "#73CABF",
25+
},
26+
{
27+
id: 4,
28+
message: `< / > Keep Calm & Keep Coding`,
29+
color: "#FAD491",
30+
},
31+
];
32+
33+
saveNotes.addEventListener("click", () => {
34+
notesArray.unshift({
35+
id: generateRandomId(),
36+
message: note.value,
37+
color: generateRandomColorForNotes(),
38+
});
39+
renderNotes();
40+
});
41+
42+
function deleteNotes(id) {
43+
for (let i = 0; i < notesArray.length; i++) {
44+
if (notesArray[i].id == id) {
45+
notesArray.splice(i, 1);
46+
}
47+
}
48+
renderNotes();
49+
}
50+
51+
export function renderNotes() {
52+
localStorage.setItem("notes", JSON.stringify(notesArray));
53+
note.value = "";
54+
55+
let [choresList] = document.getElementsByClassName("notes-list");
56+
choresList.innerHTML = "";
57+
58+
for (let chore of notesArray) {
59+
const noteCard = document.createElement("li");
60+
noteCard.className = "note-card flex-row justify-center";
61+
noteCard.style.backgroundColor = chore.color;
62+
noteCard.innerHTML = `<p class="note-text">${chore.message}</p>`;
63+
64+
const pin = document.createElement("div");
65+
pin.className = "pin";
66+
pin.innerHTML = `
67+
<div class="pin">
68+
<div class="metal"></div>
69+
<div class="bottom-circle"></div>
70+
</div>
71+
`;
72+
pin.addEventListener("click", (e) => deleteNotes(chore.id));
73+
74+
choresList.append(noteCard);
75+
noteCard.append(pin);
76+
}
77+
}
78+
79+
// render notes
80+
renderNotes();

‎index.html

+5-12
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,16 @@
1313
<meta property="og:type" content="website" />
1414
<meta property="og:description" content="A browser extension on a daily basis" />
1515
<meta property="og:url" content="https://devstrons.github.io/ahanya" />
16-
<meta
17-
property="og:image"
18-
itemprop="image"
19-
content="https://devstrons.github.io/ahanya/images/op.png"
20-
/>
16+
<meta property="og:image" itemprop="image" content="https://devstrons.github.io/ahanya/images/op.png" />
2117
<meta property="og:image:width" content="1200" />
2218
<meta property="og:image:height" content="600" />
2319
<meta property="twitter:card" content="summary_large_image" />
24-
<meta
25-
property="twitter:image"
26-
content="https://devstrons.github.io/ahanya/op.png"
27-
/>
20+
<meta property="twitter:image" content="https://devstrons.github.io/ahanya/op.png" />
2821
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
2922
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
3023
crossorigin="anonymous" referrerpolicy="no-referrer" />
24+
25+
<script type="module" defer src="./main.js"></script>
3126
</head>
3227

3328
<body>
@@ -49,7 +44,7 @@
4944
<main class="content-container flex justify-center">
5045
<div id="welcome-content" class="tab-content">
5146
<div class="welcome-container flex-column justify-center items-center">
52-
<img class="welcome-image" width="110%" src="./images/op.png" />
47+
<img class="welcome-image" width="80%" src="./images/logo.png" />
5348
<p class="welcome-text">A browser extension on a daily basis!</p>
5449
</div>
5550
</div>
@@ -81,8 +76,6 @@
8176
</div>
8277
</div>
8378
</main>
84-
85-
<script src="./script.js"></script>
8679
</body>
8780

8881
</html>

‎main.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import "./features/navbar.js";
2+
import { renderForm } from "./features/bookmarks.js";
3+
import { renderNotes } from "./features/notes.js";
4+
5+
renderForm();
6+
renderNotes();

0 commit comments

Comments
 (0)