Want to tweet a quote?

Somedays we have those moments when we feel inspired, so we browse through Pinterest to try and find the perfect quote to share that day. The issue with Pinterest is that there are so many options to go through and decisions to make while finding your selection for that day…What if I told you that I have a solution to that? It's called “The Quote Generator”.

The Quote Generator is a Web application I built a few weeks after I finished my coding boot camp in 2022. I was struggling with JavaScript still so I decided to create a project with HTML, JavaScript, and 2 APIs (The first is a quote API, and the second is the Twitter API).

To start the project I listed the actions that needed to be taken to complete the project.

The tasks:

• Design: I came up with a background for the design I used this really cool website called Hero Patterns to create a background for the website. I then created the main component which is a card or a block where the quote will be generated.
• Display Quotes: I used HTTP requests to call and receive the quotes from the Quote API. After I received the quotes I was able to store them in an array that I would use to display the quotes on the screen. When I initially displayed the quotes on the screen the quotes were just plain text (Duh), they weren't styled. So I began styling the text, but something was missing…Let’s map through the arrays and add the big Quotation marks at the beginning of each quote.
• Making the Component responsive: After displaying the quotes I realized that some quotes would be longer than others, so I had to find a way to make the card resize based on the length of the quote. So how did I do that? By making two separate classes for the button, One class for “large quotes” and one for “small quotes”. By creating those classes I was able to dynamically change the size of the component by checking the size of the quote, if the quote was longer than 120 characters I would set the component to have the “long quote” class, if the quote wasn't longer than 120 characters the component would have the “small quote” class.
• Tweeting the Quote & Changing the quote: Once I was satisfied with how the quotes were being displayed on the component, I started making the buttons. I made two simple buttons in the corners of the components. The button on the right is to Change the quote, every time the button is pressed it would make an HTTP request to the Quote API to “GET” a new quote and display it on the component. On the left side, there's the Tweet button. The tweet button was something that I didn't plan to add at the beginning, while I was browsing to find a Quote API I ran into the Twitter API. I did some research and learned that you can create posts on your Twitter using the API. It is also really simple to do so, I programmed the button to open Twitter and to press the create a post button. That was implemented with some Url manipulation `https://twitter.com/intent/tweet?text=${quoteText.textContent}’. The link opens up Twitter in the browser with the quote in your post block, all you have to do is press the post button and your quote is posted on your Twitter page.

As a result of implementing all of the tasks my project completed, I am really happy with how it came out. It's a simple project but I learned so much from it. I reinforced my JavaScript skills, learned more about APIs and HTTP requests, and also added some useful websites to my resource library.

Thank you for reading, feel free to leave any comments or future implementations you think I should add to the project in the comments below.

If you want to take a look at the code and the site I will leave the links here.

Live site: https://trquotegenerator.netlify.app/

Source Code: https://github.com/TysonR0319/QuoteGenerator