added basic functionality

public/css/dashboard/skill.css

@@ -56,6 +56,7 @@ .tasks{
     align-items: center;
     background-color: #fff;
     border-radius: 10px;
+    min-height:200px;
 }
 .task{
     box-shadow:0px 0px 10px -6px #000;
@@ -77,7 +78,7 @@ .task>span{
     color: rgb(90, 90, 90);
 }
 
-#modal,#task_modal{
+#createtask_modal,#task_modal{
     position: absolute;
     top:50%;
     left:50%;
@@ -89,31 +90,31 @@ #modal,#task_modal{
     background-color: #fafafa;
 }
 
-#modal>.close_btn , #task_modal>.close_btn{
+#createtask_modal>.close_btn , #task_modal>.close_btn{
     position:absolute;
     top:10px;
     right:10px;
     cursor: pointer;
 }
 
-#modal>.container , #task_modal>.container{
+#createtask_modal>.container , #task_modal>.container{
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
-#modal>.container>.title{
+#createtask_modal>.container>.title{
     font-size: 2rem;
     margin-bottom: 1rem;
 }
 
-#modal .field{
+#createtask_modal .field{
     display: flex;
     flex-direction: column;
     margin-top: 1rem;
 }
 
-#modal .task_input{
+#createtask_modal .task_input{
     border-radius: 10px;
     border: none;
     outline: none;
@@ -123,7 +124,7 @@ #modal .task_input{
     box-shadow: 0px 0px 10px -8px;
 }
 
-#modal .submit_btn{
+#createtask_modal .submit_btn{
     border-radius: 50px;
     border: none;
     outline: none;

public/js/dashboard/skill.js

@@ -1,3 +1,11 @@
+function showCreateTask(task_type){
+    var task_type_elem = createtask_modal.querySelector("#task_type");
+    task_type_elem.value = task_type;
+    createtask_modal.showModal();
+}
+function closeCreateTask(){
+    createtask_modal.close();
+}
 function showTask(task_id){
     fetch(`${taskdetail_url}/${task_id}`,{
         method:"GET",

resources/views/dashboard/skill.blade.php

@@ -15,30 +15,54 @@
         <div class="task_container">
             <div class='header_container'>
                 <h2>Basic/Core Skills</h2>
-                <button class="new_btn" onclick="modal.showModal()">New</button>
+                <button class="new_btn" onclick="showCreateTask('basic')">New</button>
             </div>
             <div class="tasks">
 
                 @foreach ($tasks as $task)
+                    @continue($task->type != 'basic')
+                    <div class='task' onclick='showTask({{ $task->id }})'>
+                        <span>{{ $task->title }}</span>
+                    </div>
+                @endforeach
+
+            </div>
+        </div>
+        <div class="task_container">
+            <div class='header_container'>
+                <h2>Sub Skills</h2>
+                <button class="new_btn" onclick="showCreateTask('sub')">New</button>
+            </div>
+            <div class="tasks">
+
+                @foreach ($tasks as $task)
+                    @continue($task->type != 'sub')
+                    <div class='task' onclick='showTask({{ $task->id }})'>
+                        <span>{{ $task->title }}</span>
+                    </div>
+                @endforeach
+
+            </div>
+        </div>
+        <div class="task_container">
+            <div class='header_container'>
+                <h2>Applications</h2>
+                <button class="new_btn" onclick="showCreateTask('app')">New</button>
+            </div>
+            <div class="tasks">
+
+                @foreach ($tasks as $task)
+                    @continue($task->type != 'app')
                     <div class='task' onclick='showTask({{ $task->id }})'>
                         <span>{{ $task->title }}</span>
                     </div>
                 @endforeach
-                {{-- <div class='task' onclick='showTask(id)'>
-                    <span>learn how fret works</span>
-                </div>
-                <div class='task'>
-                    <span>learn how tuning keys works</span>
-                </div>
-                <div class='task'>
-                    <span>learn guitar string names</span>
-                </div> --}}
 
             </div>
         </div>
     </section>
-    <dialog id="modal">
-        <i onclick="modal.close()" class="fa-solid fa-xmark close_btn"></i>
+    <dialog id="createtask_modal">
+        <i onclick="closeCreateTask()" class="fa-solid fa-xmark close_btn"></i>
         <form class="container" method="POST" action="{{ route('dashboard.createtask', $skill->id) }}">
             {{-- <form class="container" method="POST"> --}}
             @csrf
@@ -85,16 +109,14 @@
 
     <script src="{{ asset('js/dashboard/skill.js') }}"></script>
     <script>
-
         var taskdetail_url = "{{ route('dashboard.taskdetail', 1) }}";
         taskdetail_url = taskdetail_url.split('/').slice(0, -1).join("/");
         var taskdetail_url = "{{ route('dashboard.taskdetail', 1) }}";
         taskdetail_url = taskdetail_url.split('/').slice(0, -1).join("/");
 
         // task_modal.showModal();
-        @foreach($errors->all() as $error)
+        @foreach ($errors->all() as $error)
             addError('{{ $error }}');
         @endforeach
-
     </script>
 @endsection