Inspiration
I had always been interested in the New York Times as a company that effectively utilized technology for journalism, and prior to coming to Treehacks, I stumbled upon their (very well documented) APIs. I had always meant to play around with the APIs, and this hackathon was a great place for me to do so.
What it does
The NYT Content Generator takes an input from a user- keywords or phrases that are relevant in everyday life (from current events to pop culture to leisure activities). It then searches its database of articles going back to 1851 for pieces that are relevant, and displays one particular article's title, topic, and a snippet of the content. Each time a user hits the search button, the article links are saved at the bottom of the page.
How I built it
I used Javascript and JQuery to get the NYT API and use the input to get a specific JSON file. I used Javascript to search the JSON file for the title, category, and snippet of the article, as well as output the link. For the user interface and the output, I used HTML and a lot of CSS.
Challenges I ran into
The JSON file gave a string for the url, and not the link itself, so I was forced to store it in a variable, which HTML does not recognize. I figured out how to "unpack" the variable into the url in HTML, but it took a while. Additionally, I had trouble doing the UI- there was not much time left after I had finished the functionality, and I did not have time to learn bootstrap and had to make a lot of little adjustments in the CSS to accommodate for each element that I styled.
Accomplishments that I'm proud of
This is the first project I have made on my own, and my second hackathon. I was really happy to have a working product and to complete it on time. Using an API was very intimidating, especially because I only had basic HTML and CSS knowledge coming into this hackathon. Lastly, I'm proud of the fact that I made a logo for the first time using Illustrator!
What I learned
I learned how HTML, CSS, and Javascript work together (sometimes in the same file, sometimes across files) to create a responsive webpage. I also learned how APIs work and the documentation required to effectively access their services.
What's next for New York Times Content Generator
The article search API returns much more information than what I currently have on my web app; next steps would include adding images from the article, filtering by date, and letting the user dictate more specific criteria for the articles they want to see. In addition, I want to use bootstrap to create better looking panels for the article links and refine the design and UI.
Log in or sign up for Devpost to join the conversation.