ওয়েবসাইটে ব্রাউজার কুকি কালেক্ট করা হলে ইউজারকে সেটা জানানোর জন্য কুকি অ্যালার্ট উইন্ডো দেওয়া হয়। কুকি অ্যালার্ট উইন্ডোতে কুকি সংগ্রহ করার বিষয়ে কিছু লেখা এবং একটি ওকে বাটন থাকে। ওকে বাটনটিতে ক্লিক করলে অ্যালার্ট উইন্ডোর টি ক্লোজ হয়। তাছাড়া কুকি অ্যালার্ট উইন্ডোতে থাকা ওকে বাটনে ক্লিক করে উইন্ডো ক্লোজ করা হলে অ্যালার্ট উইন্ডো টি সেই ভিজিটরকে আর দেখানো হবে না। তো আজকের পোস্টে আলোচনা করা হবে কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে একটি কুকি অ্যালার্ট পপআপ উইন্ডো তৈরি করা যায়। তাহলে চলুন জাম্প করা যাক মূল পোস্টে।
Add HTML
প্রথমে আপনার এইচটিএমএল কোডের মধ্যে নিচের এইচটিএমএল কোডটুকু যুক্ত করে নিন এবং প্রয়োজন অনুযায়ী টেক্সট, লিঙ্ক এগুলো পরিবর্তন করে নিন।
<div class="cookie-banner" id="cookieBanner">
<div class="text">This site use cookie to increase your browsing experience.</div>
<div class="buttons">
<a href="#">learn more</a>
<a onclick="ok()" href="javascript:;">ok</a>
</div>
</div>Add CSS
এইচটিএএল এর কাজ শেষে এবার পালা সিএসএস ব্যবহার করে সেটা ডিজাইন করার। ডিজাইন করার জন্য নিচের সিএসএস কোডগুলো কপি করে আপনার সিএসএস ফাইলের মধ্যে যুক্ত করে দিন অথবা এইচটিএমএল এর মধ্যে স্টাইল ট্যাগ এর ভিতরে পেস্ট করে দিন।
.cookie-banner {
position: fixed;
bottom: -200px;
left: 0;
width: 100%;
max-width: 440px;
padding: 16px;
display: block;
visibility: hidden;
background-color: #eee;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
transition: all 0.5s;
}
.cookie-banner.show {
visibility: visible;
bottom: 0
}
.cookie-banner .text {
color: #333;
font-size: 14px
}
.cookie-banner .buttons {
display: flex;
margin-top: 10px;
justify-content: center
}
.cookie-banner .buttons a {
padding: 8px 12px;
background: seagreen;
margin: 0 10px;
color: white;
text-decoration: none;
border-radius: 3px;
}
.cookie-banner .buttons a:hover {
background: green
}Add JavaScript
আজকের প্রজেক্টে মূল কাজ হলো জাভাস্ক্রিপ্টের। সিএসএস যুক্ত করার পর জাভাস্ক্রিপ্ট যুক্ত না করা পর্যন্ত কুকি অ্যালার্ট উইন্ডো এর কনটেন্ট গুলো হাইড হয়ে থাকবে। তাহলে আর কি নিচের জাভাস্ক্রিপ্ট কোডগুলো কপি করে আপনার জাভাস্ক্রিপ্ট ফাইলের মধ্যে কিংবা এইচটিএমএল এর মধ্যে স্ক্রিপ্ট ট্যাগ এর ভিতরে পেস্ট করে দিন। তবে মাল্টিপল পেজ যুক্ত সাইটের ক্ষেত্রে জাভাস্ক্রিপ্ট কোডগুলো অবশ্যই এক্সটার্নাল ফাইলের মধ্যে রাখবেন।
var cookieBanner = document.getElementById("cookieBanner");
if (localStorage.getItem("cookieSeen") != "shown") {
cookieBanner.classList.add("show");
};
function ok() {
cookieBanner.classList.remove("show");
localStorage.setItem("cookieSeen", "shown");
}Download Project
তো আর্টিকেল মূলত শেষ। আপনি যদি পুরো প্রজেক্ট এর সকল কোড ডাউনলোড করে রাখতে চান তাহলে নিচে প্রজেক্ট এর গুগল ড্রাইভ লিঙ্ক দিলাম সেখান থেকে ডাউনলোড করতে পারবেন, ধন্যবাদ সবাইকে।