CodeNewbie Community 🌱

Shayne McGregor
Shayne McGregor

Posted on

Creating a Platform for Rap Annotations Part 1

The Story

I'm a huge fan of rap music. I've been one ever since I was a kid. Lately, I've been doing a lot of writing on rap music, and by extension, I've been perusing's massive lyric database. I even have an account with them, but in perusing's database is that regular account holder's can't contribute annotations unless they've reached a certain level of credibility. Genius I'm sure has their own reasons for doing this, but it made me think about creating a project that functioned similarly to Genius without limiting the user's ability to create annotations.
I'm not trying to recreate What I'm trying to do is recreate the functionality of their website with JavaScript

The Plan

Thankfully, I'm not working alone. My friend, Ned, a fellow programmer, and I are teaming up to tackle this project, and our first step was to review Genius's site and make a list of all the things we want the user to be able to do. In doing so we came up with the following list in a Google doc.

List of things we want the user to do

  • Users can highlight and click lines of verse (first column) w/ no clicking before highlighting
  • Click produces second column (block editor / form thread)
  • Write/post to column
  • Edit the column (could have different users - shows which user made which changes)
  • Exit the column

No doubt we'll run into blind spots as we begin to scaffold and test our application, but at the moment, we're using this list as a starting point for building our web app.

Step 1 (Detecting when a user has highlighted a portion of text)

In this example, I'm using a verse from Drake's "Jimmy Cooks," which released on his seventh studio album, Honestly Nevermind(2022)

In the below example I've placed each line of the verse inside a p tag.
A screenshot of how I'm representing Drake's verse in HTML

In order to detect what text the user has selected, I'm using the onmouseup attribute and I'm setting that to a javaScript function that will grab the text that was selected and, as a test, store it in a text area element. The function definition as well as what it looks like in practice is included here.

Image description

Image description


Being able to detect which text the user has selected and returning it is an important first step in making this project come alive. However, in working on this feature, I realized that I could also accomplish the same thing by using the onmousedown attribute.

Interestingly, the difference between onmouseup and onmousedown really comes down to user experience. Whereas onmouseup will highlight the text as soon as the user has released the mouse button on whatever has been highlighted, onmousedown, by default, creates a 'pause' between when the text is highlighted and when the information is stored in the text area. Check the image below for an example.

Image description

This could be useful if in the event the user finds that they selected the wrong text on accident. We could, for example, include a "are you sure?" prompt after the user has selected the text that they want.


Top comments (1)

sheriffderek profile image

I think that a step forward would be to attach an event listener to the whole article and then based on the paragraph clicked it could handle this logic - without having the onclick in the HTML.