From 07ac17982226a2063f46423e7e8319b7cdabba90 Mon Sep 17 00:00:00 2001
From: Serhii Horodilov <sgorodil@gmail.com>
Date: Wed, 1 Feb 2023 22:39:24 +0200
Subject: [PATCH 1/6] Added pagination buttons to list template

---
 css/blog.css            | 8 ++++++++
 css/blog.css.map        | 2 +-
 css/blog.min.css        | 2 +-
 css/blog.scss           | 8 ++++++++
 templates/homepage.html | 6 ++++++
 5 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/css/blog.css b/css/blog.css
index 3f9f4f6..2a7a343 100644
--- a/css/blog.css
+++ b/css/blog.css
@@ -91,4 +91,12 @@
   border-bottom-right-radius: 1rem;
 }
 
+.blog-pagination {
+  margin-bottom: 2rem;
+}
+.blog-pagination .btn {
+  margin-left: 1rem;
+  width: 5rem;
+}
+
 /*# sourceMappingURL=blog.css.map */
diff --git a/css/blog.css.map b/css/blog.css.map
index b1d4b26..eae8269 100644
--- a/css/blog.css.map
+++ b/css/blog.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAIF;EACE;EACA","file":"blog.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAIF;EACE;EACA;;;AAIJ;EACE;;AACA;EACE;EACA","file":"blog.css"}
\ No newline at end of file
diff --git a/css/blog.min.css b/css/blog.min.css
index 27118c7..8661097 100644
--- a/css/blog.min.css
+++ b/css/blog.min.css
@@ -1 +1 @@
-.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-body-color)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}
\ No newline at end of file
+.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-body-color)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.blog-pagination{margin-bottom:2rem}.blog-pagination .btn{margin-left:1rem;width:5rem}
\ No newline at end of file
diff --git a/css/blog.scss b/css/blog.scss
index 81f78ec..1d2fd48 100644
--- a/css/blog.scss
+++ b/css/blog.scss
@@ -100,3 +100,11 @@
     border-bottom-right-radius: 1rem;
   }
 }
+
+.blog-pagination {
+  margin-bottom: 2rem;
+  .btn {
+    margin-left: 1rem;
+    width: 5rem;
+  }
+}
\ No newline at end of file
diff --git a/templates/homepage.html b/templates/homepage.html
index fae0613..8d701c8 100644
--- a/templates/homepage.html
+++ b/templates/homepage.html
@@ -293,6 +293,12 @@ <h2 class="card-title">axonas peregrinationes!</h2>
             </div>
           </div>
         </article>
+
+        <nav class="blog-pagination" aria-label="Pagination">
+          <a href="" class="btn btn-outline-primary rounded-pill">Older</a>
+          <a href="" class="btn btn-outline-success rounded-pill">Newer</a>
+        </nav>
+
       </div>
     </section>
     <section class="col-md-3">

From 17c2032cae5f5efb01849d748d3aed477cbf5df2 Mon Sep 17 00:00:00 2001
From: Serhii Horodilov <sgorodil@gmail.com>
Date: Wed, 1 Feb 2023 23:29:34 +0200
Subject: [PATCH 2/6] Updated authenticated user block (header)

Added anonymous user image to repository.
---
 img/anonymous.svg       | 32 ++++++++++++++++++++++++++++++++
 templates/blogpost.html | 24 ++++++++++++------------
 templates/homepage.html | 10 +++-------
 3 files changed, 47 insertions(+), 19 deletions(-)
 create mode 100644 img/anonymous.svg

