Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.

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.

creating-twitter-clone-ss-1

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

creating-twitter-clone-ss-2

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).

creating-twitter-clone-ss-3

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.

creating-twitter-clone-ss-4

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:

creating-twitter-clone-ss-5

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:

creating-twitter-clone-ss-6

The login/registration screen will look like the image below:

creating-twitter-clone-ss-7

Similarly, when you open the profile.html file, it will look like this:

creating-twitter-clone-ss-8

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.

creating-twitter-clone-ss-9

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

creating-twitter-clone-ss-10

The new JavaScript file will look like this:

creating-twitter-clone-ss-11

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.

webclipse-syntax-highlighting

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.

webclipse-content-assist

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.

webclipse-content-assist-functions

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.

webclipse-instant-validation

Here we forgot a parenthesis at the end of if statement, and Webclipse instantly informed us about the error.

webclipse-instant-validation-error-description

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:

twitter-clone-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:

twitter-clone-profile-js-file-undefined-values

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:

twitter-clone-profile-js-file-cookies-included

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.

Related Posts

In CI 9, DevStyle Ships with Webclipse and Angular... Webclipse and Angular IDE are key products for Genuitec and one main area we are trying to fix is not only support for coding in JavaScript, TypeScript, Angular and more inside Eclipse, but also make Eclipse a joy to work with.  Part of that was available for some time in Webclipse with things like the Breadcrumb toolbar or the enhanced Terminal+ v...
With Genuitec, updates are free! Did you know that you already have access to the latest Genuitec products, as a licensed user? This includes brand new releases - there's no need to buy a new version when it is released.Perhaps you have gone all the way and purchased MyEclipse, our Java IDE that includes the best tools for dynamic frontend and powerful backend development, and are...
Introducing DevStyle – Rebooting EclipseR... Yesterday we released the first production version of DevStyle, a free add-on for Eclipse. DevStyle seeks to dramatically improve the Eclipse user experience for millions of developers with the introduction of modern developer ergonomics and the beautiful styling you’ve come to expect from products in 2017.Over the years, the Eclipse evolution has ...
2017 CI 10 – Our Holiday Gift is Here We are getting more and more in the holiday mood! Need proof? Our 2017 CI 10 is out the door, bringing you the best present right before the holidays - a release focused on critical fixes across our products. And if you happened to experience a critical crash on macOS High Sierra, it won’t happen again as you step into the new year!So what have we ...

Posted on Jan 8th 2018