Skip to content

Commit

Permalink
Merge pull request #1652 from AsifQamar/fixblog
Browse files Browse the repository at this point in the history 
Updated whole Blog page
@samarth-6
samarth-6 authored Oct 27, 2024
2 parents b8487ae + 5801846 commit 1142ee9
Showing 1 changed file with 618 additions and 514 deletions.
1,132 changes: 618 additions & 514 deletions blog.html
View file
Original file line number Diff line number Diff line change
@@ -12,496 +12,381 @@
<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">
<link rel="stylesheet" href="RatingStyle.css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="./styles/popup.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link
href="https://fonts.googleapis.com/css2?family=Pattaya&family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<link rel="icon" href="/icons/airplane.svg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="chatbot.css" />
<style>
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--background-color: #f4f4f4;
--text-color: #333;
--card-bg: #ffffff;
--header-bg: #1a1a2e;
--header-text: #ffffff;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
background-color: var(--background-color);
color: var(--text-color);
line-height: 1.6;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
margin-bottom: 85px;
}

header {
background-color: var(--header-bg);
color: var(--header-text);
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
transition: background-color 0.3s ease;
}

header.scrolled {
background-color: rgba(26, 26, 46, 0.9);
backdrop-filter: blur(10px);
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}

.logo {
display: flex;
align-items: center;
}

.logo img {
height: 40px;
margin-right: 10px;
}

#logo {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 700;
color: var(--header-text);
}

#nav-list {
display: flex;
list-style-type: none;
}

#nav-list li {
margin-left: 2rem;
}

#nav-list a {
color: var(--header-text);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}

#nav-list a:hover,
#nav-list a.active {
color: var(--secondary-color);
}

.hamburger {
display: none;
background: none;
border: none;
font-size: 1.5rem;
color: var(--header-text);
cursor: pointer;
}

main {
margin-top: 80px;
padding: 2rem 0;
}

.hero {
text-align: center;
padding: 4rem 0;
background: linear-gradient(135deg, #3498db, #2ecc71);
color: white;
margin-bottom: 2rem;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
min-height: auto;
}

.hero h2 {

font-size: 2.5rem;
margin-bottom: 1rem;
color: white;
-webkit-text-stroke: 0px;
}

.hero p {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
animation: fadeInUp 1s ease-out 0.3s;
opacity: 0;
animation-fill-mode: forwards;
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

.cms-controls {
display: flex;
justify-content: center;
margin-bottom: 2rem;
}

.cms-controls button {
background-color: var(--secondary-color);
color: white;
border: none;
padding: 0.7rem 1.5rem;
margin: 0 0.5rem;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cms-controls button:hover {
background-color: #27ae60;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.blog-filters {
display: flex;
justify-content: center;
margin-bottom: 2rem;
}

.blog-filters select {
padding: 0.7rem;
margin: 0 0.5rem;
border: 1px solid #ddd;
border-radius: 25px;
background-color: white;
font-family: 'Poppins', sans-serif;
font-size: 0.9rem;
transition: all 0.3s ease;
cursor: pointer;
}

.blog-filters select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.blog-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}

.blog-post {
background-color: var(--card-bg);
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}

.blog-post:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.blog-post h2 {
color: var(--primary-color);
margin-bottom: 1rem;
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
}

.meta {
font-size: 0.9rem;
color: #777;
margin-bottom: 1rem;
}

.category {
display: inline-block;
background-color: var(--primary-color);
color: white;
padding: 0.2rem 0.8rem;
border-radius: 15px;
font-size: 0.8rem;
margin-bottom: 0.5rem;
}

.tags {
margin-bottom: 1rem;
}

.tag {
display: inline-block;
background-color: #e0e0e0;
color: #333;
padding: 0.2rem 0.5rem;
border-radius: 15px;
font-size: 0.8rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
transition: background-color 0.3s ease;
}

.tag:hover {
background-color: #d0d0d0;
}

.content {
margin-bottom: 1rem;
}

.read-more {
display: inline-block;
margin-top: auto;
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}

.read-more:hover {
color: #2980b9;
}

.comments-section {
margin-top: 1.5rem;
border-top: 1px solid #eee;
padding-top: 1rem;
}

.comment {
background-color: #f9f9f9;
border-radius: 5px;
padding: 1rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
}

.comment:hover {
background-color: #f0f0f0;
}

.comment-form textarea {
width: 100%;
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: 5px;
resize: vertical;
font-family: 'Poppins', sans-serif;
transition: all 0.3s ease;
}

.comment-form textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.comment-form button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 0.7rem 1.5rem;
border-radius: 25px;
cursor: pointer;
margin-top: 0.5rem;
transition: all 0.3s ease;
font-weight: 500;
}

.comment-form button:hover {
background-color: #2980b9;
transform: translateY(-2px);
}



/* New styles for modals */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
animation: fadeIn 0.3s;
}
.logo {
display: flex;
align-items: center;
gap: 15px;
}