diff --git a/img/anonymous.svg b/img/anonymous.svg
new file mode 100644
index 0000000..ffc9539
--- /dev/null
+++ b/img/anonymous.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+     viewBox="-20 0 250 206" xml:space="preserve">
+<g>
+	<path d="M200.663,23.767c-1.125-1.125-2.651-1.758-4.243-1.758c-0.02-0.001-0.04,0-0.06,0c-4.237,0-8.227-1.651-11.234-4.652
+		c-3.037-3.03-4.708-7.062-4.707-11.354c0.001-1.592-0.632-3.118-1.757-4.244C177.537,0.632,176.011,0,174.419,0H31.581
+		c-1.592,0-3.118,0.632-4.243,1.758c-1.125,1.126-1.758,2.652-1.757,4.244c0.001,4.292-1.67,8.325-4.707,11.354
+		c-3.009,3.001-6.996,4.652-11.234,4.652c-0.02,0-0.04-0.001-0.06,0c-1.592,0-3.118,0.632-4.243,1.758
+		c-1.129,1.13-1.762,2.663-1.757,4.26c0.06,20.19,2.938,51.081,16.305,83.586c16.012,38.936,42.908,70.387,79.94,93.479
+		c0.972,0.606,2.073,0.909,3.175,0.909s2.203-0.303,3.175-0.909c37.032-23.092,63.929-54.542,79.94-93.479
+		c13.367-32.505,16.245-63.396,16.305-83.586C202.425,26.429,201.792,24.896,200.663,23.767z M103,192.891
+		C30.521,145.934,16.802,75.074,15.661,33.36c5.143-1.127,9.867-3.697,13.688-7.509c3.865-3.856,6.465-8.64,7.594-13.852h132.113
+		c1.129,5.212,3.729,9.996,7.594,13.852c3.821,3.813,8.546,6.382,13.688,7.509C189.198,75.074,175.479,145.934,103,192.891z"/>
+    <path d="M155.924,99.253c-2.903-1.597-6.553-0.537-8.148,2.366l-5.217,9.483h-16.362l-5.866-9.697
+		c-1.087-1.797-3.034-2.895-5.134-2.895H90.804c-2.1,0-4.047,1.098-5.134,2.895l-5.866,9.697H63.441l-5.217-9.483
+		c-1.596-2.903-5.244-3.963-8.148-2.366c-2.903,1.597-3.963,5.246-2.365,8.149l6.926,12.591c1.054,1.917,3.068,3.108,5.257,3.108
+		h23.293c2.1,0,4.047-1.098,5.134-2.895l5.866-9.697h17.627l5.866,9.697c1.087,1.797,3.034,2.895,5.134,2.895h23.293
+		c2.188,0,4.203-1.191,5.257-3.108l6.926-12.591C159.887,104.499,158.827,100.851,155.924,99.253z"/>
+    <polygon points="103,173.097 114.647,132.805 91.353,132.805"/>
+    <path d="M64.834,46.007c8.584,0,16.593,4.622,20.9,12.061c1.66,2.867,5.333,3.845,8.199,2.186c2.867-1.661,3.846-5.332,2.186-8.199
+		c-6.447-11.132-18.435-18.047-31.285-18.047c-12.855,0-24.846,6.918-31.29,18.055c-1.659,2.868-0.68,6.539,2.188,8.199
+		c0.946,0.547,1.979,0.808,2.999,0.808c2.071,0,4.087-1.074,5.199-2.996C48.237,50.63,56.247,46.007,64.834,46.007z"/>
+    <path d="M57.395,55.071c-2.209,0-4,1.791-4,4s1.791,4,4,4h15.859c2.209,0,4-1.791,4-4s-1.791-4-4-4H57.395z"/>
+    <path d="M141.17,34.007c-12.854,0-24.844,6.918-31.29,18.055c-1.659,2.868-0.68,6.539,2.188,8.198c0.946,0.548,1.98,0.808,3,0.808
+		c2.071,0,4.087-1.074,5.199-2.996c4.308-7.442,12.317-12.066,20.903-12.066c8.584,0,16.593,4.621,20.9,12.06
+		c1.659,2.867,5.33,3.847,8.199,2.186c2.867-1.661,3.846-5.331,2.186-8.199C166.01,40.922,154.021,34.007,141.17,34.007z"/>
+    <path d="M149.591,63.071c2.209,0,4-1.791,4-4s-1.791-4-4-4h-15.86c-2.209,0-4,1.791-4,4s1.791,4,4,4H149.591z"/>
+    <path d="M109.157,125.667c2.209,0,4-1.791,4-4s-1.791-4-4-4H96.843c-2.209,0-4,1.791-4,4s1.791,4,4,4H109.157z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/templates/blogpost.html b/templates/blogpost.html
index 44611cd..63180d4 100644
--- a/templates/blogpost.html
+++ b/templates/blogpost.html
@@ -25,17 +25,17 @@
         <a href="homepage.html" class="blog-title text-dark">Django Blog</a>
       </div>
       <div class="col-4 d-flex justify-content-end align-items-center dropdown">
