Young People Translator

Inspiration

I was browsing reddit and there were some terms I didnt get so I had to pull up urbandictionary, and I remembered how convenient the translator tooltip for my Chinese relatives looked.

What it does

It uses Urbandictionary's api to search for highlighted text. As of right now the html file uses javascript's prompt function for the search term, then displays it on a html file. I also have a button that changes the color of the background that was leftover from me learning html. The html doc also has a clicking function where if you highlight text it will alert with the new api defintion. The other file lets you right click the app on the context menu, select the app, and takes you directly to the api data. I need to piece them together somehow.

How I built it

After painstakingly reading hours and hours of chrome example apps and taking lessons on codeacademy for javascript and then piecing it together, I used sublime text to put together the html file and stuff.

Challenges I ran into

I didn't know jquery. Or HTML. Or javascript. My teammates didnt either and they left me to fend for myself. It was a struggle. I dont know how I made it.

Accomplishments that I'm proud of

After my team of 2 other freshman novice cs programmers ABANDONED HOPE AND LEFT THE HACKATHON and made me fend for myself, I managed to scrape together working code that actually retrieves the correct information.

What I learned

What's next for Young People Translator

I need to make it work when highlighted and for it to have a popup that can stream the html text that I have opened up. It needs to look pretty, and if there are too many definitions, there needs to be a way to sift through them seamlessly. Potentially more buttons to search for pictures or go to the website.

** for github the files are in the urbandicitonary folder for the api file, and the popup is in the u-dictionary-popup folder, and they are best viewed by directly uploading into your chrome extensions in developer mode

Built With

• chrome
• html
• javascript
• jquery
• urbandictionary-api