-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
50 lines (43 loc) · 1.43 KB
/
script.js
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
// Main elements
const cards = document.getElementById('cards')
const buttonAddCard = document.getElementById('button-addcard')
// Popup elements
const popupBlur = document.getElementById('popup-blur')
const popupCross = document.getElementById('popup-cross')
const popupForm = document.forms['card-create']
// Cancel submit
popupForm.addEventListener('submit', event => {
event.preventDefault()
addCard()
})
// Popup visibility
function showPopup() {
popupBlur.classList.remove("hidden");
}
function hidePopup() {
popupBlur.classList.add("hidden");
}
// Add card fonctionality
function addCard() {
hidePopup()
const formData = new FormData(popupForm);
const cardTitle = document.createElement('h2')
cardTitle.textContent = formData.get('title')
const cardUsername = document.createElement('p')
cardUsername.textContent = `Username : ${formData.get('username')}`
const cardEmail = document.createElement('p')
cardEmail.textContent = `Email : ${formData.get('email')}`
const cardPassword = document.createElement('p')
cardPassword.textContent = `Password : ${formData.get('password')}`
popupForm.reset()
const cardLi = document.createElement('li')
cardLi.appendChild(cardTitle)
cardLi.appendChild(cardUsername)
cardLi.appendChild(cardEmail)
cardLi.appendChild(cardPassword)
cards.appendChild(cardLi)
}
// Main events
buttonAddCard.addEventListener('click', showPopup)
// Popup events
popupCross.addEventListener('click', hidePopup)