-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexpense.html
73 lines (71 loc) · 3.33 KB
/
expense.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<title>EXPENCE TRACKER SHARPENER PROJECT</title>
</head>
<body>
<h3 style="color: rgb(193, 19, 19); border: 5px dashed rgb(71, 88, 202);">SHARPENER EXPENCE TRACKER</h3>
<form onsubmit="savetolocalstorage(event)">
<label>choose expense amount :</label>
<input type="text" name="usernm" id="usernameInputTag"/>
<label>choose description:</label>
<input type="text" name ="emailId" id="emailInputTag"/>
<label>Choose a category:</label>
<input list="browsers" name="category" id="categoryInputTag">
<datalist id="browsers">
<option value="movie">
<option value="trip">
<option value="partying">
</datalist>
<button> SUBMIT</button>
</form>
<ul id='listOfitems'></ul>
<script>
function savetolocalstorage(event){
event.preventDefault();
const name= event.target.usernm.value;
const email= event.target.emailId.value;
const category= event.target.category.value;
localStorage.setItem('name',name);
localStorage.setItem('email',email)
localStorage.setItem('category',category);
const obj ={
name,
email,
category
}
localStorage.setItem(email,JSON.stringify(obj))
showuseronscreen(obj)
}
function showuseronscreen(obj){
const parentelem = document.getElementById("listOfitems")
const childelem = document.createElement('li')
childelem.textContent = obj.name + '-'+ obj.email + '-'+ obj.category
const deleteButton = document.createElement('input')
deleteButton.type = "button"
deleteButton.value = 'DELETE EXPENCE'
deleteButton.onclick=()=>{
localStorage.removeItem(obj.email)
parentelem.removeChild(childelem)
}
const editButton = document.createElement('input')
editButton.type ='button'
editButton.value ='EDIT EXPENCE'
editButton.onclick=()=>{
localStorage.removeItem(obj.email)
parentelem.removeChild(childelem)
document.getElementById('usernameInputTag').value = obj.name
document.getElementById('emailInputTag').value = obj.email
document.getElementById('categoryInputTag').value = obj.category
}
childelem.appendChild(deleteButton)
childelem.appendChild(editButton)
parentelem.appendChild(childelem)
}
</script>
</body>
</html>