14 content: `<p>Web development is constantly evolving, and staying up-to-date with the latest practices is essential for creating modern, efficient websites. Here are 10 tips that every web developer should know:</p>
15 <h2>1. Embrace Modern JavaScript</h2>
16 <p>ES6+ features like arrow functions, destructuring, and async/await make your code cleaner and more maintainable. Don't be afraid to use them!</p>
17 <h2>2. Optimize for Performance</h2>
18 <p>Performance is crucial for user experience. Use tools like Lighthouse to identify and fix performance issues.</p>
40 name: "John Doe",
41 avatar: "https://randomuser.me/api/portraits/men/32.jpg",
42 bio: "Full-stack developer with a passion for creating beautiful, functional websites."
43 },
44 date: "2023-05-15",
235 name: "John Doe",
236 avatar: "https://randomuser.me/api/portraits/men/32.jpg",
237 bio: "Full-stack developer with a passion for creating beautiful, functional websites.",
238 email: "john.doe@example.com",
239 website: "https://johndoe.com",
304
305// Save data to localStorage
306function saveData() {
307 localStorage.setItem('blogPosts', JSON.stringify(blogPosts));
308 localStorage.setItem('users', JSON.stringify(users));
323}
324
325// Function to format date
326function formatDate(dateString) {
327 const options = { year: 'numeric', month: 'long', day: 'numeric' };
328 return new Date(dateString).toLocaleDateString(undefined, options);
329}
330
331// Function to create post card HTML
332function createPostCard(post) {
333 return `
334 <div class="post-card">
356}
357
358// Function to create author card HTML
359function createAuthorCard(user) {
360 return `
361 <div class="author-card">
378}
379
380// Function to create comment HTML
381function createCommentHTML(comment) {
382 return `
383 <div class="comment" data-id="${comment.id}">
404}
405
406// Home page functionality
407const featuredPostsContainer = document.getElementById('featuredPosts');
408const trendingAuthorsContainer = document.getElementById('trendingAuthors');
432}
433
434// Explore page functionality
435const allPostsContainer = document.getElementById('allPosts');
436const categoryFilter = document.getElementById('categoryFilter');
447let filteredPosts = [...blogPosts];
448
449// Function to filter and display posts
450function filterAndDisplayPosts() {
451 // Apply category filter
452 if (categoryFilter && categoryFilter.value !== 'all') {
491}
492
493// Function to update pagination
494function updatePagination() {
495 if (!pageNumbers) return;
496
528}
529
530// Function to display posts for current page
531function displayPostsForCurrentPage() {
532 if (!allPostsContainer) return;
533
618}
619
620// Create post page functionality
621const blogForm = document.getElementById('blogForm');
622const postTitleInput = document.getElementById('postTitle');
642}
643
644// Rich text editor functionality
645if (editorButtons && postContentEditor) {
646 editorButtons.forEach(button => {
710}
711
712// Save draft functionality
713if (saveDraftBtn) {
714 saveDraftBtn.addEventListener('click', () => {
741}
742
743// Individual blog post page functionality
744const blogPostContainer = document.getElementById('blogPost');
745const likeBtn = document.getElementById('likeBtn');
766const postId = urlParams.get('id');
767
768// Function to display blog post
769function displayBlogPost() {
770 if (!blogPostContainer || !postId) return;
771
814 }
815
816 // Add like functionality
817 likeBtn.addEventListener('click', () => {
818 if (likeBtn.classList.contains('active')) {
854 }
855
856 // Add bookmark functionality
857 bookmarkBtn.addEventListener('click', () => {
858 if (bookmarkBtn.classList.contains('active')) {
882 authorAvatar.src = post.author.avatar;
883
884 // Add follow functionality
885 if (followBtn) {
886 // Find author in users array
925 });
926
927 // Add like functionality to comments
928 const likeCommentBtns = document.querySelectorAll('.like-comment');
929 likeCommentBtns.forEach(btn => {
944 }
945
946 // Add comment functionality
947 if (commentInput && submitComment) {
948 submitComment.addEventListener('click', () => {
988 saveData();
989
990 // Add like functionality to new comment
991 const likeCommentBtn = document.querySelector(`.like-comment[data-id="${newComment.id}"]`);
992 if (likeCommentBtn) {
1024 }
1025
1026 // Share functionality
1027 if (shareBtn && shareModal) {
1028 shareBtn.addEventListener('click', () => {
1067displayBlogPost();
1068
1069// Profile page functionality
1070const profileName = document.getElementById('profileName');
1071const profileBio = document.getElementById('profileBio');
1085const tabContents = document.querySelectorAll('.tab-content');
1086
1087// Function to display user profile
1088function displayUserProfile() {
1089 if (!profileName || !profileBio || !profileAvatar) return;
1090
1205displayUserProfile();
1206
1207// Tab functionality
1208if (profileTabs && tabContents) {
1209 profileTabs.forEach(tab => {
1225}
1226
1227// Edit profile functionality
1228if (editProfileBtn && editProfileModal) {
1229 editProfileBtn.addEventListener('click', () => {
1295}
1296
1297// Bookmarks page functionality
1298const bookmarkedPosts = document.getElementById('bookmarkedPosts');
1299const noBookmarks = document.getElementById('noBookmarks');
1302const filterDropdownLinks = document.querySelectorAll('.filter-dropdown-content a');
1303
1304// Function to display bookmarked posts
1305function displayBookmarkedPosts(filter = 'all', searchTerm = '') {
1306 if (!bookmarkedPosts) return;
1307
1351displayBookmarkedPosts();
1352
1353// Add search functionality
1354if (searchBookmarks && searchBookmarksBtn) {
1355 searchBookmarksBtn.addEventListener('click', () => {
1367}
1368
1369// Add filter functionality
1370if (filterDropdownLinks) {
1371 filterDropdownLinks.forEach(link => {