প্রতিদিনের নতুন নতুন সংবাদ ও বিভিন্ন প্রকার টিপস কম্পিউটার টিপস মোবাইল টিপস ভিডিও এডিটিং টিপস ও অন্যান্য ইত্যাদি টিপস জানতে আমাদের ওয়েবসাইট টি ঘুরে আসুন
অনুসন্ধান ফলাফল পেতে এখানে টাইপ করুন!
middle ad

Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript

হ্যালো পাঠক, আজ এই ব্লগে আপনি শিখবেন কিভাবে HTML CSS এবং JavaScript ব্যবহার করে কালারফুল গ্লোয়িং ইফেক্ট সহ একটি কার্যকরী ডিজিটাল ঘড়ি তৈরি করা যায়। এর আগে আমি জাভাস্ক্রিপ্ট ব্যবহার করে কীভাবে একটি ডিজিটাল ঘড়ি তৈরি করতে হয় সে সম্পর্কে একটি ব্লগ শেয়ার করেছি কিন্তু সেই ঘড়িতে, একটি উজ্জ্বল প্রভাব ছিল না এবং এখন ডিজিটাল ঘড়িতে একটি রঙিন উজ্জ্বল প্রভাব তৈরি করার সময়।

একটি ডিজিটাল ঘড়ি বা ঘড়ি যেখানে ঘন্টা, মিনিট এবং কখনও কখনও সেকেন্ডগুলি অঙ্ক দ্বারা নির্দেশিত হয়, একটি এনালগ ঘড়ির বিপরীতে, যেখানে সময় ঘোরানো হাতের অবস্থান দ্বারা নির্দেশিত হয়। আপনি যদি ওয়ার্কিং এনালগ ঘড়ির জন্য অনুসন্ধান করেন, তাহলে আমি কীভাবে একটি ওয়ার্কিং এনালগ ঘড়ি তৈরি করতে হয় সে সম্পর্কে একটি ব্লগ তৈরি করেছি।

এই প্রোগ্রামে (ডিজিটাল ক্লক উইথ কালারফুল গ্লোয়িং ইফেক্ট), ওয়েবপেজে, একটি ডিজিটাল ঘড়ি রয়েছে যা একটি রঙিন গ্রেডিয়েন্ট গ্লোয়িং ব্যাকগ্রাউন্ড এবং টেক্সট ইফেক্ট সহ রিয়েল-টাইম প্রদর্শন করছে। সাধারণত, এই ঘড়িটি আমাদের পিসি/কম্পিউটার থেকে রিয়েল-টাইম নেয়, সার্ভার থেকে নয় এবং ওয়েবপেজে দেখায়। জাভাস্ক্রিপ্ট নতুন তারিখ() পদ্ধতি ব্যবহার করে আমি আমার বর্তমান পিসি থেকে রিয়েল-টাইম আনলাম।

আমি কি বলছি তা যদি বুঝতে অসুবিধা হয়। আপনি এই প্রোগ্রামে একটি সম্পূর্ণ ভিডিও টিউটোরিয়াল দেখতে পারেন (রঙিন উজ্জ্বল প্রভাব সহ ডিজিটাল ঘড়ি)।

রঙিন উজ্জ্বল প্রভাব সহ ডিজিটাল ঘড়ির ভিডিও টিউটোরিয়াল 

 
ভিডিওতে, আপনি কাজ করা ডিজিটাল ঘড়িটি দেখেছেন যা রিয়েল-টাইম প্রদর্শন করছে এবং আমি আশা করি আপনি এই প্রোগ্রামটি তৈরি করার পিছনের মৌলিক কোডগুলি বুঝতে পেরেছেন। আপনি ভিডিওতে দেখেছেন, আমি একটি উজ্জ্বল ব্যাকগ্রাউন্ড ইফেক্ট তৈরি করতে এবং CSS @keyframes প্রপার্টি দিয়ে অ্যানিমেট করতে একমাত্র CSS ব্যবহার করেছি। কিন্তু রিয়েল-টাইম দেখানোর জন্য আমি খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করেছি।

