details page done

Aditya-0712 · Jul 21, 2023 · eda9d0f · eda9d0f
1 parent f564024
commit eda9d0f
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 4 deletions.
diff --git a/public/css/details.css b/public/css/details.css
@@ -0,0 +1,110 @@
+*{-webkit-tap-highlight-color: transparent; display:flex; text-decoration: none;}
+
+title{display: none;}
+
+body
+{
+    flex-direction: column;
+    margin: 0;
+    width: 100%;
+    font-size: 0;
+}
+
+.back
+{
+    margin:10px auto 0px 15px;
+}
+
+.back svg 
+{
+    width: 35px;
+    height: auto;
+    fill:blueviolet;
+}
+
+.post
+{
+    margin:20px auto 0px auto;
+    border-radius: 20px;
+    padding: 10px;
+    border:1px solid rgba(0, 0, 0, 0.3);
+    width:300px;
+    max-width: 300px;
+    flex-direction: column;
+}
+
+.ptop 
+{
+    width:100%;
+    margin:0;
+}
+
+.ptop svg 
+{
+    width:30px;
+    height: auto;
+    margin:10px 0px auto 10px;
+}
+
+.ptop div 
+{
+    flex-direction: column;
+}
+
+.user
+{
+    font:23px helvetica-med;
+    color:black;
+    margin:0px auto 0px 20px;
+}
+
+.blog_title
+{
+    font:21px helvetica-med;
+    color:#3a3a3a;
+    margin:10px auto 0px 20px;
+}
+
+.content
+{
+    font:17px helvetica-reg;
+    color:black;
+    margin:20px auto 0px auto;
+    max-width: 290px;
+    height: auto;
+    word-wrap: break-word;
+}
+
+.likes
+{
+    margin:10px auto 0px 10px;
+}
+
+.likes svg 
+{
+    width:20px;
+    height: auto;
+    cursor: pointer;
+    margin:auto 10px auto 0px;
+}
+
+.likes p 
+{
+    font:16px helvetica-reg;
+    color:#3a3a3a;
+    margin:auto 0px auto 0px;
+}
+
+@media screen and (min-width:800px) 
+{
+    .post
+    {
+        width:800px;
+        max-width: 800px;
+    }
+
+    .content
+    {
+        max-width: 780px;
+    }
+}
diff --git a/routes/slash-details.js b/routes/slash-details.js
@@ -0,0 +1,24 @@
+const exp = require('express');
+const newBlog = require('../models/blog');
+const route = exp.Router();
+
+route.get('/details/:key', (req,res) => {
+    const findID = req.params.key;
+    const allBlogs = newBlog.getAllBLogs();
+
+    let i=0;
+
+    for(i; i<allBlogs.length; i++)
+    {
+        if (findID == allBlogs[i].ID)
+        {
+            break;
+        }
+    }
+
+    const data = {u:allBlogs[i].USER, t:allBlogs[i].TITLE, c:allBlogs[i].CONTENT};
+
+    res.render('details', data);
+})
+
+module.exports = route;
diff --git a/server.js b/server.js
@@ -10,6 +10,7 @@ const homeRoute = require('./routes/slash-home');
 const postRoute = require('./routes/slash-post');
 const accRoute = require('./routes/slash-account');
 const blogRoute = require('./routes/slash-myblogs');
+const detailsRoute = require('./routes/slash-details');
 
 app.set('view engine', 'ejs');
 
@@ -23,6 +24,7 @@ app.use(homeRoute);
 app.use(postRoute);
 app.use(accRoute);
 app.use(blogRoute);
