تکنیک ساده جاوااسکریپتی برای پر کردن ستاره‌های امتیاز‌دهی

در این آموزش کوتاه، اما مفید، قصد داریم به شما با استفاده از HTML، CSS و جاوااسکریپت متدی را آموزش دهیم که با آن می‌توانید ستاره‌های مربوط به امتیازدهی را پر کنید. این چیزی است که می‌خواهیم درست کنیم:

دریافت آیکون ستاره‌ها

مرحله اول از کار این است که دو آیکون برای ستاره‌ها را دریافت کنیم. برای اینکار می‌توانید از کتابخانه Font Awesome استفاده کنید. برای اینکار کافی‌ست وارد وبسایت شده و لینک‌های مربوط به فونت‌ها را دریافت کرده و آن‌ها را در پروژه‌تان قرار دهید. آیکون‌هایی که ما نیاز داریم موارد زیر هستند:

قسمت برچسب‌گذاری HTML

فارغ از مفهوم برچسب‌گذاری ما در این آموزش به یک جدول همراه با ۶ ردیف نیاز داریم. ردیف اول باید شامل عناوین مربوط به جدول باشد که با استفاده از المان th قرار می‌گیرد، در بقیه ردیف‌ها نیز اطلاعات مربوط به هتل‌ها قرار می‌گیرد. واضح است که در این پروژه ممکن است در ردیف‌های مختلف داده‌های مختلفی نیز قرار بگیرد. 

در اینجا می‌توانید چیزی که برای HTML لازم است را مشاهده کنید:

<table>
 <thead>
    <tr>
      <th>Hotel</th>
      <th>Rating</th>
    </tr>
  </thead>
  <tbody>
    <tr class="hotel_a">
      <td>Hotel A</td>
      <td>
        <div class="stars-outer">
          <div class="stars-inner"></div>
        </div>
      </td>
    </tr>
    <tr class="hotel_b">
      <td>Hotel B</td>
      <td>
        <div class="stars-outer">
          <div class="stars-inner"></div>
        </div>
      </td>
    </tr>

    <!-- 3 more rows here -->
    
  </tbody>
</table>

بخش بسیار مهمی که باید برای ردیف‌ها نیز در نظر بگیرید، المان‌های ما بین است که به صورت زیر باید آن‌ها را نوشت:

تا اینجای کار این‌ها موارد کلی بودند که برای قرار دادن در فایل HTML الزامی هستند. 

تا به اینجای کار پروژه ما چیزی شبیه به زیر است:

قسمت CSS

در این قسمت از کار بیایید استایل‌های کلی CSS را به جداول اضافه کنیم:

table {
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #d4d4d4;
  font-size: 20px;
  background: #fff;
}
 
table th, 
table tr:nth-child(2n+2) {
  background: #e7e7e7;
}
  
table th, 
table td {
  padding: 20px 50px;
}
  
table th {
  border-bottom: 1px solid #d4d4d4;
}

قدم بسیار مهم بعدی این است که برای المان‌های .stars-inner و .stars-outer استایل‌‌های لازم را بنویسیم. برای اینکار کدهای زیر را در پروژه قرار دهید:

.stars-outer {
  display: inline-block;
  position: relative;
  font-family: FontAwesome;
}
 
.stars-outer::before {
  content: "\f006 \f006 \f006 \f006 \f006";
}
 
.stars-inner {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
}
 
.stars-inner::before {
  content: "\f005 \f005 \f005 \f005 \f005";
  color: #f8ce0b;
}

تا به اینجای کار ما فونت لازم و آیکون لازم را به پروژه اضافه کردیم. اما این کار را چگونه انجام دادیم؟ برای انجام این کار ما یک پروسه دو قسمتی را دنبال کردیم. ابتدا فونت Awesome را در پروژه CSS قرار دادیم و بعد از آن آیکون‌های مورد نیاز را از طریق کاراکترهای یونیکد به پروژه اضافه نمودیم. برای مشاهده کدهای یونیکد می‌توانید از تصویر زیر کمک بگیرید:

برای آیکون دوم نیز به این شکل :

یکی دیگر از نکات مهم این است که هر کدام از آیکون‌های ما باید پنج بار نمایش داده شوند، بنابراین برای این موضوع ما پنج بار یونیکدها را تکرار کرده‌ایم. به همین دلیل قسمت CSS مربوطه به صورت زیر درآمده است:

