1+ // DOM Elements
2+ const profileBanner = document . getElementById ( 'profile-banner' ) ;
3+ const updateBannerBtn = document . getElementById ( 'update-banner' ) ;
4+ const postForm = document . querySelector ( '.post-form textarea' ) ;
5+ const postButton = document . querySelector ( '.btn-post' ) ;
6+ const photoButton = document . querySelector ( '.btn-photo' ) ;
7+ const postsContainer = document . querySelector ( '.posts' ) ;
8+ const logoutBtn = document . getElementById ( 'logout-btn' ) ;
9+
10+ // Update banner functionality
11+ updateBannerBtn . addEventListener ( 'click' , ( ) => {
12+ const newBannerUrl = prompt ( 'Enter the URL for the new banner image:' ) ;
13+ if ( newBannerUrl ) {
14+ profileBanner . src = newBannerUrl ;
15+ }
16+ } ) ;
17+
18+ // Post creation functionality
19+ postButton . addEventListener ( 'click' , createPost ) ;
20+
21+ function createPost ( ) {
22+ const postContent = postForm . value . trim ( ) ;
23+ if ( postContent ) {
24+ const newPost = document . createElement ( 'article' ) ;
25+ newPost . classList . add ( 'post' ) ;
26+ newPost . innerHTML = `
27+ <header class="post-header">
28+ <img src="https://i.pinimg.com/236x/41/7b/67/417b67c2c946c28e2cca22d777b84df8.jpg" alt="Muskan Ai" class="post-avatar">
29+ <div>
30+ <h3>Muskan Ai</h3>
31+ <time>Just now</time>
32+ </div>
33+ </header>
34+ <p>${ postContent }
35+ <div class="post-actions">
36+ <button><i class="fas fa-thumbs-up"></i> Like</button>
37+ <button><i class="fas fa-comment"></i> Comment</button>
38+ <button><i class="fas fa-share"></i> Share</button>
39+ </div>
40+ ` ;
41+ postsContainer . prepend ( newPost ) ;
42+ postForm . value = '' ;
43+ }
44+ }
45+
46+ // Photo upload functionality (simulated)
47+ photoButton . addEventListener ( 'click' , ( ) => {
48+ alert ( 'Photo upload functionality would be implemented here. This would typically involve opening a file dialog and handling the selected image.' ) ;
49+ } ) ;
50+
51+ // Like, Comment, Share functionality (simulated)
52+ postsContainer . addEventListener ( 'click' , ( e ) => {
53+ if ( e . target . closest ( 'button' ) ) {
54+ const action = e . target . closest ( 'button' ) . textContent . trim ( ) ;
55+ alert ( `${ action } ) ;
56+ }
57+ } ) ;
58+
59+ // Follow and Contact button functionality (simulated)
60+ document . querySelectorAll ( '.profile-actions button' ) . forEach ( button => {
61+ button . addEventListener ( 'click' , ( ) => {
62+ alert ( `${ button . textContent } ) ;
63+ } ) ;
64+ } ) ;
65+
66+ // Navigation functionality
67+ document . querySelectorAll ( '.profile-nav a' ) . forEach ( link => {
68+ link . addEventListener ( 'click' , ( e ) => {
69+ e . preventDefault ( ) ;
70+ document . querySelectorAll ( '.profile-nav a' ) . forEach ( a => a . classList . remove ( 'active' ) ) ;
71+ link . classList . add ( 'active' ) ;
72+ alert ( `Navigating to ${ link . textContent } ) ;
73+ } ) ;
74+ } ) ;
75+
76+ // People You May Know - Connect button functionality
77+ document . querySelectorAll ( '.people-you-may-know .btn-connect' ) . forEach ( button => {
78+ button . addEventListener ( 'click' , ( ) => {
79+ const personName = button . closest ( 'li' ) . querySelector ( 'h4' ) . textContent ;
80+ alert ( `Connection request sent to ${ personName } ) ;
81+ } ) ;
82+ } ) ;
83+
84+ // Logout functionality (simulated)
85+ logoutBtn . addEventListener ( 'click' , ( e ) => {
86+ e . preventDefault ( ) ;
87+ if ( confirm ( 'Are you sure you want to log out?' ) ) {
88+ alert ( 'Logout successful. Redirecting to login page...' ) ;
89+ // In a real application, you would redirect to the login page or perform actual logout logic here
90+ }
91+ } ) ;
92+
93+ // Initialize any necessary data or state
94+ function initializeProfile ( ) {
95+ // Fetch and display user data, posts, etc.
96+ console . log ( 'Initializing profile data...' ) ;
97+ // This would typically involve API calls to get user data, recent posts, etc.
98+ }
99+
100+ // Call initialization function when the page loads
101+ window . addEventListener ( 'load' , initializeProfile ) ;
0 commit comments