prasadyash2411 · Sathishm132 · Nov 26, 2022 · Nov 27, 2022 · Nov 27, 2022 · Nov 28, 2022
diff --git a/appoinment.html b/appoinment.html
@@ -0,0 +1,87 @@
+<html>
+    <body>
+        <form onsubmit="saveToLocalStorage(event)">
+            <label> Name</label>
+            <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" />
+            <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://crudcrud.com/api/c8429d877f734c08bd18f4074f00a17c/user",obj)
+                .then((response)=>{
+                    showNewUserOnScreen(response.data);
+                    //console.log(response);
+                })
+                //showNewUserOnScreen(obj)
+            }
+
+            window.addEventListener("DOMContentLoaded", () => {
+               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._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;
+            }
+
+            // deleteUser('[email protected]')
+
+            function deleteUser(userId){
+                axios.delete(`https://crudcrud.com/api/c8429d877f734c08bd18f4074f00a17c/user/${userId}`)
+                .then((response)=>{
+                    removeUserFromScreen(userId);
+                })
+            }
+
+            function removeUserFromScreen(userId){
+                const parentNode = document.getElementById('listOfUsers');
+                const childNodeToBeDeleted = document.getElementById(userId);
+
+                parentNode.removeChild(childNodeToBeDeleted)
+            }
+            function edituser(userId,name,email,phonenumber){
+                document.getElementById("name").value=name;
+                document.getElementById("phonenumber").value=phonenumber;
+                document.getElementById("email").value=email;
+                deleteUser(userId);
+
+            }
+
+
+
+
+
+
+
+        </script>
+
+
+    </body>
+</html>
diff --git a/expense.html 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>
diff --git 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>