From 3a85849e2742a28ef298fba3cacd67f624044c16 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 26 Nov 2022 11:34:37 +0530
Subject: [PATCH 1/7] axios

---
 index.html |   2 +-
 start.js   | 149 +++++++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 134 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 826867cd..f9cbc081 100644
--- a/index.html
+++ b/index.html
@@ -39,6 +39,6 @@ <h1 class="display-4 text-center mb-3">Axios Crash Course</h1>
     </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
-    <script src="main.js"></script>
+    <script src="start.js"></script>
   </body>
 </html>
diff --git a/start.js b/start.js
index 83d2e150..665ed3cf 100644
--- a/start.js
+++ b/start.js
@@ -1,51 +1,172 @@
-// GET REQUEST
 function getTodos() {
-  console.log('GET Request');
+  // axios({
+  //   method: 'get',
+  //   url: 'https://jsonplaceholder.typicode.com/todos',
+  //   params: {
+  //     _limit: 5
+  //   }
+  // })
+  //   .then(res => showOutput(res))
+  //   .catch(err => console.error(err));
+
+  axios
+    .get('https://jsonplaceholder.typicode.com/todos?_limit=5', {
+      timeout: 5000
+    })
+    .then(res => showOutput(res))
+    .catch(err => console.error(err));
 }
 
 // POST REQUEST
 function addTodo() {
-  console.log('POST Request');
+  axios
+    .post('https://jsonplaceholder.typicode.com/todos', {
+      title: 'New Todo',
+      completed: false
+    })
+    .then(res => showOutput(res))
+    .catch(err => console.error(err));
 }
 
 // PUT/PATCH REQUEST
 function updateTodo() {
-  console.log('PUT/PATCH Request');
+  axios
+    .patch('https://jsonplaceholder.typicode.com/todos/1', {
+      title: 'Updated Todo',
+      completed: true
+    })
+    .then(res => showOutput(res))
+    .catch(err => console.error(err));
 }
 
 // DELETE REQUEST
 function removeTodo() {
-  console.log('DELETE Request');
+  axios
+    .delete('https://jsonplaceholder.typicode.com/todos/1')
+    .then(res => showOutput(res))
+    .catch(err => console.error(err));
 }
 
 // SIMULTANEOUS DATA
 function getData() {
-  console.log('Simultaneous Request');
+  axios
+    .all([
+      axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5'),
+      axios.get('https://jsonplaceholder.typicode.com/posts?_limit=5')
+    ])
+    .then(axios.spread((todos, posts) => showOutput(posts)))
+    .catch(err => console.error(err));
 }
 
 // CUSTOM HEADERS
 function customHeaders() {
-  console.log('Custom Headers');
+  const config = {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: 'sometoken'
+    }
+  };
+
+  axios
+    .post(
+      'https://jsonplaceholder.typicode.com/todos',
+      {
+        title: 'New Todo',
+        completed: false
+      },
+      config
+    )
+    .then(res => showOutput(res))
+    .catch(err => console.error(err));
 }
 
 // TRANSFORMING REQUESTS & RESPONSES
 function transformResponse() {
-  console.log('Transform Response');
+  const options = {
+    method: 'post',
+    url: 'https://jsonplaceholder.typicode.com/todos',
+    data: {
+      title: 'Hello World'
+    },
+    transformResponse: axios.defaults.transformResponse.concat(data => {
+      data.title = data.title.toUpperCase();
+      return data;
+    })
+  };
+
+  axios(options).then(res => showOutput(res));
 }
 
 // ERROR HANDLING
 function errorHandling() {
-  console.log('Error Handling');
+  axios
+    .get('https://jsonplaceholder.typicode.com/todoss', {
+      // validateStatus: function(status) {
+      //   return status < 500; // Reject only if status is greater or equal to 500
+      // }
+    })
+    .then(res => showOutput(res))
+    .catch(err => {
+      if (err.response) {
+        // Server responded with a status other than 200 range
+        console.log(err.response.data);
+        console.log(err.response.status);
+        console.log(err.response.headers);
+
+        if (err.response.status === 404) {
+          alert('Error: Page Not Found');
+        }
+      } else if (err.request) {
+        // Request was made but no response
+        console.error(err.request);
+      } else {
+        console.error(err.message);
+      }
+    });
 }
 
 // CANCEL TOKEN
 function cancelToken() {
-  console.log('Cancel Token');
+  const source = axios.CancelToken.source();
+
+  axios
+    .get('https://jsonplaceholder.typicode.com/todos', {
+      cancelToken: source.token
+    })
+    .then(res => showOutput(res))
+    .catch(thrown => {
+      if (axios.isCancel(thrown)) {
+        console.log('Request canceled', thrown.message);
+      }
+    });
+
+  if (true) {
+    source.cancel('Request canceled!');
+  }
 }
 
 // INTERCEPTING REQUESTS & RESPONSES
