কীভাবে সিএসএস, এইচটিএমএল এবং জাভা স্ক্রিপ্ট ব্যবহার মাধ্যমে ক্লিক করে লাইক , লাভ, দুঃখ ইত্যাদি কাউন্ট বা গণনা করা যায় ?




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


যারা আসলে ভাবেন কীভাবে ফেসবুক লাইক কাউন্ট করে? আপনার প্রশ্নের ধরণ যদি হয় এমন তাহলে আমাকে কমেন্ট বক্স এ জানাবেন । আজকে আমারা নতুনদের জন্য এই টিউটোরিয়াল লিখেছি । আমরা আজকে লোকাল মেমোরি বা স্ট্রোরেজ ব্যবহার করে লাইক, লাভ,দারুণ, খারাপ,দুঃখ বাটনে ক্লিক করলে প্রতি ক্ষেত্রেই ১ যোগ হবে এমন কিছু লিখব।  আসলে আসলে এটি শেখার শুরুর দিকে তাই আমরা শিখছি ।

এবং আমি এখন সোর্স কোড আপনাদের উপহার হিসেবে দিব । সোর্স কোড কাস্টমাইজেশন এর মাধ্যমে আপনি আরো বেশি শিখতে পারেন।

Source Code:
🍃




১. এইচটিএমএল অংশ তৈরি


    <button onclick="clickCounter4()" type="button">Sad <div id="result4"></div> </button>
এখানে একটি বাটন এবং একটি ফাংশন এবং ফলাফলের জন্য একটি আইডি নেওয়া হয়েছে ।
এটি কপি করার মাধ্যমে আরো অনেক বাটন তৈরি করা সম্ভব ।


২. সিএসএস তৈরি


<style>

button {
  background-color: white;
  color: blue;
  font-weight:800;
  border: 1px solid blue;
  padding: 5px;
  height: 50px;
  width: 60px;
  margin: 0 2px;
  border-radius: 5px;
  cursor:pointer;
  text-transform: uppercase;
}

button:hover {
  background-color: #ccc4fd;
  text-transform:lowercase;
}

</style>


বাটনের স্টাইল এবং হুভার ইফেক্ট নেওয়া হয়েছে । এখানে আপনার ইচ্ছে অনুযায়ী আরো সৌন্দর্য পূর্ণ করতে পারেন ।

৩. জাভা স্ক্রিপ্ট তৈরি ।


function clickCounter() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount)+1;
    } else {
      localStorage.clickcount = 1;
    }
    document.getElementById("result").innerHTML = "" + localStorage.clickcount + "";
  } else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
  }
}

এখানে একটি ফাংশন নেওয়া হয়েছে ।
এটি কপি করার মাধ্যমে আরো অনেক সেম ফাংশন তৈরি করা যাবে ।
যেমন:
1. function clickCounter()
2. function clickCounter2()
3. function clickCounter3()
4. function clickCounter4()
ইত্যাদি ।
এবং আপনি নতুন হয়ে থাকলে -
যেখানে যেখানে clickcount আছে সেখানে পরিবর্তন করতে পারবেন । 1, 2,3 ইত্যাদি দিয়ে ।

রেজাল্ট বা ফলাফল :



শেষ কথা:
আপনি যদি কাজটি সঠিক ভাবে সম্পূর্ণ করতে পারেন । তাহলে এই সোর্স কোড ব্যবহার করে আপনি সহজেই যেকোনো ক্লিক বাটন তৈরি করার মাধ্যমে ক্লিক কাউন্ট করতে পারবেন । কোনো রকম কোনো সমস্যা হবে না ।

বিশেষ দ্রষ্টব্য :
সোর্স কোড এ কোনো ভুল নেই ।কারণ পরীক্ষা করা হয়েছে এবং তা আপনারা উপরে রেজাল্ট হিসেবে দেখছেন ।



My Talk:

ধন্যবাদ আপনাকে এই ব্লগ টি পড়ার জন্য । আসসালামু আলাইকুম! আমি শেখ জুবায়ের । কিছু কথা বলতে চাই । আসলে অনেক কষ্ট করে, চিন্তাভাবনা করে, প্রত্যেক বিষয়বস্তু সম্পর্কে জ্ঞান অর্জন করে এবং অনেক সময় নিয়ে এই আর্টিকেল বা কন্টেন্ট বা ব্লগটি লিখেছি । তাবে কিছু বানান বা বাক্যের ভূল হতে পারে । আশা রাখি ক্ষমা সুন্দর দৃষ্টিতে দেখবেন ।   তবুও কোনো সমস্যা হলে কমেন্ট বক্স এ জানাবেন । আমি আপনার প্রশ্নের যথাযথ উত্তর দেওয়ার চেষ্টা করব ।  আশা রাখি উপকারে আসবে । অউপকারে আশার মতো কিছু লিখিনি   আমি এটি আমার বিশ্বাস। 



🍃












    My Talk:

    Thank you for reading this blog.
    Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!