Twitter Clone

I'll enhance the Twitter clone with user authentication, a proper data structure, and more interactive features. Here's the improved version: Twitter Clone

:root { --primary-color: #1da1f2; --secondary-color: #e8f5fe; --text-color: #14171a; --border-color: #e1e8ed; --background-color: #ffffff; --hover-color: #f7f7f7; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif; } body { background-color: #f7f9fa; color: var(--text-color); } .hidden { display: none !important; } .app { max-width: 1200px; margin: 0 auto; min-height: 100vh; } .login-screen { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: var(--primary-color); } .login-container { background-color: var(--background-color); padding: 2rem; border-radius: 16px; width: 400px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .login-container h1 { margin-bottom: 1.5rem; color: var(--primary-color); text-align: center; } .login-container input { width: 100%; padding: 0.75rem; margin-bottom: 1rem; border: 1px solid var(--border-color); border-radius: 4px; font-size: 1rem; } .login-container button { width: 100%; padding: 0.75rem; background-color: var(--primary-color); color: white; border: none; border-radius: 25px; font-size: 1rem; font-weight: bold; cursor: pointer; margin-bottom: 1rem; } .login-container button:hover { background-color: #1991db; } .login-container p { text-align: center; color: #657786; } .login-container a { color: var(--primary-color); text-decoration: none; } .login-container a:hover { text-decoration: underline; } header { padding: 1rem; border-bottom: 1px solid var(--border-color); background-color: var(--background-color); position: sticky; top: 0; z-index: 100; } .header-content { display: flex; justify-content: space-between; align-items: center; } .header-content i { color: var(--primary-color); font-size: 2rem; } .user-menu { display: flex; align-items: center; gap: 1rem; } .user-menu img { width: 40px; height: 40px; border-radius: 50%; } .user-menu button { background-color: var(--primary-color); color: white; border: none; padding: 0.5rem 1rem; border-radius: 20px; cursor: pointer; } .main-content { display: flex; min-height: calc(100vh - 73px); } .sidebar { width: 250px; padding: 1rem; border-right: 1px solid var(--border-color); background-color: var(--background-color); } .sidebar nav ul { list-style: none; } .sidebar nav ul li { margin-bottom: 0.5rem; } .sidebar nav ul li a { text-decoration: none; color: var(--text-color); font-weight: bold; padding: 0.75rem; border-radius: 25px; display: flex; align-items: center; gap: 1rem; transition: background-color 0.2s; } .sidebar nav ul li a:hover { background-color: var(--secondary-color); color: var(--primary-color); } .sidebar nav ul li a.active { color: var(--primary-color); } .sidebar nav ul li i { width: 24px; text-align: center; } .feed { flex: 1; max-width: 600px; border-right: 1px solid var(--border-color); } .right-sidebar { width: 350px; padding: 1rem; background-color: var(--background-color); } .tweet-box { padding: 1rem; border-bottom: 1px solid var(--border-color); display: flex; gap: 1rem; } .tweet-box img { width: 48px; height: 48px; border-radius: 50%; } .tweet-box textarea { flex: 1; padding: 1rem; border: none; resize: none; height: 100px; font-size: 1.25rem; outline: none; } .tweet-actions { display: flex; justify-content: flex-end; } .tweet-actions button { background-color: var(--primary-color); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 25px; font-weight: bold; cursor: pointer; } .tweet { padding: 1rem; border-bottom: 1px solid var(--border-color); display: flex; gap: 1rem; transition: background-color 0.2s; } .tweet:hover { background-color: var(--hover-color); } .tweet-avatar { width: 48px; height: 48px; border-radius: 50%; } .tweet-content { flex: 1; } .tweet-header { display: flex; align-items: center; margin-bottom: 0.5rem; } .tweet-header strong { margin-right: 0.5rem; } .tweet-header span { color: #657786; font-size: 0.9rem; } .tweet-text { margin-bottom: 0.75rem; line-height: 1.4; } .tweet-footer { display: flex; gap: 3rem; color: #657786; } .tweet-footer div { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .tweet-footer i { font-size: 1rem; } .trends, .who-to-follow { background-color: #f7f9fa; padding: 1rem; border-radius: 16px; margin-bottom: 1rem; } .trends h3, .who-to-follow h3 { margin-bottom: 1rem; font-size: 1.25rem; } .trend-item { padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); cursor: pointer; } .trend-item:last-child { border-bottom: none; } .trend-item:hover { background-color: var(--hover-color); } .trend-tag { font-weight: bold; color: var(--text-color); } .trend-tweets { font-size: 0.8rem; color: #657786; } .follow-suggestion { display: flex; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); } .follow-suggestion:last-child { border-bottom: none; } .follow-suggestion img { width: 48px; height: 48px; border-radius: 50%; margin-right: 1rem; } .follow-info { flex: 1; } .follow-name { font-weight: bold; } .follow-username { color: #657786; font-size: 0.9rem; } .follow-button { background-color: var(--text-color); color: white; border: none; padding: 0.5rem 1rem; border-radius: 25px; font-weight: bold; cursor: pointer; } .follow-button.following { background-color: transparent; color: var(--text-color); border: 1px solid var(--border-color); } class TwitterClone { constructor() { this.users = [ { id: 1, name: "John Doe", username: "johndoe", password: "password123", avatar: "https://randomuser.me/api/portraits/men/1.jpg" }, { id: 2, name: "Jane Smith", username: "janesmith", password: "password123", avatar: "https://randomuser.me/api/portraits/women/1.jpg" }, { id: 3, name: "Bob Johnson", username: "bobjohnson", password: "password123", avatar: "https://randomuser.me/api/portraits/men/2.jpg" } ]; this.tweets = [ { id: 1, userId: 1, content: "Just setting up my Twitter clone! #excited", timestamp: new Date(Date.now() - 3600000), likes: [2, 3], retweets: [], replies: [] }, { id: 2, userId: 2, content: "This Twitter clone looks amazing! #webdev", timestamp: new Date(Date.now() - 1800000), likes: [1], retweets: [], replies: [] }, { id: 3, userId: 3, content: "Building social networks is fun! #coding", timestamp: new Date(Date.now() - 900000), likes: [1, 2], retweets: [], replies: [] } ]; this.trends = [ { tag: "#TwitterClone", tweets: 125 }, { tag: "#WebDevelopment", tweets: 892 }, { tag: "#JavaScript", tweets: 1532 }, { tag: "#CSS", tweets: 876 }, { tag: "#HTML", tweets: 543 } ]; this.currentUser = null; this.init(); } init() { this.cacheElements(); this.bindEvents(); this.renderLoginScreen(); } cacheElements() { this.loginScreen = document.getElementById('loginScreen'); this.mainApp = document.getElementById('mainApp'); this.loginForm = document.getElementById('loginForm'); this.signupForm = document.getElementById('signupForm'); this.showSignup = document.getElementById('showSignup'); this.showLogin = document.getElementById('showLogin'); this.logoutBtn = document.getElementById('logoutBtn'); this.tweetButton = document.getElementById('tweetButton'); this.tweetContent = document.getElementById('tweetContent'); this.tweetsContainer = document.getElementById('tweetsContainer'); this.trendsContainer = document.getElementById('trendsContainer'); this.followSuggestions = document.getElementById('followSuggestions'); this.currentUserAvatar = document.getElementById('currentUserAvatar'); this.currentUserTweetAvatar = document.getElementById('currentUserTweetAvatar'); } bindEvents() { this.loginForm.addEventListener('submit', (e) => this.handleLogin(e)); this.signupForm.addEventListener('submit', (e) => this.handleSignup(e)); this.showSignup.addEventListener('click', (e) => this.toggleForms(e)); this.showLogin.addEventListener('click', (e) => this.toggleForms(e)); this.logoutBtn.addEventListener('click', () => this.handleLogout()); this.tweetButton.addEventListener('click', () => this.postTweet()); } toggleForms(e) { e.preventDefault(); this.loginForm.classList.toggle('hidden'); this.signupForm.classList.toggle('hidden'); } handleLogin(e) { e.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; const user = this.users.find(u => u.username === username && u.password === password); if (user) { this.currentUser = user; this.renderMainApp(); } else { alert('Invalid username or password'); } } handleSignup(e) { e.preventDefault(); const name = document.getElementById('signupName').value; const username = document.getElementById('signupUsername').value; const password = document.getElementById('signupPassword').value; if (this.users.some(u => u.username === username)) { alert('Username already taken'); return; } const newUser = { id: this.users.length + 1, name, username, password, avatar: `https://randomuser.me/api/portraits/${Math.random() > 0.5 ? 'men' : 'women'}/${Math.floor(Math.random() * 50)}.jpg` }; this.users.push(newUser); this.currentUser = newUser; this.renderMainApp(); } handleLogout() { this.currentUser = null; this.renderLoginScreen(); } postTweet() { const content = this.tweetContent.value.trim(); if (content && this.currentUser) { const newTweet = { id: this.tweets.length + 1, userId: this.currentUser.id, content, timestamp: new Date(), likes: [], retweets: [], replies: [] }; this.tweets.unshift(newTweet); this.renderTweets(); this.tweetContent.value = ''; } } formatTime(date) { const seconds = Math.floor((new Date() - date) / 1000); if (seconds < 60) return 'Just now'; if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`; if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`; return `${Math.floor(seconds / 86400)}d ago`; } renderLoginScreen() { this.loginScreen.classList.remove('hidden'); this.mainApp.classList.add('hidden'); this.loginForm.reset(); this.signupForm.reset(); this.loginForm.classList.remove('hidden'); this.signupForm.classList.add('hidden'); } renderMainApp() { this.loginScreen.classList.add('hidden'); this.mainApp.classList.remove('hidden'); this.currentUserAvatar.src = this.currentUser.avatar; this.currentUserTweetAvatar.src = this.currentUser.avatar; this.renderTweets(); this.renderTrends(); this.renderFollowSuggestions(); } renderTweets() { this.tweetsContainer.innerHTML = ''; this.tweets.forEach(tweet => { const user = this.users.find(u => u.id === tweet.userId); if (!user) return; const tweetElement = document.createElement('div'); tweetElement.className = 'tweet'; tweetElement.innerHTML = `

${user.name} @${user.username} · ${this.formatTime(tweet.timestamp)}

${tweet.content}

`; this.tweetsContainer.appendChild(tweetElement); }); } renderTrends() { this.trendsContainer.innerHTML = ''; this.trends.forEach(trend => { const trendElement = document.createElement('div'); trendElement.className = 'trend-item'; trendElement.innerHTML = `

${trend.tag}

${trend.tweets} Tweets

`; this.trendsContainer.appendChild(trendElement); }); } renderFollowSuggestions() { this.followSuggestions.innerHTML = ''; // Get users not followed by current user (excluding self) const suggestions = this.users.filter(user => user.id !== this.currentUser.id ); suggestions.forEach(user => { const suggestionElement = document.createElement('div'); suggestionElement.className = 'follow-suggestion'; suggestionElement.innerHTML = `

${user.name}

@${user.username}

`; this.followSuggestions.appendChild(suggestionElement); }); } } // Initialize the app new TwitterClone();

Trends for you

Who to follow

Welcome to Twitter Clone

Trends for you

Who to follow