firstproject

#frontend …login.html… <!DOCTYPE html>

Instagram - Login

Instagram

Don't have an account? Sign up

Have an account? Log in

…index.html… <!DOCTYPE html>

Instagram Clone

Instagram

#backend. …login.js… // DOM elements const loginForm = document.getElementById(‘loginForm’); const signupForm = document.getElementById(‘signupForm’); const switchToSignup = document.getElementById(‘switchToSignup’); const switchToLogin = document.getElementById(‘switchToLogin’); const fbLogin = document.getElementById(‘fbLogin’); const forgotPassword = document.getElementById(‘forgotPassword’);

// Event listeners loginForm.addEventListener(‘submit’, handleLogin); signupForm.addEventListener(‘submit’, handleSignup); switchToSignup.addEventListener(‘click’, (e) => { e.preventDefault(); showSignup(); }); switchToLogin.addEventListener(‘click’, (e) => { e.preventDefault(); showLogin(); }); fbLogin.addEventListener(‘click’, () => alert(‘Facebook login not implemented in this demo.’)); forgotPassword.addEventListener(‘click’, (e) => { e.preventDefault(); alert(‘Forgot password? Feature not implemented.’); });

// Initialize document.addEventListener(‘DOMContentLoaded’, () => { const loggedInUser = localStorage.getItem(‘loggedInUser’); if (loggedInUser) { window.location.href = ‘index.html’; } else { showLogin(); } });

function showLogin() { loginForm.classList.remove(‘hidden’); signupForm.classList.add(‘hidden’); document.getElementById(‘switchToSignup’).style.display = ‘block’; document.getElementById(‘switchToLogin’).style.display = ‘none’; }

function showSignup() { loginForm.classList.add(‘hidden’); signupForm.classList.remove(‘hidden’); document.getElementById(‘switchToSignup’).style.display = ‘none’; document.getElementById(‘switchToLogin’).style.display = ‘block’; }

function handleLogin(e) { e.preventDefault(); const identifier = document.getElementById(‘username’).value; // username or email const password = document.getElementById(‘password’).value;

const users = JSON.parse(localStorage.getItem('users')) || [];
const user = users.find(u => (u.username === identifier || u.email === identifier) && u.password === password);

if (user) {
    localStorage.setItem('loggedInUser', user.username);
    window.location.href = 'index.html';
} else {
    alert('Invalid credentials');
} }

function handleSignup(e) { e.preventDefault(); const fullName = document.getElementById(‘fullName’).value; const username = document.getElementById(‘newUsername’).value; const email = document.getElementById(‘email’).value; const password = document.getElementById(‘newPassword’).value; const confirmPassword = document.getElementById(‘confirmPassword’).value;

if (password !== confirmPassword) {
    alert('Passwords do not match');
    return;
}

if (password.length < 6) {
    alert('Password must be at least 6 characters');
    return;
}

const users = JSON.parse(localStorage.getItem('users')) || [];
if (users.find(u => u.username === username)) {
    alert('Username already exists');
    return;
}
if (users.find(u => u.email === email)) {
    alert('Email already exists');
    return;
}

users.push({ fullName, username, email, password });
localStorage.setItem('users', JSON.stringify(users));
localStorage.setItem('loggedInUser', username);
window.location.href = 'index.html'; }

…script.js… // DOM elements const signoutBtn = document.getElementById(‘signoutBtn’); const profileBtn = document.getElementById(‘profileBtn’); const feedBtn = document.getElementById(‘feedBtn’); const profileSection = document.getElementById(‘profile’); const feedSection = document.getElementById(‘feed’); const profileForm = document.getElementById(‘profileForm’); const profileInfo = document.getElementById(‘profileInfo’); const postForm = document.getElementById(‘postForm’); const postsDiv = document.getElementById(‘posts’);