.logo img {
height: 45px;
transition: transform 0.3s ease;
}

.logo:hover img {
transform: scale(1.05);
}

#logo {
font-family: 'Inter', sans-serif;
font-size: 2rem;
font-weight: 800;
color: var(--header-text);
letter-spacing: -1px;
position: relative;
}

@keyframes fadeIn {
from {
opacity: 0;
}
/* Enhanced Navigation */
#nav-list {
display: flex;
list-style-type: none;
gap: 3rem;
align-items: center;
}

to {
opacity: 1;
}
}
#nav-list a {
color: var(--header-text);
text-decoration: none;
font-weight: 500;
font-size: 1.1rem;
position: relative;
padding: 0.5rem 0;
}

.modal-content {
background-color: var(--card-bg);
margin: 10% auto;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
width: 80%;
max-width: 600px;
animation: slideIn 0.3s;
}
#nav-list a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: var(--header-text);
transition: all 0.3s ease;
transform: translateX(-50%);
}

#nav-list a:hover::after {
width: 100%;
}

@keyframes slideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
/* Enhanced Hero Section */
.hero {
text-align: center;
padding: 6rem 2rem;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: white;
margin: 2rem auto;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
max-width: 1200px;
position: relative;
overflow: hidden;
}

to {
transform: translateY(0);
opacity: 1;
}
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
pointer-events: none;
}

.hero h2 {
font-size: 3rem;
margin-bottom: 1.5rem;
font-weight: 800;
letter-spacing: -1px;
}

.hero p {
font-size: 1.25rem;
max-width: 700px;
margin: 0 auto;
opacity: 0.9;
}

/* Enhanced Blog Container */
.blog-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2.5rem;
padding: 2rem;
max-width: 1400px;
margin: 0 auto;
}

.blog-post {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 15px;
padding: 2rem;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.blog-post:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.blog-post h2 {
color: var(--primary-color);
margin-bottom: 1.5rem;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.3;
}

/* Enhanced Categories and Tags */
.category {
display: inline-block;
background-color: var(--primary-color);
color: var(--header-text);
padding: 0.6rem 1.2rem;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 1rem;
transform: translateY(0);
transition: all 0.3s ease;
}

.category:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin: 1rem 0;
}

.tag {
background-color: var(--hover-bg);
color: var(--text-color);
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: 0.85rem;
transition: all 0.3s ease;
}

.tag:hover {
background-color: var(--secondary-color);
color: var(--header-text);
transform: translateY(-2px);
}

/* Enhanced Buttons */
.cms-controls {
display: flex;
gap: 1rem;
justify-content: center;
margin: 2rem 0;
}

button {
background-color: var(--primary-color);
color: var(--header-text);
border: none;
padding: 0.8rem 1.8rem;
border-radius: 30px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
overflow: hidden;
}

.modal-content h2 {
color: var(--primary-color);
margin-bottom: 1.5rem;
font-family: 'Playfair Display', serif;
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
transition: color 0.3s ease;
}
button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}

