Skip to content

Commit

Permalink
categorize history and bookmarks by date
Browse files Browse the repository at this point in the history
  • Loading branch information
@tananii
tananii committed Jun 13, 2022
1 parent 30b38d2 commit 3501178
Show file tree
Hide file tree
Showing 7 changed files with 257 additions and 81 deletions.
112 changes: 76 additions & 36 deletions bookmarks.js
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,80 @@
import { categorizeByDate } from "./utils/categorize.js";

window.addEventListener("DOMContentLoaded", function () {
var bookmarks = document.createElement("div");
let bookmarks = document.createElement("div");
bookmarks.id = "bookmarks";
var marks = document.createElement("ul");
marks.className = "marks";
JSON.parse(localStorage.getItem("bookmarks") || "[]")
.reverse()
.forEach(function ({ url, id }) {
var li = document.createElement("li");
var a = document.createElement("a");
a.href = url;
a.textContent = url;
a.target = "_blank";
var button = document.createElement("button");
button.innerHTML = "<i class='fa fa-times'></i>";
button.addEventListener("click", function () {
const sHistory = JSON.parse(localStorage.getItem("bookmarks")).filter(
(item) => item.id !== id
);

const categoriesList = document.createElement("ul");
categoriesList.id = "categories-list";
const searchHistoryArray = JSON.parse(
localStorage.getItem("search-history") || "[]"
);
const categories = categorizeByDate(searchHistoryArray);
console.log(categories);

const sortedKeys = Object.keys(categories).sort((a, b) => {
if (a.includes("Today")) return -1;
if (b.includes("Today")) return 1;
if (a.includes("Yesterday")) return -1;
if (b.includes("Yesterday")) return 1;
if (a.includes("Last 7 days")) return -1;
if (b.includes("Last 7 days")) return 1;
if (a.includes("Older")) return -1;
if (b.includes("Older")) return 1;
return 0;
});

sortedKeys.forEach((key) => {
const category = document.createElement("li");
category.className = "category";
const categoryTitle = document.createElement("h4");
categoryTitle.innerText = key;
category.appendChild(categoryTitle);
const categoryList = document.createElement("ul");
categoryList.className = "category-list";
categories[key].forEach((item) => {
let marks = document.createElement("ul");
marks.className = "marks";
const itemLi = document.createElement("li");
itemLi.className = "item";
const itemLink = document.createElement("a");
const time = document.createElement("div");
time.className = "time";
time.innerText = new Date(item.time).toLocaleTimeString();
let button = document.createElement("button");
button.innerHTML = "<i class='fa fa-times'></i>";
button.addEventListener("click", function () {
const sHistory = JSON.parse(
localStorage.getItem("bookmarks")
).filter((i) => i.id !== item.id);
localStorage.setItem("bookmarks", JSON.stringify(sHistory));
itemLi.remove();
if (categoriesList.children.length === 0) {
let li = document.createElement("li");
li.textContent = "No Bookmarks";
categoriesList.appendChild(li);
}
});
itemLink.href = item.url;
itemLink.innerText = item.url.slice(
item.url.indexOf("//") + 2,
item.url.indexOf("/", item.url.indexOf("//") + 2)
);
itemLink.target = "_blank";
itemLi.appendChild(itemLink);
itemLi.appendChild(time);
itemLi.appendChild(button);
marks.appendChild(itemLi);
category.appendChild(marks);
categoriesList.appendChild(category);
});
});

localStorage.setItem("bookmarks", JSON.stringify(sHistory));
li.remove();
if (marks.children.length === 0) {
var ss = document.createElement("li");
ss.textContent = "No Bookmarks";
marks.appendChild(ss);
}
});
li.appendChild(a);
li.appendChild(button);
marks.appendChild(li);
});
if (marks.children.length === 0) {
var li = document.createElement("li");
li.textContent = "No Bookmarks";
marks.appendChild(li);
}
bookmarks.appendChild(marks);
document.body.appendChild(bookmarks);
if (categoriesList.children.length === 0) {
let li = document.createElement("li");
li.textContent = "No Bookmarks";
categoriesList.appendChild(li);
}
bookmarks.appendChild(categoriesList);
document.body.appendChild(bookmarks);
});
48 changes: 40 additions & 8 deletions css/bookmarks.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,31 +17,63 @@ input {
background: none;
}
button {
cursor: pointer;
cursor: pointer;
}
a {
text-decoration: none;
color: rgb(73, 87, 107);
display: block;
width: 200px;
}
ul {
list-style: none;
}
#bookmarks {
border-radius: 7px;
display: flex;
padding: 30px;
width: 100%;
}
#categories-list {
width: 100%;
}
#bookmarks ul {
#bookmarks .category {
display: flex;
list-style: none;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
border: 1px solid rgba(216, 220, 226, 0.37);
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
padding: 15px;
margin-bottom: 20px;
}
#bookmarks ul li {
#bookmarks .category-list > li {
display: flex;
list-style: none;
flex-direction: column;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 15px 10px;
border-bottom: 1px solid rgba(211, 211, 211, 0.781);
margin-bottom: 10px;
}
.history {
width: 100%;
}
.item {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;

}
h4 {
border-bottom: 1px solid rgba(211, 211, 211, 0.575);
padding: 20px;
margin-bottom: 10px;
text-transform: capitalize;
}
.time {
font-weight: bold;
font-size: 14px;
}
48 changes: 40 additions & 8 deletions css/history.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,31 +17,63 @@ input {
background: none;
}
button {
cursor: pointer;
cursor: pointer;
}
a {
text-decoration: none;
color: rgb(73, 87, 107);
display: block;
width: 200px;
}
ul {
list-style: none;
}
#search-history {
border-radius: 7px;
display: flex;
padding: 30px;
width: 100%;
}
#categories-list {
width: 100%;
}
#search-history ul {
#search-history .category {
display: flex;
list-style: none;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
border: 1px solid rgba(216, 220, 226, 0.37);
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
padding: 15px;
margin-bottom: 20px;
}
#search-history ul li {
#search-history .category-list > li {
display: flex;
list-style: none;
flex-direction: column;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 15px 10px;
border-bottom: 1px solid rgba(211, 211, 211, 0.781);
margin-bottom: 10px;
}
.history {
width: 100%;
}
.item {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;

}
h4 {
border-bottom: 1px solid rgba(211, 211, 211, 0.575);
padding: 20px;
margin-bottom: 10px;
text-transform: capitalize;
}
.time {
font-weight: bold;
font-size: 14px;
}
90 changes: 65 additions & 25 deletions history.js
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,80 @@
import { categorizeByDate } from "./utils/categorize.js";

