Build Twitter Clone Project in 2 Minutes using HTML, CSS and Javascript
<!DOCTYPE html>
<html>
<head>
<title>Twitter Clone</title>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet"
/>
<style>
/* Additional CSS for heart icon */
.like-heart {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1 class="mt-5">Twitter Clone</h1>
<!-- Create a simple tweet input form -->
<div class="row mt-3">
<div class="col-12">
<div class="form-group">
<input
type="text"
class="form-control"
id="tweetTitle"
placeholder="Title"
/>
</div>
<div class="form-group">
<textarea
class="form-control"
id="tweetDescription"
placeholder="Description"
></textarea>
</div>
<div class="form-group">
<input type="file" class="form-control-file" id="tweetImage" />
</div>
<button class="btn btn-primary" id="postTweet">Tweet</button>
</div>
</div>
<!-- Display tweets -->
<div class="row mt-3" id="tweets"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const tweetTitle = document.getElementById("tweetTitle");
const tweetDescription = document.getElementById("tweetDescription");
const tweetImage = document.getElementById("tweetImage");
const postTweet = document.getElementById("postTweet");
const tweets = document.getElementById("tweets");
// Load tweets from local storage
const savedTweets = JSON.parse(localStorage.getItem("tweets")) || [];
function saveTweetsToLocalStorage() {
localStorage.setItem("tweets", JSON.stringify(savedTweets));
}
function deleteTweet(index) {
savedTweets.splice(index, 1);
saveTweetsToLocalStorage();
displayTweets();
}
function editTweet(index, updatedTweet) {
savedTweets[index] = updatedTweet;
saveTweetsToLocalStorage();
displayTweets();
}
function displayTweets() {
tweets.innerHTML = "";
savedTweets.forEach((tweetData, index) => {
const tweet = document.createElement("div");
tweet.className = "col-12 col-md-6 col-lg-4";
if (tweetData.title) {
tweet.innerHTML += `<h2>${tweetData.title}</h2>`;
}
if (tweetData.image) {
const img = document.createElement("img");
img.src = tweetData.image;
img.className = "img-fluid";
tweet.appendChild(img);
}
if (tweetData.description) {
tweet.innerHTML += `<p>${tweetData.description}</p>`;
}
const actions = document.createElement("div");
actions.className = "actions";
actions.innerHTML = `
<i class="like-heart fas fa-heart"></i>
<span class="like-count">${tweetData.likes}</span>
<button class="btn btn-secondary comment">Comment</button>
<button class="btn btn-secondary edit">Edit</button>
<button class="btn btn-secondary delete">Delete</button>
`;
tweet.appendChild(actions);
// Like button event
const likeHeart = tweet.querySelector(".like-heart");
const likeCount = tweet.querySelector(".like-count");
likeHeart.addEventListener("click", () => {
tweetData.likes++;
likeCount.innerText = tweetData.likes;
});
// Edit button event
actions.querySelector(".edit").addEventListener("click", () => {
const updatedTitle = prompt("Edit Title:", tweetData.title);
const updatedDescription = prompt(
"Edit Description:",
tweetData.description
);
const updatedTweet = {
title: updatedTitle,
image: tweetData.image,
description: updatedDescription,
likes: tweetData.likes,
};
editTweet(index, updatedTweet);
});
// Delete button event
actions.querySelector(".delete").addEventListener("click", () => {
deleteTweet(index);
});
// Comment button event
actions.querySelector(".comment").addEventListener("click", () => {
const comment = prompt("Add a comment:");
if (comment) {
tweetData.comments.push(comment);
displayTweets();
}
});
tweets.appendChild(tweet);
});
}
displayTweets();
postTweet.addEventListener("click", function () {
const title = tweetTitle.value;
const image = tweetImage.files[0];
const description = tweetDescription.value;
if (title || description || image) {
const newTweet = {
title: title,
image: image ? URL.createObjectURL(image) : null,
description: description,
likes: 0,
comments: [],
};
savedTweets.push(newTweet);
saveTweetsToLocalStorage();
displayTweets();
tweetTitle.value = "";
tweetImage.value = "";
tweetDescription.value = "";
}
});
});
</script>
<!-- Font Awesome for heart icon -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>