-        <div class="btn-group">
-          <button type="button" class="btn btn-secondary">Authenticate</button>
-          <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
-                  data-bs-toggle="dropdown" aria-expanded="false">
-            <span class="visually-hidden">Toggle Dropdown</span>
-          </button>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="signin.html">Sign In</a></li>
-            <li><a class="dropdown-item" href="signup.html">Sign Up</a></li>
-          </ul>
+        <div class="dropdown-toggle" data-bs-toggle="dropdown">
+          <img src="https://i.pravatar.cc/350?u=da594f2b" alt="avatar" class="avatar rounded-circle">
         </div>
+        <ul class="dropdown-menu" role="menu">
+          <li><a href="" class="dropdown-item">User Profile</a></li>
+          <li><a href="" class="dropdown-item">Create post</a></li>
+          <li>
+            <hr class="dropdown-divider">
+          </li>
+          <li><a href="" class="dropdown-item">Logout</a></li>
+        </ul>
       </div>
     </div>
   </header>
@@ -144,7 +144,7 @@ <h1 class="h1">hydras volare!</h1>
             minus quia quos saepe suscipit totam. Accusamus cum exercitationem harum id itaque, officia quos ullam
             voluptatem.
           </p>
-                    <p>
+          <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dicta, ea esse excepturi ipsa
             laudantium libero molestias officiis quas quidem quisquam ratione? Dolores est, iste laborum pariatur ullam
             vitae? Atque?
@@ -167,7 +167,7 @@ <h1 class="h1">hydras volare!</h1>
             minus quia quos saepe suscipit totam. Accusamus cum exercitationem harum id itaque, officia quos ullam
             voluptatem.
           </p>
-                    <p>
+          <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dicta, ea esse excepturi ipsa
             laudantium libero molestias officiis quas quidem quisquam ratione? Dolores est, iste laborum pariatur ullam
             vitae? Atque?
diff --git a/templates/homepage.html b/templates/homepage.html
index 8d701c8..bee6454 100644
--- a/templates/homepage.html
+++ b/templates/homepage.html
@@ -26,15 +26,11 @@
       </div>
       <div class="col-4 d-flex justify-content-end align-items-center dropdown">
         <div class="dropdown-toggle" data-bs-toggle="dropdown">
-          <img src="https://i.pravatar.cc/350?u=da594f2b" alt="avatar" class="avatar rounded-circle">
+          <img src="../img/anonymous.svg" alt="avatar" class="avatar rounded-circle">
         </div>
         <ul class="dropdown-menu" role="menu">
-          <li><a href="" class="dropdown-item">User Profile</a></li>
-          <li><a href="" class="dropdown-item">Create post</a></li>
-          <li>
-            <hr class="dropdown-divider">
-          </li>
-          <li><a href="" class="dropdown-item">Logout</a></li>
+          <li><a href="" class="dropdown-item">Sign In</a></li>
+          <li><a href="" class="dropdown-item">Sing Up</a></li>
         </ul>
       </div>
     </div>

From c05933422724218beaca9119578cbab1c559da5d Mon Sep 17 00:00:00 2001
From: Serhii Horodilov <sgorodil@gmail.com>
Date: Wed, 1 Feb 2023 23:59:03 +0200
Subject: [PATCH 3/6] Added blogpost comment form

---
 css/blog.css            |  5 +++++
 css/blog.css.map        |  2 +-
 css/blog.min.css        |  2 +-
 css/blog.scss           |  5 +++++
 templates/blogpost.html | 14 +++++++++++++-
 5 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/css/blog.css b/css/blog.css
index 2a7a343..459e06c 100644
--- a/css/blog.css
+++ b/css/blog.css
@@ -99,4 +99,9 @@
   width: 5rem;
 }
 
+.avatar {
+  max-height: 10rem;
+  max-width: 10rem;
+}
+
 /*# sourceMappingURL=blog.css.map */
