Spark

Inspiration

I've never done a hackathon before, and I knew going in that I would be far from the most impressive programmer here. But I wanted to try something new and learn a new skill. I'd never touched JavaScript before this weekend, and now I have a working Chrome Extention!

What it does

Spark searched through the text on your current webpage and marks text that contains AI-relevant keywords. It puts a lightning bolt at the start of the whole text containing the word and puts stars around the actual keyword.

How we built it

I started with the Chrome Extention hackpack and thought about how I could expand the current "Find and replace" abilities of the template. From there, it was sifting through online JavaScript tutorials to learn on the fly what I needed to get the job done.

Challenges we ran into

Initially, I wanted to highlight the text of the whole paragraph involving the keyword, but every method I found online was either deprecated or more complicated than I could figure out. I also wanted to read the keywords from a file instead of a string, but again I couldn't find a simple enough solution, so I pivoted.

Accomplishments that we're proud of

A long time ago, when I was learning Python for the first time, my teacher told me that the key to learning how to program is just picking a language. He said that once you know one, you can learn all of them. The fact that I was able to code in JavaScript, knowing nothing about it just a day ago, means to me that I really do know how to code. That feels good.

What we learned

I learned that Chrome Extensions are written in JavaScript and that editing an HTML element itself rather than its contents is a lot more involved than I thought.

What's next for Spark

As an HCI student, Web Dev is inevitably in my future, and I want this weekend to be my first step on that journey. Perhaps this project will... SPARK... another idea for me! (Aren't I so punny?)

Built With

• javascript