আসসালামু আলাইকুম। কেমন আছেন আপনারা সকলে। বিভিন্ন ওয়েব সাইট-এ আমরা বিভিন্ন ধরণের এবং সুন্দর সুন্দর ঘড়ি দেখতে পাই। আর আমরাও চাই এই ধরণের ঘড়ি আমাদের ওয়েব সাইট-এ যুক্ত করতে। কিন্তু আমরা তা যুক্ত করতে পারিনা। কারণ এই ঘড়ি গুলো কিভাবে তৈরি হয় তা আমরা জানি না। তাই গুগল সার্চ করে আমরা যে ঘড়িটা পাই তাই আমাদের ওয়েব সাইট লাগিয়ে দেই। যদি এমন হয় আমরা নিজেরা আমাদের ইচ্ছে মত ঘড়ি বানিয়ে তা আমাদের ওয়েব সাইট-এ লাগিয়ে দেয়। আর কথা না বাড়িয়ে চলুন আসল কাজে যাওয়া যাক।
ওয়েব সাইট এর জন্য ঘড়ি বানাতে আমাদের ৩টি জিনিস লাগবে।
১। এইচটিএমএল ফাইল(HTML),
২। সিএসএস ফাইল(CSS),
এবং ৩। জেস ফাইল(JS)
তো আসুন আমরা তৈরি করে ফেলি আমাদের মনের মত ঘড়ি যা আমরা আমাদের ওয়েব সাইট-এ ব্যবহার করব।
প্রথমে যেকোন নামে দিয়ে একটি .html ফাইল নিন। আমি index.html নামের ফাইল নিচ্ছি। আপনারা আপনাদের পছন্দের নামে নিতে পারেন তবে আবশ্যই .html হতে হবে। index.html ফাইল-এ নিচের কোড টুকু লিখুন।
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>এখানে আপনার ওয়েব সাইট-এর নাম বা টিটেল দিন।</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div class="main">
<div class="clockStyle" id="clockDisplay"></div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
কোড গুলো লিখা হয়ে গেলে যেকোন নামে একটি .css file নিন এবং তা এইচটিএমএল এর সাথে যুক্ত করে দিন। বুজতে না পারলে উপরের কোড গুলো দেখুন। আমি style.css নামে একটি সিএসএস ফাইল নিয়েছি। আপনারা যেকোন নামে নিতে পারেন তবে তা .css হতে হবে এবং .html এর সাথে যুক্ত করতে হবে। এখন style.css ফাইল টা খুলে নিচের কোড গুলো লিখুন।
<style type="text/css">
.main{
margin:80px auto;
width:800px;
}
.clockStyle{background:#000;
border:#999 2px inset;
padding:6px;
color:#0ff;
font-family:"arial black", gadget, sans-serif;
font-size:16px;
font-weight:bold;
letter-spacing:2px;
display:inline;
}
</style>
এই কোড গুলো হচ্ছে আপনার ঘড়িটা দেখতে কেমন হবে। এখন হচ্ছে আসল ঘটনা। আপনার ঘড়িটা বানানোর পালা। এখন আপনাকে একটি .js ফাইল বানাতে হবে তা যেকোন নামেই হোক কিন্তু .js হতে হবে এবং তা অবশ্যই এইচটিএমএল এর সাথে যুক্ত হতে হবে উপরের এইচটিএমএল ফাইল এর কোড গুলো দেখতে পারেন। আমি ওখানে script.js নামে ফাইল যুক্ত করেছি। .js ফাইলটি যদি যুক্ত করে থাকেন তাহলে .js ফাইলটা খুলে নিচের কোড গুলো দিয়ে দিন।
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);
}
কোড গুলো লিখা হয়ে গেলে নিচের লাইনটুকু এইচটিএমএল-এর একেবারে শেষে যেখানে </body> ট্যাগ আছে তার ঠিক আগে দিয়ে দিন
<script type="text/javascript" language="javascript">
renderTime();
</script>
এবং সবগুলো ফাইল save করে আপনার পছন্দের Browser-এ open করে দেখুন। এর ডিজাইন পরিবর্তন করতে চাইলে সিএসএস এর মাধ্যমে পরিবর্তন করতে পারবেন।
আপনি যদি চান আপনার পছন্দের ছবি আপনি border -এ দিবেন তাহলে নিচের সাইট থেকে আপনাদের পছন্দের ছবি দিয়ে border তৈরি করে নিতে পারবেন।
এখান থেকে আপনি কিছু ঘড়ির উদাহরন পাবেন। আশা করি আপনারা সুন্দর সুন্দর ঘড়ি বানিয়ে দেখাবেন। আজ এই পর্যন্ত আবার আসবো নতুন কোন কিছু নিয়ে। ততদিন পর্যন্ত ভালো থাকবেন। আল্লাহ হাফেজ।
আমার সাথে যোগাযোগ করতে চাইলে এই পেজ-এ যুক্ত হতে পারেন এবং আপনাদের তৈরি ঘড়ি গুলো আমাকে দেখতে চাইলে এই পেজ-এ দেখাতে পারেন।
[বি.দ্রঃ এই টিউনটি তাদের জন্য যারা নতুন ওয়েব ডিজাইনিং শিখছেন। অবিজ্ঞ ভাইয়েরা দয়া করে কিছু মনে করবেন না।]
আমি মোহাম্মদ রিয়াদ। Front-end Designer and WP Developer, Soft Bucket, Chattogram। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 8 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 23 টি টিউন ও 14 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 4 টিউনারকে ফলো করি।
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