diff --git a/css/blog.css.map b/css/blog.css.map
index eae8269..452dee1 100644
--- a/css/blog.css.map
+++ b/css/blog.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAIF;EACE;EACA;;;AAIJ;EACE;;AACA;EACE;EACA","file":"blog.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAIF;EACE;EACA;;;AAIJ;EACE;;AACA;EACE;EACA;;;AAIJ;EACE;EACA","file":"blog.css"}
\ No newline at end of file
diff --git a/css/blog.min.css b/css/blog.min.css
index 8661097..d1fac9e 100644
--- a/css/blog.min.css
+++ b/css/blog.min.css
@@ -1 +1 @@
-.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-body-color)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.blog-pagination{margin-bottom:2rem}.blog-pagination .btn{margin-left:1rem;width:5rem}
\ No newline at end of file
+.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-body-color)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.blog-pagination{margin-bottom:2rem}.blog-pagination .btn{margin-left:1rem;width:5rem}.avatar{max-height:10rem;max-width:10rem}
\ No newline at end of file
diff --git a/css/blog.scss b/css/blog.scss
index 1d2fd48..74c9d1a 100644
--- a/css/blog.scss
+++ b/css/blog.scss
@@ -107,4 +107,9 @@
     margin-left: 1rem;
     width: 5rem;
   }
+}
+
+.avatar {
+  max-height: 10rem;
+  max-width: 10rem;
 }
\ No newline at end of file
diff --git a/templates/blogpost.html b/templates/blogpost.html
index 63180d4..92b85d2 100644
--- a/templates/blogpost.html
+++ b/templates/blogpost.html
@@ -111,8 +111,8 @@
 <main class="container">
   <div class="row">
     <section class="col-md-9 mb-2" role="main">
-      <h1 class="h1">hydras volare!</h1>
       <div class="row position-relative">
+        <h1 class="h1">hydras volare!</h1>
         <article class="col w-100">
           <div class="mb-3">
             <strong class="fw-light">category</strong>
@@ -192,6 +192,18 @@ <h1 class="h1">hydras volare!</h1>
           </p>
         </article>
       </div>
+      <h2 class="h2">Comments</h2>
+      <form class="row position-relative">
+        <div class="col-12 d-flex justify-content-between mb-3">
+          <h3 class="h3">New comment</h3>
+          <button type="submit" class="btn btn-outline-primary"><i class="bi bi-send"></i>&nbsp;Post</button>
+        </div>
+        <div class="col-12 d-flex">
+          <img src="https://i.pravatar.cc/350?u=da594f2b" alt="avatar" class="avatar p-2">
+          <label for="newCommentText" class="visually-hidden">Comment Text</label>
+          <textarea name="message" id="newCommentText" class="form-control"></textarea>
+        </div>
+      </form>
     </section>
     <section class="col-md-3">
       <div class="position-sticky">

From 49a0cc16b6ca91f262ec1caf9dd146959e8d2e0a Mon Sep 17 00:00:00 2001
From: Serhii Horodilov <sgorodil@gmail.com>
Date: Thu, 2 Feb 2023 00:28:14 +0200
Subject: [PATCH 4/6] Updated comments section

---
 css/blog.css            |  5 +++
 css/blog.css.map        |  2 +-
 css/blog.min.css        |  2 +-
 css/blog.scss           |  9 +++++-
 templates/blogpost.html | 68 +++++++++++++++++++++++++++++++++++++++--
 5 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/css/blog.css b/css/blog.css
index 459e06c..a8471bb 100644
--- a/css/blog.css
+++ b/css/blog.css
@@ -104,4 +104,9 @@
   max-width: 10rem;
 }
 
+.blogpost-comment .avatar {
+  max-height: 7rem;
+  max-width: 7rem;
+}
+
 /*# sourceMappingURL=blog.css.map */
diff --git a/css/blog.css.map b/css/blog.css.map
index 452dee1..db5f39e 100644
--- a/css/blog.css.map
+++ b/css/blog.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAIF;EACE;EACA;;;AAIJ;EACE;;AACA;EACE;EACA;;;AAIJ;EACE;EACA","file":"blog.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAIF;EACE;EACA;;;AAIJ;EACE;;AACA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAIA;EACE;EACA","file":"blog.css"}
\ No newline at end of file
diff --git a/css/blog.min.css b/css/blog.min.css
index d1fac9e..e0236cd 100644
--- a/css/blog.min.css
+++ b/css/blog.min.css
@@ -1 +1 @@
-.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-body-color)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.blog-pagination{margin-bottom:2rem}.blog-pagination .btn{margin-left:1rem;width:5rem}.avatar{max-height:10rem;max-width:10rem}
\ No newline at end of file
+.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-body-color)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.blog-pagination{margin-bottom:2rem}.blog-pagination .btn{margin-left:1rem;width:5rem}.avatar{max-height:10rem;max-width:10rem}.blogpost-comment .avatar{max-height:7rem;max-width:7rem}
\ No newline at end of file
diff --git a/css/blog.scss b/css/blog.scss
index 74c9d1a..9d59235 100644
--- a/css/blog.scss
+++ b/css/blog.scss
@@ -112,4 +112,11 @@
 .avatar {
   max-height: 10rem;
   max-width: 10rem;
-}
\ No newline at end of file
+}
+
+.blogpost-comment {
+  .avatar {
+    max-height: 7rem;
+    max-width: 7rem;
+  }
+}
diff --git a/templates/blogpost.html b/templates/blogpost.html
index 92b85d2..bca042e 100644
--- a/templates/blogpost.html
+++ b/templates/blogpost.html
@@ -194,16 +194,78 @@ <h1 class="h1">hydras volare!</h1>
       </div>
       <h2 class="h2">Comments</h2>
       <form class="row position-relative">
