├── README.md
├── app.js
├── index.html
└── style.css


/README.md:
--------------------------------------------------------------------------------
1 | 😁میخوای بگم متنت چند تا نقطه داره؟
2 | 
3 | # [See](https://mohammadyousefvand.github.io/Dot-Counter/)
4 | 
5 | For challenge and fun 🏂
6 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | const countdotText = document.querySelector('.count-dot')
 2 | const btnElement = document.querySelector('.btn')
 3 | const textarea = document.getElementById('textarea')
 4 | const countBox = document.querySelector('.count-box')
 5 | const errText = document.querySelector('.err-text')
 6 | 
 7 | //هر گروه از حروف الفبای فارسی را به ترتیب از بی نقطه تا سه نقطه
 8 | //به عنوان یک دیتای آرایه ای در یک آرایه والد قرار دادیم
 9 | 
10 | //حرف ی هم میتواند بصورت چسبان نقطه داشته باشد و هم بصورت ی آخر نداشته باشد
11 | //بصورت پیش فرض با دو نقطه در نظر گرفتیم و در گروه دو نقطه ای ها قرار دادیم
12 | 
13 | let wordsArray = [
14 |     ['ا', 'ص', 'ع', 'ه', 'ح', 'گ', 'ک', 'م', 'آ', 'ل', 'س', 'و', 'ط', 'د', 'ر'],
15 |     ['ب', 'ج', 'خ', 'ذ', 'ز', 'ظ', 'ض', 'ف', 'غ', 'ن'],
16 |     ['ت', 'ق', 'ی'],
17 |     ['پ', 'ث', 'چ', 'ژ', 'ش'],
18 | ];
19 | 
20 | const pattern = /[ی]\s|[ی]$/g;
21 | //از این الگو برای پیدا کردن ی های آخر که نقطه ندارند استفاده شده
22 | //هم ی های آخر جمله و هم وسط جمله که بعد آنها فاصله هست شناسایی شده در یک آرایه قرار میگیرند
23 | const arabicPattern = /(ي|ة)/g;
24 | // از این الگو برای شناسایی کلمات عربی استفاده شده
25 | 
26 | const checkDotHandler = (word) => {
27 |     let dotCount = 0;
28 |     const strigWord = word.match(pattern);
29 |     const arabicWord = word.match(arabicPattern)
30 | 
31 |     let dotCounter = counterDot(word, dotCount);
32 |     let dotDepleCounter = checkDepoleString(strigWord, dotCounter)
33 |     let dotArabicCounter = arabicWordCheck(arabicWord, dotDepleCounter)
34 | 
35 |     countBox.classList.add('active')
36 |     errText.classList.remove('active')
37 |     countdotText.innerHTML =
38 |         dotArabicCounter > 1 ? `${dotArabicCounter} تا` :
39 |             dotArabicCounter === 1 ? " یکی" :
40 |                 "هیچی!"
41 | }
42 | 
43 | const counterDot = (word, dotCount) => {
44 |     const chars = word.split('');
45 | 
46 |     for (let i = 0; i < wordsArray.length; i++) {
47 |         chars.map(char => {
48 |             const isCharInWordsArray = wordsArray[i].includes(char);
49 |             if (isCharInWordsArray) {
50 |                 dotCount += i
51 |                 return dotCount;
52 |             };
53 |             //مقدار ایندکس آن گروه که برابر با تعداد نقطه آن گروه از حروف است i در بالا 
54 |         });
55 |     };
56 | 
57 |     return dotCount
58 | }
59 | 
60 | const checkDepoleString = (stringGroupe, dotCount) => {
61 |     if (stringGroupe) {
62 |         const minesCount = stringGroupe.length * 2;
63 |         return dotCount -= minesCount;
64 |         //تعداد ی های بدون نقطه در ضریب تعداد نقطه که ۲ میباشد از تعداد کل نقطه ها کم میشود 
65 |     };
66 |     return dotCount
67 | }
68 | 
69 | const arabicWordCheck = (stringGroupe, dotCount) => {
70 |     if (stringGroupe) {
71 |         const plusCount = stringGroupe.length * 2;
72 |         return dotCount += plusCount;
73 |         //کلمات عربی ي نقطه دار و ة نقطه دار نیز چک شده و محاسبه میشود
74 |     };
75 |     return dotCount
76 | }
77 | 
78 | btnElement.addEventListener('click', () => {
79 |     const textareaValue = textarea.value
80 | 
81 |     if (textareaValue) {
82 |         checkDotHandler(textareaValue)
83 |     } else {
84 |         errText.classList.add('active')
85 |     }
86 | })
87 | 
88 | textarea.addEventListener("keyup", e => {
89 |     textarea.style.height = "63px";
90 |     let scHeight = e.target.scrollHeight;
91 |     textarea.style.height = `${scHeight}px`;
92 | });
93 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="fa" dir="rtl">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Dot Counter</title>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="count-box">
12 |       <span class="count-dot"></span>
13 |       <span></span>
14 |     </div>
15 |     <p class="text">میخوای بگم متنت چند تا نقطه داره؟</p>
16 |     <textarea id="textarea" placeholder="متنت رو بنویس"></textarea>
17 |     <span class="err-text">هنوز که متنت رو ننوشتی بچه جون</span>
18 |     <button class="btn">بگو ببینم</button>
19 |     <script src="app.js" defer></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Vazirmatn&display=swap");
 2 | 
 3 | * {
 4 |   margin: 0;
 5 |   padding: 0;
 6 |   box-sizing: border-box;
 7 |   font-family: "Vazirmatn", sans-serif;
 8 |   border: none;
 9 |   outline: none;
10 | }
11 | 
12 | body {
13 |   width: 100%;
14 |   height: 100vh;
15 |   background-color: #161623;
16 |   color: #fff;
17 |   display: flex;
18 |   flex-direction: column;
19 |   align-items: center;
20 |   justify-content: center;
21 |   gap: 30px;
22 |   padding: 16px;
23 |   position: relative;
24 | }
25 | 
26 | .text {
27 |   font-size: 20px;
28 | }
29 | 
30 | #textarea {
31 |   width: 300px;
32 |   padding: 16px;
33 |   font-size: 16px;
34 |   border-radius: 5px;
35 |   background: none;
36 |   color: #fff;
37 |   resize: none;
38 | }
39 | 
40 | #textarea::placeholder {
41 |   color: rgb(0, 191, 255);
42 |   opacity: 0.6;
43 | }
44 | 
45 | #textarea::-webkit-scrollbar {
46 |   width: 0px;
47 | }
48 | #textarea:is(:focus, :valid) {
49 |   padding: 14px;
50 |   border: 2px solid rgb(0, 191, 255);
51 | }
52 | 
53 | .btn {
54 |   width: 300px;
55 |   height: 40px;
56 |   background-color: rgb(255, 20, 147);
57 |   color: #fff;
58 |   border-radius: 5px;
59 |   cursor: pointer;
60 |   font-size: 16px;
61 | }
62 | 
63 | .count-box {
64 |   font-size: 50px;
65 |   position: absolute;
66 |   top: 80px;
67 |   display: none;
68 | }
69 | 
70 | .count-dot {
71 |   color: rgb(255, 20, 147);
72 | }
73 | 
74 | .err-text {
75 |   display: none;
76 | }
77 | 
78 | .active {
79 |   display: block;
80 | }
81 | 
82 | @media screen and (min-width: 550px) {
83 |   #textarea,
84 |   .btn {
85 |     width: 500px;
86 |   }
87 | }
88 | 


--------------------------------------------------------------------------------