Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added dark mode to the Blog page. #1500

Merged
merged 3 commits into from
Oct 25, 2024
+290 −1
Merged

Added dark mode to the Blog page. #1500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dbb6c30
Update blog.html
Deepika14145 Oct 25, 2024
f704722
Create blog.css
Deepika14145 Oct 25, 2024
3380ebc
Merge branch 'main' into main
Deepika14145 Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions blog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
body {
background-color: white;
color: black;
transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
background-color: #121212;
color: #ffffff;
}

header.dark-mode {
background-color: #1f1f1f;
}

.mode-toggle {
cursor: pointer;
border: none;
background: transparent;
outline: none;
padding: 10px;
}

.mode-toggle img {
width: 24px;
height: 24px;
}

.navbar {
background-color: #f0f0f0;
transition: background-color 0.3s;
}

body.dark-mode .navbar {
background-color: #333;
}

body.dark-mode .navbar a:hover {
color: #4C51BF;
transform: translateY(-2px);
}
250 changes: 249 additions & 1 deletion blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="blog.css" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&display=swap"
rel="stylesheet">
Expand Down Expand Up @@ -638,6 +639,10 @@ <h1 id="logo">BuddyTrail</h1>
<li><a href="contact.html">Contact</a></li>
<li><a href="auth.html">Sign In</a></li>
<li><a href="#" class="active">Blog</a></li>
<button class="mode-toggle" id="modeToggle">
<span class="sun-icon glow"><img src="day-mode.png" alt="Light mode"></span>
<span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
</button>
</ul>
</nav>
</header>
Expand Down Expand Up @@ -819,10 +824,16 @@ <h2>${post.title}</h2>
<div class="tags">${post.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}</div>
<div class="content">
<p>${post.content.substring(0, 150)}...</p>
</div>
<div class="full-content" style="display: none;">
<p>${marked(post.content)}</p>
</div>

</div>
<div class="full-content" style="display: none;">
<p>${marked(post.content)}</p>
</div>