-        <div class="col-12 d-flex justify-content-between mb-3">
+        <div class="col-12 d-flex justify-content-between align-items-center mb-3">
           <h3 class="h3">New comment</h3>
           <button type="submit" class="btn btn-outline-primary"><i class="bi bi-send"></i>&nbsp;Post</button>
         </div>
-        <div class="col-12 d-flex">
-          <img src="https://i.pravatar.cc/350?u=da594f2b" alt="avatar" class="avatar p-2">
+        <div class="col-12 d-flex justify-content-start mb-3">
+          <img src="https://i.pravatar.cc/350?u=da594f2b" alt="avatar" class="avatar rounded-circle p-2">
           <label for="newCommentText" class="visually-hidden">Comment Text</label>
           <textarea name="message" id="newCommentText" class="form-control"></textarea>
         </div>
       </form>
+      <div class="row position-relative">
+        <div class="blogpost-comment col-12 d-flex justify-content-start mb-3">
+          <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
+          <div>
+            <strong class="mb-2 h4">John Doe</strong>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae
+              molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia
+              praesentium quam.
+            </p>
+            <small class="small text-muted"><i class="bi bi-calendar"></i>&nbsp;Jan 31, 2023</small>
+          </div>
+        </div>
+        <div class="blogpost-comment col-12 d-flex justify-content-start mb-3">
+          <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
+          <div>
+            <strong class="mb-2 h4">John Doe</strong>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae
+              molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia
+              praesentium quam.
+            </p>
+            <small class="small text-muted"><i class="bi bi-calendar"></i>&nbsp;Jan 31, 2023</small>
+          </div>
+        </div>
+        <div class="blogpost-comment col-12 d-flex justify-content-start mb-3">
+          <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
+          <div>
+            <strong class="mb-2 h4">John Doe</strong>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae
+              molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia
+              praesentium quam.
+            </p>
+            <small class="small text-muted"><i class="bi bi-calendar"></i>&nbsp;Jan 31, 2023</small>
+          </div>
+        </div>
+        <div class="blogpost-comment col-12 d-flex justify-content-start mb-3">
+          <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
+          <div>
+            <strong class="mb-2 h4">John Doe</strong>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae
+              molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia
+              praesentium quam.
+            </p>
+            <small class="small text-muted"><i class="bi bi-calendar"></i>&nbsp;Jan 31, 2023</small>
+          </div>
+        </div>
+        <div class="blogpost-comment col-12 d-flex justify-content-start mb-3">
+          <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
+          <div>
+            <strong class="mb-2 h4">John Doe</strong>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae
+              molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia
+              praesentium quam.
+            </p>
+            <small class="small text-muted"><i class="bi bi-calendar"></i>&nbsp;Jan 31, 2023</small>
+          </div>
+        </div>
+      </div>
     </section>
     <section class="col-md-3">
       <div class="position-sticky">

From 5f33bbd530899dc76c5f339e21266099916809bc Mon Sep 17 00:00:00 2001
From: Serhii Horodilov <sgorodil@gmail.com>
Date: Thu, 2 Feb 2023 01:05:41 +0200
Subject: [PATCH 5/6] Added blogpost comment functions

Implemented functions to create and insert comment entry to a page.
Adjusted styling.
---
 css/blog.css            | 12 ++++++++++++
 css/blog.css.map        |  2 +-
 css/blog.min.css        |  2 +-
 css/blog.scss           | 18 +++++++++++++++++
 js/blog.js              | 38 ++++++++++++++++++++++++++++++++++++
 templates/blogpost.html | 43 +++++++++++++++++++++--------------------
 6 files changed, 92 insertions(+), 23 deletions(-)
 create mode 100644 js/blog.js