+axios.interceptors.request.use(
+  config => {
+    console.log(
+      `${config.method.toUpperCase()} request sent to ${
+        config.url
+      } at ${new Date().getTime()}`
+    );
+
+    return config;
+  },
+  error => {
+    return Promise.reject(error);
+  }
+);
 
-// AXIOS INSTANCES
+// AXIOS INSTANCE
+const axiosInstance = axios.create({
+  // Other custom settings
+  baseURL: 'https://jsonplaceholder.typicode.com'
+});
+// axiosInstance.get('/comments').then(res => showOutput(res));
 
 // Show output in browser
 function showOutput(res) {
@@ -53,7 +174,6 @@ function showOutput(res) {
   <div class="card card-body mb-4">
     <h5>Status: ${res.status}</h5>
   </div>
-
   <div class="card mt-3">
     <div class="card-header">
       Headers
@@ -62,7 +182,6 @@ function showOutput(res) {
       <pre>${JSON.stringify(res.headers, null, 2)}</pre>
     </div>
   </div>
-
   <div class="card mt-3">
     <div class="card-header">
       Data
@@ -71,7 +190,6 @@ function showOutput(res) {
       <pre>${JSON.stringify(res.data, null, 2)}</pre>
     </div>
   </div>
-
   <div class="card mt-3">
     <div class="card-header">
       Config
@@ -93,5 +211,4 @@ document.getElementById('headers').addEventListener('click', customHeaders);
 document
   .getElementById('transform')
   .addEventListener('click', transformResponse);
-document.getElementById('error').addEventListener('click', errorHandling);
-document.getElementById('cancel').addEventListener('click', cancelToken);
+document.getElementById('error').addEventListener('click', errorHandling);
\ No newline at end of file

From 484c8d14aca4f96c54d7c9ba75c8d4a78758c03f Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 27 Nov 2022 09:35:08 +0530
Subject: [PATCH 2/7] appp

---
 appoinment.html | 83 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 appoinment.html

diff --git a/appoinment.html b/appoinment.html
new file mode 100644
index 00000000..c1732e45
--- /dev/null
+++ b/appoinment.html
@@ -0,0 +1,83 @@
+<html>
+    <body>
+        <form onsubmit="saveToLocalStorage(event)">
+            <label> Name</label>
+            <input type="text" name="username"  required/>
+            <label> EmailId</label>
+            <input type="email" name="emailId"  required/>
+            <label> Phone Number</label>
+            <input type="tel" name="phonenumber" />
+            <button> Submit </button>
+        </form>
+        <ul id='listOfUsers'></ul>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.0/axios.min.js"></script>
+        <script>
+            function saveToLocalStorage(event) {
+                event.preventDefault();
+                const name = event.target.username.value;
+                const email = event.target.emailId.value;
+                const phonenumber = event.target.phonenumber.value;
+                // localStorage.setItem('name', name);
+                // localStorage.setItem('email', email);
+                // localStorage.setItem('phonenumber', phonenumber)
+                const obj = {
+                    name,
+                    email,
+                    phonenumber
+                }
+                axios.post("https://reqres.in/api/users",obj)
+                .then((response)=>{
+                    showNewUserOnScreen(response.data);
+                    console.log(response);
+                })
+                //showNewUserOnScreen(obj)
+            }
+
+            window.addEventListener("DOMContentLoaded", () => {
+                const localStorageObj = localStorage;
+                const localstoragekeys  = Object.keys(localStorageObj)
+
+                for(var i =0; i< localstoragekeys.length; i++){
+                    const key = localstoragekeys[i]
+                    const userDetailsString = localStorageObj[key];
+                    const userDetailsObj = JSON.parse(userDetailsString);
+                    showNewUserOnScreen(userDetailsObj)
+                }
+            })
+
+            function showNewUserOnScreen(user){
+                const parentNode = document.getElementById('listOfUsers');
+                const childHTML = `<li id=${user.email}> ${user.name} - ${user.email}
+                                        <button onclick=deleteUser('${user.email}')> Delete User </button>
+                                     </li>`
+
+                parentNode.innerHTML = parentNode.innerHTML + childHTML;
+            }
+
+            // deleteUser('abc@gmail.com')
+
+            function deleteUser(emailId){
+                console.log(emailId)
+                localStorage.removeItem(emailId);
+                removeUserFromScreen(emailId);
+
+            }
+
+            function removeUserFromScreen(emailId){
+                const parentNode = document.getElementById('listOfUsers');
+                const childNodeToBeDeleted = document.getElementById(emailId);
+
+                parentNode.removeChild(childNodeToBeDeleted)
+            }
+
+
+
+
+
+
+
+        </script>
+
+
+    </body>
+</html>
\ No newline at end of file

From 0aa2fb6c103fb83f81d9c644970e6b9cd586c781 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 27 Nov 2022 12:27:23 +0530
Subject: [PATCH 3/7] get

---
 appoinment.html | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/appoinment.html b/appoinment.html
index c1732e45..ba5970f5 100644
--- a/appoinment.html
+++ b/appoinment.html
@@ -25,25 +25,35 @@
                     email,
                     phonenumber
                 }
-                axios.post("https://reqres.in/api/users",obj)
+                axios.post("https://crudcrud.com/api/02aa72ae6e4e42b6bf50f5e1ebfe5882/appoinment",obj)
                 .then((response)=>{
                     showNewUserOnScreen(response.data);
-                    console.log(response);
+                    console.log(response.data);
                 })
                 //showNewUserOnScreen(obj)
             }
 
             window.addEventListener("DOMContentLoaded", () => {
-                const localStorageObj = localStorage;
-                const localstoragekeys  = Object.keys(localStorageObj)
-
-                for(var i =0; i< localstoragekeys.length; i++){
-                    const key = localstoragekeys[i]
-                    const userDetailsString = localStorageObj[key];
-                    const userDetailsObj = JSON.parse(userDetailsString);
-                    showNewUserOnScreen(userDetailsObj)
+                // const localStorageObj = localStorage;
+                // const localstoragekeys  = Object.keys(localStorageObj)
+                axios.get("https://crudcrud.com/api/02aa72ae6e4e42b6bf50f5e1ebfe5882/appoinment")
+                .then((response)=>{
+                    //console.log(response.data);
+                    for (var i=0;i<response.data.length;i++){
+                        showNewUserOnScreen(response.data[i]);
+
+                    }
+
+
+                })
+
+                // for(var i =0; i< localstoragekeys.length; i++){
+                //     const key = localstoragekeys[i]
+                //     const userDetailsString = localStorageObj[key];
+                //     const userDetailsObj = JSON.parse(userDetailsString);
+                //     showNewUserOnScreen(userDetailsObj)
                 }
-            })
+            );
 
             function showNewUserOnScreen(user){
                 const parentNode = document.getElementById('listOfUsers');

From e2693f4f1e818ce6e16daf4fff03783af51350ea Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Mon, 28 Nov 2022 10:35:48 +0530
Subject: [PATCH 4/7] delete

---
 appoinment.html | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/appoinment.html b/appoinment.html
index ba5970f5..528f6617 100644
--- a/appoinment.html
+++ b/appoinment.html
@@ -25,10 +25,10 @@
                     email,
                     phonenumber
                 }
-                axios.post("https://crudcrud.com/api/02aa72ae6e4e42b6bf50f5e1ebfe5882/appoinment",obj)
+                axios.post("https://reqres.in/api/users",obj)
                 .then((response)=>{
                     showNewUserOnScreen(response.data);
-                    console.log(response.data);
+                    //console.log(response.data);
                 })
                 //showNewUserOnScreen(obj)
             }
