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 that will have 250 characters limit.
You can also retweet and like the tweets. But since we are not using any server and database, so nothing will persist. As soon as you will reload the page, everything will be lost.
Front End Development
The main purpose of this article is to show you how to create the front end and using client-side scripting. Let’s get started.
First, create a twitterclone directory with login.html file.
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.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8">
link href=”https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel=”stylesheet”>
<link href=”index.css” rel=”stylesheet”>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script
src=”https://code.jquery.com/jquery-3.2.1.min.js"
integrity=”sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=”
crossorigin=”anonymous”></script>
<script src=”login.js”></script>
</head>
<body class=”segoe”>
<div class=”topcontainer”>
<div class=”topbar”>
<i class=”fa fa-twitter logocenter” aria-hidden=”true”></i>
</div>
<div class=”AppContent wrapper wrapper-signup” id=”page-container”>
<link rel=”stylesheet” href=”https://abs.twimg.com/a/1511833274/css/t1/t1_signup.bundle.css">
<div class=”page-canvas”>
<div class=”signup-wrapper”>
<h1>
Join Twitter Clone today.
</h1>
<div class=”t1-form signup “ id=”phx-signup-form”>
<div class=”textbox”>
<div class=”prompt name”>
<div data-fieldname=”name” class=”field”>
<div class=”sidetip”>
<p id=”nameerror” role=”alert” class=”blank invalid error”>What’s your name?</p>
</div>
<input type=”text” placeholder=”Full name” aria-required=”true” maxlength=”50" id=”full-name” class=””>
</div>
</div>
<div class=”prompt name”>
<div data-fieldname=”name” class=”field”>
<div class=”sidetip”>
<p id=”uiderror” role=”alert” class=”blank invalid error”>Write a user id</p>
</div>
<input type=”text” placeholder=”User Id” aria-required=”true” maxlength=”20" id=”uid” class=””>
</div>
</div>
<div class=”prompt email”>
<div data-fieldname=”email” class=”field”>
<div class=”sidetip”>
<p id=”emailerror” role=”alert” class=”invalid error”>Please enter a valid email.</p>
</div>
<input type=”text” placeholder=”Email” aria-required=”true” class=”email-input” id=”email”>
</div>
</div>
<div class=”prompt password”>
<div data-fieldname=”password” class=”field”>
<div class=”sidetip”>
<p id=”passerror” role=”alert” class=”blank error”>Please enter a password.</p>
</div>
<input type=”password” placeholder=”Password” aria-required=”true” id=”password”>
</div>
</div>
</div>
<div class=”doit”>
<div class=”sign-up-box”>
<input type=”submit” value=”Sign up” id=”submit_button” class=”signup EdgeButton EdgeButton — primary EdgeButton — large submit”>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Similarly, we need to create a stylesheet and one more HTML file. Name these files as index.css and profile.html.
#jquery #javascript #twitter #html #css
