Skip to content

add search functionality #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CrowsVeldt wants to merge 4 commits into
base: main
Choose a base branch
from
Open

add search functionality #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ace9b1f
feat: Add search bar and result elements, implement search function
Jul 5, 2023
71a3291
style: add css rules for search bar and body
Jul 5, 2023
c3f5d79
fix: don't display search body if there are no results
Jul 5, 2023
66552ad
minor formatting
Jul 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,17 @@
</head>
<body>
<div id="app">
<div id="searchResults" style="display: none">
<table>
<thead>
<tr>
<th>URL</th>
<th>Note</th>
</tr>
</thead>
<tbody id="searchResultsBody"></tbody>
</table>
</div>
<div id="settings" style="display: none">
<!-- font dropdown -->
<form id="settingsForm">
Expand Down Expand Up @@ -56,6 +67,7 @@
<div class="statusContainer">
<span id="statusMsg" style="display: none"></span>
</div>
<input type="text" name="searchBar" id="searchBar" placeholder="Search notes">
<button id="saveBtn" class="">Save</button>
<button id="clearBtn" class="">Clear</button>
</div>
Expand Down
101 changes: 72 additions & 29 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,24 @@ document.addEventListener('DOMContentLoaded', () => {
const clearBtn = document.querySelector("#clearBtn")
const settingsBtn = document.querySelector("#settingsBtn");
const statusMsg = document.querySelector("status");
const searchBar = document.querySelector('#searchBar')
const searchResults = document.querySelector('#searchResults')
const searchResultsBody = document.querySelector('#searchResultsBody')

// Get the current tab's URL
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
// Get the current tab's URL
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
const url = tabs[0].url;

// Check if there's a note saved for this URL
const note = localStorage.getItem(url);

// If a note was found, display it in the text area
if (note) {
// const textArea = document.querySelector("#note");
textArea.value = note;
}
});

saveBtn.addEventListener('click', () => {
const text = textArea.value;

Expand All @@ -33,7 +36,7 @@ document.addEventListener('DOMContentLoaded', () => {

});
})

clearBtn.onclick = () => {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
const url = tabs[0].url;
Expand All @@ -55,36 +58,76 @@ document.addEventListener('DOMContentLoaded', () => {
settings.style.display = "none"
note.style.display = "initial"
break;
default:
default:
settings.style.display = "none"
note.style.display = "initial"
break;
}
}
})

// Add event listeners to the buttons
saveBtn.addEventListener("click", showSavedMsg);
clearBtn.addEventListener("click", showClearedMsg);

function showSavedMsg() {
statusMsg.style.display = "block";
statusMsg.innerText = 'Saved'
setTimeout(() => {
statusMsg.style.display = "none";
statusMsg.innerText = ''
}, 2000);
}

function showClearedMsg() {
statusMsg.style.display = "block";
statusMsg.innerText = 'Cleared'
setTimeout(() => {
statusMsg.style.display = "none";
statusMsg.innerText = ''
}, 2000);

// Add event listeners to the buttons and search bar
saveBtn.addEventListener("click", showSavedMsg);
clearBtn.addEventListener("click", showClearedMsg);
searchBar.addEventListener("input", search)

function showSavedMsg() {
statusMsg.style.display = "block";
statusMsg.innerText = 'Saved'
setTimeout(() => {
statusMsg.style.display = "none";
statusMsg.innerText = ''
}, 2000);
}
function showClearedMsg() {
statusMsg.style.display = "block";
statusMsg.innerText = 'Cleared'
setTimeout(() => {
statusMsg.style.display = "none";
statusMsg.innerText = ''
}, 2000);
}


function search(event) {
if (event.target.value !== '') {
searchResults.style.display = 'block'
textArea.value = ''
// clear the results body so it won't just keep stacking
searchResultsBody.innerHTML = ''

const results = []
const searchValue = event.target.value

for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i)
const value = localStorage.getItem(key)

if (key.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()) ||
value.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase())) {
results.push({ url: key, note: value })
}
}

if (results.length === 0) {
searchResults.style.display = 'none'
// if note, show it
return
}