// Event listeners signoutBtn.addEventListener(‘click’, handleSignout); profileBtn.addEventListener(‘click’, showProfile); feedBtn.addEventListener(‘click’, showFeed); profileForm.addEventListener(‘submit’, handleProfileUpdate); postForm.addEventListener(‘submit’, handlePost); postsDiv.addEventListener(‘click’, handleLike);

// Initialize document.addEventListener(‘DOMContentLoaded’, init);

function init() { const loggedInUser = localStorage.getItem(‘loggedInUser’); if (!loggedInUser) { window.location.href = ‘login.html’; } else { showFeed(); } }

function showProfile() { profileSection.classList.remove(‘hidden’); feedSection.classList.add(‘hidden’); loadProfile(); }

function showFeed() { profileSection.classList.add(‘hidden’); feedSection.classList.remove(‘hidden’); loadPosts(); }

function handleProfileUpdate(e) { e.preventDefault(); const oldUsername = localStorage.getItem(‘loggedInUser’); const newUsername = document.getElementById(‘editUsername’).value; const newFullName = document.getElementById(‘editFullName’).value; const newEmail = document.getElementById(‘editEmail’).value;

const users = JSON.parse(localStorage.getItem('users')) || [];
const userIndex = users.findIndex(u => u.username === oldUsername);
if (userIndex !== -1) {
    if (newUsername !== oldUsername) {
        const existingUsername = users.find(u => u.username === newUsername);
        if (existingUsername) {
            alert('Username already in use');
            return;
        }
        // Update loggedInUser
        localStorage.setItem('loggedInUser', newUsername);
        // Update all posts' username
        const posts = JSON.parse(localStorage.getItem('posts')) || [];
        posts.forEach(post => {
            if (post.username === oldUsername) {
                post.username = newUsername;
            }
            post.comments.forEach(comment => {
                if (comment.username === oldUsername) {
                    comment.username = newUsername;
                }
            });
            post.likes = post.likes.map(like => like === oldUsername ? newUsername : like);
        });
        localStorage.setItem('posts', JSON.stringify(posts));
    }
    const existingEmail = users.find(u => u.email === newEmail && u.username !== newUsername);
    if (existingEmail) {
        alert('Email already in use');
        return;
    }
    users[userIndex].username = newUsername;
    users[userIndex].fullName = newFullName;
    users[userIndex].email = newEmail;
    localStorage.setItem('users', JSON.stringify(users));
    loadProfile();
    alert('Profile updated');
} }

function handleSignout() { localStorage.removeItem(‘loggedInUser’); window.location.href = ‘login.html’; }

function handlePost(e) { e.preventDefault(); const content = document.getElementById(‘postContent’).value; const username = localStorage.getItem(‘loggedInUser’); const timestamp = new Date().toLocaleString();

const posts = JSON.parse(localStorage.getItem('posts')) || [];
posts.unshift({ id: Date.now(), username, content, timestamp, likes: [], comments: [] });
localStorage.setItem('posts', JSON.stringify(posts));

document.getElementById('postContent').value = '';
loadPosts(); }

function handleLike(e) { const postDiv = e.target.closest(‘.post’); const index = parseInt(postDiv.dataset.index); const username = localStorage.getItem(‘loggedInUser’); const posts = JSON.parse(localStorage.getItem(‘posts’)) || []; const post = posts[index];

if (e.target.classList.contains('like-btn')) {
    if (post.likes.includes(username)) {
        post.likes = post.likes.filter(u => u !== username);
    } else {
        post.likes.push(username);
    }
} else if (e.target.classList.contains('share-btn')) {
    alert('Post shared!');
    return;
} else if (e.target.type === 'submit' && e.target.closest('.comment-form')) {
    e.preventDefault();
    const input = postDiv.querySelector('.comment-input');
    const text = input.value.trim();
    if (text) {
        post.comments.push({ username, text });
        input.value = '';
    }
} else {
    return;
}

localStorage.setItem('posts', JSON.stringify(posts));
loadPosts(); }

firstproject

Instagram

Login

Sign Up

Instagram

Your Profile