Set description limit for new list form, both front end and backend

Author: Suvadip-sana

controllers/listing.js

@@ -98,6 +98,12 @@ module.exports.search = async (req, res) => {
         // Destructure the properties from req.body.listing, including tags
         const { title, description, price, country, location, tags } = req.body.listing;
 
+        //Description limit
+        if(description.length > 1000){
+            req.flash("error", "Maximum 1000 charecters allowed!");
+            return res.redirect("/listing/new");
+        }
+
         // Ensure tags is an array (if it's a comma-separated string, split it)
         let tagArray = [];
         if (tags) {

public/js/script.js

@@ -172,4 +172,44 @@ listingImageInput.addEventListener('change', function() {
         fileError.classList.remove("alert-error");
         fileError.classList.add("nomal-error");
     }
-});
+});
+
+
+
+// // Set the descriptiopn limit
+// const description = document.querySelector("#list-description");
+// const desError = document.querySelector("#des-error");
+// description.addEventListener("change", function(){
+//   if(description.value.length >= 1000){
+//     desError.classList.remove("nomal-error");
+//     desError.classList.add("alert-error");
+//     description.value = "";
+//   }
+//   else{
+//     desError.classList.remove("alert-error");
+//     desError.classList.add("nomal-error");
+//   }
+// })
+
+
+
+// Set the description limit
+const description = document.querySelector("#list-description");
+const desError = document.querySelector("#des-error");
+const maxChars = 1000;
+
+description.addEventListener("input", function() {
+    const currentLength = description.value.length;
+
+    if (currentLength > maxChars) {
+        // Limit the description to the maximum allowed characters
+        description.value = description.value.substring(0, maxChars);
+        desError.textContent = "You have reached the 1000-character limit!";
+        desError.classList.add("alert-error");
+        desError.classList.remove("normal-error");
+    } else {
+        desError.textContent = `Maximum ${maxChars} characters!`;
+        desError.classList.remove("alert-error");
+        desError.classList.add("normal-error");
+    }
+});

views/new.ejs

@@ -115,7 +115,8 @@
                 <div class="mb-3 listing_form">
                     <label for="description" class="form-label">Description</label>
                     <br>
-                    <textarea name="listing[description]" class="form-control" cols="30" rows="5" placeholder="Enter description....." required></textarea>
+                    <textarea name="listing[description]" id="list-description" class="form-control" cols="30" rows="5" placeholder="Enter description....." required></textarea>
+                    <small class="" id="des-error"></small>
                     <div class="invalid-feedback">Please add a description!</div>
                     <div class="valid-feedback">Looks good!</div>
                 </div>