পিওর জাভাস্ক্রিপ্ট দিয়ে ওয়েবসাইটে ’day/night mode’ অপশন বানানো।

ওয়েবসাইটে ডে এবং নাইট মুড থাকাটা উইজারদের খুব ভালো অভিজ্ঞতা দেয়। বেশিরভাগ সাইটেই দেখবেন এটি দেয়া আছে।

একজন ওয়েবসাইট ডিজাইনার হিসেবে এটি আপনারও জানা দরকার। এটি একটি বেসিক ধারনা,যেটা দিয়ে আসলে অনেক কাজই করে ফেলতে পারবেন। তো চলুন কথা না বাড়িয়ে টপিকে চলে যাই।

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

addEventListener দিয়ে আমরা সহজেই বডিতে একটা ক্লাস যোগ করে সেই ক্লাস দিয়ে স্টাইল লিখে কাজটি করতে পারি। কিন্তু ব্যপার হচ্ছে, এই ক্লাসটি ওয়েবসাইটটি রিলোডের সাথে সাথে চলে যাবে। এই সমস্যা সমাধানের জন্যই জেএস লোক্যাল স্টোরেজ এপিআই নিয়ে এসেছে। যাতে, কিছু ডেটা ব্রাউজার জমা রেখে ইউজারকে বেটা এক্সেপিরেয়ন্স দিতে পারে।

কি কি শিখতে পারবো:

• কিভাবে কো ট্যাগের ভেতর নতুন attribute ঢোকানো যায়।
• লোকাল স্টোরেজে কিভাবে ভ্যালু সেভ করে সেটাকে কাজে লাগানো যায়।
• জেএস রেন্ডার ব্লকিং

কি কি জানা থাকতে হবে এটি অনুসরন করতে।

• বেসিক HTML
• Basic CSS
• Basic JS (arrow function, localStorage, turnary operator, addEventListener)

প্রথমেই আমরা HTML input ফিল্ড নেবো এবং দেখার সুন্দরের জন্য তার ভেতর একটি আইকন বা ইমেজ নিতে পারি।

	<div class="night-mood">
			<label for="daynight">
                       <img style="max-width: 30px;" src="images/daynight.png' ?>" alt="">
                       </label>
			<input id="daynight" type="checkbox">
	</div>

এখন আমাদের জেএস দিয়ে HTML রূটে একটি এট্রিবিউট বানাবো এবং তার ভেতর দুইটা ক্লাস বসাবো। এবং সেটি অবশ্যই ব্রাউজারের স্টোরেজে সেভ করে রাখবো যেন রিলোডে ক্লাসটি চলে না যায়।

এজন্য আমরা বাটনটি একটি কন্সট্যান্ট ভ্যারিয়াবলের ভেতর নেবো। এবং লোকাল স্টোরেজে সেভ থাকলে সেটাকে নিয়ে আমরা প্রসেস করবো।

const dnButton = document.querySelector("#daynight");
const dnStoredData = localStorage.getItem("dnswitcher");

if (dnStoredData) {
    document.documentElement.setAttribute('data-wpdn', dnStoredData);

    if (dnStoredData === 'dark') {
        dnButton.checked = true;
    }

}

ব্যাপারটা যেটা হচ্ছে এখানে সেটা হচেছ, লোকাল স্টোরেজে কিছু সেভ থাকলে সেটাকে তুলে আনতে localStorage.getItem(); এই মেথডটা ইউজ হয়। আমরা যেহেতু একটু পরেই dnswitcher নামে স্টোরেজে ডেটা সেভ করবো তাই সেটাকে একটা কন্সট এ নিয়ে রাখলাম।

এখন, স্টোরেজে আসলেই যদি কিছু থাকে তাহলে আমরা HTML root একটা এট্রিবিউট বানিয়ে সেখানে আমাদের স্টোরেজের ডেটাকে ঢুকাবো।

এরপরে যেটা করতে হবে সেটা হচ্ছে আমাদের আইকনে বা ইনপুটে ক্লিক করলে যেন রুটে ডার্ক বা লাইট ভ্যালুটি বসাতে পারি সাথে সাথে সেটা লোকাল স্টোরেজে সেভ করতে পারি। সেজন্য নিচের কোডটুকু।

dnButton.addEventListener('change', (e) => {

    if (e.target.checked) {

        document.documentElement.setAttribute('data-wpdn', 'dark');
        localStorage.setItem('dnswitcher', 'dark');

    } else {

        document.documentElement.setAttribute('data-wpdn', 'light');
        localStorage.setItem('dnswitcher', 'light');

    }

}, false);

এখানে আমাদের html এর ইনপুট ফিল্ডটি চেক হলে ডার্ক এবং আনচেক হলে লাইট ভ্যালুটি বসিয়েছি।

কিছু CSS স্টাইল লিখতে হবে।

:root{
    --bg-color-primary: #fff;
    --primary-color: #333;
}

body{
    background: var(--bg-color-primary);
    color: var(--primary-color);
}

[data-wpdn="dark"]{
    --bg-color-primary: #333;
    --primary-color: #ddd;
}

আমাদের কাজ শেষ। কিন্তু ছোট্ট একটি ইস্যু রয়েছে। যেটাকে বিদ্যুৎ চমকানির মত, বা ফ্লিকারিং বলা যায়। অর্থাৎ যেহেতু আগে আমাদের html লোড হয় এবং পরে জেএস তাই আমাদের কাঙ্খিত ভ্যালুটি সেট হতে লেট হয়ে যায়। সেজন্য আমাদের রেন্ডারিং ব্লক করতে হবে।

একদম head tag এর এপরের দিকে, কিন্তু হেড এর ভেতর অবশ্যই। সিম্পল একটা চেক বসাবো।

(localStorage.dnswitcher) ? document.documentElement.setAttribute('data-wpdn', localStorage.dnswitcher) : ' ';

এখানে আমরা টার্নারি অপারেটপ দিয়ে বলতে চাচ্ছি যে লোকাল স্টোরেজে কি dnswitcher নামে কোন কিছু আছে? থাকলে তাহলে আমাদের এই এট্রিবিউট সেট করে স্টোরেজ এর ভ্যালু বসাও।

That’s should do the work. Thank you guys for learning new things.