If you know me, you know I'm a tool guy. In this case, I have a list of books that I want to put in my email. I'd like to do what the video shows - have the author,title in a line of text, click on it and be able to insert that in my email in a message to myself. So, how do I get such a list that is "interactive" - because I want to see which ones I've already picked - aka, where I am in the list..
Thank you chatGPT. Sometimes, you can hack it.
Starting prompt (one iteration saying "not ok" not shown)
I will give you a text file consisting of several paragraphs. Each will contain the name of a book and author. The book name is on the first line and "by <author name>" on second line.
Your task is to parse the text, and give me a downloadable HTML file with javascript. When I open the file in a browser, I will see the list of books and authors in this format :
author name - book name - book recommendation
To clarify, that means name of the book, then a a hyphen, the author name, another hyphen and finally, the words "book recommendation" . One one each line
The javascript will ensure that, when I click on any line, the text of the entire line will be copied to clipboard. No alert box of any kind is required and should be suppressed.
All the text should initially be displayed in bold font. When a line is clicked (anytime a line is clicked, its text will be copied to clipboard) it's font should toggle - that is, if it was bold, it should change to normal and vice versa.
And chatGPT's re-write:
I will provide a text file with several paragraphs. Each paragraph includes the title of a book on the first line and the author on the second line, formatted as:
<Book Title>
by <Author Name>.
Your task is to:
Parse the file to extract the book titles and author names.
Create a downloadable HTML file that:
Displays the books and authors in the following format:
- <Author Name> - <Book Title> - book recommendation.
- Lists each book entry on its own line.
Add functionality to the HTML using JavaScript so that:
All book entries are initially displayed in bold font.Clicking on any line:
- Copies the text of the entire line to the clipboard silently (no alerts or pop-ups should be shown).
- Toggles the appearance of the line between bold and normal fonts.
Ensure the font toggling works regardless of the initial style applied or browser-specific behavior.
Style the HTML for readability:
- Use a clear, modern font (e.g., Arial or sans-serif).
- Ensure the list items change the cursor to a pointer on hover, indicating they are clickable.
Believe it or not, the JS magic doing that formatting is pretty compact:
<script>
document.querySelectorAll('.book-item').forEach(item => {
item.addEventListener('click', () => {
// Copy text to clipboard
navigator.clipboard.writeText(item.innerText).catch(err => console.error(err));
// Toggle font weight
item.style.fontWeight = item.style.fontWeight === 'bold' || item.style.fontWeight === '' ? 'normal' : 'bold';
});
});
</script>