<a href="#" class="read-more" data-id="${post.id}">Read More</a>
<div class="comments-section">
<h3>Comments (${post.comments.length})</h3>
Expand All @@ -841,7 +852,7 @@ <h3>Comments (${post.comments.length})</h3>
</div>
`;
container.appendChild(article);
});
});

addEventListeners();
}
Expand Down Expand Up @@ -1017,6 +1028,182 @@ <h3>Comments (${post.comments.length})</h3>
}
}

=
});

addEventListeners();
}

function addEventListeners() {
// Add event listeners for read more links
document.querySelectorAll('.read-more').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const article = e.target.closest('.blog-post');
const content = article.querySelector('.content');
const fullContent = article.querySelector('.full-content');

if (content.style.display !== 'none') {
content.style.display = 'none';
fullContent.style.display = 'block';
e.target.textContent = 'Read Less';
} else {
content.style.display = 'block';
fullContent.style.display = 'none';
e.target.textContent = 'Read More';
}
});
});

// Add event listeners for comment forms
document.querySelectorAll('.comment-form').forEach(form => {
form.addEventListener('submit', (e) => {
e.preventDefault();
const postId = parseInt(e.target.getAttribute('data-post-id'));
const comment = e.target.querySelector('textarea').value;
addComment(postId, comment);
e.target.reset();
});
});
}

function populateFilters() {
const categoryFilter = document.getElementById('categoryFilter');
const tagFilter = document.getElementById('tagFilter');
const categories = getLocalData('categories');
const tags = getLocalData('tags');

categoryFilter.innerHTML = '<option value="">All Categories</option>';
tagFilter.innerHTML = '<option value="">All Tags</option>';

categories.forEach(category => {
const option = document.createElement('option');
option.value = category;
option.textContent = category;
categoryFilter.appendChild(option);
});

tags.forEach(tag => {
const option = document.createElement('option');
option.value = tag;
option.textContent = tag;
tagFilter.appendChild(option);
});

// Add event listeners for filters
categoryFilter.addEventListener('change', filterPosts);
tagFilter.addEventListener('change', filterPosts);
}

function filterPosts() {
const selectedCategory = document.getElementById('categoryFilter').value;
const selectedTag = document.getElementById('tagFilter').value;
const posts = getLocalData('blogPosts');

const filteredPosts = posts.filter(post => {
const categoryMatch = !selectedCategory || post.category === selectedCategory;
const tagMatch = !selectedTag || post.tags.includes(selectedTag);
return categoryMatch && tagMatch;
});

renderFilteredPosts(filteredPosts);
}

function renderFilteredPosts(filteredPosts) {
const container = document.querySelector('.blog-container');
container.innerHTML = '';

filteredPosts.forEach(post => {
const article = document.createElement('article');
article.className = 'blog-post';
article.innerHTML = `
<h2>${post.title}</h2>
<div class="meta">Posted on ${post.date} by ${post.author}</div>
<div class="category">${post.category}</div>
<div class="tags">${post.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}</div>
<div class="content">
<p>${post.content.substring(0, 150)}...</p>
</div>
<div class="full-content" style="display: none;">
<p>${marked(post.content)}</p>
</div>
<a href="#" class="read-more" data-id="${post.id}">Read More</a>
<div class="comments-section">
<h3>Comments (${post.comments.length})</h3>
<div class="comments">
${post.comments.slice(0, 2).map(comment => `
<div class="comment">
<p>${comment.text}</p>
<small>${comment.date}</small>
</div>
`).join('')}
</div>
<form class="comment-form" data-post-id="${post.id}">
<textarea placeholder="Add a comment"></textarea>
<button type="submit">Post Comment</button>
</form>
</div>
`;
container.appendChild(article);
});

addEventListeners();
}

function viewFullPost(postId) {
const posts = getLocalData('blogPosts');
const post = posts.find(p => p.id === postId);
if (post) {
const modal = document.createElement('div');
modal.className = 'modal';
modal.innerHTML = `
<div class="modal-content">
<span class="close">&times;</span>
<h2>${post.title}</h2>
<div class="meta">Posted on ${post.date} by ${post.author}</div>
<div class="category">${post.category}</div>
<div class="tags">${post.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}</div>
<div class="content">
<p>${marked(post.content)}</p>
</div>
<div class="comments-section">
<h3>Comments (${post.comments.length})</h3>
<div class="comments">
${post.comments.map(comment => `
<div class="comment">
<p>${comment.text}</p>
<small>${comment.date}</small>
</div>
`).join('')}
</div>
<form class="comment-form" data-post-id="${post.id}">
<textarea placeholder="Add a comment"></textarea>
<button type="submit">Post Comment</button>
</form>
</div>
</div>
`;
document.body.appendChild(modal);

// Close modal when clicking on the close button or outside the modal
modal.querySelector('.close').addEventListener('click', () => {
document.body.removeChild(modal);
});
modal.addEventListener('click', (e) => {
if (e.target === modal) {
document.body.removeChild(modal);
}
});

// Add event listener for comment form in modal
modal.querySelector('.comment-form').addEventListener('submit', (e) => {
e.preventDefault();
const comment = e.target.querySelector('textarea').value;
addComment(postId, comment);
e.target.reset();
});
}
}
function addComment(postId, commentText) {
const posts = getLocalData('blogPosts');
const postIndex = posts.findIndex(p => p.id === postId);
Expand Down Expand Up @@ -1049,6 +1236,67 @@ <h3>Comments (${post.comments.length})</h3>
}
</script>


<script>
document.addEventListener("DOMContentLoaded", function () {
const hamburger = document.getElementById("hamburger");
const navList = document.getElementById("nav-links");
const closeBtn = document.getElementById("closeBtn");

hamburger.addEventListener("click", function () {
navList.classList.toggle("active");
});

closeBtn.addEventListener("click", function () {
navList.classList.remove("active");
});
});

document.addEventListener("DOMContentLoaded", function() {
const modeToggle = document.getElementById("modeToggle");
const sunIcon = document.querySelector(".sun-icon");
const moonIcon = document.querySelector(".moon-icon");

// Check saved theme in localStorage and apply it
const currentTheme = localStorage.getItem("theme") || "light";
if (currentTheme === "dark") {
document.body.classList.add("dark-mode");
sunIcon.style.display = "none";
moonIcon.style.display = "inline-block";
} else {
sunIcon.style.display = "inline-block";
moonIcon.style.display = "none";
}

// Toggle between light and dark mode on button click
modeToggle.addEventListener("click", () => {
const isDarkMode = document.body.classList.toggle("dark-mode");

// Apply dark mode styles to relevant sections
const sections = document.querySelectorAll('.about, .core-values, .team');
sections.forEach(section => {
if (isDarkMode) {
section.classList.add('dark-mode');
} else {
section.classList.remove('dark-mode');
}
});

// Update icons and local storage
if (isDarkMode) {
sunIcon.style.display = "none";
moonIcon.style.display = "inline-block";
localStorage.setItem("theme", "dark");
} else {
sunIcon.style.display = "inline-block";
moonIcon.style.display = "none";
localStorage.setItem("theme", "light");
}
});
});
</script>


<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>

</body>
Expand Down
Loading