Added requirement section in the create project page.

osinaweb/static/dist/output.css

@@ -807,6 +807,10 @@ video {
   height: 50px;
 }
 
+.h-\[55px\] {
+  height: 55px;
+}
+
 .h-\[60px\] {
   height: 60px;
 }
@@ -1250,6 +1254,11 @@ video {
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
 .bg-green-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(187 247 208 / var(--tw-bg-opacity));

osinaweb/templates/create-project.html

@@ -10,12 +10,13 @@
             Create Project
         </h1>
 
-        <form class="w-full flex flex-col gap-3 justify-center items-center mt-5" method="POST" action="{% url 'save_project' %}">
+        <form class="w-full flex flex-col gap-3 justify-center items-center mt-5" method="POST"
+            action="{% url 'save_project' %}">
             {% csrf_token %}
             <input required name="name" type="text" placeholder="Project Name"
                 class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
 
-                <select required name="customer" id=""
+            <select required name="customer" id=""
                 class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
                 <option value="" selected disabled>Clients</option>
                 {% for customer in customers %}
@@ -32,8 +33,8 @@
             </select>
 
             <select required name="members" id=""
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500" >
-                <option  value="" selected disabled>Member(s)</option>
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" selected disabled>Member(s)</option>
                 {% for staff in staffs %}
                 <option value="{{staff.user.username}}">{{staff.first_name}} {{staff.last_name}}</option>
                 {% endfor %}
@@ -59,18 +60,52 @@
             <textarea required name="details" type="text" placeholder="Project Details" rows="5" cols="5"
                 class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea>
 
-            <div class="w-full flex justify-between items-center gap-3">
-                <input type="text" placeholder="Requirement"
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+            <div class="w-full p-3 border border-gray-300 mt-4 rounded-md">
+                <div class="w-full mt-2" id="addReqContainer">
+                    <input type="text" placeholder="Requirement"
+                        class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none" required>
+                </div>
+
+                <!-- THE CLONED CONTAINER  -->
+                <div class="mt-2 hidden" id="addReqContainerTemplate">
+                    <div class="w-full flex flex-col gap-2">
+                        <input type="text" placeholder="Requirement"
+                            class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none" required>
+                        <button
+                            class="w-full h-[55px] rounded-md bg-gray-300 border-none outline-none shadow-md text-white text-xl cursor-pointer py-2"
+                            id="removeReqButton" type="button">
+                            <i class="fa fa-minus"></i>
+                        </button>
+                    </div>
+                </div>
+
                 <button
-                    class="w-[48px] h-[48px] rounded-md p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md">
+                    class="w-full h-[55px] rounded-md bg-gray-400 border-none outline-none shadow-md text-white text-xl cursor-pointer py-2 mt-2"
+                    id="addReqButton" type="button">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
 
-            <!-- <textarea type="text" placeholder="Project Requirements" rows="5" cols="5"
-            class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea> -->
+            <script>
+                const addReqButton = document.getElementById("addReqButton");
+                const addReqContainerTemplate = document.getElementById("addReqContainerTemplate");
+                const addReqContainer = document.getElementById("addReqContainer");
+
+                addReqButton.addEventListener("click", function () {
+                    // Clone the template and remove the "hidden" class
+                    const newContainer = addReqContainerTemplate.cloneNode(true);
+                    newContainer.classList.remove("hidden");
 
+                    // Add an event listener to the new container's remove button
+                    const removeReqButton = newContainer.querySelector("#removeReqButton");
+                    removeReqButton.addEventListener("click", function () {
+                        // Remove the clicked container when the remove button is clicked
+                        newContainer.remove();
+                    });
+
+                    addReqContainer.appendChild(newContainer);
+                });
+            </script>
 
             <div class="w-full">
                 <label class="text-gray-500">Start Date:</label>