Integrate Highlight Feature into EPUB Reader
Budget: $30 – $250 USD
We have an EPUB reader built with EPUB.js, and we already have a fully functional highlighting system in a separate example file. Your task is simply to integrate and adapt this existing highlight functionality into the main project.
What Needs to Be Done:
✅ Highlight System Integration:
Ensure that when users select text inside the book, the first 5 words of the selection are stored and displayed in the existing highlights sidebar as a list.
Each highlight should have a [x] remove button that deletes the highlight from both the UI and localStorage.
Ensure that highlights persist across sessions using localStorage.
✅ Fix Search Highlight Removal (Simple Adjustment):
The search system already works perfectly: when a user searches for a word, results appear in the sidebar, and clicking on a result takes them to the page where the word is highlighted.
The only small fix needed: When the user leaves the search session, the temporary highlights from the search should disappear.
What You Don’t Need to Do:
❌ You don’t need to create the highlight system from scratch—it already works in an example file.
❌ You don’t need to modify the search functionality—it already works fine, only the highlight removal needs to be fixed.
The project is well-structured, and the HTML, JavaScript, and EPUB.js setup are already in place. This is a quick integration and minor fix—nothing complex.
If you're familiar with EPUB.js and JavaScript, this should be very simple and fast to complete. ?
Let me know if you have any questions!
What Needs to Be Done:
✅ Highlight System Integration:
Ensure that when users select text inside the book, the first 5 words of the selection are stored and displayed in the existing highlights sidebar as a list.
Each highlight should have a [x] remove button that deletes the highlight from both the UI and localStorage.
Ensure that highlights persist across sessions using localStorage.
✅ Fix Search Highlight Removal (Simple Adjustment):
The search system already works perfectly: when a user searches for a word, results appear in the sidebar, and clicking on a result takes them to the page where the word is highlighted.
The only small fix needed: When the user leaves the search session, the temporary highlights from the search should disappear.
What You Don’t Need to Do:
❌ You don’t need to create the highlight system from scratch—it already works in an example file.
❌ You don’t need to modify the search functionality—it already works fine, only the highlight removal needs to be fixed.
The project is well-structured, and the HTML, JavaScript, and EPUB.js setup are already in place. This is a quick integration and minor fix—nothing complex.
If you're familiar with EPUB.js and JavaScript, this should be very simple and fast to complete. ?
Let me know if you have any questions!