-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathForm.js
More file actions
92 lines (80 loc) · 2.45 KB
/
Copy pathForm.js
File metadata and controls
92 lines (80 loc) · 2.45 KB
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
// Form Submıt
let formDom = document.querySelector("#userForm")
formDom.addEventListener('submit', formSubmit)
let formDOM_2 = document.querySelector("#userForm2")
formDOM_2.addEventListener('submit', formSubmit_2)
function formSubmit(event){
// Submit
event.preventDefault() // default işlemi engelledik...
console.log("İşlem Gerçekleşti")
// Input
let scoreInputDOM = document.querySelector('#first')
console.log(scoreInputDOM.value)
localStorage.setItem('infoUser', scoreInputDOM.value)
}
function formSubmit_2(event){
event.preventDefault()
console.log("İşlem Gerçekleşti 2")
let scoreInputDOM = document.querySelector('#name')
console.log(scoreInputDOM.value)
localStorage.setItem('infoUser2', scoreInputDOM.value)
}
// Last Form
let userFormDOM = document.querySelector('#lastForm')
userFormDOM.addEventListener('submit', formHandler)
const alertDOM = document.querySelector('#alert')
const alertFunction = (tittle, message, className="warning") => `
<div class=
"alert alert-${className}
alert-dismissible
fade show
"
role=
"alert
">
<strong>${tittle}</strong> ${message}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`
function formHandler(event) {
event.preventDefault()
const USER_NAME = document.querySelector("#username")
const SCORE = document.querySelector("#score")
if(USER_NAME.value && SCORE.value){
addItem(USER_NAME.value, SCORE.value)
alertDOM.innerHTML = alertFunction(
"İşlem Tamamlandı",
":)",
"success"
)
// Göndertikten sonra sıfırladık
USER_NAME.value =""
SCORE.value = ""
}else {
alertDOM.innerHTML = alertFunction(
"Eyvah Bir Şeyler Ters Gitti !!",
"Eksik Bilgi Girdiniz"
)
}
}
/*
<li class="list-group-item d-flex justify-content-between align-items-center">
list item
<span class="badge bg-primary rounded-pill">14</span>
</li>
*/
let userListDOM = document.querySelector('#userList')
const addItem = (userName, score) => {
let liDOM = document.createElement('li')
liDOM.innerHTML = `
${userName}
<span class="badge bg-primary rounded-pill">${score}</span>
`
liDOM.classList.add(
'list-group-item',
'd-flex',
'justify-content-between',
'align-items-center'
)
userListDOM.append(liDOM)
}