This project was an assignment in my Web Dev class, where we had to find a collection of APIs to find different attributes of a user-inputted word. We had to find APIs for the word’s Definitions, Synonyms, Antonyms, Anagrams, and Translations. We then had to take those APIs, create AJAX requests to each of them, and display their output back to our user. This allowed the user to input a single English word, and get back a lot of information about the word they entered in. Another section of the project was to find an API that would take in a sentence from the user, and return back the sentence in “Yoda Speak”.

This project took a lot longer than I expected it to take to complete. I didn’t realize how difficult it would be to find these APIs that didn’t require any payment in order to use. After many searching and exploring different APIs, I found 4 of them that could do everything that was required for this project. Working with the APIs was pretty fun too, some of them would return back in a JSON format, making them pretty easy to work with and extract the proper data. One of them returned back XML, which took a decent amount of time to learn how to process that file.

Once I got all the requests handled, laying them out onto the page was the next big step. I went through a couple of ideas, displaying everything in a single textarea element, to using multiple textareas for the different parts, but I finally settled on using 5 tables for each of the words components. The reason for that decision was the ease of reading the data. In the textareas, they would all be formatted strings, using indentation to give the appearance of lists. Overall, it didn’t look very polished. As I was working with some classmates on the assignment, one of them showed me how they laid out their data, using 5 different tables. It looked so much cleaner than how mine was looking, so I reworked my display to work with tables instead. Using a bit of jQuery and CSS, the data is much more readable than the original textarea idea I was going with.

Finally, was designing the page to look much better than a bunch of tables on a white page. Honestly, the designing of the page probably took just as much time as making the functionality of the page itself. I wanted to incorporate a “sidebar” onto the page, to allow users some navigation between the different assignments in this class. Getting that setup took forever, trying to figure out how to position different

tags and modifying them to only display in a certain area. Once that got finished, I tried testing it on my laptop instead of my desktop, and the entire page was wrong! The different boxes I spent so much time getting to the right spots were now overlapping, text going over the user’s data, it was just a mess. I didn’t account for different screen sizes when I initially was designing the page, so I ended up adding in some more Javascript to set the boxes to a factor of the display’s size. That fixed the problem I was having, and with a little more work a touch-ups, the page eventually reached a point where I was satisfied with how it looked.

Overall, this project was a really good learning experience with the different web tools available to developers. It’s fantastic to know that these APIs exist out there, so developers don’t have to go and rewrite and entire program every time they want to implement a dictionary or translator to their page. It was also a fantastic learning experience with CSS, for now I know a couple of new tools and methods that can help with future webpages.