Add comment section

backend/package.json

@@ -12,6 +12,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "backend": "file:",
     "bcryptjs": "^2.4.3",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",

comment.css

@@ -0,0 +1,145 @@
+*{
+    box-sizing:border-box ;
+}
+/* body{
+    display: block;
+    margin: 0;
+    padding: 0;
+    font-family:  "Montserrat", sans-serif;
+    font-size: 16px;
+    background-color:rgb(230 224 216);
+    margin-top: 20px;
+} */
+.flex{
+    display:flex ;
+    justify-content: space-between;
+    width: 100%;
+}
+img{
+    width: 100%;
+    height: 100%;
+}
+    .comment-box, .comment-list{
+        background: #fff;
+        border-radius: 4px;
+        box-shadow: 0 8px 8px #0002;
+        position: relative; 
+        animation: float 4s ease-in-out infinite;
+
+    }
+    .comment-box, .comment-list:hover{
+        box-sizing: inherit;
+    }
+    .comment-session{
+        width: 650px;
+        height: auto;
+        margin: 0 auto;
+    }
+    .comment-list{
+        width: 100%;
+        margin-bottom: 12px;
+    }
+
+    .comment-list .user{
+        display:flex ;
+        padding: 8px;
+        overflow: hidden;
+    }
+    .comment-list .user img{
+        height: 38px;
+        width: 38px;
+        border-radius: 50%;
+        margin-right: 10px;
+    }
+    .comment-list .name{
+        text-transform: uppercase;
+        font-weight: 600;
+    }
+   .comment-list .day{
+    font-size: 12px;
+   } 
+   .reply{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: center;
+    padding:10px ;
+    gap:10px;
+   }
+
+   .icons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    color:#777;
+    gap: 5px;
+
+   }
+   /* .icon:hover{
+    color: #009cff;
+    cursor: pointer;
+   } */
+   body.dark-mode { --background-color: #121212; --text-color: #ffffff; --comment-bg-color: #1e1e1e; --border-color: #333; --box-shadow-color: rgba(255, 255, 255, 0.1); --icon-color: #bbbbbb; --icon-hover-color: #ffffff; --link-color: #82b1ff; --button-bg-color: #1e88e5; --button-hover-bg-color: #1565c0; --text-area-bg-color: #2e2e2e; --text-area-border-color: #555; }
+   .icons.like:hover, .icons.like.active {
+     color: #1e90ff; 
+     cursor: pointer;
+ }
+   .icons.dislike:hover, .icons.dislike.active { 
+    color: #ff6347;
+    cursor: pointer;
+ }
+   .post-comment .comment{
+    padding: 0 0 15px 58px;
+   }
+.comment-box{
+    padding: 10px;
+    overflow: hidden;
+
+}
+.comment-box .user{
+       display: flex;
+       width: min-content;
+}
+.comment-box .image img{
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+    border-radius: 50%;
+}
+.comment-box textarea{
+    background: #eee;
+    width:-webkit-fill-available;
+    height: 152px;
+    margin: 10px 0;
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    box-shadow: 0 0 0 0.5px #0003;
+}
+.comment-box textarea:focus{
+    outline-color: #009cff;
+
+}
+.comment-box .comment-submit{
+    float:right ;
+    padding: 6px 14px;
+    border: none;
+    background: #009cff;
+    color:#fff;
+    cursor: pointer;
+    border-radius: 2px;
+
+}
+.comment-box .comment-submit:hover{
+    background-color: #027ecc;
+}
+.re-comment:hover { 
+    text-decoration: underline;
+ } 
+@keyframes float {
+     0%, 100% { 
+        transform: translateY(0); 
+    } 50% { 
+        transform: translateY(-10px);
+     } }

comment.js

@@ -0,0 +1,23 @@
+let likeCount = 420;
+
+function toggleLike(element) {
+    if (element.classList.contains('active')) {
+        element.classList.remove('active');
+        likeCount--;
+    } else {
+        element.classList.add('active');
+        likeCount++;
+    }
+    element.querySelector('.count').innerText = likeCount;
+}
+
+    element.classList.toggle('active');
+
+
+document.querySelector('.like').addEventListener('click', function() {
+    toggleLike(this);
+});
+
+document.querySelector('.dislike').addEventListener('click', function() {
+    toggleDislike(this);
+});