আপনি যদি একজন শিক্ষানবিস হন তবে আপনি এই ডিজিটাল ঘড়ি বা উজ্জ্বল প্রভাবটিও তৈরি করতে পারেন কারণ এই প্রোগ্রামে CSS এবং JavaScript এর কোন বিশাল কোড নেই। আপনি যদি এই প্রোগ্রামটি পছন্দ করেন (কাস্টম চেকবক্স ডিজাইন) এবং সোর্স কোড পেতে চান। আপনি সহজেই এই প্রোগ্রামের সোর্স কোড পেতে পারেন. সোর্স কোড পেতে আপনাকে শুধু নিচে স্ক্রোল করতে হবে। আপনি এই ওয়ার্কিং ক্লকটি আপনার HTML পেজ এবং ওয়েবসাইটে ব্যবহার করতে পারেন।

আপনি এটি পছন্দ করতে পারেন:

রঙিন উজ্জ্বল প্রভাব সহ ডিজিটাল ঘড়ি [উৎস কোড]

এই প্রোগ্রামটি তৈরি করতে (কালারফুল গ্লোয়িং ইফেক্ট সহ ডিজিটাল ঘড়ি)। প্রথমত, আপনাকে দুটি ফাইল তৈরি করতে হবে একটি HTML ফাইল এবং আরেকটি হল CSS ফাইল। এই ফাইলগুলি তৈরি করার পরে আপনার ফাইলে নিম্নলিখিত কোডগুলি পেস্ট করুন।

প্রথমে, index.html নামের একটি HTML ফাইল তৈরি করুন এবং প্রদত্ত কোডগুলি আপনার HTML ফাইলে পেস্ট করুন। মনে রাখবেন, আপনাকে .html এক্সটেনশন দিয়ে একটি ফাইল তৈরি করতে হবে।

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Digital Clock with Glowing Effect | CodingNepal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="display">
<div id="time"></div>
</div>
<span></span>
<span></span>
</div>
<script>
setInterval(()=>{
const time = document.querySelector(".display #time");
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
let day_night = "AM";
if(hours > 12){
day_night = "PM";
hours = hours - 12;
}
if(seconds < 10){
seconds = "0" + seconds;
}
if(minutes < 10){
minutes = "0" + minutes;
}
if(hours < 10){
hours = "0" + hours;
}
time.textContent = hours + ":" + minutes + ":" + seconds + " "+ day_night;
});
</script>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #000;
}
.wrapper{
height: 100px;
width: 360px;
position: relative;
background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
border-radius: 10px;
cursor: default;
animation: animate 1.5s linear infinite;
}
.wrapper .display,
.wrapper span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wrapper .display{
z-index: 999;
height: 85px;
width: 345px;
background: #1b1b1b;
border-radius: 6px;
text-align: center;
}
.display #time{
line-height: 85px;
color: #fff;
font-size: 50px;
font-weight: 600;
letter-spacing: 1px;
background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animate 1.5s linear infinite;
}
@keyframes animate {
100%{
filter: hue-rotate(360deg);
}
}
.wrapper span{
height: 100%;
width: 100%;
border-radius: 10px;
background: inherit;
}
.wrapper span:first-child{
filter: blur(7px);
}
.wrapper span:last-child{
filter: blur(20px);
}

এতটুকুই, এখন আপনি সফলভাবে HTML CSS এবং JavaScript ব্যবহার করে কালারফুল গ্লোয়িং ইফেক্ট সহ একটি ডিজিটাল ঘড়ি তৈরি করেছেন। যদি আপনার কোড কাজ না করে বা আপনি কোনো ত্রুটি/সমস্যার সম্মুখীন হন তাহলে অনুগ্রহ করে নিচে মন্তব্য করুন বা যোগাযোগ পৃষ্ঠা থেকে আমাদের সাথে যোগাযোগ করুন।

ট্যাগ

আরও দেখান

একটি মন্তব্য পোস্ট করুন

0 মন্তব্যসমূহ
* দয়া করে এখানে স্প্যাম করবেন না। সমস্ত মন্তব্য অ্যাডমিন দ্বারা পর্যালোচনা করা হয়.

Top Post Ad

middle ad

Below Post Ad

middle ad

add

middle ad
//