button:hover::after {
width: 300%;
height: 300%;
}

/* Enhanced Footer */
footer {
background-color: var(--header-bg);
color: var(--header-text);
padding: 5rem 0 3rem;
margin-top: 6rem;
text-align: center;
}

.footer-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 4rem;
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}

.footer-column {
display: flex;
flex-direction: column;
align-items: center;
}

.close:hover,
.close:focus {
color: var(--primary-color);
text-decoration: none;
}
.footer-column h3 {
font-size: 1.4rem;
margin-bottom: 2rem;
position: relative;
padding-bottom: 1rem;
font-weight: 600;
}

/* Form styles */
.modal-form input[type="text"],
.modal-form textarea {
width: 100%;
padding: 0.7rem;
margin-bottom: 1rem;
border: 1px solid #ddd;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
transition: border-color 0.3s ease;
}
.footer-column h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background-color: var(--header-text);
}

.footer-column a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
padding: 0.5rem;
transition: all 0.3s ease;
font-size: 1.1rem;
}

.footer-column a:hover {
color: var(--header-text);
transform: translateX(5px);
}

.social-icons {
display: flex;
gap: 2rem;
margin-top: 2rem;
justify-content: center;
}

.social-icons a {
color: var(--header-text);
font-size: 1.8rem;
transition: all 0.3s ease;
}

.social-icons a:hover {
transform: translateY(-5px);
color: var(--header-text);
}

/* Enhanced Modal */
.modal-content {
background-color: var(--card-bg);
padding: 3rem;
border-radius: 20px;
max-width: 700px;
margin: 5% auto;
text-align: center;
}

.modal-form input,
.modal-form textarea {
width: 100%;
padding: 1rem;
margin-bottom: 1.5rem;
border: 2px solid var(--border-color);
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
}

.modal-form input:focus,
.modal-form textarea:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
outline: none;
}

/* Responsive Design */
@media (max-width: 768px) {
.container {
padding: 0 20px;
}

.modal-form input[type="text"]:focus,
.modal-form textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
nav {
padding: 0 1.5rem;
}

.modal-form button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 0.7rem 1.5rem;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.hero {
padding: 4rem 1.5rem;
}

.modal-form button:hover {
background-color: #2980b9;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.hero h2 {
font-size: 2.5rem;
}

/* List styles for categories and tags */
.item-list {
list-style-type: none;
padding: 0;
margin-bottom: 1.5rem;
}
.blog-container {
grid-template-columns: 1fr;
padding: 1.5rem;
}

.item-list li {
background-color: #f9f9f9;
border-radius: 5px;
padding: 0.7rem 1rem;
margin-bottom: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s ease;
}
.footer-container {
grid-template-columns: 1fr;
gap: 3rem;
}

.item-list li:hover {
background-color: #f0f0f0;
}
#nav-list {
background-color: var(--header-bg);
position: absolute;
top: 100%;
left: 0;
width: 100%;
flex-direction: column;
padding: 1rem 0;
gap: 1rem;
display: none;
}

.delete-btn {
background-color: #e74c3c;
color: white;
border: none;
padding: 0.3rem 0.7rem;
border-radius: 15px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.8rem;
}
#nav-list.show {
display: flex;
}

.delete-btn:hover {
background-color: #c0392b;
transform: translateY(-1px);
}
.hamburger {
display: block;
font-size: 1.8rem;
color: var(--header-text);
background: none;
border: none;
cursor: pointer;
}
}
</style>
</head>

@@ -586,6 +471,209 @@
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Blog Card Styles */
.blog-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 2rem;
}

.blog-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}

.blog-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Image Container */
.image-container {
position: relative;
height: 240px;
overflow: hidden;
}

.post-image {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
transition: transform 0.5s ease, filter 0.5s ease;
}

.blog-card:hover .post-image {
transform: scale(1.1);
filter: grayscale(0%);
}

