JavaScript Line-By-Line Text Selection Applet

I am looking for an a JavaScript framework or applet that will display multiple lines of text and let you see the line numbers. Bonus if it lets you click on a line or word of text also and records the line number or selected text.

Using this image as an example as this is an IDE that is displaying a file. However, I would like to pass in a JavaScript var that contains multiple lines of text or maybe an array that has one line of text per array element.

[![Google Chrome Element Inspector][1]][1] (Sorry can’t include links… ugh)

This text would be displayed in a window and the user could hover their mouse over a line displayed and the line of text would get a highlighted color.

I believe that what you are looking for can actually be accomplished with either Vue or React (those are the only JS frameworks I am comfortable with). Vue gives you the ability to easily list out an each item of an array with v-for.

But then again, you can learn a whole lot about React through the courses here at FCC! They’re super awesome and have given me a solid foundation that I have built on at my current job.
https://www.freecodecamp.org/learn/front-end-libraries/react/

This can be accomplished by adding event listeners to certain types of text. It really is up to you to form this implementation. Nothing will be given to you easily and you will have to work for it. That will make it all the more rewarding! I hope this helps you through your journey.

Here is the image I wanted to show.

I don’t think Vue is the way to go (at least for me). I have heard of React so would be willing to give that a try.

I would imagine though that there has to be something already created that captures at least the basics of what I am trying to go for without having to write everything from scratch though.

Everything has to be implemented by you for the most part. Both React and Vue will provide you with different libraries that could help you try and achieve what you are looking for, but some of what you want will have to be done by hand. FreeCodeCamp is definitely the way to go when it comes to learning how to implement everything.

@caleb-mabry
Everything has to be implemented by you for the most part. Both React and Vue will provide you with different libraries that could help you try and achieve what you are looking for, but some of what you want will have to be done by hand. FreeCodeCamp is definitely the way to go when it comes to learning how to implement everything.

Are there specific tutorials you can recommend on the site then for helping in creating this? Specifically for using React.

If you’re not familiar with React, I definitely suggest that you start from the beginning that they have here:
https://www.freecodecamp.org/learn/front-end-libraries/react/

You’ll probably want to create components to accomplish this:
https://www.freecodecamp.org/learn/front-end-libraries/react/create-a-react-component

If you’re dealing with a list, you may want to see how everything is rendered from Javascript variables to display them on the webpage:
https://www.freecodecamp.org/learn/front-end-libraries/react/pass-an-array-as-props

This isn’t an easy task, if you have questions, I am sure that everyone here is more than willing to help.