clicktochat/script.js at main · itzDM/clicktochat · 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
const inputForm = document.querySelector(".form");
const link = document.querySelector(".link");
const chatInfo = document.querySelector(".chatInfo");
const createLinkMob = document.createElement("a");
const createLinkWeb = document.createElement("a");
const input = document.querySelector(".input");
const error = document.querySelector(".error");
const mode = localStorage.getItem("mode") || "";
const body = document.querySelector(" body");
const themeBtnImg = document.querySelector(".themeBtnImg");
const inputMessage = document.querySelector(".textArea");

document.body.className = mode;

//  theme mode
themeBtnImg.addEventListener("click", () => {
  localStorage.setItem("mode", mode == "light" ? "" : "light");
  body.style.transition = "all 1s ease-out 0s";
  body.classList.toggle("light");
});

// adding country code selector
const phoneInput = window.intlTelInput(input, {
  preferredCountries: ["in", "us"],
  utilsScript:
    "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});

//  validating mobile number
const validateMobileNumber = (number) => {
  const phoneNumberRegex = /^(\+\d{1,3})?\d{10,15}$/;
  if (!Number(number)) {
    return { error: "Not A Valid Mobile Number" };
  } else if (phoneNumberRegex.test(number)) {
    return { phoneNumber: number };
  } else {
    return { error: "Not A Valid Mobile Number" };
  }
};

inputForm.addEventListener("submit", (e) => {
  e.preventDefault();
  createLinkMob.remove();
  createLinkWeb.remove();
  chatInfo.textContent = "";
  if (phoneInput.getNumber() === "") {
    error.textContent = "Please enter a Mobile Number";
    const interval = setInterval(() => {
      error.textContent = "";
      clearInterval(interval);
    }, 2000);
    return;
  } else {
    const isNumber = phoneInput.getNumber().replace(/\s/g, "");
    const result = validateMobileNumber(isNumber);
    if (result.error) {
      error.textContent = result.error;
      const interval = setInterval(() => {
        error.textContent = "";
        clearInterval(interval);
      }, 2000);
      return;
    }
    chatInfo.textContent = `Chat on WhatsApp with ${phoneInput.getNumber()}`;
    const urlWeb = `https://web.whatsapp.com/send/?phone=${phoneInput.getNumber()}&text=${
      inputMessage.value
    }&type=phone_number&app_absent=0`;
    const urlMob = `https://api.whatsapp.com/send/?phone=${phoneInput.getNumber()}&text=${
      inputMessage.value
    }&type=phone_number&app_absent=0"`;
    createLinkMob.href = urlMob;
    createLinkMob.target = "_blank";
    createLinkMob.textContent = "Continue to Chat app";
    createLinkMob.classList.add("btn");
    link.appendChild(createLinkMob);
    createLinkWeb.href = urlWeb;
    createLinkWeb.target = "_blank";
    createLinkWeb.textContent = "Continue to Chat web";
    createLinkWeb.classList.add("btn");
    link.appendChild(createLinkWeb);
  }
});