Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.
Posted on Jan 8th 2018
In this project, we are going to create a Twitter clone using HTML, CSS and jQuery only. We will create the Registration screen and Twitter wall, where you can post tweets up to 250 characters in length. You can also retweet and like the tweets. However, since we are not using any server and database, nothing will persist. As soon as you reload the page, everything will be lost. The main purpose of this article is to show you how to create front end using client side scripting. We will use Webclipse to create our project. Let’s get started.
Here is what the Twitter clone app will look like:
Enter a name for your project. We are using `twitterclone` as shown in the image.
Click Finish, and your project will be created.
Creating HTML and CSS Files for Twitter Clone
We are going to create the registration screen and wall for Twitter Clone. If you check on Twitter website, there are mainly 3 fields in their registration form – Full Name, E-mail and Password. In our Registration file, we will make four fields – Full Name, E-mail, Password and User ID. User IDs or Usernames are the essential part of Twitter system, just like hashtags. In our application, we are not providing any distinct support for hashtags or urls.
Since there is no server side scripting and database involved in this project, there is no meaning of login screen. Therefore, we are using the term registration and login interchangeably.
Let’s first create the `login.html` file. Right click on the `twitterclone` directory in the project explorer window and select New > File (as shown on the image below).
In the next window, you will be prompted to enter the file name. Here we are providing `login.html` as our file name. Click Finish after entering the file name.
In the `login.html` file, we are going to insert the HTML code for the registration form. Here is the complete code for the registration screen:
Here in this file, Webclipse is showing some validation issues. You can see three yellow triangles, which states that something about this file could be improved. Nothing is wrong with the code, but we can improve the performance by loading the stylesheet in the head section of the file.
Similarly, we need to create a stylesheet and one more HTML file. Name these files as `index.css` and `profile.html`.
Now let’s check how our files are looking in the browser. Right click on the `login.html` and select Open With > Web Browser, as shown in the image below:
The login/registration screen will look like the image below:
Similarly, when you open the `profile.html` file, it will look like this:
Right now nothing will happen if you click on the tweet button on profile page. Even letters counter will not function when you enter text in the box. We have used the picture of Camilla Belle, but if you wish you can change the images in the code.
`login.js` file will hold the values of all the text fields in the login/registration screen. It will check whether the values are of appropriate type and not empty. Also, it will set the cookies with user ID and name, so that we can later use them in our profile/wall page. Below is the code of `login.js` file.
If there are no errors, then two cookies will be set – name and uid. Also, the current page will get redirected to `profile.html`.
Webclipse provides a rich set of colors with proper contrast for both the dark and light themes of Eclipse, so that our code syntax can be clear and readable. This helps developers to understand parts of code in a jiffy.
Webclipse can help you in predicting the right functions to be called in particular situations. This will make your work fast and error free. If you forget the name of some function, then content assist will provide you with the list of all the functions from which you can easily recall the one you need. Look at the images below to see it in action.
In the above image, content assist is showing that there are only two variables which contain the word ’email’. We can use either of them, in accordance with our requirements.
In this image, content assist is showing that we can use any of the listed functions over the `$emailerror` variable. `$emailerror` holds the reference of jQuery selector for showing errors in the email field on the login page.
How often do we skip a semi-colon at the end of a line, or do we sometimes put a semi-colon at the end of a function? Yes, sometimes we all do, while occasionally we commit other types of syntax errors. With Webclipse you will get the realtime validation so that you won’t have to bear the ache of unexpected behaviors during code execution. The image below shows the instant validation functionality of Webclipse.
Here we forgot a parenthesis at the end of `if` statement, and Webclipse instantly informed us about the error.
Webclipse gives a brief description of where and what the error is.
Call and Type Hierarchies
There are few functions of `profile.js` file:
To set the name and userid of the user which was provided in the login page and stored in name and uid cookies by login.js file.
To increase the count of tweets on the left profile card as soon as user posts a tweet.
There is one more thing we can add to this project. Suppose somebody directly opened the `profile.js` file without logging in – what will happen? There will be no set cookies for their name and user ID. This will provide null and undefined values. Look at the image below:
Here we are not getting any name on the card, and userid field is undefined.
To solve this problem, we can explicitly check whether the cookies for name and user ID are set or not. If they are not set, then we can redirect the profile page to the login page. The code for this task is written below:
We need to insert this code in the head section of `profile.htm` file and after including the `Cookie.js` external script. Look at the image below:
Our project is complete and fully functional now. To test this in a browser, right-click the `login.html` file and choose Open With > System Editor to open the app in your system’s browser.
Note: Since we are opening the html file directly in a browser using the `file://` protocol, the app will work with browsers Firefox and Edge, which allow cookies to work with locally served files. However, it will not work with Chrome for instance, which does not allow cookies to be used in files served with the `file://` protocol, and will require that the files be served with a web server.