ওয়েব সাইটের জন্য ডিজিটাল ঘড়ি। আপনি নিজেই তৈরি করুন!

আসসালামু আলাইকুম। কেমন আছেন আপনারা সকলে। বিভিন্ন ওয়েব সাইট-এ আমরা বিভিন্ন ধরণের এবং সুন্দর সুন্দর ঘড়ি দেখতে পাই। আর আমরাও চাই এই ধরণের ঘড়ি আমাদের ওয়েব সাইট-এ যুক্ত করতে। কিন্তু আমরা তা যুক্ত করতে পারিনা। কারণ এই ঘড়ি গুলো কিভাবে তৈরি হয় তা আমরা জানি না। তাই গুগল সার্চ করে আমরা যে ঘড়িটা পাই তাই আমাদের ওয়েব সাইট লাগিয়ে দেই। যদি এমন হয় আমরা নিজেরা আমাদের ইচ্ছে মত ঘড়ি বানিয়ে তা আমাদের ওয়েব সাইট-এ লাগিয়ে দেয়। আর কথা না বাড়িয়ে চলুন আসল কাজে যাওয়া যাক।

ওয়েব সাইট এর জন্য ঘড়ি বানাতে আমাদের ৩টি জিনিস লাগবে।

১। এইচটিএমএল ফাইল(HTML),

এবং ৩। জেস ফাইল(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); } কোড গুলো লিখা হয়ে গেলে নিচের লাইনটুকু এইচটিএমএল-এর একেবারে শেষে যেখানে ট্যাগ আছে তার ঠিক আগে দিয়ে দিন

এবং সবগুলো ফাইল save করে আপনার পছন্দের Browser-এ open করে দেখুন। এর ডিজাইন পরিবর্তন করতে চাইলে সিএসএস এর মাধ্যমে পরিবর্তন করতে পারবেন।

আপনি যদি চান আপনার পছন্দের ছবি আপনি border -এ দিবেন তাহলে আপনাদের পছন্দের ছবি দিয়ে border তৈরি করে নিতে পারবেন।

[বি.দ্রঃ এই পুস্ট তাদের জন্য যারা নতুন ওয়েব ডিজাইনিং শিখছেন। অবিজ্ঞ ভাইয়েরা দয়া করে কিছু মনে করবেন না।]