diff --git a/css/blog.css b/css/blog.css
index a8471bb..726b099 100644
--- a/css/blog.css
+++ b/css/blog.css
@@ -104,9 +104,21 @@
   max-width: 10rem;
 }
 
+.blogpost-comment {
+  margin-bottom: 0.75rem;
+}
 .blogpost-comment .avatar {
   max-height: 7rem;
   max-width: 7rem;
 }
+.blogpost-comment div strong {
+  margin-bottom: 0.5rem;
+}
+.blogpost-comment div div {
+  margin-bottom: 0.5rem;
+}
+.blogpost-comment .bi-calendar {
+  margin-right: 0.5rem;
+}
 
 /*# sourceMappingURL=blog.css.map */
diff --git a/css/blog.css.map b/css/blog.css.map
index db5f39e..f861ae0 100644
--- a/css/blog.css.map
+++ b/css/blog.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAIF;EACE;EACA;;;AAIJ;EACE;;AACA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAIA;EACE;EACA","file":"blog.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAKF;EACE;EACA;;;AAIJ;EACE;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;;AAIA;EACE;;AAGF;EACE;;AAIJ;EACE","file":"blog.css"}
\ No newline at end of file
diff --git a/css/blog.min.css b/css/blog.min.css
index e0236cd..ef3f6dd 100644
--- a/css/blog.min.css
+++ b/css/blog.min.css
@@ -1 +1 @@
-.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-body-color)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.blog-pagination{margin-bottom:2rem}.blog-pagination .btn{margin-left:1rem;width:5rem}.avatar{max-height:10rem;max-width:10rem}.blogpost-comment .avatar{max-height:7rem;max-width:7rem}
\ No newline at end of file
+.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-body-color)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.blog-pagination{margin-bottom:2rem}.blog-pagination .btn{margin-left:1rem;width:5rem}.avatar{max-height:10rem;max-width:10rem}.blogpost-comment{margin-bottom:.75rem}.blogpost-comment .avatar{max-height:7rem;max-width:7rem}.blogpost-comment div div,.blogpost-comment div strong{margin-bottom:.5rem}.blogpost-comment .bi-calendar{margin-right:.5rem}
\ No newline at end of file
diff --git a/css/blog.scss b/css/blog.scss
index 9d59235..06966f7 100644
--- a/css/blog.scss
+++ b/css/blog.scss
@@ -94,6 +94,7 @@
     border-bottom-right-radius: 1rem;
   }
 }
