আসসালামু আলাইকুম। কেমন আছেন আপনারা সকলে। বিভিন্ন ওয়েব সাইট-এ আমরা বিভিন্ন ধরণের এবং সুন্দর সুন্দর ঘড়ি দেখতে পাই। আর আমরাও চাই এই ধরণের ঘড়ি আমাদের ওয়েব সাইট-এ যুক্ত করতে। কিন্তু আমরা তা যুক্ত করতে পারিনা। কারণ এই ঘড়ি গুলো কিভাবে তৈরি হয় তা আমরা জানি না। তাই গুগল সার্চ করে আমরা যে ঘড়িটা পাই তাই আমাদের ওয়েব সাইট লাগিয়ে দেই। যদি এমন হয় আমরা নিজেরা আমাদের ইচ্ছে মত ঘড়ি বানিয়ে তা আমাদের ওয়েব সাইট-এ লাগিয়ে দেয়। আর কথা না বাড়িয়ে চলুন আসল কাজে যাওয়া যাক।
ওয়েব সাইট এর জন্য ঘড়ি বানাতে আমাদের ৩টি জিনিস লাগবে।
১। এইচটিএমএল ফাইল(HTML),
২। সিএসএস ফাইল(CSS),
এবং ৩। জেস ফাইল(JS)
তো আসুন আমরা তৈরি করে ফেলি আমাদের মনের মত ঘড়ি যা আমরা আমাদের ওয়েব সাইট-এ ব্যবহার করব।
প্রথমে যেকোন নামে দিয়ে একটি .html ফাইল নিন। আমি index.html নামের ফাইল নিচ্ছি। আপনারা আপনাদের পছন্দের নামে নিতে পারেন তবে আবশ্যই .html হতে হবে। index.html ফাইল-এ নিচের কোড টুকু লিখুন।
কোড গুলো লিখা হয়ে গেলে যেকোন নামে একটি .css file নিন এবং তা এইচটিএমএল এর সাথে যুক্ত করে দিন। বুজতে না পারলে উপরের কোড গুলো দেখুন। আমি style.css নামে একটি সিএসএস ফাইল নিয়েছি। আপনারা যেকোন নামে নিতে পারেন তবে তা .css হতে হবে এবং .html এর সাথে যুক্ত করতে হবে। এখন style.css ফাইল টা খুলে নিচের কোড গুলো লিখুন।
এই কোড গুলো হচ্ছে আপনার ঘড়িটা দেখতে কেমন হবে। এখন হচ্ছে আসল ঘটনা। আপনার ঘড়িটা বানানোর পালা। এখন আপনাকে একটি .js ফাইল বানাতে হবে তা যেকোন নামেই হোক কিন্তু .js হতে হবে এবং তা অবশ্যই এইচটিএমএল এর সাথে যুক্ত হতে হবে উপরের এইচটিএমএল ফাইল এর কোড গুলো দেখতে পারেন। আমি ওখানে script.js নামে ফাইল যুক্ত করেছি। .js ফাইলটি যদি যুক্ত করে থাকেন তাহলে .js ফাইলটা খুলে নিচের কোড গুলো দিয়ে দিন।
datetime=”2016-04-30T18:50:03+00:00″>function toggelNavPanel(x){
var panel = document.getElementById(x),displaY=”block”;
if(panel.style.display == displaY){
panel.style.display = “none”
}else{
panel.style.display = displaY
}
}
function renderTime(){
var currentTime = new Date();
var diem = “AM”;
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if(h == 0){
h = 12;
} else if(h > 12){
h = h – 12;
diem = “PM”;
}
if(h < 10){
h = "0" + h;
}
if(m < 10){
m = "0" + m;
}
if(s < 10){
s = "0" + s;
}
var myClock = document.getElementById('clockDisplay');
myClock.textContent = h + ":" + m + ":" + s + " " + diem;
myClock.innerText = h + ":" + m + ":" + s + " " + diem;
setTimeout('renderTime()',1000);
}
কোড গুলো লিখা হয়ে গেলে নিচের লাইনটুকু এইচটিএমএল-এর একেবারে শেষে যেখানে
