BookStore/script.js at main · MostafaMTK/BookStore · GitHub

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
'use strict';
const signupBtn = document.querySelector('.login .dont-have a');
const loginBtn = document.querySelector('.signup .already-have a');
signupBtn?.addEventListener('click', function (e) {
  e.preventDefault();
  document.querySelector('.login').classList.add('hide-me');
  document.querySelector('.signup').classList.remove('hide-me');
  document.querySelector('.send-data').style.height = '450px';
});
loginBtn?.addEventListener('click', function (e) {
  e.preventDefault();
  document.querySelector('.login').classList.remove('hide-me');
  document.querySelector('.signup').classList.add('hide-me');
  document.querySelector('.send-data').style.height = '400px';
});
const loginForm = document.querySelector('.login form');
loginForm?.addEventListener('submit', function (e) {
  const username = document.getElementById('user-name');
  const pass = document.getElementById('pass');
  if (username.value === '' || pass.value === '') {
    e.preventDefault();
    document.querySelector('.send-data').style.height = '450px';
    const error = document.querySelector('.login .error');
    error.classList.add('show-error');
    error.textContent = 'Please Fill All The Fields';
    setTimeout(function () {
      error.classList.remove('show-error');
      error.textContent = '';
      document.querySelector('.send-data').style.height = '400px';
    }, 3000);
  }
});
const signupForm = document.querySelector('.signup form');
signupForm?.addEventListener('submit', function (e) {
  const username = document.getElementById('user-name-signup');
  const mail = document.getElementById('mail-signup');
  const pass = document.getElementById('pass-signup');
  if (username.value === '' || pass.value === '' || mail.value === '') {
    e.preventDefault();
    document.querySelector('.send-data').style.height = '500px';
    const error = document.querySelector('.signup .error');
    error.classList.add('show-error');
    error.textContent = 'Please Fill All The Fields';
    setTimeout(function () {
      error.classList.remove('show-error');
      error.textContent = '';
      document.querySelector('.send-data').style.height = '450px';
    }, 3000);
  }
});
const cashBtn = document.querySelector(
  '.buy .pay .info form .payment-method #cash'
);
cashBtn?.addEventListener('click', function () {
  const cardIn = document.querySelector('.buy .pay .info form .card-number');
  cardIn.classList.add('hide-card');
});
const cardBtn = document.querySelector(
  '.buy .pay .info form .payment-method #card'
);
cardBtn?.addEventListener('click', function () {
  const cardIn = document.querySelector('.buy .pay .info form .card-number');
  cardIn.classList.remove('hide-card');
});

const paymentForm = document.querySelector('.info form');
paymentForm?.addEventListener('submit', function (e) {
  const username = document.getElementById('name-pay');
  const mail = document.getElementById('mail-pay');
  const address = document.getElementById('address-pay');
  const phoneNumber = document.getElementById('number-pay');
  const paymentMethod = document.getElementsByName('method');
  const cardNumber = document.getElementById('card-number');
  if (
    username.value === '' ||
    mail.value === '' ||
    address.value === '' ||
    phoneNumber.value === '' ||
    (paymentMethod[1].checked && cardNumber.value === '')
  ) {
    e.preventDefault();
    const error = document.querySelector('.info .error');
    error.classList.add('show-error');
    error.textContent = 'Please Fill All The Fields';
    setTimeout(function () {
      error.classList.remove('show-error');
      error.textContent = '';
    }, 3000);
  }
});