+
 .form-auth.form-signup {
   #confirmPassword {
     border-bottom-left-radius: 1rem;
@@ -103,6 +104,7 @@
 
 .blog-pagination {
   margin-bottom: 2rem;
+
   .btn {
     margin-left: 1rem;
     width: 5rem;
@@ -115,8 +117,24 @@
 }
 
 .blogpost-comment {
+  margin-bottom: 0.75rem;
+
   .avatar {
     max-height: 7rem;
     max-width: 7rem;
   }
+
+  div {
+    strong {
+      margin-bottom: 0.5rem;
+    }
+
+    div {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  .bi-calendar {
+    margin-right: 0.5rem;
+  }
 }
diff --git a/js/blog.js b/js/blog.js
new file mode 100644
index 0000000..fe47c33
--- /dev/null
+++ b/js/blog.js
@@ -0,0 +1,38 @@
+// blogpost comment creation
+
+const createBlogpostComment = (author, message, time) => {
+    const comment = document.createElement("div");
+    comment.classList.add("blogpost-comment", "col-12", "d-flex");
+
+    const author_avatar = document.createElement("img");
+    author_avatar.src = "https://i.pravatar.cc/350";
+    author_avatar.classList.add("avatar", "rounded-circle", "p-2");
+    comment.appendChild(author_avatar);
+
+    const comment_body = document.createElement("div");
+    comment.appendChild(comment_body);
+
+    const comment_author = document.createElement("strong");
+    comment_author.classList.add("h4", "mb-2");
+    comment_author.innerText = author;
+    comment_body.appendChild(comment_author);
+
+    const comment_message = document.createElement("div");
+    comment_message.innerText = message;
+    comment_body.appendChild(comment_message);
+
+    const comment_created = document.createElement("small");
+    const icon = document.createElement("i");
+    comment_created.classList.add("text-muted");
+    comment_created.innerText = time;
+    icon.classList.add("bi", "bi-calendar");
+    comment_created.insertBefore(icon, comment_created.firstChild);
+    comment_body.appendChild(comment_created);
+
+    return comment;
+}
+
+const addBlogpostComment = comment => {
+    const container = document.getElementById("commentsContainer");
+    if (container) container.insertBefore(comment, container.firstChild);
+}
diff --git a/templates/blogpost.html b/templates/blogpost.html
index bca042e..e9cc680 100644
--- a/templates/blogpost.html
+++ b/templates/blogpost.html
@@ -204,65 +204,65 @@ <h3 class="h3">New comment</h3>
           <textarea name="message" id="newCommentText" class="form-control"></textarea>
         </div>
       </form>
-      <div class="row position-relative">
-        <div class="blogpost-comment col-12 d-flex justify-content-start mb-3">
+      <div class="row position-relative" id="commentsContainer">
+        <div class="blogpost-comment col-12 d-flex">
           <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
           <div>
             <strong class="mb-2 h4">John Doe</strong>
-            <p>
+            <div>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae
               molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia
               praesentium quam.
-            </p>
-            <small class="small text-muted"><i class="bi bi-calendar"></i>&nbsp;Jan 31, 2023</small>
+            </div>
+            <small class="small text-muted"><i class="bi bi-calendar"></i>Jan 31, 2023</small>
           </div>
         </div>
-        <div class="blogpost-comment col-12 d-flex justify-content-start mb-3">
+        <div class="blogpost-comment col-12 d-flex">
           <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
           <div>
             <strong class="mb-2 h4">John Doe</strong>
-            <p>
+            <div>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae
               molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia
               praesentium quam.
-            </p>
-            <small class="small text-muted"><i class="bi bi-calendar"></i>&nbsp;Jan 31, 2023</small>
+            </div>
+            <small class="small text-muted"><i class="bi bi-calendar"></i>Jan 31, 2023</small>
           </div>
         </div>
-        <div class="blogpost-comment col-12 d-flex justify-content-start mb-3">
+        <div class="blogpost-comment col-12 d-flex">
           <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
           <div>
             <strong class="mb-2 h4">John Doe</strong>
-            <p>
+            <div>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae
               molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia
               praesentium quam.
-            </p>
-            <small class="small text-muted"><i class="bi bi-calendar"></i>&nbsp;Jan 31, 2023</small>
+            </div>
+            <small class="small text-muted"><i class="bi bi-calendar"></i>Jan 31, 2023</small>
           </div>
         </div>
-        <div class="blogpost-comment col-12 d-flex justify-content-start mb-3">
+        <div class="blogpost-comment col-12 d-flex">
           <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
           <div>
             <strong class="mb-2 h4">John Doe</strong>
-            <p>
+            <div>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae
               molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia
               praesentium quam.
-            </p>
-            <small class="small text-muted"><i class="bi bi-calendar"></i>&nbsp;Jan 31, 2023</small>
+            </div>
+            <small class="small text-muted"><i class="bi bi-calendar"></i>Jan 31, 2023</small>
           </div>
         </div>
-        <div class="blogpost-comment col-12 d-flex justify-content-start mb-3">
+        <div class="blogpost-comment col-12 d-flex">
           <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
           <div>
             <strong class="mb-2 h4">John Doe</strong>
-            <p>
+            <div>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam beatae dolorem iure molestiae
               molestias quis quisquam reprehenderit! A animi assumenda autem blanditiis ea esse hic magnam officia
               praesentium quam.
-            </p>
-            <small class="small text-muted"><i class="bi bi-calendar"></i>&nbsp;Jan 31, 2023</small>
+            </div>
+            <small class="small text-muted"><i class="bi bi-calendar"></i>Jan 31, 2023</small>
           </div>
         </div>
       </div>
@@ -307,5 +307,6 @@ <h4>Out social media</h4>
 </main>
 
 <script src="../js/bootstrap.bundle.js"></script>
+<script src="../js/blog.js"></script>
 </body>
 </html>

From c4df39c44ccb93b8e978121dcf4feadd6f579ea4 Mon Sep 17 00:00:00 2001
From: Serhii Horodilov <sgorodil@gmail.com>
Date: Thu, 2 Feb 2023 01:27:14 +0200
Subject: [PATCH 6/6] Implemented blogpost form submit handler function

---
 js/blog.js              | 39 ++++++++++++++++++++++++++++++++++-----
 templates/blogpost.html |  6 +++---
 2 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/js/blog.js b/js/blog.js
index fe47c33..8a38ef6 100644
--- a/js/blog.js
+++ b/js/blog.js
@@ -1,11 +1,11 @@
 // blogpost comment creation
 
-const createBlogpostComment = (author, message, time) => {
+const createBlogpostComment = ({author, message, created_at}) => {
     const comment = document.createElement("div");
     comment.classList.add("blogpost-comment", "col-12", "d-flex");
 
     const author_avatar = document.createElement("img");
-    author_avatar.src = "https://i.pravatar.cc/350";
+    author_avatar.src = author.img;
     author_avatar.classList.add("avatar", "rounded-circle", "p-2");
     comment.appendChild(author_avatar);
 
@@ -14,7 +14,7 @@ const createBlogpostComment = (author, message, time) => {
 
     const comment_author = document.createElement("strong");
     comment_author.classList.add("h4", "mb-2");
-    comment_author.innerText = author;
+    comment_author.innerText = author.name;
     comment_body.appendChild(comment_author);
 
     const comment_message = document.createElement("div");
@@ -24,7 +24,7 @@ const createBlogpostComment = (author, message, time) => {
     const comment_created = document.createElement("small");
     const icon = document.createElement("i");
     comment_created.classList.add("text-muted");
-    comment_created.innerText = time;
+    comment_created.innerText = created_at;
     icon.classList.add("bi", "bi-calendar");
     comment_created.insertBefore(icon, comment_created.firstChild);
     comment_body.appendChild(comment_created);
@@ -32,7 +32,36 @@ const createBlogpostComment = (author, message, time) => {
     return comment;
 }
 
+
 const addBlogpostComment = comment => {
-    const container = document.getElementById("commentsContainer");
+    const container = document.getElementById("BlogpostCommentsContainer");
     if (container) container.insertBefore(comment, container.firstChild);
 }
+
+
+const handleNewCommentSubmit = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const message = event.target.querySelector("textarea").value.trim();
+    event.target.reset();
+
+    if (!message) return;
+
+    // TODO: get payload from backend
+    const payload = {
+        author: {
+            img: "https://i.pravatar.cc/350?u=da594f2b",
+            name: "Bosco Longhole",
+        },
+        message,
+        created_at: "Feb 2, 2023",
+    }
+
+    const comment = createBlogpostComment(payload);
+    addBlogpostComment(comment);
+}
+
+
+const BlogpostCommentsForm = document.getElementById("BlogpostCommentForm");
+if (BlogpostCommentsForm) BlogpostCommentsForm.addEventListener("submit", handleNewCommentSubmit);
diff --git a/templates/blogpost.html b/templates/blogpost.html
index e9cc680..59e91a9 100644
--- a/templates/blogpost.html
+++ b/templates/blogpost.html
@@ -193,7 +193,7 @@ <h1 class="h1">hydras volare!</h1>
         </article>
       </div>
       <h2 class="h2">Comments</h2>
-      <form class="row position-relative">
+      <form class="row position-relative" id="BlogpostCommentForm">
         <div class="col-12 d-flex justify-content-between align-items-center mb-3">
           <h3 class="h3">New comment</h3>
           <button type="submit" class="btn btn-outline-primary"><i class="bi bi-send"></i>&nbsp;Post</button>
@@ -201,10 +201,10 @@ <h3 class="h3">New comment</h3>
         <div class="col-12 d-flex justify-content-start mb-3">
           <img src="https://i.pravatar.cc/350?u=da594f2b" alt="avatar" class="avatar rounded-circle p-2">
           <label for="newCommentText" class="visually-hidden">Comment Text</label>
-          <textarea name="message" id="newCommentText" class="form-control"></textarea>
+          <textarea name="message" id="newCommentText" class="form-control" required></textarea>
         </div>
       </form>
-      <div class="row position-relative" id="commentsContainer">
+      <div class="row position-relative" id="BlogpostCommentsContainer">
         <div class="blogpost-comment col-12 d-flex">
           <img src="https://i.pravatar.cc/350?u=4001b435" alt="avatar" class="avatar rounded-circle p-2">
           <div>