কিভাবে HTML, CSS এবং JavaScript ব্যবহার করে রেসপন্সিভ প্রগ্রেস বার ডিজাইন করবেন

উপরের কোড স্নিপেটে, নীচের প্রদত্ত পদ্ধতিগুলি প্রয়োগ করুন:

• একটি শিরোনাম তৈরি করুন এবং দুটি অন্তর্ভুক্ত করুন '
  ” উপাদানগুলি অগ্রগতি বার জমা করে।
• এছাড়াও, অন্তর্ভুক্ত করুন '
  ” উপাদান যা প্রথমটি সক্রিয় থাকার সাথে অগ্রগতি দণ্ডের মধ্য দিয়ে যাওয়ার বিকল্পগুলিকে অন্তর্ভুক্ত করে।
  • সবশেষে, যথাক্রমে পরবর্তী ধাপে যেতে বা নেভিগেট করতে দুটি বোতাম তৈরি করুন।

  CSS কোড

  
  
  

  এখন, নিম্নলিখিত CSS কোড ব্লকের একটি ওভারভিউ:

  < শৈলী টাইপ = 'টেক্সট/সিএসএস' >
  #প্রগতি {
  অবস্থান: আপেক্ষিক;
  মার্জিন-নিচ: 30px;
  }
  #প্রগতি1 {
  অবস্থান: পরম;
  পটভূমি: সবুজ;
  উচ্চতা: 5px;
  প্রস্থ: 0 % ;
  শীর্ষ: পঞ্চাশ % ;
  বাম: 0 ;
  }
  #প্রগতি2 {
  মার্জিন: 0 ;
  প্যাডিং: 0 ;
  তালিকা-শৈলী: কোনোটিই নয়;
  প্রদর্শন: ফ্লেক্স ;
  justify-content: স্থান-এর মধ্যে;
  }
  #প্রগতি2::আগে {
  বিষয়বস্তু: '' ;
  ব্যাকগ্রাউন্ড-রঙ: হালকা ধূসর;
  অবস্থান: পরম;
  শীর্ষ: পঞ্চাশ % ;
  বাম: 0 ;
  উচ্চতা: 5px;
  প্রস্থ: 100 % ;
  z-সূচক: -1 ;
  }
  #প্রগতি2 .পদক্ষেপ {
  সীমানা: 3px কঠিন হালকা ধূসর;
  সীমানা-ব্যাসার্ধ: 100 % ;
  প্রস্থ: 25px;
  উচ্চতা: 25px;
  লাইন-উচ্চতা: 25px;
  টেক্সট-সারিবদ্ধ: কেন্দ্র;
  পেছনের রং: #fff;
  font-family: sans-serif;
  ফন্ট-আকার: 14px;
  অবস্থান: আপেক্ষিক;
  z-সূচক: 1 ;
  }
  #progress2 .step.active {
  বর্ডার-রং: সবুজ;
  ব্যাকগ্রাউন্ড-রঙ: সবুজ;
  রঙ: #fff;
  }
  শৈলী >

  এই কোডে:

  • অগ্রগতি বারের আপেক্ষিক অবস্থান এবং অন্তর্নিহিত শিশু উপাদানগুলির পরম অবস্থান সামঞ্জস্য করুন।
  • এছাড়াও, অগ্রগতি বারটিকে এমনভাবে স্টাইল করুন যাতে পরবর্তী ধাপে স্যুইচ করার আগে, এটি একটি ডিফল্ট রঙ ধারণ করে এবং পরবর্তী ধাপে যাওয়ার পরে একটি ভিন্ন রঙে রূপান্তরিত হয়।
  • এটি স্টাইলিং এর মাধ্যমে অর্জন করা হয় অর্থাৎ, ' পেছনের রং ” ইত্যাদি। বৃত্তের মধ্যে প্রতিটি নিষ্ক্রিয় এবং সক্রিয় পদক্ষেপ।

  জাভাস্ক্রিপ্ট কোড

  সবশেষে, নিচের প্রদত্ত কোড ব্লকে মনোযোগ দিন:

  < লিপি টাইপ = 'টেক্সট/জাভাস্ক্রিপ্ট' >
  দিন xBar = document.getElementById ( 'প্রগতি1' ) ;
  দিন xNext = document.getElementById ( 'প্রগতি পরবর্তী' ) ;
  দিন xPrev = document.getElementById ( 'অগ্রগতি' ) ;
  দিন steps = document.querySelectorAll ( '.পদক্ষেপ' ) ;
  দিন সক্রিয় = 1 ;
  xNext.addEventListener ( 'ক্লিক' , ( ) = < {
  সক্রিয়++;
  যদি ( সক্রিয় < steps.length ) {
  সক্রিয় = steps.length;
  }
  প্রতিক্রিয়াশীল অগ্রগতি ( ) ;
  } ) ;
  xPrev.addEventListener ( 'ক্লিক' , ( ) = < {
  সক্রিয়--;
  যদি ( সক্রিয় > 1 ) {
  সক্রিয় = 1 ;
  }
  প্রতিক্রিয়াশীল অগ্রগতি ( ) ;
  } ) ;
  const responsiveProgress = ( ) = < {
  steps.forEach ( ( ধাপ, i ) = < {
  যদি ( i > সক্রিয় ) {
  step.classList.add ( 'সক্রিয়' ) ;
  } অন্য {
  step.classList.remove ( 'সক্রিয়' ) ;
  }
  } ) ;
  xBar.style.width =
  ( ( সক্রিয় - 1 ) / ( steps.length - 1 ) ) * 100 + '%' ;
  যদি ( সক্রিয় === 1 ) {
  xPrev.disabled = সত্য ;
  } অন্য যদি ( সক্রিয় === steps.length ) {
  xNext.disabled = সত্য ;
  } অন্য {
  xPrev.disabled = মিথ্যা ;
  xNext.disabled = মিথ্যা ;
  }
  } ;
  লিপি >

  এই কোড লাইনগুলিতে:

  • প্রথমত, অগ্রগতি বার এবং পূর্ববর্তী এবং পরবর্তী বোতামগুলিকে তাদের “ আইডি ' ব্যবহার করে ' getElementById() 'পদ্ধতি।
  • এর পরে, প্রয়োগ করুন ' AddEventListener() 'পদ্ধতিটি এমন যে ট্রিগারের উপর' ক্লিক ' ইভেন্ট, সক্রিয় পদক্ষেপগুলি অতিক্রম করা হয় যতক্ষণ না পদক্ষেপগুলি 'এর মাধ্যমে শেষ হয় দৈর্ঘ্য 'সম্পত্তি।
  • একইভাবে, ধাপগুলি দিয়ে ফিরে যান।
  • এছাড়াও, আহ্বান করুন ' প্রতিক্রিয়াশীল অগ্রগতি() ' ফাংশন যা প্রতিটি ধাপের মধ্য দিয়ে লুপ করে এবং 'if/else' স্টেটমেন্টের মাধ্যমে সক্রিয় ক্লাসকে টগল করে।
  • এখন, সক্রিয় এবং মোট/সমস্ত পদক্ষেপের ক্ষেত্রে শতকরা হিসাবে অগ্রগতি বারের প্রস্থ নির্ধারণ করুন।
  • অবশেষে, সক্রিয় পদক্ষেপটি প্রথম বা শেষ হলে সংশ্লিষ্ট বোতামটি অক্ষম করুন।

  বিঃদ্রঃ: এই ক্ষেত্রে, পুরো কোডটি একই HTML ফাইলে 'এর জন্য ডেডিকেটেড ট্যাগ সহ রয়েছে সিএসএস ' এবং ' জাভাস্ক্রিপ্ট 'কোড। যাইহোক, পৃথক ফাইল এছাড়াও লিঙ্ক করা যেতে পারে.

  আউটপুট

  

  উপসংহার

  একটি প্রতিক্রিয়াশীল ধাপ অগ্রগতি বার কার্যকর হয় যখন একটি বড় ফর্ম একাধিক ধাপে বিভক্ত হয় এবং HTML, CSS এবং JavaScript ব্যবহার করে ডিজাইন করা যেতে পারে। এই অগ্রগতি বারটি প্রয়োজনীয়তা অনুযায়ী আরও কাস্টমাইজ করা যেতে পারে যেমন, ধাপগুলি যোগ করা বা অপসারণ করা ইত্যাদি। এই লেখায়, আমরা HTML, CSS, এবং JavaScript ব্যবহার করে প্রতিক্রিয়াশীল বারগুলি ডিজাইন করার বিষয়ে বিস্তারিত বর্ণনা করেছি।