+app.use(detailsRoute);
 
 app.use((req,res) => {
     res.send('<h1>Page not found error 404</h1>');

diff --git a/views/details.ejs b/views/details.ejs
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>BlogBase</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="../css/fonts.css">
+        <link rel="stylesheet" href="../css/details.css">
+    </head>
+    <body>
+        <a href="/home" class="back">
+            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
+                <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288 480 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-370.7 0 73.4-73.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-128 128z"/>
+            </svg>
+        </a>
+
+        <div class="post">
+            <div class="ptop">
+                <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
+                    <path d="M406.5 399.6C387.4 352.9 341.5 320 288 320H224c-53.5 0-99.4 32.9-118.5 79.6C69.9 362.2 48 311.7 48 256C48 141.1 141.1 48 256 48s208 93.1 208 208c0 55.7-21.9 106.2-57.5 143.6zm-40.1 32.7C334.4 452.4 296.6 464 256 464s-78.4-11.6-110.5-31.7c7.3-36.7 39.7-64.3 78.5-64.3h64c38.8 0 71.2 27.6 78.5 64.3zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-272a40 40 0 1 1 0-80 40 40 0 1 1 0 80zm-88-40a88 88 0 1 0 176 0 88 88 0 1 0 -176 0z"/>
+                </svg>
+                <div>
+                    <p class="user"><%= u %></p>
+                    <p class="blog_title"><%= t %></p>
+                </div>
+            </div>
+            <p class="content"><%= c %></p>
+
+            <div class="likes">
+                <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
+                    <path d="M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.1s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z"/>
+                </svg>
+                <p>0</p>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/views/details.html b/views/details.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>BlogBase</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="../css/fonts.css">
+        <link rel="stylesheet" href="../css/details.css">
+    </head>
+    <body>
+        <a href="/home" class="back">
+            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
+                <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288 480 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-370.7 0 73.4-73.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-128 128z"/>
+            </svg>
+        </a>
+
+        <div class="post">
+            <div class="ptop">
+                <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
+                    <path d="M406.5 399.6C387.4 352.9 341.5 320 288 320H224c-53.5 0-99.4 32.9-118.5 79.6C69.9 362.2 48 311.7 48 256C48 141.1 141.1 48 256 48s208 93.1 208 208c0 55.7-21.9 106.2-57.5 143.6zm-40.1 32.7C334.4 452.4 296.6 464 256 464s-78.4-11.6-110.5-31.7c7.3-36.7 39.7-64.3 78.5-64.3h64c38.8 0 71.2 27.6 78.5 64.3zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-272a40 40 0 1 1 0-80 40 40 0 1 1 0 80zm-88-40a88 88 0 1 0 176 0 88 88 0 1 0 -176 0z"/>
+                </svg>
+                <div>
+                    <p class="user">Username</p>
+                    <p class="blog_title">Title</p>
+                </div>
+            </div>
+            <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id convallis odio. Sed sem quam, aliquam ac erat ac, gravida commodo nibh. Quisque feugiat hendrerit neque, id semper libero suscipit nec. Nunc bibendum molestie pharetra. Donec scelerisque, arcu sit amet pretium mollis, orci velit pretium metus, non maximus turpis arcu quis augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus laoreet ligula massa, non lacinia erat ornare eget. Nunc nec ex nec risus sodales scelerisque. Suspendisse purus orci, elementum vel orci vel, pretium congue neque. Fusce a mollis est. Duis orci diam, suscipit a sollicitudin eget, faucibus at justo. In in quam in augue commodo venenatis. Etiam sit amet ante magna. Suspendisse lorem ipsum, faucibus nec nunc posuere, blandit pulvinar sem. Vestibulum eget nisl non erat tempor tincidunt.
+
+                Etiam rhoncus lacinia ultricies. Integer dignissim lectus ac ex laoreet eleifend. Fusce nisl ligula, euismod in libero at, ornare vehicula tellus. Cras rutrum scelerisque diam, tristique efficitur mauris tincidunt et. Integer a condimentum dui. Phasellus luctus ultrices dolor, nec tincidunt lorem tincidunt at. Donec maximus blandit nisi ac dictum. Vestibulum in diam iaculis, efficitur ligula nec, pulvinar ligula. Mauris sed mattis nibh. Duis varius elit mi, quis mollis augue aliquet nec. Maecenas sagittis arcu eu velit hendrerit sollicitudin.</p>
+
+            <div class="likes">
+                <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
+                    <path d="M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.1s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z"/>
+                </svg>
+                <p>0</p>
+            </div>
+        </div>
+
+
+    </body>
+</html>
diff --git a/views/home.ejs b/views/home.ejs
@@ -42,7 +42,7 @@
             <p class="null">No Latest Blogs Posted :(</p>
         <% } else{ %>
             <% for(let i=arr.length-1; i>-1; i--) { %>
-                <div class="post">
+                <a href="/details/<%= arr[i].ID %>" class="post">
                     <div class="ptop">
                         <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
                             <path d="M406.5 399.6C387.4 352.9 341.5 320 288 320H224c-53.5 0-99.4 32.9-118.5 79.6C69.9 362.2 48 311.7 48 256C48 141.1 141.1 48 256 48s208 93.1 208 208c0 55.7-21.9 106.2-57.5 143.6zm-40.1 32.7C334.4 452.4 296.6 464 256 464s-78.4-11.6-110.5-31.7c7.3-36.7 39.7-64.3 78.5-64.3h64c38.8 0 71.2 27.6 78.5 64.3zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-272a40 40 0 1 1 0-80 40 40 0 1 1 0 80zm-88-40a88 88 0 1 0 176 0 88 88 0 1 0 -176 0z"/>
@@ -60,7 +60,7 @@
                         </svg>
                         <p>0</p>
                     </div>
-                </div>
+                </a>
             <% } %>
         <% } %>
 

diff --git a/views/myBlogs.ejs b/views/myBlogs.ejs
@@ -42,7 +42,7 @@
             <p class="null">No Blogs Posted By You! :(</p>
         <% } else{ %>
             <% for(let i=arr.length-1; i>-1; i--) { %>
-                <div class="post">
+                <a href="/details/<%= arr[i].ID %>" class="post">
                     <div class="ptop">
                         <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
                             <path d="M406.5 399.6C387.4 352.9 341.5 320 288 320H224c-53.5 0-99.4 32.9-118.5 79.6C69.9 362.2 48 311.7 48 256C48 141.1 141.1 48 256 48s208 93.1 208 208c0 55.7-21.9 106.2-57.5 143.6zm-40.1 32.7C334.4 452.4 296.6 464 256 464s-78.4-11.6-110.5-31.7c7.3-36.7 39.7-64.3 78.5-64.3h64c38.8 0 71.2 27.6 78.5 64.3zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-272a40 40 0 1 1 0-80 40 40 0 1 1 0 80zm-88-40a88 88 0 1 0 176 0 88 88 0 1 0 -176 0z"/>
@@ -60,7 +60,7 @@
                         </svg>
                         <p>0</p>
                     </div>
-                </div>
+                </a>
             <% } %>
         <% } %>