@@ -36,7 +36,7 @@
             window.addEventListener("DOMContentLoaded", () => {
                 // const localStorageObj = localStorage;
                 // const localstoragekeys  = Object.keys(localStorageObj)
-                axios.get("https://crudcrud.com/api/02aa72ae6e4e42b6bf50f5e1ebfe5882/appoinment")
+                axios.get("https://reqres.in/api/users")
                 .then((response)=>{
                     //console.log(response.data);
                     for (var i=0;i<response.data.length;i++){
@@ -58,7 +58,7 @@
             function showNewUserOnScreen(user){
                 const parentNode = document.getElementById('listOfUsers');
                 const childHTML = `<li id=${user.email}> ${user.name} - ${user.email}
-                                        <button onclick=deleteUser('${user.email}')> Delete User </button>
+                                        <button onclick=deleteUser('${user.email}')> Delete User </button><button onclick=updateuser('${user.email}')>update</button>
                                      </li>`
 
                 parentNode.innerHTML = parentNode.innerHTML + childHTML;
@@ -67,10 +67,14 @@
             // deleteUser('abc@gmail.com')
 
             function deleteUser(emailId){
-                console.log(emailId)
-                localStorage.removeItem(emailId);
-                removeUserFromScreen(emailId);
+                
+                axios.delete("https://reqres.in/api/users")
+                .then((response)=>{
+                    removeUserFromScreen(emailId);
 
+
+                })
+                
             }
 
             function removeUserFromScreen(emailId){

From dff612804b23d5f1eabc720cc58d366bdc6e89c1 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Mon, 28 Nov 2022 11:19:13 +0530
Subject: [PATCH 5/7] edit

---
 appoinment.html | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/appoinment.html b/appoinment.html
index 528f6617..1bcbaf1d 100644
--- a/appoinment.html
+++ b/appoinment.html
@@ -2,11 +2,11 @@
     <body>
         <form onsubmit="saveToLocalStorage(event)">
             <label> Name</label>
-            <input type="text" name="username"  required/>
+            <input type="text"id="username" name="username"  required/>
             <label> EmailId</label>
-            <input type="email" name="emailId"  required/>
+            <input type="email"id="email" name="emailId"  required/>
             <label> Phone Number</label>
-            <input type="tel" name="phonenumber" />
+            <input type="tel" id="phonenumber" name="phonenumber" />
             <button> Submit </button>
         </form>
         <ul id='listOfUsers'></ul>
@@ -21,9 +21,9 @@
                 // localStorage.setItem('email', email);
                 // localStorage.setItem('phonenumber', phonenumber)
                 const obj = {
-                    name,
-                    email,
-                    phonenumber
+                    "name":name,
+                    "email":email,
+                    "phonenumbe":phonenumber
                 }
                 axios.post("https://reqres.in/api/users",obj)
                 .then((response)=>{
@@ -58,7 +58,7 @@
             function showNewUserOnScreen(user){
                 const parentNode = document.getElementById('listOfUsers');
                 const childHTML = `<li id=${user.email}> ${user.name} - ${user.email}
-                                        <button onclick=deleteUser('${user.email}')> Delete User </button><button onclick=updateuser('${user.email}')>update</button>
+                                        <button onclick=deleteUser('${user.email}')> Delete User </button><button onclick=edit('${user.email}','${user.name}','${user.phonenumber}')>update</button>
                                      </li>`
 
                 parentNode.innerHTML = parentNode.innerHTML + childHTML;
@@ -83,6 +83,15 @@
 
                 parentNode.removeChild(childNodeToBeDeleted)
             }
+            function edit(emailId,name,email,phonenumber){
+                
+                
+                    document.getElementById("username").value=name;
+                    document.getElementById("email").value=email;
+                    document.getElementById("phonenumber").value=phonenumber;
+                    deleteUser(emailId);
+                
+            }
 
 
 

From 83e1b927556afcebf088549db389e35a0e7426ac Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Mon, 28 Nov 2022 17:19:44 +0530
Subject: [PATCH 6/7] final

---
 appoinment.html | 71 ++++++++++++++++++-------------------------------
 1 file changed, 26 insertions(+), 45 deletions(-)

diff --git a/appoinment.html b/appoinment.html
index 1bcbaf1d..1e249c82 100644
--- a/appoinment.html
+++ b/appoinment.html
@@ -2,11 +2,11 @@
     <body>
         <form onsubmit="saveToLocalStorage(event)">
             <label> Name</label>
-            <input type="text"id="username" name="username"  required/>
+            <input type="text" id="name"name="username"  required/>
             <label> EmailId</label>
             <input type="email"id="email" name="emailId"  required/>
             <label> Phone Number</label>
-            <input type="tel" id="phonenumber" name="phonenumber" />
+            <input type="tel"id="phonenumber" name="phonenumber" />
             <button> Submit </button>
         </form>
         <ul id='listOfUsers'></ul>
@@ -21,44 +21,31 @@
                 // localStorage.setItem('email', email);
                 // localStorage.setItem('phonenumber', phonenumber)
                 const obj = {
-                    "name":name,
-                    "email":email,
-                    "phonenumbe":phonenumber
+                    name,
+                    email,
+                    phonenumber
                 }
-                axios.post("https://reqres.in/api/users",obj)
+                axios.post("https://crudcrud.com/api/c8429d877f734c08bd18f4074f00a17c/user",obj)
                 .then((response)=>{
                     showNewUserOnScreen(response.data);
-                    //console.log(response.data);
+                    //console.log(response);
                 })
                 //showNewUserOnScreen(obj)
             }
 
             window.addEventListener("DOMContentLoaded", () => {
-                // const localStorageObj = localStorage;
-                // const localstoragekeys  = Object.keys(localStorageObj)
-                axios.get("https://reqres.in/api/users")
-                .then((response)=>{
-                    //console.log(response.data);
-                    for (var i=0;i<response.data.length;i++){
-                        showNewUserOnScreen(response.data[i]);
-
-                    }
-
-
-                })
-
-                // for(var i =0; i< localstoragekeys.length; i++){
-                //     const key = localstoragekeys[i]
-                //     const userDetailsString = localStorageObj[key];
-                //     const userDetailsObj = JSON.parse(userDetailsString);
-                //     showNewUserOnScreen(userDetailsObj)
+               axios.get("https://crudcrud.com/api/c8429d877f734c08bd18f4074f00a17c/user")
+               .then((response)=>{
+                for(var i=0;i<response.data.length;i++){
+                    showNewUserOnScreen(response.data[i]);
                 }
-            );
+               })
+            })
 
             function showNewUserOnScreen(user){
                 const parentNode = document.getElementById('listOfUsers');
-                const childHTML = `<li id=${user.email}> ${user.name} - ${user.email}
-                                        <button onclick=deleteUser('${user.email}')> Delete User </button><button onclick=edit('${user.email}','${user.name}','${user.phonenumber}')>update</button>
+                const childHTML = `<li id=${user._id}> ${user.name} - ${user.email}-${user.phonenumber}
+                                        <button onclick=deleteUser('${user._id}')> Delete User </button><button onclick=edituser('${user._id}','${user.name}','${user.email}','${user.phonenumber}')>edit</button>
                                      </li>`
 
                 parentNode.innerHTML = parentNode.innerHTML + childHTML;
@@ -66,31 +53,25 @@
 
             // deleteUser('abc@gmail.com')
 
-            function deleteUser(emailId){
-                
-                axios.delete("https://reqres.in/api/users")
+            function deleteUser(userId){
+                axios.delete(`https://crudcrud.com/api/c8429d877f734c08bd18f4074f00a17c/user/${userId}`)
                 .then((response)=>{
-                    removeUserFromScreen(emailId);
-
-
+                    removeUserFromScreen(userId);
                 })
-                
             }
 
-            function removeUserFromScreen(emailId){
+            function removeUserFromScreen(userId){
                 const parentNode = document.getElementById('listOfUsers');
-                const childNodeToBeDeleted = document.getElementById(emailId);
+                const childNodeToBeDeleted = document.getElementById(userId);
 
                 parentNode.removeChild(childNodeToBeDeleted)
             }
-            function edit(emailId,name,email,phonenumber){
-                
-                
-                    document.getElementById("username").value=name;
-                    document.getElementById("email").value=email;
-                    document.getElementById("phonenumber").value=phonenumber;
-                    deleteUser(emailId);
-                
+            function edituser(userId,name,email,phonenumber){
+                document.getElementById("name").value=name;
+                document.getElementById("phonenumber").value=phonenumber;
+                document.getElementById("email").value=email;
+                deleteUser(userId);
+
             }
 
 

From 7b7f2baa7c9c669e3ad938fd7f74866a84dca742 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 30 Nov 2022 11:10:46 +0530
Subject: [PATCH 7/7] expense project

---
 expense.html | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 expense.html

diff --git a/expense.html b/expense.html
new file mode 100644
index 00000000..593da708
--- /dev/null
+++ b/expense.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>expense tracker</h1><br>
+    <fieldset onsubmit="savetoserver(event)">
+        <legend>insert data</legend>
+        <label for="choose amount">choose amount</label><br>
+        <input type="text" name="chooseamount" id="amount" placeholder="enter amount"><br>
+        <label for="description">expense description</label><br>
+        <input type="text"name="description" id="description" placeholder="write expense description"><br>
+        <label for="expense category">expense category</label><br>
+    
+        <input list="expensetypes" name="expensetype" id="category">
+        <datalist id="expensetypes">
+          <option value="movies">
+          <option value="trips">
+          <option value="fuel">
+          <option value="billpayments">
+          <option value="grocerrys">
+        </datalist>
+        <button type="button"id="submit">submit</button>
+    
+
+
+  
+        
+           
+        
+
+    
+
+    </fieldset>
+    <ul id="new"></ul>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.0/axios.min.js"></script>
+
+    <script >
+        function savetoserver(event){
+    event.preventDefault();
+    var amount=event.target.chooseamount.value;
+    var description=event.target.description.value;
+    var category=event.target.expensetype.value;
+
+    
+    const myobject={
+      amount,
+      description,
+      category,  
+    }
+    axios.post("https://crudcrud.com/api/c8429d877f734c08bd18f4074f00a17c/expense",myobject)
+    .then((response)=>{
+        showNewUserOnScreen(response.data)
+    })
+    
+    
+    
+}
+window.addEventListener("DOMContentLoaded",()=>{
+    
+    axios.get("https://crudcrud.com/api/c8429d877f734c08bd18f4074f00a17c/expense")
+    .then((response)=>{
+        for(var i=0; i<response.data.length;i++){
+            showNewUserOnScreen(response.data[i]);
+        }
+    })
+    
+        
+    
+        
+    
+})
+function showNewUserOnScreen(user){
+    const parentNode = document.getElementById('new');
+    const childHTML = `<li id=${user._id}> ${user.amount} - ${user.description}-${user.category}
+                            <button onclick=deleteUser('${user._id}')> Delete User </button><button onclick=edituser('${user._id}','${user.amount}','${user.description}','${user.category}')>edit</button>`
+
+    parentNode.innerHTML = parentNode.innerHTML + childHTML;
+}
+function deleteUser(userid){
+    axios.delete(`https://crudcrud.com/api/c8429d877f734c08bd18f4074f00a17c/expense/${userid}`)
+    .then((response)=>{
+        removeUserFromScreen(userid)
+    })
+
+}
+function removeUserFromScreen(userid){
+    const parentNode = document.getElementById("new");
+    const childNodeToBeDeleted = document.getElementById(category);
+
+    parentNode.removeChild(childNodeToBeDeleted)
+}
+function edituser(userId,amount,description,category){
+    document.getElementById("amount").value=amount;
+    document.getElementById("description").value=description;
+    document.getElementById("category").value=category;
+    deleteUser(userId);
+
+}
+
+    
+    
+       
+        
+
+    
+    
+
+    </script>
+
+</body>
+</html>
\ No newline at end of file