Coders Packet

Twitting application using JavaScript

By Imran Wahid

A web application that serves a user a lot of inspirational quotes and lets the user tweet the quote on his/her Twitter handle. No external libraries were used. Only an API key is used.

This is a web application that shows a user a lot of inspirational quotes and the user can tweet any of them according to his choice on his/her Twitter handle. This application is built on pure HTML5, CSS3, and JavaScript. 

Click here to see the HTML code of the main body

Click on the above link to view the HTML content of the main card view of the application. The major two elements of the body are 

1. Div element with class name "quotes".

2. Div element with class name "author".

There are two buttons on the web page 

1. New Quote button lets the user change the quote on the screen.

2. Tweet button lets the user tweet the quote.

Click here to see the interface of the application

I am bringing all the quote details using an API key.

const getQuotes = async () => { 
            const api = `https://type.fit/api/quotes`;
            try {
                let data = await fetch(api);
                let realData = await data.json();
                let ind = Math.floor(Math.random() * 1000);
                quotes.innerText = `“ ${realData[ind].text} ”`;
                let auth = realData[ind].author;
                if (auth == null) {
                    author.innerText = `-Unknown`;
                }
                else {
                    author.innerText = `-${auth}`;
                }
            }
            catch (error) {

            }
        }

When the "New Quote" button is clicked the above "getQuotes" function is called. This function is bringing the data using the API key and converting the data into JSON format. JSON is nothing but an array of objects. In this case, each object has two properties 

1. Quote

2. Author

Now we are generating a random number ranging from 0 to 1000 and that number will act as the index of the next object to be selected from the JSON data. So an object with that index will be chosen. Then the quote and the author information will be taken from the object and will be updated in the two major divs of the HTML content. That's how the random selection and display of a fresh quote is taking place. 

Now let's come to the twitting functionality of the application.

const tweetNow = () => {
            let post = `https://twitter.com/intent/tweet?text=${quotes.innerText}   Author:-${author.innerText}`;
            location.href=post;
        }

When the tweet button is clicked, a URL is generated with the quote and its author name passing as the query to it. Then we are prompting our web page to that location. That's how a user is able to tweet any quote of his/her choice on his/her Twitter handle.

So that's all about the web application. 

The source code is in my GitHub repository 

https://github.com/ImranWahidCoder/tweetQuote

Download project

Reviews Report

Submitted by Imran Wahid (Imu2018)

Download packets of source code on Coders Packet