.stars-outer::before {
  content: "\f006 \f006 \f006 \f006 \f006";
}
 
.stars-inner::before {
  content: "\f005 \f005 \f005 \f005 \f005";
}

با قرار دادن تمام المان‌های لازم CSS، پروژه ما شبیه به حالت زیر خواهد بود:

ستاره‌های خالی

حال مطمئنا متوجه یک موضوع شده‌اید. اینکه فقط آیکون اول به نمایش در می‌آید و آیکون دومی در کار نیست. چرا؟ این بدان دلیل است که در قسمت CSS مقدار زیر را قرار داده‌اید:

.stars-inner {
  width: 0;
}

با حذف کردن آن بخش از کار ستاره دوم نمایش داده می‌شود:

اگر به کلاس .stars-inner مقدار width برابر با 50% را بدهیم، ستاره‌ها به صورت نصف نصف نمایش داده می‌شوند. 

در هر حال، مقدار اولیه width باید برابر با صفر باشد، به این دلیل که کا قصد داریم این مقدار را به صورت پویا از طریق جاوااسکریپت تغییر دهیم. بیایید این قسمت را نیز پیاده‌سازی کنیم:

بخش جاوااسکریپت

بیایید اینگونه تصور کنیم که امتیاز مربوط به هتل‌های‌مان به صورت زیر است:

const ratings = {
  hotel_a : 2.8,
  hotel_b : 3.3,
  hotel_c : 1.9,
  hotel_d : 4.3,
  hotel_e : 4.74
};

در نظر داشته باشید که ما برای ساده نگه‌داشتن محاسبات از امتیازهای بین ۰ تا ۵ استفاده می‌کنیم. برای ادامه ماجرا ما به صورت زیر کارها را محاسبه می‌کنیم:

1. ما برای شئ ratings یک حلقه را تعریف می‌کنیم. به این نکته نیز توجه داشته باشید که نام هرکدام از اشیا با نام کلاس‌ آن‌ها در قسمت جدول HTML برابر است. بنابراین می‌توانیم کلید هرکدام از شئ‌ها را به یک هتل نسبت دهیم.
2. برای هر کلید شئ ما مقدار آن را دریافت کرده و آن را به یک مقدار درصدی تبدیل می‌کنیم.
3. در این قسمت قصد داریم که مقادیر ذکر شده در بالا را به صورت درصدی و نزدیک به مقدار ۱۰ قرار دهیم، به این صورت که مقادیر برابر با ۱۰٪، ۲۰٪، ۳۰٪ و الی آخر می‌شود. اینگونه مقدار دهی به ما دسترسی بسیار بهتری برای امتیاز دهی می‌دهد. در این حالت مقدار ۵۰٪ درست نصف ستاره‌ها را در بر می‌گیرد. 
4. ما مقدار width کلاس .stars-inner را برابر با مقدار دریافتی گرد شده در نظر می گیریم.

براساس چیزی که در این لیست توضیح دادیم، لیست ما به صورت زیر خواهد بود:

const starTotal = 5;
 
for(const rating in ratings) {  
  // 2
  const starPercentage = (ratings[rating] / starTotal) * 100;
  // 3
  const starPercentageRounded = `${(Math.round(starPercentage / 10) * 10)}%`;
  // 4
  document.querySelector(`.${rating} .stars-inner`).style.width = starPercentageRounded; 
}

نسخه نهایی پروژه ما به صورت زیر خواهد بود:

پشتیبانی مرورگر

این نسخه ساخته شده به خوبی توانایی اجرا شدن در دستگاه‌های مختلف را دارد. با این حال اگر در نسخه‌های شما مشکلی پیش آمد خیلی خوب است که اگر با ما آن را به اشتراک بگذارید. در این پروژه ما برای کامپایل کردن اکمااسکریپت۶ از Babel استفاده کرده‌ایم.

در پایان

در این آموزش کوتاه و سریع ما متد بسیار ساده‌ای برای پر کردن ستاره‌های مربوط به امتیاز دهی را بررسی کردیم. امیدوارم از این مطلب و نتیجه آن لذت برده باشید. می‌توانید از این پروژه الهام بگیرید و براساس نیازهای خودتان آن را تغییر دهید. 

مانند همیشه، اگر پرسشی دارید، می‌توانید از طریق قسمت دیدگاه‌ها آن را با ما به اشتراک بگذارید.

منبع