window.addEventListener("DOMContentLoaded", function () {
var searchHistory = document.createElement("div");
const searchHistory = document.createElement("div");
searchHistory.id = "search-history";
var history = document.createElement("ul");

const categoriesList = document.createElement("ul");
categoriesList.id = "categories-list";
history.className = "history";
JSON.parse(localStorage.getItem("search-history") || "[]")
.reverse()
.forEach(function ({ url, id }) {
var li = document.createElement("li");
var a = document.createElement("a");
a.href = url;
a.textContent = url;
a.target = "_blank";
var button = document.createElement("button");
const searchHistoryArray = JSON.parse(
localStorage.getItem("search-history") || "[]"
);
const categories = categorizeByDate(searchHistoryArray);
console.log(categories);

const sortedKeys = Object.keys(categories).sort((a, b) => {
if (a.includes("Today")) return -1;
if (b.includes("Today")) return 1;
if (a.includes("Yesterday")) return -1;
if (b.includes("Yesterday")) return 1;
if (a.includes("Last 7 days")) return -1;
if (b.includes("Last 7 days")) return 1;
if (a.includes("Older")) return -1;
if (b.includes("Older")) return 1;
return 0;
});

sortedKeys.forEach((key) => {
const category = document.createElement("li");
category.className = "category";
const categoryTitle = document.createElement("h4");
categoryTitle.innerText = key;
category.appendChild(categoryTitle);
const categoryList = document.createElement("ul");
categoryList.className = "category-list";
categories[key].forEach((item) => {
const history = document.createElement("ul");
const itemLi = document.createElement("li");
itemLi.className = "item";
const itemLink = document.createElement("a");
const time = document.createElement("div");
time.className = "time";
time.innerText = new Date(item.time).toLocaleTimeString();
let button = document.createElement("button");
button.innerHTML = "<i class='fa fa-times'></i>";
button.addEventListener("click", function () {
const sHistory = JSON.parse(
localStorage.getItem("search-history")
).filter((item) => item.id !== id);

).filter((i) => i.id !== item.id);
localStorage.setItem("search-history", JSON.stringify(sHistory));
li.remove();
if (history.children.length === 0) {
var ss = document.createElement("li");
ss.textContent = "No search history";
history.appendChild(ss);
itemLi.remove();
if (categoriesList.children.length === 0) {
let li = document.createElement("li");
li.textContent = "No search history";
categoriesList.appendChild(li);
}
});
li.appendChild(a);
li.appendChild(button);
history.appendChild(li);
itemLink.href = item.url;
itemLink.innerText = item.url.slice(
item.url.indexOf("//") + 2,
item.url.indexOf("/", item.url.indexOf("//") + 2)
);
itemLink.target = "_blank";
itemLi.appendChild(itemLink);
itemLi.appendChild(time);
itemLi.appendChild(button);
history.appendChild(itemLi);
category.appendChild(history);
categoriesList.appendChild(category);
});
if (history.children.length === 0) {
var li = document.createElement("li");
});

if (categoriesList.children.length === 0) {
let li = document.createElement("li");
li.textContent = "No search history";
history.appendChild(li);
categoriesList.appendChild(li);
}
searchHistory.appendChild(history);
searchHistory.appendChild(categoriesList);
document.body.appendChild(searchHistory);
});
2 changes: 1 addition & 1 deletion styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ strong,
sub,
sup,
tt,
var,
let,
b,
u,
i,
Expand Down
Loading

0 comments on commit 3501178

Please sign in to comment.