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.

This project can also be viewed on Github.

Live demo

Here is what the Twitter clone app will look like:

Creating a JavaScript (jQuery) Project in Webclipse

Start Webclipse on your computer system. Choose File  > New > JavaScript Project.


Enter a name for your project. We are using twitterclone as shown in the image.


Click Finish, and your project will be created.

Need to create a front end using client side scripting? Why not try our Webclipse, an Eclipse plug-in that will change the way you work. You will love its syntax highlighting, content assist, instant validation, and more! Angular IDE, CodeLive, Emmet, JSjet, a debugger for JavaScript and TypeScript are also part of it, not to mention enhanced navigation and code sharing for Slack.

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:

The file will look like the image below:


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.

The code for profile.html is given below:

And the code for index.css is as follows:

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.

Let’s make our application functional by adding JavaScript in it. First of all, create a JavaScript file for login screen. We will call it login.js. To create a JavaScript file, right click on twitterclone directory in Project Explorer and select New > JavaScript Source File.


On the next screen you will need to enter the name of the JavaScript file, for example, login.js.


The new JavaScript file will look like this:


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.

JavaScript Made Easy With Webclipse

There are so many wonderful features that Webclipse provides for the development of JavaScript application! Let’s see each one of them.

Syntax Highlighting

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.


Content Assist

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.

Instant Validation

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.

There are a number of other benefits of Webclipse that we can enjoy when dealing with JavaScript or jQuery. Some of them include the following:

  1. Integrated Debugging
  2. Call and Type Hierarchies
  3. Source Refactoring
  4. Source Formatting
  5. Occurrence Highlighting

We will look at all these features in our future articles. Let’s now create a JavaScript file for profile/wall page. Like before, right click on twitterclone directory in project explorer window and select New – JavaScript Source File. We will call this file – profile.js.

There are few functions of profile.js file:

  1. 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.
  2. To increase the count of tweets on the left profile card as soon as user posts a tweet.
  3. Keeping track of tweets character counts.
  4. Posting a tweet at the press of tweet button.
  5. Retweet functionality.
  6. Like functionality.

Here is the code of profile.js file:


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.