.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
transition: opacity 0.3s ease;
}

.blog-card:hover .image-overlay {
opacity: 0;
}

/* Category Badge */
.category-badge {
position: absolute;
top: 1rem;
left: 1rem;
background: rgba(255, 255, 255, 0.9);
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.875rem;
color: #333;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Post Content */
.post-content {
padding: 1.5rem;
}

.post-meta {
display: flex;
gap: 1rem;
font-size: 0.875rem;
color: #666;
margin-bottom: 1rem;
}

.post-meta i {
margin-right: 0.5rem;
}

.post-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1rem;
color: #333;
transition: color 0.3s ease;
}

.blog-card:hover .post-title {
color: #2563eb;
}

.post-excerpt {
color: #666;
margin-bottom: 1rem;
line-height: 1.6;
}

/* Tags */
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}

.tag {
background: #f3f4f6;
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.875rem;
color: #666;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}

.tag:hover {
background: #e5e7eb;
}

/* Read More Button */
.read-more-btn {
display: flex;
align-items: center;
gap: 0.5rem;
color: #2563eb;
font-weight: 600;
font-size: 0.875rem;
transition: gap 0.3s ease;
background: none;
border: none;
padding: 0;
cursor: pointer;
}

.read-more-btn i {
transition: transform 0.3s ease;
}

.read-more-btn:hover i {
transform: translateX(4px);
}

/* Comments Section */
.comments-section {
padding: 1.5rem;
border-top: 1px solid #e5e7eb;
}

.comment {
background: #f9fafb;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
}

.comment-form {
margin-top: 1rem;
}

.comment-form textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 1rem;
resize: vertical;
}

.comment-form button {
background: #2563eb;
color: white;
padding: 0.5rem 1rem;
border-radius: 6px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}

.comment-form button:hover {
background: #1d4ed8;
}

/* Responsive Design */
@media (max-width: 768px) {
.blog-container {
grid-template-columns: 1fr;
}

.post-meta {
flex-direction: column;
gap: 0.5rem;
}
}
</style>
<script>
// Function to hide preloader and show content once the page has fully loaded
@@ -860,54 +948,70 @@ <h3>Subscribe to Our Newsletter</h3>
function setLocalData(key, data) {
localStorage.setItem(key, JSON.stringify(data));
}

function renderPosts() {
const container = document.querySelector('.blog-container');
container.innerHTML = '';
const posts = getLocalData('blogPosts');

posts.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>
</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('')}
const container = document.querySelector('.blog-container');
container.innerHTML = '';
const posts = getLocalData('blogPosts');

posts.forEach(post => {
const article = document.createElement('article');
article.className = 'blog-post';
article.innerHTML = `
<div class="blog-card">
<div class="image-container">
<img src="https://source.unsplash.com/800x600/?${post.category.toLowerCase()}" alt="${post.title}" class="post-image">
<div class="image-overlay"></div>
<span class="category-badge">${post.category}</span>
</div>
<div class="post-content">
<div class="post-meta">
<span class="date"><i class="far fa-calendar"></i> ${post.date}</span>
<span class="author"><i class="far fa-user"></i> ${post.author}</span>
<span class="comments"><i class="far fa-comment"></i> ${post.comments.length} comments</span>
</div>
<h2 class="post-title">${post.title}</h2>
<div class="post-excerpt">
<p>${post.content.substring(0, 150)}...</p>
</div>
<div class="tags-container">
${post.tags.map(tag => `
<span class="tag">
<i class="fas fa-tag"></i> ${tag}
</span>
`).join('')}
</div>
<div class="post-footer">
<button class="read-more-btn" data-id="${post.id}">
Read More
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
<div class="full-content" style="display: none;">
<p>${marked(post.content)}</p>
</div>
<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>
<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);
});
container.appendChild(article);
});

addEventListeners();
}
addEventListeners();
}

function addEventListeners() {
// Add event listeners for read more links

0 comments on commit 1142ee9

Please sign in to comment.