A Simple JavaScript Technique for Filling Star Ratings

এই সংক্ষিপ্ত টিউটোরিয়ালে, আমরা এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে স্টার রেটিং পূরণ করার জন্য একটি সহজ, এখনো কার্যকর পদ্ধতি বর্ণনা করব। এখানে আমরা কি নির্মাণ করতে যাচ্ছি:

তারকা আইকন গ্র্যাব্বি করে

আমাদের উদাহরণের জন্য, আমরা নিম্নলিখিত দুটি তারকা আইকন প্রয়োজন হবে:

যে মন দিয়ে, আসুন প্রথম আমাদের প্রকল্পের মধ্যে জনপ্রিয় ফন্ট অসামান্য লাইব্রেরি অন্তর্ভুক্ত করা যাক  : 

মার্কআপ

মার্কআপের সাথে, আমাদেরকে ছয়টি সারি সহ একটি টেবিলের প্রয়োজন। প্রথম সারির টেবিলের হেডার রয়েছে th, অন্য পাঁচটি সারি হোটেলের বিবরণগুলি বহন করে। স্পষ্টতই, আপনার নিজের প্রকল্পে, এই সারিগুলি কিছু ভিন্ন প্রতিনিধিত্ব করতে পারে।

এখানে প্রয়োজনীয় এইচটিএমএল:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<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>

সর্বাধিক গুরুত্বপূর্ণ, tdপ্রতিটি সারির দ্বিতীয় অন্তর্ভুক্ত করা হয়, যা মার্কআপ লক্ষ্য করুন :

1 2 3

<div class="stars-outer"   <div class="stars-inner"></div> </div>

এটি আমাদের হোটেলের তারকা রেটিং দর্শনীয় করার জন্য মার্কআপ শৈলী আছে

এতদূর, আমাদের প্রকল্প এই মত দেখায়:

সিএসএস

এই সময়ে, আসুন কিছু মৌলিক সিএসএস সারণিতে যোগ করি, এভাবে:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22

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-outerএবং .stars-innerউপাদানগুলির জন্য সংজ্ঞায়িত করা। এখানে প্রয়োজনীয় CSS:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

.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; }

চলুন শুরু করা যাক এই সময়ে কিছু জিনিস উপর যান।

CSS এর মাধ্যমে আমরা কাঙ্ক্ষিত ফন্ট অসামান্য আইকন লোড করি। এটি একটি দুই ধাপ পদ্ধতি. প্রথমত, আমরা font-family: FontAwesomeশীর্ষ প্যারেন্ট উপাদান (অর্থাত্ .stars-outer) এ প্রয়োগ করি  । পরবর্তী, আমরা তাদের সিঙ্গল- অক্ষরগুলি তাদের ইউনিকোড অক্ষরগুলি সেট করে আইকন যোগ করি । 

এখানে প্রথম আইকনের জন্য ইউনিকোড আছে:

এবং এখানে দ্বিতীয় জন্য ইউনিকোড আছে:

আরেকটি বিষয় মনে রাখা উচিত যে প্রতিটি আইকন প্রতিটি টেবিলের মধ্যে পাঁচ বার প্রদর্শিত হবে। এই কারণে, আমরা তাদের মত এই তাদের রাখা:

1 2 3 4 5 6 7

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

সিএসএস এর সাথে, প্রকল্পটি নিম্নরূপ দেখায়:

খালি তারা

আপনি লক্ষ্য করবেন যে শুধুমাত্র প্রথম আইকনটি প্রদর্শিত হবে। কিন্তু কেন? এটি আগে আমরা এই সিএসএস নিয়ম সংজ্ঞায়িত কারণ:

1 2 3

.stars-inner {   width: 0; }

সেই নিয়মটি সরিয়ে দিয়ে দ্বিতীয় আইকনটি প্রথম একের উপরে প্রদর্শিত হবে, যেমনটি:

এবং যদি আমরা .stars-inner50% প্রশস্ত উপাদানগুলি তৈরি করতে পারতাম, তাহলে আমরা তাদের অর্ধেক প্রকাশ করতাম:

