From 00bfd32c00e9e3ea792d1bca145950d4884f01f4 Mon Sep 17 00:00:00 2001
From: Bappy <http.bappy@gmail.com>
Date: Thu, 20 Jul 2023 00:56:47 +0600
Subject: [PATCH 01/10] AV-07: Added linked to the menu and folder structured
 of linked list

---
 src/algorithms/linked-list/Linked-List.vue | 15 +++++++++++++++
 src/components/menu.vue                    |  1 +
 src/routes/router.js                       |  2 ++
 3 files changed, 18 insertions(+)
 create mode 100644 src/algorithms/linked-list/Linked-List.vue

diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue
new file mode 100644
index 0000000..d7166c9
--- /dev/null
+++ b/src/algorithms/linked-list/Linked-List.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <h1>Linked List</h1>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Linked-List"
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/menu.vue b/src/components/menu.vue
index d377540..86e203a 100644
--- a/src/components/menu.vue
+++ b/src/components/menu.vue
@@ -22,6 +22,7 @@
                 { id: 1, label: 'Home', route: '/' },
                 { id: 2, label: 'Searching Algorithm', route: '/search' },
                 { id: 3, label: 'Sorting Algorithm', route: '/sort' },
+                { id: 4, label: 'Linked List', route: '/linked-list' },
                 // Add more menu items for other algorithms
             ];
 
diff --git a/src/routes/router.js b/src/routes/router.js
index df27c7e..9e3eead 100644
--- a/src/routes/router.js
+++ b/src/routes/router.js
@@ -2,11 +2,13 @@ import { createRouter, createWebHistory } from 'vue-router';
 import SearchView from './../algorithms/search/Search.vue';
 import homeView from './../algorithms/algorithms.vue';
 import SortView from './../algorithms/sort/Sort.vue';
+import LinkedList from './../algorithms/linked-list/Linked-List.vue';
 
 const routes = [
     { path: '/', component: homeView },
     { path: '/search', component: SearchView },
     { path: '/sort', component: SortView },
+    { path: '/linked-list', component: LinkedList },
     // Add more routes for other algorithm components
 ];
 

From 7c767274b32d07ecef7c09ce68ff1e5d51e5c15b Mon Sep 17 00:00:00 2001
From: Bappy <http.bappy@gmail.com>
Date: Tue, 8 Aug 2023 23:38:51 +0600
Subject: [PATCH 02/10] AV-07: Linked list initialized with add features

---
 src/algorithms/linked-list/Linked-List.vue | 184 ++++++++++++++++++++-
 1 file changed, 183 insertions(+), 1 deletion(-)

diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue
index d7166c9..228fbe5 100644
--- a/src/algorithms/linked-list/Linked-List.vue
+++ b/src/algorithms/linked-list/Linked-List.vue
@@ -1,12 +1,194 @@
 <template>
     <div>
         <h1>Linked List</h1>
+        <div ref="circleContainer"></div>
+        <form v-if="showInputForm" @submit.prevent="formSubmitAction">
+            <input v-model="insertedValue" type="number" name="Number" id="" placeholder="Enter Number">
+            <button type="submit" :="insertedValue">Add</button>
+        </form>
+        <button @click="change">Animation</button>
+        <button @click="toggleForm">Insert</button>
     </div>
 </template>
 
 <script>
+    class Node {
+        constructor(data) {
+            this.data = data;
+            this.next = null;
+        }
+    }
+
+    class LinkedList {
+        constructor() {
+            this.head = null;
+        }
+
+        append(data) {
+            const newNode = new Node(data);
+            if (!this.head) {
+                this.head = newNode;
+                return;
+            }
+
+            let current = this.head;
+            while (current.next) {
+                current = current.next;
+            }
+            current.next = newNode;
+        }
+
+        display() {
+            let current = this.head;
+            while (current) {
+                console.log(current.data);
+                current = current.next;
+            }
+        }
+    }
+
+
+    import * as d3 from 'd3';
+
     export default {
-        name: "Linked-List"
+        name: "Linked-List",
+        data() {
+            return {
+                linkedList: undefined,
+                xAxis: 20,
+                arrowXAxis: 0,
+                circleRadius: 5,
+                elements: [],
+                circleContainer: undefined,
+                showInputForm: false,
+                insertedValue: undefined,
+            }
+        },
+
+        methods: {
+            createContainer() {
+                this.circleContainer = d3.select(this.$refs.circleContainer)
+                    .append('svg')
+                    .attr('width', 500)
+                    .attr('height', 200);
+            },
+
+            change() {
+                for (const element of this.elements) {
+                    element.circle.transition()
+                        .duration(1000) // Animation duration in milliseconds
+                        .attr('fill', 'rgba(0, 255, 0, 0.8)');
+                }
+
+            },
+
+            toggleForm() {
+                this.showInputForm = !this.showInputForm;
+            },
+
+            formSubmitAction() {
+                if (this.insertedValue > 0) {
+                    this.appendIntoLinkedList(this.insertedValue);
+                    this.createArrow((this.xAxis - this.circleRadius * 20) + 70);
+                    this.createCircle(this.insertedValue);
+                    this.showInputForm = false;
+                } else {
+                    console.error("You've added negative number");
+                }
+            },
+
+            createCircle(num, createArrow) {
+
+                const finalRadius = 20;
+
+                const circle = this.circleContainer.append('circle')
+                    .attr('cx', this.xAxis)
+                    .attr('cy', 100)
+                    .attr('r', this.circleRadius)
+                    .attr('fill', 'rgba(0, 0, 255, 0.5)')
+                    .attr('opacity', .5);
+                circle.transition()
+                    .duration(1000) // Animation duration in milliseconds
+                    .attr('r', finalRadius);
+
+                const text = this.circleContainer.append('text')
+                    .attr('x', this.xAxis)
+                    .attr('y', 100)
+                    .attr('dy', '.4em') // Vertical alignment adjustment
+                    .attr('text-anchor', 'middle') // Horizontal alignment
+                    .text(num);
+                if(createArrow){
+                    this.createArrow(this.xAxis+70);
+                }
+                this.elements.push({circle: circle, text: text});
+
+                this.xAxis += this.circleRadius * 20;
+
+                //     this.circleContainer.append('circle')
+                //         .attr('cx', 90)
+                //         .attr('cy', 100)
+                //         .attr('r', finalRadius)
+                //         .attr('fill', 'red');
+                //
+                //
+            },
+
+            createArrow(arrowX){
+                const arrowLength = 20;
+                const arrowY = 100;
+                // Line 1: Horizontal line
+                this.circleContainer.append('line')
+                    .attr('x1', arrowX - arrowLength - 20)
+                    .attr('y1', arrowY)
+                    .attr('x2', arrowX)
+                    .attr('y2', arrowY)
+                    .attr('stroke', 'black')
+                    .attr('stroke-width', 2);
+
+                // Line 2: Diagonal line (left)
+                this.circleContainer.append('line')
+                    .attr('x1', arrowX - 10)
+                    .attr('y1', arrowY - 5)
+                    .attr('x2', arrowX - arrowLength + 20)
+                    .attr('y2', arrowY)
+                    .attr('stroke', 'black')
+                    .attr('stroke-width', 2);
+
+                // Line 3: Diagonal line (right)
+                this.circleContainer.append('line')
+                    .attr('x1', arrowX - 10)
+                    .attr('y1', arrowY + 5)
+                    .attr('x2', arrowX - arrowLength + 20)
+                    .attr('y2', arrowY)
+                    .attr('stroke', 'black')
+                    .attr('stroke-width', 2);
+            },
+
+            appendIntoLinkedList(num, pos) {
+                if (!pos) {
+                    this.linkedList.append(num);
+                }
+            },
+
+            generateLinkedList() {
+                let current = this.linkedList.head;
+                while (current) {
+                    this.createCircle(current.data, current.next);
+                    current = current.next;
+                }
+            }
+        },
+        mounted() {
+            this.createContainer();
+            this.linkedList = new LinkedList();
+            this.linkedList.append(1);
+            this.linkedList.append(2);
+            this.linkedList.append(3);
+            this.linkedList.append(5);
+            this.linkedList.append(7);
+            this.generateLinkedList();
+
+        },
     }
 </script>
 

From 706e77159865793ca8a87141929cbd28a1363621 Mon Sep 17 00:00:00 2001
From: Bappy <http.bappy@gmail.com>
Date: Wed, 9 Aug 2023 02:54:06 +0600
Subject: [PATCH 03/10] AV-07: Linked enhanced with search and insert feature
 with animation

---
 src/algorithms/linked-list/Linked-List.vue | 156 +++++++++++++++++----
 1 file changed, 129 insertions(+), 27 deletions(-)

diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue
index 228fbe5..6fe0c85 100644
--- a/src/algorithms/linked-list/Linked-List.vue
+++ b/src/algorithms/linked-list/Linked-List.vue
@@ -2,12 +2,24 @@
     <div>
         <h1>Linked List</h1>
         <div ref="circleContainer"></div>
-        <form v-if="showInputForm" @submit.prevent="formSubmitAction">
-            <input v-model="insertedValue" type="number" name="Number" id="" placeholder="Enter Number">
-            <button type="submit" :="insertedValue">Add</button>
+        <div v-if="showSuccessResult" class="success-message">
+            Search result found at: "{{ result }}"
+        </div>
+
+        <div v-if="showFailureResult" class="fail-message">
+            Searched item not found!
+        </div>
+        <hr>
+        <form v-if="showInputForm" @submit.prevent="insertFormSubmitAction">
+            <input v-model="insertedValue" type="number" name="Number" placeholder="Enter Number">
+            <button type="submit">Add</button>
+        </form>
+        <form v-if="showSearchForm" @submit.prevent="searchIntoLinkedList">
+            <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
+            <button type="submit">Search</button>
         </form>
-        <button @click="change">Animation</button>
-        <button @click="toggleForm">Insert</button>
+        <button @click="toggleSearchForm">Search</button>
+        <button @click="toggleInsertForm">Insert</button>
     </div>
 </template>
 
@@ -16,6 +28,7 @@
         constructor(data) {
             this.data = data;
             this.next = null;
+            this.element = null;
         }
     }
 
@@ -24,8 +37,9 @@
             this.head = null;
         }
 
