پروژه جاوااسکریپت : شمارنده دنبال کنندگان

سلام به دوستان و همراهان عزیز

مثل روال سابق اومدم که یه پروژه کاربردی دیگه رو با هم انجام بدیم.

این شمارنده ما مثل شمارنده هایی که توی سایت های مختلف دیدین قراره عمل کنه و تعداد افرادی رو که در شبکه های اجتماعی مختلف شما رو دنبال می کنند رو نشون بده.

بریم ببینیم چی قراره بنویسیم.

مثل همیشه اول با فایل html کارو شروع می کنیم.

همینجور که میبینید ما CDN مربوط به fontawesome رو اضافه کردیم.

داخل تگی که کلاس counter رو داره یه attribute اضافه کردیم که می تونه هر چیزی باشه که ما اسمشو گذاشتیم data-target تا تعداد دنبال کنندگان هر شبکه اجتماعی رو بهش بدیم و توی اسکریپتمون ازش استفاده کنیم.

بعد این میریم یه کوچولو فایل css رو تغییر بدیم.

توی این قسمت هم CDN مربوط به فونت وزیر اضافه شده به همراه یه سری استایل کلی برای صفحمون.

اینجا هم کار خاص انجام ندادیم یه سری تراز بندیا رو انجام دادیم.

توی این پروژه استایل خیلی برامون مهم نیست و تمرکز اصلی بیشتر روی اسکریپته.

پس بریم سر اصل مطلب:

اینجا باید همه المنت هایی که تگ counter دارن رو بگیریم. بعدش از یه forEach استفاده کنیم تا بتونیم همشونو پیمایش کنیم:

بعد این همه کدامون قراره توی این حلقه نوشته شه.

متن تگ مورد نظرمونو برابر صفر قرار میدیم تا از صفر شروع بشه و یه فانکشن می نویسیم تا بتونیم چندین بار اجراش کنیم و بعد از تعریفش اونو اجرا می کنیم.

داخل فانکشنی که تعریف کردیم باید اون Attribute رو که تعریف کردیم رو مقدارش رو بگیریم و اونو به عدد تبدیل کنیم.

نکته: توی جاوا اسکریپت با قرار دادن + قبل مقدار می تونیم اونو به عدد تبدیلش کنیم.

و مقدار گرفته شده رو تقسیم بر 100 کنیم.(عدد و عوض کنید ببینید چه اتفاقی میفته مثلا 100000)

حالا برای نمایش اعداد باید یه شرط بذاریم:

نکته: Math.ceil برای گرد کردن اعداد اعشاری به سمت بالا به کار می رود.

این پروژه رو حتما یه بار خودتون انجام بدین تا کامل در جریان عملکردش قرار بگیرید.

حتما حتما تمرین کنید. با نگا کردن چیز خاصی یاد نمی گیرید.

اگه فایل پروژه رو خواستین به گیت هاب من مراجعه کنید.

تا پروژه بعد بدرود.