যাহাই হউক না কেন, প্রথমে widthএর .stars-innerউপাদান হওয়া উচিত 0এবং আমরা পরিবর্তনশীল প্রাসঙ্গিক হোটেলের রেটিং মান উপর নির্ভর করে এটি আপডেট করব। এর পরের অংশে কীভাবে এটি ঘটে তা দেখুন।

জাভাস্ক্রিপ্ট

এর অনুমান করা যাক যে আমাদের হোটেল নিম্নলিখিত মান মান আছে:

1 2 3 4 5 6 7

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

মনে রাখবেন যে, সরলতার স্বার্থে, আমরা পূর্বে উল্লিখিত হার্ড-কোডেড মান (0 এবং 5 এর মধ্যে) নির্দিষ্ট করি। একটি বাস্তব প্রকল্প যদিও, এটি একটি AJAX অনুরোধের মাধ্যমে উদ্ধার করা হতে পারে। অধিকন্তু, বাস্তব জগতে, আমরা 0-4 পরিমাপের মধ্যে প্রাপ্ত উপাদানের মান নিশ্চিত করার জন্য কিছু চেকগুলি করা উচিত।

তাই এখন আমরা রেটিং আছে, আমরা নিম্নলিখিত কর্ম সঞ্চালন:

1. আমরা ratingsবস্তুর মাধ্যমে লুপ লক্ষ্য করুন যে প্রতিটি বস্তুর কী নামটি সারণির সারির শ্রেণী নামের সাথে মেলে। এইভাবে, আমরা একটি অবজেক্ট কী একটি হোটেলে লিঙ্ক করতে পারি।
2. প্রতিটি বস্তুর কী জন্য, আমরা তার মানটি ধরেছি এবং এটি একটি শতাংশ মান রূপান্তর করেছি।
3. আমরা নিকটতম 10 এ অগ্রবর্তী মূল্য বৃত্তাকার। যার মানে, ফলিত মান হবে 0%, 10%, 20%, 30%, ইত্যাদি। এটা গুরুত্বপূর্ণ কারণ এটি আমাদের আঠালো অর্ধেক তৈরি করতে পারবেন। উদাহরণস্বরূপ, 50% একটি মান নির্দেশ করে যে দুই এবং একটি অর্ধ বড় তৃপ্ত হয়।
4. আমরা  গোলাকার মান সমান widthটার্গেট  .stars-innerউপাদান সেট ।

আমরা উপরে বর্ণিত যা উপর ভিত্তি করে, এখানে সংশ্লিষ্ট কোড:

01 02 03 04 05 06 07 08 09 10

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; }

আমাদের প্রকল্পের চূড়ান্ত সংস্করণ নিম্নলিখিত হয়:

ব্রাউজার সাপোর্ট

এই ডেমো বিভিন্ন ডিভাইসে পরীক্ষা করা হয়েছে এবং এটি ভাল কাজ করে। যাইহোক, যদি আপনি কোন সমস্যা সম্মুখীন, আমাকে নীচের মন্তব্য জানতে। উপরন্তু, আপনি সম্ভবত লক্ষ্য করেছেন, আমরা  আমাদের ES6 কোড ES5 এ কম্পাইল করার জন্য Babel ব্যবহার করি  ।

উপসংহার

এই সংক্ষিপ্ত টিউটোরিয়ালে, আমরা তারকা রেটিং পূরণ করার জন্য একটি পদ্ধতি আচ্ছাদিত করেছি। আশা করি, আপনি চূড়ান্ত ফলাফলের দিকে কাজ করার জন্য উপভোগ করেছেন- এমনকি আপনি একটি আসন্ন প্রকল্পে এই কৌশলটি উপভোগ করতে পারেন, অথবা নিজের প্রয়োজনগুলির জন্য এটিতে উন্নতি করতে পারেন।

সর্বদা হিসাবে, যদি আপনার কোন প্রশ্ন থাকে, নীচের মন্তব্য আমাদের সঙ্গে তাদের ভাগ!