-        append(data) {
+        append(data, element) {
             const newNode = new Node(data);
+            newNode.element = element;
             if (!this.head) {
                 this.head = newNode;
                 return;
@@ -55,13 +69,18 @@
         data() {
             return {
                 linkedList: undefined,
+                result: "",
+                showSuccessResult: false,
+                showFailureResult: false,
                 xAxis: 20,
                 arrowXAxis: 0,
                 circleRadius: 5,
                 elements: [],
                 circleContainer: undefined,
                 showInputForm: false,
-                insertedValue: undefined,
+                showSearchForm: false,
+                targetValue: null,
+                insertedValue: null,
             }
         },
 
@@ -82,16 +101,41 @@
 
             },
 
-            toggleForm() {
+            toggleInsertForm() {
+                this.showSuccessResult = false;
+                this.showFailureResult = false;
                 this.showInputForm = !this.showInputForm;
+                if (this.showSearchForm) {
+                    this.showSearchForm = !this.showSearchForm;
+                }
+
+            },
+            toggleSearchForm() {
+                this.showSuccessResult = false;
+                this.showFailureResult = false;
+                this.showSearchForm = !this.showSearchForm;
+                if (this.showInputForm) {
+                    this.showInputForm = !this.showInputForm;
+                }
             },
 
-            formSubmitAction() {
+            insertFormSubmitAction() {
                 if (this.insertedValue > 0) {
+
                     this.appendIntoLinkedList(this.insertedValue);
-                    this.createArrow((this.xAxis - this.circleRadius * 20) + 70);
-                    this.createCircle(this.insertedValue);
                     this.showInputForm = false;
+                    this.insertedValue = null;
+                } else {
+                    console.error("You've added negative number");
+                }
+            },
+
+            searchFormSubmitAction() {
+                if (this.insertedValue > 0) {
+
+                    this.appendIntoLinkedList(this.insertedValue);
+                    this.showInputForm = false;
+                    this.insertedValue = null;
                 } else {
                     console.error("You've added negative number");
                 }
@@ -117,13 +161,15 @@
                     .attr('dy', '.4em') // Vertical alignment adjustment
                     .attr('text-anchor', 'middle') // Horizontal alignment
                     .text(num);
-                if(createArrow){
-                    this.createArrow(this.xAxis+70);
+                if (createArrow) {
+                    this.createArrow(this.xAxis + 70);
                 }
                 this.elements.push({circle: circle, text: text});
 
                 this.xAxis += this.circleRadius * 20;
 
+                return circle;
+
                 //     this.circleContainer.append('circle')
                 //         .attr('cx', 90)
                 //         .attr('cy', 100)
@@ -133,7 +179,7 @@
                 //
             },
 
-            createArrow(arrowX){
+            createArrow(arrowX) {
                 const arrowLength = 20;
                 const arrowY = 100;
                 // Line 1: Horizontal line
@@ -166,32 +212,88 @@
 
             appendIntoLinkedList(num, pos) {
                 if (!pos) {
-                    this.linkedList.append(num);
+                    const ele = this.createCircle(num);
+                    this.createArrow((this.xAxis - this.circleRadius * 20) + 70);
+                    this.linkedList.append(num, ele);
+                }
+            },
+
+            async searchIntoLinkedList() {
+                this.showSuccessResult = false;
+                this.showFailureResult = false;
+                if (this.targetValue > 0) {
+                    this.showSearchForm = false;
+                    let current = this.linkedList.head;
+                    let found;
+                    let pos = 1;
+                    while (current) {
+                        found = current.data == this.targetValue;
+                        current.element.transition()
+                            .duration(1000).attr('fill', "pink");
+                        await new Promise(resolve => setTimeout(resolve, 1000));
+                        if (found) {
+                            current.element.transition()
+                                .duration(1000).attr('fill', "green");
+                            break;
+                        }
+                        current = current.next;
+                        pos++;
+                    }
+                    if (found) {
+                        this.result = pos;
+                        this.showSuccessResult = true;
+                        console.log("target found");
+                    } else {
+                        this.showFailureResult = true;
+                    }
+                    this.targetValue = null;
                 }
             },
 
-            generateLinkedList() {
-                let current = this.linkedList.head;
-                while (current) {
-                    this.createCircle(current.data, current.next);
-                    current = current.next;
+            generateLinkedList(nums) {
+                for (const n of nums) {
+                    this.appendIntoLinkedList(n);
                 }
             }
         },
         mounted() {
             this.createContainer();
             this.linkedList = new LinkedList();
-            this.linkedList.append(1);
-            this.linkedList.append(2);
-            this.linkedList.append(3);
-            this.linkedList.append(5);
-            this.linkedList.append(7);
-            this.generateLinkedList();
-
+            this.generateLinkedList([1, 2, 3])
         },
     }
 </script>
 
 <style scoped>
+    .success-message {
+        background-color: #4caf50;
+        color: white;
+        padding: 10px;
+        border-radius: 5px;
+        margin-top: 10px;
+    }
+
+    .fail-message {
+        background-color: #af3e2e;
+        color: white;
+        padding: 10px;
+        border-radius: 5px;
+        margin-top: 10px;
+    }
 
+    button {
+        background-color: #3c3f41;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        margin: 5px;
+        border-radius: 5px;
+        cursor: pointer;
+    }
+
+    input {
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+    }
 </style>
\ No newline at end of file

From 15c0bac0479b403dd28ae1b1720734982432961a Mon Sep 17 00:00:00 2001
From: Bappy <http.bappy@gmail.com>
Date: Thu, 10 Aug 2023 20:05:03 +0600
Subject: [PATCH 04/10] AV-07: linked-list search refined

---
 src/algorithms/linked-list/Linked-List.vue | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue
index 6fe0c85..50f2fb5 100644
--- a/src/algorithms/linked-list/Linked-List.vue
+++ b/src/algorithms/linked-list/Linked-List.vue
@@ -183,7 +183,7 @@
                 const arrowLength = 20;
                 const arrowY = 100;
                 // Line 1: Horizontal line
-                this.circleContainer.append('line')
+                const line1 = this.circleContainer.append('line')
                     .attr('x1', arrowX - arrowLength - 20)
                     .attr('y1', arrowY)
                     .attr('x2', arrowX)
@@ -192,7 +192,7 @@
                     .attr('stroke-width', 2);
 
                 // Line 2: Diagonal line (left)
-                this.circleContainer.append('line')
+                const line2 = this.circleContainer.append('line')
                     .attr('x1', arrowX - 10)
                     .attr('y1', arrowY - 5)
                     .attr('x2', arrowX - arrowLength + 20)
@@ -201,20 +201,22 @@
                     .attr('stroke-width', 2);
 
                 // Line 3: Diagonal line (right)
-                this.circleContainer.append('line')
+                const line3 = this.circleContainer.append('line')
                     .attr('x1', arrowX - 10)
                     .attr('y1', arrowY + 5)
                     .attr('x2', arrowX - arrowLength + 20)
                     .attr('y2', arrowY)
                     .attr('stroke', 'black')
                     .attr('stroke-width', 2);
+
+                return [line1, line2, line3];
             },
 
             appendIntoLinkedList(num, pos) {
                 if (!pos) {
-                    const ele = this.createCircle(num);
-                    this.createArrow((this.xAxis - this.circleRadius * 20) + 70);
-                    this.linkedList.append(num, ele);
+                    const circle = this.createCircle(num);
+                    const line = this.createArrow((this.xAxis - this.circleRadius * 20) + 70);
+                    this.linkedList.append(num, {circle: circle, lines: line});
                 }
             },
 
@@ -228,11 +230,15 @@
                     let pos = 1;
                     while (current) {
                         found = current.data == this.targetValue;
-                        current.element.transition()
+                        current.element.circle.transition()
                             .duration(1000).attr('fill', "pink");
+                        await new Promise(resolve => setTimeout(resolve, 1200));
+                        for(const line of current.element.lines){
+                            line.transition().duration(300).attr('stroke', "pink");
+                        }
                         await new Promise(resolve => setTimeout(resolve, 1000));
                         if (found) {
-                            current.element.transition()
+                            current.element.circle.transition()
                                 .duration(1000).attr('fill', "green");
                             break;
                         }

From fba09a26e003fa5edfcacdfcf8d00cb3515fd173 Mon Sep 17 00:00:00 2001
From: Bappy <http.bappy@gmail.com>
Date: Sun, 20 Aug 2023 01:37:28 +0600
Subject: [PATCH 05/10] AV-07: updated linked list arrow design and animation

---
 src/algorithms/linked-list/Linked-List.vue | 29 ++++++++++++++--------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue
index 50f2fb5..a9dba7f 100644
--- a/src/algorithms/linked-list/Linked-List.vue
+++ b/src/algorithms/linked-list/Linked-List.vue
@@ -3,7 +3,7 @@
         <h1>Linked List</h1>
         <div ref="circleContainer"></div>
         <div v-if="showSuccessResult" class="success-message">
-            Search result found at: "{{ result }}"
+            Searched item {{ targetValue }} found at: "{{ result }}"
         </div>
 
         <div v-if="showFailureResult" class="fail-message">
@@ -28,7 +28,7 @@
         constructor(data) {
             this.data = data;
             this.next = null;
-            this.element = null;
+            this.element = {};
         }
     }
 
@@ -39,8 +39,9 @@
 
         append(data, element) {
             const newNode = new Node(data);
-            newNode.element = element;
+            newNode.element.circle = element.circle;
             if (!this.head) {
+                newNode.element.lines = element.lines;
                 this.head = newNode;
                 return;
             }
@@ -49,6 +50,7 @@
             while (current.next) {
                 current = current.next;
             }
+            current.element.lines = element.lines;
             current.next = newNode;
         }
 
@@ -215,7 +217,11 @@
             appendIntoLinkedList(num, pos) {
                 if (!pos) {
                     const circle = this.createCircle(num);
-                    const line = this.createArrow((this.xAxis - this.circleRadius * 20) + 70);
+                    let line;
+                    if(this.linkedList.head){
+                        line = this.createArrow((this.xAxis - this.circleRadius * 40) + 70);
+                    }
+
                     this.linkedList.append(num, {circle: circle, lines: line});
                 }
             },
@@ -231,17 +237,20 @@
                     while (current) {
                         found = current.data == this.targetValue;
                         current.element.circle.transition()
-                            .duration(1000).attr('fill', "pink");
-                        await new Promise(resolve => setTimeout(resolve, 1200));
-                        for(const line of current.element.lines){
-                            line.transition().duration(300).attr('stroke', "pink");
-                        }
-                        await new Promise(resolve => setTimeout(resolve, 1000));
+                            .duration(500).attr('fill', "pink");
+                        await new Promise(resolve => setTimeout(resolve, 600));
                         if (found) {
                             current.element.circle.transition()
                                 .duration(1000).attr('fill', "green");
                             break;
                         }
+                        await new Promise(resolve => setTimeout(resolve, 600));
+                        if(current.next){
+                            for (const line of current.element.lines) {
+                                line.transition().duration(300).attr('stroke', "pink");
+                            }
+                            await new Promise(resolve => setTimeout(resolve, 300));
+                        }
                         current = current.next;
                         pos++;
                     }

From 0b2b8470b9870f49f5f7aafa0fec984ae386aea6 Mon Sep 17 00:00:00 2001
From: Bappy <http.bappy@gmail.com>
Date: Sun, 20 Aug 2023 16:30:17 +0600
Subject: [PATCH 06/10] AV-07: initially added delete operation to linked list

---
 src/algorithms/linked-list/Linked-List.vue | 90 +++++++++++++++++-----
 1 file changed, 69 insertions(+), 21 deletions(-)

diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue
index a9dba7f..8c4b28b 100644
--- a/src/algorithms/linked-list/Linked-List.vue
+++ b/src/algorithms/linked-list/Linked-List.vue
@@ -18,8 +18,13 @@
             <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
             <button type="submit">Search</button>
         </form>
+        <form v-if="showDeleteForm" @submit.prevent="removeItemFromLinkedList">
+            <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
+            <button type="submit">Delete</button>
+        </form>
         <button @click="toggleSearchForm">Search</button>
         <button @click="toggleInsertForm">Insert</button>
+        <button @click="toggleDeleteForm">Delete Node</button>
     </div>
 </template>
 
@@ -39,7 +44,8 @@
 
         append(data, element) {
             const newNode = new Node(data);
-            newNode.element.circle = element.circle;
+            newNode.element.circle = element.circle.circle;
+            newNode.element.text = element.circle.text;
             if (!this.head) {
                 newNode.element.lines = element.lines;
                 this.head = newNode;
@@ -81,6 +87,7 @@
                 circleContainer: undefined,
                 showInputForm: false,
                 showSearchForm: false,
+                showDeleteForm: false,
                 targetValue: null,
                 insertedValue: null,
             }
@@ -100,39 +107,43 @@
                         .duration(1000) // Animation duration in milliseconds
                         .attr('fill', 'rgba(0, 255, 0, 0.8)');
                 }
-
             },
 
             toggleInsertForm() {
                 this.showSuccessResult = false;
                 this.showFailureResult = false;
                 this.showInputForm = !this.showInputForm;
-                if (this.showSearchForm) {
-                    this.showSearchForm = !this.showSearchForm;
-                }
-
+                this.hideDeleteForm();
+                this.hideSearchForm();
             },
+
             toggleSearchForm() {
                 this.showSuccessResult = false;
                 this.showFailureResult = false;
                 this.showSearchForm = !this.showSearchForm;
-                if (this.showInputForm) {
-                    this.showInputForm = !this.showInputForm;
-                }
+                this.hideDeleteForm();
+                this.hideInsertForm();
             },
 
-            insertFormSubmitAction() {
-                if (this.insertedValue > 0) {
+            toggleDeleteForm() {
+                this.showSuccessResult = false;
+                this.showFailureResult = false;
+                this.hideInsertForm();
+                this.hideSearchForm();
+                this.showDeleteForm = !this.showDeleteForm;
+            },
 
-                    this.appendIntoLinkedList(this.insertedValue);
-                    this.showInputForm = false;
-                    this.insertedValue = null;
-                } else {
-                    console.error("You've added negative number");
-                }
+            hideDeleteForm(){
+                this.showDeleteForm = false;
+            },
+            hideInsertForm(){
+                this.showInputForm = false;
+            },
+            hideSearchForm(){
+                this.showSearchForm = false;
             },
 
-            searchFormSubmitAction() {
+            insertFormSubmitAction() {
                 if (this.insertedValue > 0) {
 
                     this.appendIntoLinkedList(this.insertedValue);
@@ -170,7 +181,7 @@
 
                 this.xAxis += this.circleRadius * 20;
 
-                return circle;
+                return {circle: circle, text: text};
 
                 //     this.circleContainer.append('circle')
                 //         .attr('cx', 90)
@@ -218,7 +229,7 @@
                 if (!pos) {
                     const circle = this.createCircle(num);
                     let line;
-                    if(this.linkedList.head){
+                    if (this.linkedList.head) {
                         line = this.createArrow((this.xAxis - this.circleRadius * 40) + 70);
                     }
 
@@ -226,6 +237,43 @@
                 }
             },
 
+            removeItemFromLinkedList() {
+                let current = this.linkedList.head;
+
+                while (current) {
+                    if (current.data == this.targetValue) {
+                        console.log("Item found to delete");
+                        const currentCircleXAxis = parseFloat( current.element.circle.attr('cx'));
+                        const currentTextX = parseFloat( current.element.text.attr('x'));
+                        current.element.circle.remove();
+                        current.element.text.remove();
+
+                        for(const line of current.element.lines){
+                            line.remove();
+                        }
+                        current.next?.element.circle.transition()
+                            .duration(1000)
+                            .attr('cx', currentCircleXAxis);
+                        current.next?.element.text.transition()
+                            .duration(1000)
+                            .attr('x', currentTextX);
+                        current.data = current.next.data;
+                        current.element = current.next.element;
+                        if (current.next) {
+                            current.next = current.next.next;
+                        } else {
+                            current.next = null;
+                        }
+                        console.log()
+
+
+                        break;
+                    }
+                    current = current.next;
+                }
+                this.targetValue = null;
+            },
+
             async searchIntoLinkedList() {
                 this.showSuccessResult = false;
                 this.showFailureResult = false;
@@ -245,7 +293,7 @@
                             break;
                         }
                         await new Promise(resolve => setTimeout(resolve, 600));
-                        if(current.next){
+                        if (current.next) {
                             for (const line of current.element.lines) {
                                 line.transition().duration(300).attr('stroke', "pink");
                             }

From 63465299c017aec46fb61f025b62882212a28a09 Mon Sep 17 00:00:00 2001
From: Bappy <http.bappy@gmail.com>
Date: Sun, 20 Aug 2023 16:30:17 +0600
Subject: [PATCH 07/10] AV-07: initially added delete operation to linked list

---
 src/algorithms/linked-list/Linked-List.vue | 90 +++++++++++++++++-----
 1 file changed, 69 insertions(+), 21 deletions(-)

diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue
index a9dba7f..8c4b28b 100644
--- a/src/algorithms/linked-list/Linked-List.vue
+++ b/src/algorithms/linked-list/Linked-List.vue
@@ -18,8 +18,13 @@
             <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
             <button type="submit">Search</button>
         </form>
+        <form v-if="showDeleteForm" @submit.prevent="removeItemFromLinkedList">
+            <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
+            <button type="submit">Delete</button>
+        </form>
         <button @click="toggleSearchForm">Search</button>
         <button @click="toggleInsertForm">Insert</button>
+        <button @click="toggleDeleteForm">Delete Node</button>
     </div>
 </template>
 
@@ -39,7 +44,8 @@
 
         append(data, element) {
             const newNode = new Node(data);
-            newNode.element.circle = element.circle;
+            newNode.element.circle = element.circle.circle;
+            newNode.element.text = element.circle.text;
             if (!this.head) {
                 newNode.element.lines = element.lines;
                 this.head = newNode;
@@ -81,6 +87,7 @@
                 circleContainer: undefined,
                 showInputForm: false,
                 showSearchForm: false,
+                showDeleteForm: false,
                 targetValue: null,
                 insertedValue: null,
             }
@@ -100,39 +107,43 @@
                         .duration(1000) // Animation duration in milliseconds
                         .attr('fill', 'rgba(0, 255, 0, 0.8)');
                 }
-
             },
 
             toggleInsertForm() {
                 this.showSuccessResult = false;
                 this.showFailureResult = false;
                 this.showInputForm = !this.showInputForm;
-                if (this.showSearchForm) {
-                    this.showSearchForm = !this.showSearchForm;
-                }
-
+                this.hideDeleteForm();
+                this.hideSearchForm();
             },
+
             toggleSearchForm() {
                 this.showSuccessResult = false;
                 this.showFailureResult = false;
                 this.showSearchForm = !this.showSearchForm;
-                if (this.showInputForm) {
-                    this.showInputForm = !this.showInputForm;
-                }
+                this.hideDeleteForm();
+                this.hideInsertForm();
             },
 
-            insertFormSubmitAction() {
-                if (this.insertedValue > 0) {
+            toggleDeleteForm() {
+                this.showSuccessResult = false;
+                this.showFailureResult = false;
+                this.hideInsertForm();
+                this.hideSearchForm();
+                this.showDeleteForm = !this.showDeleteForm;
+            },
 
-                    this.appendIntoLinkedList(this.insertedValue);
-                    this.showInputForm = false;
-                    this.insertedValue = null;
-                } else {
-                    console.error("You've added negative number");
-                }
+            hideDeleteForm(){
+                this.showDeleteForm = false;
+            },
+            hideInsertForm(){
+                this.showInputForm = false;
+            },
+            hideSearchForm(){
+                this.showSearchForm = false;
             },
 
-            searchFormSubmitAction() {
+            insertFormSubmitAction() {
                 if (this.insertedValue > 0) {
 
                     this.appendIntoLinkedList(this.insertedValue);
@@ -170,7 +181,7 @@
 
                 this.xAxis += this.circleRadius * 20;
 
-                return circle;
+                return {circle: circle, text: text};
 
                 //     this.circleContainer.append('circle')
                 //         .attr('cx', 90)
@@ -218,7 +229,7 @@
                 if (!pos) {
                     const circle = this.createCircle(num);
                     let line;
-                    if(this.linkedList.head){
+                    if (this.linkedList.head) {
                         line = this.createArrow((this.xAxis - this.circleRadius * 40) + 70);
                     }
 
@@ -226,6 +237,43 @@
                 }
             },
 
+            removeItemFromLinkedList() {
+                let current = this.linkedList.head;
+
+                while (current) {
+                    if (current.data == this.targetValue) {
+                        console.log("Item found to delete");
+                        const currentCircleXAxis = parseFloat( current.element.circle.attr('cx'));
+                        const currentTextX = parseFloat( current.element.text.attr('x'));
+                        current.element.circle.remove();
+                        current.element.text.remove();
+
+                        for(const line of current.element.lines){
+                            line.remove();
+                        }
+                        current.next?.element.circle.transition()
+                            .duration(1000)
+                            .attr('cx', currentCircleXAxis);
+                        current.next?.element.text.transition()
+                            .duration(1000)
+                            .attr('x', currentTextX);
+                        current.data = current.next.data;
+                        current.element = current.next.element;
+                        if (current.next) {
+                            current.next = current.next.next;
+                        } else {
+                            current.next = null;
+                        }
+                        console.log()
+
+
+                        break;
+                    }
+                    current = current.next;
+                }
+                this.targetValue = null;
+            },
+
             async searchIntoLinkedList() {
                 this.showSuccessResult = false;
                 this.showFailureResult = false;
@@ -245,7 +293,7 @@
                             break;
                         }
                         await new Promise(resolve => setTimeout(resolve, 600));
-                        if(current.next){
+                        if (current.next) {
                             for (const line of current.element.lines) {
                                 line.transition().duration(300).attr('stroke', "pink");
                             }

From 6607fb56b14b29300da94cfcbfcc5ed1f358ee4f Mon Sep 17 00:00:00 2001
From: Bappy <http.bappy@gmail.com>
Date: Sun, 10 Sep 2023 00:34:25 +0600
Subject: [PATCH 08/10] AV-07: Linked list updated with delete node with arrow

---
 src/algorithms/linked-list/Linked-List.vue | 724 +++++++++++----------
 1 file changed, 368 insertions(+), 356 deletions(-)

diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue
index 669cf1a..a10f78c 100644
--- a/src/algorithms/linked-list/Linked-List.vue
+++ b/src/algorithms/linked-list/Linked-List.vue
@@ -1,376 +1,388 @@
 <template>
-    <div>
-        <h1>Linked List</h1>
-        <div ref="circleContainer"></div>
-        <div v-if="showSuccessResult" class="success-message">
-            Searched item {{ targetValue }} found at: "{{ result }}"
-        </div>
-
-        <div v-if="showFailureResult" class="fail-message">
-            Searched item not found!
-        </div>
-        <hr>
-        <form v-if="showInputForm" @submit.prevent="insertFormSubmitAction">
-            <input v-model="insertedValue" type="number" name="Number" placeholder="Enter Number">
-            <button type="submit">Add</button>
-        </form>
-        <form v-if="showSearchForm" @submit.prevent="searchIntoLinkedList">
-            <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
-            <button type="submit">Search</button>
-        </form>
-        <form v-if="showDeleteForm" @submit.prevent="removeItemFromLinkedList">
-            <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
-            <button type="submit">Delete</button>
-        </form>
-        <button @click="toggleSearchForm">Search</button>
-        <button @click="toggleInsertForm">Insert</button>
-        <button @click="toggleDeleteForm">Delete Node</button>
+  <div>
+    <h1>Linked List</h1>
+    <div ref="circleContainer"></div>
+    <div v-if="showSuccessResult" class="success-message">
+      Searched item {{ targetValue }} found at: "{{ result }}"
     </div>
+
+    <div v-if="showFailureResult" class="fail-message">
+      Searched item not found!
+    </div>
+    <hr>
+    <form v-if="showInputForm" @submit.prevent="insertFormSubmitAction">
+      <input v-model="insertedValue" type="number" name="Number" placeholder="Enter Number">
+      <button type="submit">Add</button>
+    </form>
+    <form v-if="showSearchForm" @submit.prevent="searchIntoLinkedList">
+      <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
+      <button type="submit">Search</button>
+    </form>
+    <form v-if="showDeleteForm" @submit.prevent="removeItemFromLinkedList">
+      <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
+      <button type="submit">Delete</button>
+    </form>
+    <button @click="toggleSearchForm">Search</button>
+    <button @click="toggleInsertForm">Insert</button>
+    <button @click="toggleDeleteForm">Delete Node</button>
+  </div>
 </template>
 
 <script>
-    class Node {
-        constructor(data) {
-            this.data = data;
-            this.next = null;
-            this.element = {};
-        }
+class Node {
+  constructor(data) {
+    this.data = data;
+    this.next = null;
+    this.element = {};
+  }
+}
+
+class LinkedList {
+  constructor() {
+    this.head = null;
+  }
+
+  append(data, element) {
+    const newNode = new Node(data);
+    newNode.element.circle = element.circle.circle;
+    newNode.element.text = element.circle.text;
+    if (!this.head) {
+      newNode.element.arrow = element.arrow;
+      this.head = newNode;
+      return;
     }
 
-    class LinkedList {
-        constructor() {
-            this.head = null;
+    let current = this.head;
+    while (current.next) {
+      current = current.next;
+    }
+    current.element.arrow = element.arrow;
+    current.next = newNode;
+  }
+
+  display() {
+    let current = this.head;
+    while (current) {
+      console.log(current.data);
+      current = current.next;
+    }
+  }
+}
+
+
+import * as d3 from 'd3';
+
+export default {
+  name: "Linked-List",
+  data() {
+    return {
+      linkedList: undefined,
+      result: "",
+      showSuccessResult: false,
+      showFailureResult: false,
+      xAxis: 20,
+      arrowXAxis: 0,
+      circleRadius: 5,
+      elements: [],
+      circleContainer: undefined,
+      showInputForm: false,
+      showSearchForm: false,
+      showDeleteForm: false,
+      targetValue: null,
+      insertedValue: null,
+    }
+  },
+
+  methods: {
+    createContainer() {
+      this.circleContainer = d3.select(this.$refs.circleContainer)
+          .append('svg')
+          .attr('width', 500)
+          .attr('height', 200);
+    },
+
+    change() {
+      for (const element of this.elements) {
+        element.circle.transition()
+            .duration(1000) // Animation duration in milliseconds
+            .attr('fill', 'rgba(0, 255, 0, 0.8)');
+      }
+    },
+
+    toggleInsertForm() {
+      this.showSuccessResult = false;
+      this.showFailureResult = false;
+      this.showInputForm = !this.showInputForm;
+      this.hideDeleteForm();
+      this.hideSearchForm();
+    },
+
+    toggleSearchForm() {
+      this.showSuccessResult = false;
+      this.showFailureResult = false;
+      this.showSearchForm = !this.showSearchForm;
+      this.hideDeleteForm();
+      this.hideInsertForm();
+    },
+
+    toggleDeleteForm() {
+      this.showSuccessResult = false;
+      this.showFailureResult = false;
+      this.hideInsertForm();
+      this.hideSearchForm();
+      this.showDeleteForm = !this.showDeleteForm;
+    },
+
+    hideDeleteForm() {
+      this.showDeleteForm = false;
+    },
+    hideInsertForm() {
+      this.showInputForm = false;
+    },
+    hideSearchForm() {
+      this.showSearchForm = false;
+    },
+
+    insertFormSubmitAction() {
+      if (this.insertedValue > 0) {
+
+        this.appendIntoLinkedList(this.insertedValue);
+        this.showInputForm = false;
+        this.insertedValue = null;
+      } else {
+        console.error("You've added negative number");
+      }
+    },
+
+    createCircle(num, createArrow) {
+
+      const finalRadius = 20;
+
+      const circle = this.circleContainer.append('circle')
+          .attr('cx', this.xAxis)
+          .attr('cy', 100)
+          .attr('r', this.circleRadius)
+          .attr('fill', 'rgba(0, 0, 255, 0.5)')
+          .attr('opacity', .5);
+      circle.transition()
+          .duration(1000) // Animation duration in milliseconds
+          .attr('r', finalRadius);
+
+      const text = this.circleContainer.append('text')
+          .attr('x', this.xAxis)
+          .attr('y', 100)
+          .attr('dy', '.4em') // Vertical alignment adjustment
+          .attr('text-anchor', 'middle') // Horizontal alignment
+          .text(num);
+      if (createArrow) {
+        this.createArrow(this.xAxis + 70);
+      }
+      this.elements.push({circle: circle, text: text});
+
+      this.xAxis += this.circleRadius * 20;
+
+      return {circle: circle, text: text};
+
+      //     this.circleContainer.append('circle')
+      //         .attr('cx', 90)
+      //         .attr('cy', 100)
+      //         .attr('r', finalRadius)
+      //         .attr('fill', 'red');
+      //
+      //
+    },
+
+    createArrow(groupX) {
+      const arrowLength = 20;
+      const arrowY = 100;
+
+      const linesGroup = this.circleContainer.append('g')
+          .attr('transform', `translate(${groupX}, 0)`); // Set the group's x position
+
+      linesGroup.append('line')
+          .attr('x1', -arrowLength - 20) // Relative to the group's x position
+          .attr('y1', arrowY)
+          .attr('x2', 0) // Relative to the group's x position
+          .attr('y2', arrowY)
+          .attr('stroke', 'black')
+          .attr('stroke-width', 2);
+
+      linesGroup.append('line')
+          .attr('x1', -10) // Relative to the group's x position
+          .attr('y1', arrowY - 5)
+          .attr('x2', -arrowLength + 20) // Relative to the group's x position
+          .attr('y2', arrowY)
+          .attr('stroke', 'black')
+          .attr('stroke-width', 2);
+
+      linesGroup.append('line')
+          .attr('x1', -10) // Relative to the group's x position
+          .attr('y1', arrowY + 5)
+          .attr('x2', -arrowLength + 20) // Relative to the group's x position
+          .attr('y2', arrowY)
+          .attr('stroke', 'black')
+          .attr('stroke-width', 2);
+
+      return linesGroup;
+    },
+
+    appendIntoLinkedList(num, pos) {
+      if (!pos) {
+        const circle = this.createCircle(num);
+        let arrow;
+        if (this.linkedList.head) {
+          arrow = this.createArrow((this.xAxis - this.circleRadius * 40) + 70);
         }
 
-        append(data, element) {
-            const newNode = new Node(data);
-            newNode.element.circle = element.circle.circle;
-            newNode.element.text = element.circle.text;
-            if (!this.head) {
-                newNode.element.lines = element.lines;
-                this.head = newNode;
-                return;
-            }
+        this.linkedList.append(num, {circle: circle, arrow: arrow});
+      }
+    },
 
-            let current = this.head;
-            while (current.next) {
-                current = current.next;
-            }
-            current.element.lines = element.lines;
-            current.next = newNode;
-        }
 
-        display() {
-            let current = this.head;
-            while (current) {
-                console.log(current.data);
-                current = current.next;
-            }
+    deleteNode(node, cx, x, arrowX) {
+      if (node) {
+        const currentCircleXAxis = parseFloat(node.element.circle.attr('cx'));
+        const currentTextX = parseFloat(node.element.text.attr('x'));
+        let nextArrow;
+        if (node.element.arrow) {
+          nextArrow = parseFloat(node.element.arrow.attr('transform').split('(')[1].split(',')[0]);
         }
-    }
-
 
-    import * as d3 from 'd3';
-
-    export default {
-        name: "Linked-List",
-        data() {
-            return {
-                linkedList: undefined,
-                result: "",
-                showSuccessResult: false,
-                showFailureResult: false,
-                xAxis: 20,
-                arrowXAxis: 0,
-                circleRadius: 5,
-                elements: [],
-                circleContainer: undefined,
-                showInputForm: false,
-                showSearchForm: false,
-                showDeleteForm: false,
-                targetValue: null,
-                insertedValue: null,
+        console.log(cx, currentCircleXAxis, x, currentTextX);
+        node.element.circle.transition()
+            .duration(1000)
+            .attr('cx', cx);
+
+        node.element.text.transition()
+            .duration(1000)
+            .attr('x', x);
+        if (node.element.arrow) {
+          console.log("arrowx:", nextArrow, arrowX);
+          node.element.arrow.attr('transform', `translate(${arrowX}, 0)`);
+          console.log(parseFloat(node.element.arrow.attr('transform').replace(/[^\d.-]/g, '')));
+        }
+        this.deleteNode(node.next, currentCircleXAxis, currentTextX, nextArrow)
+      }
+
+    },
+
+    removeItemFromLinkedList() {
+      let current = this.linkedList.head;
+      let prev = current;
+      while (current) {
+
+        if (current.data === this.targetValue) {
+          const currentCircleXAxis = parseFloat(current.element.circle.attr('cx'));
+          const currentTextX = parseFloat(current.element.text.attr('x'));
+          let currentArrowX;
+          if (current.element.arrow) {
+            currentArrowX = parseFloat(current.element.arrow.attr('transform').replace(/[^\d.-]/g, '')) / 10;
+          } else if (prev) {
+            prev.element.arrow.remove();
+          }
+          current.element.circle.remove();
+          current.element.text.remove();
+          if (current.next) {
+            current.data = current.next.data;
+
+            if (current.element.arrow) {
+              current.element.arrow.remove()
             }
-        },
-
-        methods: {
-            createContainer() {
-                this.circleContainer = d3.select(this.$refs.circleContainer)
-                    .append('svg')
-                    .attr('width', 500)
-                    .attr('height', 200);
-            },
-
-            change() {
-                for (const element of this.elements) {
-                    element.circle.transition()
-                        .duration(1000) // Animation duration in milliseconds
-                        .attr('fill', 'rgba(0, 255, 0, 0.8)');
-                }
-            },
-
-            toggleInsertForm() {
-                this.showSuccessResult = false;
-                this.showFailureResult = false;
-                this.showInputForm = !this.showInputForm;
-                this.hideDeleteForm();
-                this.hideSearchForm();
-            },
-
-            toggleSearchForm() {
-                this.showSuccessResult = false;
-                this.showFailureResult = false;
-                this.showSearchForm = !this.showSearchForm;
-                this.hideDeleteForm();
-                this.hideInsertForm();
-            },
-
-            toggleDeleteForm() {
-                this.showSuccessResult = false;
-                this.showFailureResult = false;
-                this.hideInsertForm();
-                this.hideSearchForm();
-                this.showDeleteForm = !this.showDeleteForm;
-            },
-
-            hideDeleteForm(){
-                this.showDeleteForm = false;
-            },
-            hideInsertForm(){
-                this.showInputForm = false;
-            },
-            hideSearchForm(){
-                this.showSearchForm = false;
-            },
-
-            insertFormSubmitAction() {
-                if (this.insertedValue > 0) {
-
-                    this.appendIntoLinkedList(this.insertedValue);
-                    this.showInputForm = false;
-                    this.insertedValue = null;
-                } else {
-                    console.error("You've added negative number");
-                }
-            },
-
-            createCircle(num, createArrow) {
-
-                const finalRadius = 20;
-
-                const circle = this.circleContainer.append('circle')
-                    .attr('cx', this.xAxis)
-                    .attr('cy', 100)
-                    .attr('r', this.circleRadius)
-                    .attr('fill', 'rgba(0, 0, 255, 0.5)')
-                    .attr('opacity', .5);
-                circle.transition()
-                    .duration(1000) // Animation duration in milliseconds
-                    .attr('r', finalRadius);
-
-                const text = this.circleContainer.append('text')
-                    .attr('x', this.xAxis)
-                    .attr('y', 100)
-                    .attr('dy', '.4em') // Vertical alignment adjustment
-                    .attr('text-anchor', 'middle') // Horizontal alignment
-                    .text(num);
-                if (createArrow) {
-                    this.createArrow(this.xAxis + 70);
-                }
-                this.elements.push({circle: circle, text: text});
-
-                this.xAxis += this.circleRadius * 20;
-
-                return {circle: circle, text: text};
-
-                //     this.circleContainer.append('circle')
-                //         .attr('cx', 90)
-                //         .attr('cy', 100)
-                //         .attr('r', finalRadius)
-                //         .attr('fill', 'red');
-                //
-                //
-            },
-
-            createArrow(arrowX) {
-                const arrowLength = 20;
-                const arrowY = 100;
-                // Line 1: Horizontal line
-                const line1 = this.circleContainer.append('line')
-                    .attr('x1', arrowX - arrowLength - 20)
-                    .attr('y1', arrowY)
-                    .attr('x2', arrowX)
-                    .attr('y2', arrowY)
-                    .attr('stroke', 'black')
-                    .attr('stroke-width', 2);
-
-                // Line 2: Diagonal line (left)
-                const line2 = this.circleContainer.append('line')
-                    .attr('x1', arrowX - 10)
-                    .attr('y1', arrowY - 5)
-                    .attr('x2', arrowX - arrowLength + 20)
-                    .attr('y2', arrowY)
-                    .attr('stroke', 'black')
-                    .attr('stroke-width', 2);
-
-                // Line 3: Diagonal line (right)
-                const line3 = this.circleContainer.append('line')
-                    .attr('x1', arrowX - 10)
-                    .attr('y1', arrowY + 5)
-                    .attr('x2', arrowX - arrowLength + 20)
-                    .attr('y2', arrowY)
-                    .attr('stroke', 'black')
-                    .attr('stroke-width', 2);
-
-                return [line1, line2, line3];
-            },
-
-            appendIntoLinkedList(num, pos) {
-                if (!pos) {
-                    const circle = this.createCircle(num);
-                    let line;
-                    if (this.linkedList.head) {
-                        line = this.createArrow((this.xAxis - this.circleRadius * 40) + 70);
-                    }
-
-                    this.linkedList.append(num, {circle: circle, lines: line});
-                }
-            },
-
-
-            deleteNode(node, cx, x){
-                if(node){
-                    const currentCircleXAxis = parseFloat(node.element.circle.attr('cx'));
-                    const currentTextX = parseFloat(node.element.text.attr('x'));
-                    console.log(cx, currentCircleXAxis, x, currentTextX);
-                        node.element.circle.transition()
-                            .duration(1000)
-                            .attr('cx', cx);
-
-                        node.element.text.transition()
-                            .duration(1000)
-                            .attr('x', x);
-                        if(node.element.lines){
-                            for(const line of node.element.lines){
-                                line.attr('x1', currentTextX);
-                            }
-                        }
-                    this.deleteNode(node.next, currentCircleXAxis, currentTextX)
-                }
-
-                return;
-
-            },
-
-            removeItemFromLinkedList() {
-                let current = this.linkedList.head;
-
-                while (current) {
-                    if (current.data == this.targetValue) {
-                        const currentCircleXAxis = parseFloat(current.element.circle.attr('cx'));
-                        const currentTextX = parseFloat(current.element.text.attr('x'));
-                        console.log("Item found to delete");
-                        current.element.circle.remove();
-                        current.element.text.remove();
-                        if(current.next) {
-                            current.data = current.next.data;
-
-                            for (const line of current.element.lines) {
-                                line.remove();
-                            }
-                            current.element = current.next.element;
-                            this.deleteNode(current.next, currentCircleXAxis, currentTextX);
-                        }
-                        break;
-                    }
-                    current = current.next;
-                }
-                this.targetValue = null;
-            },
-
-            async searchIntoLinkedList() {
-                this.showSuccessResult = false;
-                this.showFailureResult = false;
-                if (this.targetValue > 0) {
-                    this.showSearchForm = false;
-                    let current = this.linkedList.head;
-                    let found;
-                    let pos = 1;
-                    while (current) {
-                        found = current.data == this.targetValue;
-                        current.element.circle.transition()
-                            .duration(500).attr('fill', "pink");
-                        await new Promise(resolve => setTimeout(resolve, 600));
-                        if (found) {
-                            current.element.circle.transition()
-                                .duration(1000).attr('fill', "green");
-                            break;
-                        }
-                        await new Promise(resolve => setTimeout(resolve, 600));
-                        if (current.next) {
-                            for (const line of current.element.lines) {
-                                line.transition().duration(300).attr('stroke', "pink");
-                            }
-                            await new Promise(resolve => setTimeout(resolve, 300));
-                        }
-                        current = current.next;
-                        pos++;
-                    }
-                    if (found) {
-                        this.result = pos;
-                        this.showSuccessResult = true;
-                        console.log("target found");
-                    } else {
-                        this.showFailureResult = true;
-                    }
-                    this.targetValue = null;
-                }
-            },
-
-            generateLinkedList(nums) {
-                for (const n of nums) {
-                    this.appendIntoLinkedList(n);
-                }
+            current.element = current.next.element;
+            this.deleteNode(current.next, currentCircleXAxis, currentTextX, currentArrowX);
+          }
+          this.xAxis -= this.circleRadius * 20;
+          break;
+        }
+        prev = current;
+        current = current.next;
+      }
+      this.targetValue = null;
+    },
+
+    async searchIntoLinkedList() {
+      this.showSuccessResult = false;
+      this.showFailureResult = false;
+      if (this.targetValue > 0) {
+        this.showSearchForm = false;
+        let current = this.linkedList.head;
+        let found;
+        let pos = 1;
+        while (current) {
+          found = current.data === this.targetValue;
+          current.element.circle.transition()
+              .duration(500).attr('fill', "pink");
+          await new Promise(resolve => setTimeout(resolve, 600));
+          if (found) {
+            current.element.circle.transition()
+                .duration(1000).attr('fill', "green");
+            break;
+          }
+          await new Promise(resolve => setTimeout(resolve, 600));
+          if (current.next) {
+            if (current.element.arrow) {
+              current.element.arrow.selectAll('line').transition().duration(300).attr('stroke', "pink");
             }
-        },
-        mounted() {
-            this.createContainer();
-            this.linkedList = new LinkedList();
-            this.generateLinkedList([1, 2, 3])
-        },
+            await new Promise(resolve => setTimeout(resolve, 300));
+          }
+          current = current.next;
+          pos++;
+        }
+        if (found) {
+          this.result = pos;
+          this.showSuccessResult = true;
+          console.log("target found");
+        } else {
+          this.showFailureResult = true;
+        }
+        this.targetValue = null;
+      }
+    },
+
+    generateLinkedList(nums) {
+      for (const n of nums) {
+        this.appendIntoLinkedList(n);
+      }
     }
+  },
+  mounted() {
+    this.createContainer();
+    this.linkedList = new LinkedList();
+    this.generateLinkedList([1, 2, 3])
+  },
+}
 </script>
 
 <style scoped>
-    .success-message {
-        background-color: #4caf50;
-        color: white;
-        padding: 10px;
-        border-radius: 5px;
-        margin-top: 10px;
-    }
-
-    .fail-message {
-        background-color: #af3e2e;
-        color: white;
-        padding: 10px;
-        border-radius: 5px;
-        margin-top: 10px;
-    }
-
-    button {
-        background-color: #3c3f41;
-        color: white;
-        border: none;
-        padding: 10px 20px;
-        margin: 5px;
-        border-radius: 5px;
-        cursor: pointer;
-    }
-
-    input {
-        padding: 10px;
-        border: 1px solid #ccc;
-        border-radius: 5px;
-    }
+.success-message {
+  background-color: #4caf50;
+  color: white;
+  padding: 10px;
+  border-radius: 5px;
+  margin-top: 10px;
+}
+
+.fail-message {
+  background-color: #af3e2e;
+  color: white;
+  padding: 10px;
+  border-radius: 5px;
+  margin-top: 10px;
+}
+
+button {
+  background-color: #3c3f41;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  margin: 5px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+input {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
 </style>
\ No newline at end of file

From d4dec20eaa02987be7314cfe246b92d22630ac58 Mon Sep 17 00:00:00 2001
From: Bappy <http.bappy@gmail.com>
Date: Sun, 10 Sep 2023 00:34:25 +0600
Subject: [PATCH 09/10] AV-07: Linked list updated with delete node with update
 of arrow position

---
 src/algorithms/linked-list/Linked-List.vue | 724 +++++++++++----------
 1 file changed, 368 insertions(+), 356 deletions(-)

diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue
index 669cf1a..a10f78c 100644
--- a/src/algorithms/linked-list/Linked-List.vue
+++ b/src/algorithms/linked-list/Linked-List.vue
@@ -1,376 +1,388 @@
 <template>
-    <div>
-        <h1>Linked List</h1>
-        <div ref="circleContainer"></div>
-        <div v-if="showSuccessResult" class="success-message">
-            Searched item {{ targetValue }} found at: "{{ result }}"
-        </div>
-
-        <div v-if="showFailureResult" class="fail-message">
-            Searched item not found!
-        </div>
-        <hr>
-        <form v-if="showInputForm" @submit.prevent="insertFormSubmitAction">
-            <input v-model="insertedValue" type="number" name="Number" placeholder="Enter Number">
-            <button type="submit">Add</button>
-        </form>
-        <form v-if="showSearchForm" @submit.prevent="searchIntoLinkedList">
-            <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
-            <button type="submit">Search</button>
-        </form>
-        <form v-if="showDeleteForm" @submit.prevent="removeItemFromLinkedList">
-            <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
-            <button type="submit">Delete</button>
-        </form>
-        <button @click="toggleSearchForm">Search</button>
-        <button @click="toggleInsertForm">Insert</button>
-        <button @click="toggleDeleteForm">Delete Node</button>
+  <div>
+    <h1>Linked List</h1>
+    <div ref="circleContainer"></div>
+    <div v-if="showSuccessResult" class="success-message">
+      Searched item {{ targetValue }} found at: "{{ result }}"
     </div>
+
+    <div v-if="showFailureResult" class="fail-message">
+      Searched item not found!
+    </div>
+    <hr>
+    <form v-if="showInputForm" @submit.prevent="insertFormSubmitAction">
+      <input v-model="insertedValue" type="number" name="Number" placeholder="Enter Number">
+      <button type="submit">Add</button>
+    </form>
+    <form v-if="showSearchForm" @submit.prevent="searchIntoLinkedList">
+      <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
+      <button type="submit">Search</button>
+    </form>
+    <form v-if="showDeleteForm" @submit.prevent="removeItemFromLinkedList">
+      <input v-model="targetValue" type="number" name="Number" placeholder="Enter Number">
+      <button type="submit">Delete</button>
+    </form>
+    <button @click="toggleSearchForm">Search</button>
+    <button @click="toggleInsertForm">Insert</button>
+    <button @click="toggleDeleteForm">Delete Node</button>
+  </div>
 </template>
 
 <script>
-    class Node {
-        constructor(data) {
-            this.data = data;
-            this.next = null;
-            this.element = {};
-        }
+class Node {
+  constructor(data) {
+    this.data = data;
+    this.next = null;
+    this.element = {};
+  }
+}
+
+class LinkedList {
+  constructor() {
+    this.head = null;
+  }
+
+  append(data, element) {
+    const newNode = new Node(data);
+    newNode.element.circle = element.circle.circle;
+    newNode.element.text = element.circle.text;
+    if (!this.head) {
+      newNode.element.arrow = element.arrow;
+      this.head = newNode;
+      return;
     }
 
-    class LinkedList {
-        constructor() {
-            this.head = null;
+    let current = this.head;
+    while (current.next) {
+      current = current.next;
+    }
+    current.element.arrow = element.arrow;
+    current.next = newNode;
+  }
+
+  display() {
+    let current = this.head;
+    while (current) {
+      console.log(current.data);
+      current = current.next;
+    }
+  }
+}
+
+
+import * as d3 from 'd3';
+
+export default {
+  name: "Linked-List",
+  data() {
+    return {
+      linkedList: undefined,
+      result: "",
+      showSuccessResult: false,
+      showFailureResult: false,
+      xAxis: 20,
+      arrowXAxis: 0,
+      circleRadius: 5,
+      elements: [],
+      circleContainer: undefined,
+      showInputForm: false,
+      showSearchForm: false,
+      showDeleteForm: false,
+      targetValue: null,
+      insertedValue: null,
+    }
+  },
+
+  methods: {
+    createContainer() {
+      this.circleContainer = d3.select(this.$refs.circleContainer)
+          .append('svg')
+          .attr('width', 500)
+          .attr('height', 200);
+    },
+
+    change() {
+      for (const element of this.elements) {
+        element.circle.transition()
+            .duration(1000) // Animation duration in milliseconds
+            .attr('fill', 'rgba(0, 255, 0, 0.8)');
+      }
+    },
+
+    toggleInsertForm() {
+      this.showSuccessResult = false;
+      this.showFailureResult = false;
+      this.showInputForm = !this.showInputForm;
+      this.hideDeleteForm();
+      this.hideSearchForm();
+    },
+
+    toggleSearchForm() {
+      this.showSuccessResult = false;
+      this.showFailureResult = false;
+      this.showSearchForm = !this.showSearchForm;
+      this.hideDeleteForm();
+      this.hideInsertForm();
+    },
+
+    toggleDeleteForm() {
+      this.showSuccessResult = false;
+      this.showFailureResult = false;
+      this.hideInsertForm();
+      this.hideSearchForm();
+      this.showDeleteForm = !this.showDeleteForm;
+    },
+
+    hideDeleteForm() {
+      this.showDeleteForm = false;
+    },
+    hideInsertForm() {
+      this.showInputForm = false;
+    },
+    hideSearchForm() {
+      this.showSearchForm = false;
+    },
+
+    insertFormSubmitAction() {
+      if (this.insertedValue > 0) {
+
+        this.appendIntoLinkedList(this.insertedValue);
+        this.showInputForm = false;
+        this.insertedValue = null;
+      } else {
+        console.error("You've added negative number");
+      }
+    },
+
+    createCircle(num, createArrow) {
+
+      const finalRadius = 20;
+
+      const circle = this.circleContainer.append('circle')
+          .attr('cx', this.xAxis)
+          .attr('cy', 100)
+          .attr('r', this.circleRadius)
+          .attr('fill', 'rgba(0, 0, 255, 0.5)')
+          .attr('opacity', .5);
+      circle.transition()
+          .duration(1000) // Animation duration in milliseconds
+          .attr('r', finalRadius);
+
+      const text = this.circleContainer.append('text')
+          .attr('x', this.xAxis)
+          .attr('y', 100)
+          .attr('dy', '.4em') // Vertical alignment adjustment
+          .attr('text-anchor', 'middle') // Horizontal alignment
+          .text(num);
+      if (createArrow) {
+        this.createArrow(this.xAxis + 70);
+      }
+      this.elements.push({circle: circle, text: text});
+
+      this.xAxis += this.circleRadius * 20;
+
+      return {circle: circle, text: text};
+
+      //     this.circleContainer.append('circle')
+      //         .attr('cx', 90)
+      //         .attr('cy', 100)
+      //         .attr('r', finalRadius)
+      //         .attr('fill', 'red');
+      //
+      //
+    },
+
+    createArrow(groupX) {
+      const arrowLength = 20;
+      const arrowY = 100;
+
+      const linesGroup = this.circleContainer.append('g')
+          .attr('transform', `translate(${groupX}, 0)`); // Set the group's x position
+
+      linesGroup.append('line')
+          .attr('x1', -arrowLength - 20) // Relative to the group's x position
+          .attr('y1', arrowY)
+          .attr('x2', 0) // Relative to the group's x position
+          .attr('y2', arrowY)
+          .attr('stroke', 'black')
+          .attr('stroke-width', 2);
+
+      linesGroup.append('line')
+          .attr('x1', -10) // Relative to the group's x position
+          .attr('y1', arrowY - 5)
+          .attr('x2', -arrowLength + 20) // Relative to the group's x position
+          .attr('y2', arrowY)
+          .attr('stroke', 'black')
+          .attr('stroke-width', 2);
+
+      linesGroup.append('line')
+          .attr('x1', -10) // Relative to the group's x position
+          .attr('y1', arrowY + 5)
+          .attr('x2', -arrowLength + 20) // Relative to the group's x position
+          .attr('y2', arrowY)
+          .attr('stroke', 'black')
+          .attr('stroke-width', 2);
+
+      return linesGroup;
+    },
+
+    appendIntoLinkedList(num, pos) {
+      if (!pos) {
+        const circle = this.createCircle(num);
+        let arrow;
+        if (this.linkedList.head) {
+          arrow = this.createArrow((this.xAxis - this.circleRadius * 40) + 70);
         }
 
-        append(data, element) {
-            const newNode = new Node(data);
-            newNode.element.circle = element.circle.circle;
-            newNode.element.text = element.circle.text;
-            if (!this.head) {
-                newNode.element.lines = element.lines;
-                this.head = newNode;
-                return;
-            }
+        this.linkedList.append(num, {circle: circle, arrow: arrow});
+      }
+    },
 
-            let current = this.head;
-            while (current.next) {
-                current = current.next;
-            }
-            current.element.lines = element.lines;
-            current.next = newNode;
-        }
 
-        display() {
-            let current = this.head;
-            while (current) {
-                console.log(current.data);
-                current = current.next;
-            }
+    deleteNode(node, cx, x, arrowX) {
+      if (node) {
+        const currentCircleXAxis = parseFloat(node.element.circle.attr('cx'));
+        const currentTextX = parseFloat(node.element.text.attr('x'));
+        let nextArrow;
+        if (node.element.arrow) {
+          nextArrow = parseFloat(node.element.arrow.attr('transform').split('(')[1].split(',')[0]);
         }
-    }
-
 
-    import * as d3 from 'd3';
-
-    export default {
-        name: "Linked-List",
-        data() {
-            return {
-                linkedList: undefined,
-                result: "",
-                showSuccessResult: false,
-                showFailureResult: false,
-                xAxis: 20,
-                arrowXAxis: 0,
-                circleRadius: 5,
-                elements: [],
-                circleContainer: undefined,
-                showInputForm: false,
-                showSearchForm: false,
-                showDeleteForm: false,
-                targetValue: null,
-                insertedValue: null,
+        console.log(cx, currentCircleXAxis, x, currentTextX);
+        node.element.circle.transition()
+            .duration(1000)
+            .attr('cx', cx);
+
+        node.element.text.transition()
+            .duration(1000)
+            .attr('x', x);
+        if (node.element.arrow) {
+          console.log("arrowx:", nextArrow, arrowX);
+          node.element.arrow.attr('transform', `translate(${arrowX}, 0)`);
+          console.log(parseFloat(node.element.arrow.attr('transform').replace(/[^\d.-]/g, '')));
+        }
+        this.deleteNode(node.next, currentCircleXAxis, currentTextX, nextArrow)
+      }
+
+    },
+
+    removeItemFromLinkedList() {
+      let current = this.linkedList.head;
+      let prev = current;
+      while (current) {
+
+        if (current.data === this.targetValue) {
+          const currentCircleXAxis = parseFloat(current.element.circle.attr('cx'));
+          const currentTextX = parseFloat(current.element.text.attr('x'));
+          let currentArrowX;
+          if (current.element.arrow) {
+            currentArrowX = parseFloat(current.element.arrow.attr('transform').replace(/[^\d.-]/g, '')) / 10;
+          } else if (prev) {
+            prev.element.arrow.remove();
+          }
+          current.element.circle.remove();
+          current.element.text.remove();
+          if (current.next) {
+            current.data = current.next.data;
+
+            if (current.element.arrow) {
+              current.element.arrow.remove()
             }
-        },
-
-        methods: {
-            createContainer() {
-                this.circleContainer = d3.select(this.$refs.circleContainer)
-                    .append('svg')
-                    .attr('width', 500)
-                    .attr('height', 200);
-            },
-
-            change() {
-                for (const element of this.elements) {
-                    element.circle.transition()
-                        .duration(1000) // Animation duration in milliseconds
-                        .attr('fill', 'rgba(0, 255, 0, 0.8)');
-                }
-            },
-
-            toggleInsertForm() {
-                this.showSuccessResult = false;
-                this.showFailureResult = false;
-                this.showInputForm = !this.showInputForm;
-                this.hideDeleteForm();
-                this.hideSearchForm();
-            },
-
-            toggleSearchForm() {
-                this.showSuccessResult = false;
-                this.showFailureResult = false;
-                this.showSearchForm = !this.showSearchForm;
-                this.hideDeleteForm();
-                this.hideInsertForm();
-            },
-
-            toggleDeleteForm() {
-                this.showSuccessResult = false;
-                this.showFailureResult = false;
-                this.hideInsertForm();
-                this.hideSearchForm();
-                this.showDeleteForm = !this.showDeleteForm;
-            },
-
-            hideDeleteForm(){
-                this.showDeleteForm = false;
-            },
-            hideInsertForm(){
-                this.showInputForm = false;
-            },
-            hideSearchForm(){
-                this.showSearchForm = false;
-            },
-
-            insertFormSubmitAction() {
-                if (this.insertedValue > 0) {
-
-                    this.appendIntoLinkedList(this.insertedValue);
-                    this.showInputForm = false;
-                    this.insertedValue = null;
-                } else {
-                    console.error("You've added negative number");
-                }
-            },
-
-            createCircle(num, createArrow) {
-
-                const finalRadius = 20;
-
-                const circle = this.circleContainer.append('circle')
-                    .attr('cx', this.xAxis)
-                    .attr('cy', 100)
-                    .attr('r', this.circleRadius)
-                    .attr('fill', 'rgba(0, 0, 255, 0.5)')
-                    .attr('opacity', .5);
-                circle.transition()
-                    .duration(1000) // Animation duration in milliseconds
-                    .attr('r', finalRadius);
-
-                const text = this.circleContainer.append('text')
-                    .attr('x', this.xAxis)
-                    .attr('y', 100)
-                    .attr('dy', '.4em') // Vertical alignment adjustment
-                    .attr('text-anchor', 'middle') // Horizontal alignment
-                    .text(num);
-                if (createArrow) {
-                    this.createArrow(this.xAxis + 70);
-                }
-                this.elements.push({circle: circle, text: text});
-
-                this.xAxis += this.circleRadius * 20;
-
-                return {circle: circle, text: text};
-
-                //     this.circleContainer.append('circle')
-                //         .attr('cx', 90)
-                //         .attr('cy', 100)
-                //         .attr('r', finalRadius)
-                //         .attr('fill', 'red');
-                //
-                //
-            },
-
-            createArrow(arrowX) {
-                const arrowLength = 20;
-                const arrowY = 100;
-                // Line 1: Horizontal line
-                const line1 = this.circleContainer.append('line')
-                    .attr('x1', arrowX - arrowLength - 20)
-                    .attr('y1', arrowY)
-                    .attr('x2', arrowX)
-                    .attr('y2', arrowY)
-                    .attr('stroke', 'black')
-                    .attr('stroke-width', 2);
-
-                // Line 2: Diagonal line (left)
-                const line2 = this.circleContainer.append('line')
-                    .attr('x1', arrowX - 10)
-                    .attr('y1', arrowY - 5)
-                    .attr('x2', arrowX - arrowLength + 20)
-                    .attr('y2', arrowY)
-                    .attr('stroke', 'black')
-                    .attr('stroke-width', 2);
-
-                // Line 3: Diagonal line (right)
-                const line3 = this.circleContainer.append('line')
-                    .attr('x1', arrowX - 10)
-                    .attr('y1', arrowY + 5)
-                    .attr('x2', arrowX - arrowLength + 20)
-                    .attr('y2', arrowY)
-                    .attr('stroke', 'black')
-                    .attr('stroke-width', 2);
-
-                return [line1, line2, line3];
-            },
-
-            appendIntoLinkedList(num, pos) {
-                if (!pos) {
-                    const circle = this.createCircle(num);
-                    let line;
-                    if (this.linkedList.head) {
-                        line = this.createArrow((this.xAxis - this.circleRadius * 40) + 70);
-                    }
-
-                    this.linkedList.append(num, {circle: circle, lines: line});
-                }
-            },
-
-
-            deleteNode(node, cx, x){
-                if(node){
-                    const currentCircleXAxis = parseFloat(node.element.circle.attr('cx'));
-                    const currentTextX = parseFloat(node.element.text.attr('x'));
-                    console.log(cx, currentCircleXAxis, x, currentTextX);
-                        node.element.circle.transition()
-                            .duration(1000)
-                            .attr('cx', cx);
-
-                        node.element.text.transition()
-                            .duration(1000)
-                            .attr('x', x);
-                        if(node.element.lines){
-                            for(const line of node.element.lines){
-                                line.attr('x1', currentTextX);
-                            }
-                        }
-                    this.deleteNode(node.next, currentCircleXAxis, currentTextX)
-                }
-
-                return;
-
-            },
-
-            removeItemFromLinkedList() {
-                let current = this.linkedList.head;
-
-                while (current) {
-                    if (current.data == this.targetValue) {
-                        const currentCircleXAxis = parseFloat(current.element.circle.attr('cx'));
-                        const currentTextX = parseFloat(current.element.text.attr('x'));
-                        console.log("Item found to delete");
-                        current.element.circle.remove();
-                        current.element.text.remove();
-                        if(current.next) {
-                            current.data = current.next.data;
-
-                            for (const line of current.element.lines) {
-                                line.remove();
-                            }
-                            current.element = current.next.element;
-                            this.deleteNode(current.next, currentCircleXAxis, currentTextX);
-                        }
-                        break;
-                    }
-                    current = current.next;
-                }
-                this.targetValue = null;
-            },
-
-            async searchIntoLinkedList() {
-                this.showSuccessResult = false;
-                this.showFailureResult = false;
-                if (this.targetValue > 0) {
-                    this.showSearchForm = false;
-                    let current = this.linkedList.head;
-                    let found;
-                    let pos = 1;
-                    while (current) {
-                        found = current.data == this.targetValue;
-                        current.element.circle.transition()
-                            .duration(500).attr('fill', "pink");
-                        await new Promise(resolve => setTimeout(resolve, 600));
-                        if (found) {
-                            current.element.circle.transition()
-                                .duration(1000).attr('fill', "green");
-                            break;
-                        }
-                        await new Promise(resolve => setTimeout(resolve, 600));
-                        if (current.next) {
-                            for (const line of current.element.lines) {
-                                line.transition().duration(300).attr('stroke', "pink");
-                            }
-                            await new Promise(resolve => setTimeout(resolve, 300));
-                        }
-                        current = current.next;
-                        pos++;
-                    }
-                    if (found) {
-                        this.result = pos;
-                        this.showSuccessResult = true;
-                        console.log("target found");
-                    } else {
-                        this.showFailureResult = true;
-                    }
-                    this.targetValue = null;
-                }
-            },
-
-            generateLinkedList(nums) {
-                for (const n of nums) {
-                    this.appendIntoLinkedList(n);
-                }
+            current.element = current.next.element;
+            this.deleteNode(current.next, currentCircleXAxis, currentTextX, currentArrowX);
+          }
+          this.xAxis -= this.circleRadius * 20;
+          break;
+        }
+        prev = current;
+        current = current.next;
+      }
+      this.targetValue = null;
+    },
+
+    async searchIntoLinkedList() {
+      this.showSuccessResult = false;
+      this.showFailureResult = false;
+      if (this.targetValue > 0) {
+        this.showSearchForm = false;
+        let current = this.linkedList.head;
+        let found;
+        let pos = 1;
+        while (current) {
+          found = current.data === this.targetValue;
+          current.element.circle.transition()
+              .duration(500).attr('fill', "pink");
+          await new Promise(resolve => setTimeout(resolve, 600));
+          if (found) {
+            current.element.circle.transition()
+                .duration(1000).attr('fill', "green");
+            break;
+          }
+          await new Promise(resolve => setTimeout(resolve, 600));
+          if (current.next) {
+            if (current.element.arrow) {
+              current.element.arrow.selectAll('line').transition().duration(300).attr('stroke', "pink");
             }
-        },
-        mounted() {
-            this.createContainer();
-            this.linkedList = new LinkedList();
-            this.generateLinkedList([1, 2, 3])
-        },
+            await new Promise(resolve => setTimeout(resolve, 300));
+          }
+          current = current.next;
+          pos++;
+        }
+        if (found) {
+          this.result = pos;
+          this.showSuccessResult = true;
+          console.log("target found");
+        } else {
+          this.showFailureResult = true;
+        }
+        this.targetValue = null;
+      }
+    },
+
+    generateLinkedList(nums) {
+      for (const n of nums) {
+        this.appendIntoLinkedList(n);
+      }
     }
+  },
+  mounted() {
+    this.createContainer();
+    this.linkedList = new LinkedList();
+    this.generateLinkedList([1, 2, 3])
+  },
+}
 </script>
 
 <style scoped>
-    .success-message {
-        background-color: #4caf50;
-        color: white;
-        padding: 10px;
-        border-radius: 5px;
-        margin-top: 10px;
-    }
-
-    .fail-message {
-        background-color: #af3e2e;
-        color: white;
-        padding: 10px;
-        border-radius: 5px;
-        margin-top: 10px;
-    }
-
-    button {
-        background-color: #3c3f41;
-        color: white;
-        border: none;
-        padding: 10px 20px;
-        margin: 5px;
-        border-radius: 5px;
-        cursor: pointer;
-    }
-
-    input {
-        padding: 10px;
-        border: 1px solid #ccc;
-        border-radius: 5px;
-    }
+.success-message {
+  background-color: #4caf50;
+  color: white;
+  padding: 10px;
+  border-radius: 5px;
+  margin-top: 10px;
+}
+
+.fail-message {
+  background-color: #af3e2e;
+  color: white;
+  padding: 10px;
+  border-radius: 5px;
+  margin-top: 10px;
+}
+
+button {
+  background-color: #3c3f41;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  margin: 5px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+input {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
 </style>
\ No newline at end of file

From 935f7df233d8a98a9388d0558c4ee14eabe7d4cc Mon Sep 17 00:00:00 2001
From: Bappy <http.bappy@gmail.com>
Date: Mon, 11 Sep 2023 01:09:08 +0600
Subject: [PATCH 10/10] AV-07: linked list refined some code

---
 src/algorithms/linked-list/Linked-List.vue | 103 +++++++++++----------
 1 file changed, 56 insertions(+), 47 deletions(-)

diff --git a/src/algorithms/linked-list/Linked-List.vue b/src/algorithms/linked-list/Linked-List.vue
index a10f78c..c172996 100644
--- a/src/algorithms/linked-list/Linked-List.vue
+++ b/src/algorithms/linked-list/Linked-List.vue
@@ -63,7 +63,7 @@ class LinkedList {
   display() {
     let current = this.head;
     while (current) {
-      console.log(current.data);
+      console.log("data: ", current.data, " Element: ", current.element);
       current = current.next;
     }
   }
@@ -155,7 +155,6 @@ export default {
     },
 
     createCircle(num, createArrow) {
-
       const finalRadius = 20;
 
       const circle = this.circleContainer.append('circle')
@@ -182,14 +181,6 @@ export default {
       this.xAxis += this.circleRadius * 20;
 
       return {circle: circle, text: text};
-
-      //     this.circleContainer.append('circle')
-      //         .attr('cx', 90)
-      //         .attr('cy', 100)
-      //         .attr('r', finalRadius)
-      //         .attr('fill', 'red');
-      //
-      //
     },
 
     createArrow(groupX) {
@@ -227,9 +218,11 @@ export default {
     },
 
     appendIntoLinkedList(num, pos) {
+
       if (!pos) {
         const circle = this.createCircle(num);
         let arrow;
+
         if (this.linkedList.head) {
           arrow = this.createArrow((this.xAxis - this.circleRadius * 40) + 70);
         }
@@ -238,100 +231,115 @@ export default {
       }
     },
 
-
-    deleteNode(node, cx, x, arrowX) {
-      if (node) {
-        const currentCircleXAxis = parseFloat(node.element.circle.attr('cx'));
-        const currentTextX = parseFloat(node.element.text.attr('x'));
-        let nextArrow;
-        if (node.element.arrow) {
-          nextArrow = parseFloat(node.element.arrow.attr('transform').split('(')[1].split(',')[0]);
-        }
-
-        console.log(cx, currentCircleXAxis, x, currentTextX);
-        node.element.circle.transition()
-            .duration(1000)
-            .attr('cx', cx);
-
-        node.element.text.transition()
-            .duration(1000)
-            .attr('x', x);
-        if (node.element.arrow) {
-          console.log("arrowx:", nextArrow, arrowX);
-          node.element.arrow.attr('transform', `translate(${arrowX}, 0)`);
-          console.log(parseFloat(node.element.arrow.attr('transform').replace(/[^\d.-]/g, '')));
-        }
-        this.deleteNode(node.next, currentCircleXAxis, currentTextX, nextArrow)
-      }
-
-    },
-
     removeItemFromLinkedList() {
       let current = this.linkedList.head;
       let prev = current;
       while (current) {
 
         if (current.data === this.targetValue) {
-          const currentCircleXAxis = parseFloat(current.element.circle.attr('cx'));
-          const currentTextX = parseFloat(current.element.text.attr('x'));
+          let currentCircleXAxis = parseFloat(current.element.circle.attr('cx'));
+          let currentTextX = parseFloat(current.element.text.attr('x'));
           let currentArrowX;
+
           if (current.element.arrow) {
             currentArrowX = parseFloat(current.element.arrow.attr('transform').replace(/[^\d.-]/g, '')) / 10;
-          } else if (prev) {
+          } else if (prev.element.arrow) {
             prev.element.arrow.remove();
+            prev.element.arrow = null;
           }
           current.element.circle.remove();
           current.element.text.remove();
-          if (current.next) {
-            current.data = current.next.data;
 
+          if (current.next) {
             if (current.element.arrow) {
-              current.element.arrow.remove()
+              current.element.arrow.remove();
+              current.element.arrow = null;
+            }
+
+            if (current === this.linkedList.head) {
+              this.linkedList.head = current.next;
+            } else {
+              prev.next = current.next;
             }
-            current.element = current.next.element;
-            this.deleteNode(current.next, currentCircleXAxis, currentTextX, currentArrowX);
+
+            current = current.next;
+            while (current) {
+              current.element.circle.transition()
+                  .duration(1000)
+                  .attr('cx', currentCircleXAxis);
+
+              current.element.text.transition()
+                  .duration(1000)
+                  .attr('x', currentTextX);
+
+              if (current.element.arrow) {
+                current.element.arrow.attr('transform', `translate(${currentArrowX}, 0)`);
+              }
+
+              currentCircleXAxis = parseFloat(current.element.circle.attr('cx'));
+              currentTextX = parseFloat(current.element.text.attr('x'));
+
+              if (current.element.arrow) {
+                currentArrowX = parseFloat(current.element.arrow.attr('transform').split('(')[1].split(',')[0]);
+              }
+              current = current.next;
+            }
+
+          } else if (current === this.linkedList.head) {
+            this.linkedList.head = current.next;
+          } else if (prev) {
+            prev.next = null;
           }
           this.xAxis -= this.circleRadius * 20;
           break;
         }
+
         prev = current;
         current = current.next;
       }
+
       this.targetValue = null;
     },
 
     async searchIntoLinkedList() {
       this.showSuccessResult = false;
       this.showFailureResult = false;
+
       if (this.targetValue > 0) {
         this.showSearchForm = false;
         let current = this.linkedList.head;
         let found;
         let pos = 1;
+
         while (current) {
           found = current.data === this.targetValue;
           current.element.circle.transition()
               .duration(500).attr('fill', "pink");
+
           await new Promise(resolve => setTimeout(resolve, 600));
+
           if (found) {
             current.element.circle.transition()
                 .duration(1000).attr('fill', "green");
             break;
           }
+
           await new Promise(resolve => setTimeout(resolve, 600));
+
           if (current.next) {
             if (current.element.arrow) {
               current.element.arrow.selectAll('line').transition().duration(300).attr('stroke', "pink");
             }
             await new Promise(resolve => setTimeout(resolve, 300));
           }
+
           current = current.next;
           pos++;
         }
+
         if (found) {
           this.result = pos;
           this.showSuccessResult = true;
-          console.log("target found");
         } else {
           this.showFailureResult = true;
         }
@@ -345,6 +353,7 @@ export default {
       }
     }
   },
+  
   mounted() {
     this.createContainer();
     this.linkedList = new LinkedList();

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/Bappy4u/algorithm-visualizer/pull/11.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/Bappy4u/algorithm-visualizer/pull/11.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/Bappy4u/algorithm-visualizer/pull/11.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/Bappy4u/algorithm-visualizer/pull/11.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>