results.forEach(pair => {
const result = document.createElement('tr')
result.innerHTML = `
<td>${pair.url}</td>
<td>${pair.note}</td>
`
searchResultsBody.appendChild(result)
})
} else {
searchResults.style.display = 'none'
// if note, show it
searchResultsBody.innerHTML = ''
}
}
})


Expand Down
100 changes: 71 additions & 29 deletions indexDev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,24 @@ document.addEventListener('DOMContentLoaded', () => {
const clearBtn = document.querySelector("#clearBtn")
const settingsBtn = document.querySelector("#settingsBtn");
const statusMsg = document.querySelector("status");
const searchBar = document.querySelector('#searchBar')
const searchResults = document.querySelector('#searchResults')
const searchResultsBody = document.querySelector('#searchResultsBody')

// Get the current tab's URL
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
// Get the current tab's URL
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
const url = tabs[0].url;

// Check if there's a note saved for this URL
const note = localStorage.getItem(url);

// If a note was found, display it in the text area
if (note) {
// const textArea = document.querySelector("#note");
textArea.value = note;
}
});

saveBtn.addEventListener('click', () => {
const text = textArea.value;

Expand All @@ -32,7 +35,7 @@ document.addEventListener('DOMContentLoaded', () => {

});
})

clearBtn.onclick = () => {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
const url = tabs[0].url;
Expand All @@ -54,36 +57,75 @@ document.addEventListener('DOMContentLoaded', () => {
settings.style.display = "none"
note.style.display = "initial"
break;
default:
default:
settings.style.display = "none"
note.style.display = "initial"
break;
}
}
})

// Add event listeners to the buttons
saveBtn.addEventListener("click", showSavedMsg);
clearBtn.addEventListener("click", showClearedMsg);

function showSavedMsg() {
statusMsg.style.display = "block";
statusMsg.innerText = 'Saved'
setTimeout(() => {
statusMsg.style.display = "none";
statusMsg.innerText = ''
}, 2000);
}

function showClearedMsg() {
statusMsg.style.display = "block";
statusMsg.innerText = 'Cleared'
setTimeout(() => {
statusMsg.style.display = "none";
statusMsg.innerText = ''
}, 2000);

// Add event listeners to the buttons and search bar
saveBtn.addEventListener("click", showSavedMsg);
clearBtn.addEventListener("click", showClearedMsg);
searchBar.addEventListener("input", search)

function showSavedMsg() {
statusMsg.style.display = "block";
statusMsg.innerText = 'Saved'
setTimeout(() => {
statusMsg.style.display = "none";
statusMsg.innerText = ''
}, 2000);
}
function showClearedMsg() {
statusMsg.style.display = "block";
statusMsg.innerText = 'Cleared'
setTimeout(() => {
statusMsg.style.display = "none";
statusMsg.innerText = ''
}, 2000);
}


function search(event) {
if (event.target.value !== '') {
searchResults.style.display = 'block'
textArea.value = ''
// clear the results body so it won't just keep stacking
searchResultsBody.innerHTML = ''

const results = []
const searchValue = event.target.value

for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i)
const value = localStorage.getItem(key)

if (key.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()) ||
value.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase())) {
results.push({ url: key, note: value })
}
}

if (results.length === 0) {
searchResults.style.display = 'none'
return
}

results.forEach(pair => {
const result = document.createElement('tr')
result.innerHTML = `
<td>${pair.url}</td>
<td>${pair.note}</td>
`
searchResultsBody.appendChild(result)
})
} else {
searchResults.style.display = 'none'
// if note, show it
searchResultsBody.innerHTML = ''
}
}
})


13 changes: 13 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,15 @@ textarea:active {
border: none;
}

#searchResult {
position: absolute;
}

#searchResults> table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

/* #region Buttons */
#btnContainer {
display: flex;
Expand Down Expand Up @@ -185,6 +194,10 @@ button#settingsBtn {
button#clearBtn {
background-color: #f44336; /* Red */
}

input#searchBar {
margin-right: 2rem;
}
/* #endregion */

span.status {
Expand Down