কীভাবে প্রতিক্রিয়া দিয়ে একটি স্মার্ট কী তৈরি করবেন

ডিজাইন থেকে মুখ ফিরিয়ে নেওয়া কোনও ওয়েব বিকাশকারী কীভাবে তার সম্মুখ-স্বপ্নের স্বপ্নগুলি বাস্তবায়িত করেছিল এটি একটি তিনটি বোতামের গল্প।

আপনার আগে থেকেই জানা উচিত যে এখানে বেশিরভাগ স্টাইলিং হ'ল বয়লারপ্লেট বুটস্ট্র্যাপ। এটি দুর্দান্ত দেখায় এবং অন্তর্মুখী পণ্য। সুতরাং আমরা এমন কোনও কিছুই ঠিক করি না যা ভাঙ্গা নয়।

আমাদের কাজটি ছিল ডেটা সেট পরিচালনা করার জন্য একটি সহজেই বোধগম্য ইন্টারফেস তৈরি করা। আমাদের ডেটা সেটের একটি তিন ভাগের স্থিতি রয়েছে - হয় উপলব্ধ, অসুস্থ বা ভ্যাব। একবার যোগাযোগ করার মতো অবস্থা খুব বেশি নয়, তবে আমাদের একটি পৃষ্ঠায় পাঁচ সপ্তাহের প্রয়োজন।

পার্শ্ব দ্রষ্টব্য: "VAB" একটি সুইডিশ শব্দ যার অর্থ আপনি আপনার অসুস্থ সন্তানের সাথে বাড়িতে থাকবেন। আপনার পারিশ্রমিক এবং নিখরচায় উভয়ই আপনি এটি করেন বা নিজে অসুস্থ কিনা তা একটি পার্থক্য করে!

একটি বিদ্যমান রেকর্ড অনুসন্ধান করুন

প্রথম ধাপে এটি দেখানো হয়েছিল যে প্রশ্নোক্ত দিনের জন্য ব্যবহারকারীর ডেটা রেকর্ড রয়েছে কিনা। আমি জানি প্রতিটি প্রতিক্রিয়া প্রকল্পের মতো, আমরা একটি API (আমাদের নিজস্ব) থেকে একটি তালিকা নিয়েছি এবং এটির উপরে পুনরাবৃত্তি করেছি। যেহেতু এপিআই বিদ্যমান রেকর্ডগুলির একটি তালিকা ফেরত দেয় এবং কোনও রেকর্ড ছাড়াই দিনগুলি উপেক্ষা করে, তাই আমাদের নিজের দিনের অ্যারে সেট আপ করতে হবে।

পাঁচ সপ্তাহের মূল্যমানের জন্য এখানে আমাদের কোডটি রয়েছে:

এক্সপ্রেস কনস্ট ডেটআরে = (সংখ্যাআফডেস, স্টার্টডেট) => {কনস্ট ডে = মূহুর্ত (স্টার্টডেট); দিন দিন = []; যখন (দিন. দৈর্ঘ্য)

আমি ইতিমধ্যে মোমেন্ট.জেএস সম্পর্কে লিখেছি। আপনি যদি এটি ব্যবহার না করেন তবে অভিশাপ ট্রেনে উঠুন! এটি তারিখগুলির সাথে কাজ করা সহজ করে তোলে - যেমন এখানে আমরা ডেইডএডএড (1, 'দিন') কল করতে পারি বা যেখানে আমরা সপ্তাহের দিনটি মুহুর্তের সাথে (স্টার্টডেট) .ডে () পেয়েছি।

মুহুর্তের জিনিসগুলি পরিবর্তনযোগ্য! সুতরাং সাধারণভাবে সাবধান হন তবে এটি এখানে দুর্দান্ত কারণ আমাদের ট্যাগটি আপডেট করতে হবে এবং আমরা খুব কম কোড দিয়ে এটি করতে পারি।

পার্শ্ব দ্রষ্টব্য: আমেরিকানরা অবশ্যই শনিবারকে সপ্তাহের শেষ দিন তৈরি করবে - - - এবং রবিবার প্রথম দিন - ০. তবে সুইডেন বা মূলত বিশ্বের অন্যান্য অংশ নয়। প্রায় সমস্ত অ-আমেরিকানদের জন্য, সপ্তাহটি সোমবার থেকে শুরু হয়। প্রোগ্রামিং আমেরিকা লক্ষ্য খুব অদ্ভুতভাবে হতে পারে।

এখানে আপনি দেখতে পাচ্ছেন যে আমরা স্টার্টডেট দিয়ে শুরু তারিখগুলির তালিকা একসাথে রেখে দিচ্ছি এবং আমরা অফফায়স সংখ্যায় পৌঁছানো এবং সাপ্তাহিক ছুটি বাদ দেওয়া পর্যন্ত চালিয়ে যাব। আমরা আমাদের রেকর্ড তালিকাটি তৈরি করতে এই অ্যারেটি ব্যবহার করব যাতে আমরা এটিতে কিছু সুস্বাদু বোতাম রাখতে পারি।

প্রকৃত রেকর্ড প্রতিবিম্বিত করতে আমাদের দিনের অ্যারে ম্যাপিং

এখন যেহেতু আমাদের প্রদর্শন করার দরকার সমস্ত দিন রয়েছে (এরপরে "ডেটআরে" বলা হয়), কোনও রেকর্ড প্রদর্শন করতে হবে কিনা তা জানতে আমাদের এপিআই থেকে আমাদের রেকর্ডটি পুনরাবৃত্তি করতে হবে। যেহেতু আমরা কোনও রেকর্ড ছাড়াই ডেটা প্রদর্শন করতে চাই, তাই কিছু ভরাট এবং কিছু খালি রেকর্ড সহ আমাদের একটি অ্যারে সেট করা দরকার:

কনট ইউজার রেকর্ডস = ডেটআরে (50, স্টার্টডে)। মানচিত্র (তারিখ => {কনট রেকর্ডটোরটেন = ডেটাফাইন্ড (রেকর্ড => রেকর্ড.ডেট === তারিখ); প্রত্যাবর্তন {তারিখ, রেকর্ড: রেকর্ডটোরিটেনার;;});

এখন আমাদের কাছে তারিখগুলির একটি সেট রয়েছে, কিছুতে একটি সম্পূর্ণ ডেটাসেট এবং কোনওটি ডেটাসেটের সাথে: অপরিবর্তিত।

উপলব্ধ কী যুক্তি

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

বোতামের পাঠ্য সেট করুন

বাটন পাঠ্য সেট করতে, আমি এখানে রেকর্ড আছে কিনা তা পরীক্ষা করে দেখি:

কনট বাটনটেক্সট = () => ইম্পটি (এটি.পপস.ডাটা.রেকার্ড)? 'যোগ': 'উপলব্ধ'

মনে রাখবেন, আমি আমার প্রতিটি বোতামের উপাদানগুলিতে {তারিখ: 'কিছু তারিখ', রেকর্ড: {কিছু: 'রেকর্ড' pass pass পাস করি। যদি আমার ইউজার রেকর্ডস সেদিনের জন্য কোনও রেকর্ড না পেয়ে থাকে তবে ডেটা.রেকার্ডে কোনও কিছুই নেই এবং আমরা "অ্যাড" বলতে পারি। আইসেম্পটি চমৎকার লোডাস জাভাস্ক্রিপ্ট লাইব্রেরি থেকে আসে। ট্রেনে ফিরে এসো। লোডাশ জাভাস্ক্রিপ্টকে এত পরিস্কার ও কাজ করা সহজ করে তোলে।

বোতামের রঙ নির্ধারণ করা হচ্ছে

আমাদের সেট কালার ফাংশনটি রেকর্ডের উপস্থিতিও পরীক্ষা করে, তবে কোন রঙটি প্রদর্শন করতে হবে তা নির্ধারণ করতে রেকর্ডের স্থিতি পরীক্ষা করা দরকার।

কনট সেটকালার = () => {যদি (বিদ্যমান রেকর্ড && রেকর্ড। স্ট্যাটাস === 'উপলব্ধ') "" সাফল্য "ফেরত দেয়; } অন্যথায় যদি (বিদ্যমান রেকর্ড)) gray 'ধূসর' ফেরত; } অন্য {'গৌণ' ফেরত দিন; }};

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

রঙিন বোতামগুলি চারটি অবস্থা নির্দেশ করে।

অন্য দুটি বোতাম

আমি যখন রেকর্ডিং নেই তখন "অসুস্থ" এবং "ভ্যাব" বোতামগুলি আড়াল করার জন্য আমি প্রতিক্রিয়ার সুপার হ্যান্ডি শর্তসাপেক্ষ প্রদর্শনটি ব্যবহার করতে পারি। বাকি দুটি বোতামের কোড এখানে:

{বিদ্যমান রেকর্ড এবং& (

আমাদের বোতামগুলির সঠিক রঙ রয়েছে তা নিশ্চিত করার জন্য, আমরা কেবল রেকর্ডটির "অসুস্থ" বা "ব্লক" স্থিতি রয়েছে কিনা তা পরীক্ষা করে দেখি। যদি রেকর্ডের স্থিতি বোতামের সাথে মেলে না, তবে আমরা তা নিশ্চিত করি যে এটি রঙিন নয় (আমাদের "গৌণ" বোতামের রঙ সাদা)।

কনট সেটসেকেন্ডারি কলর = (রেকর্ড, স্ট্যাটাস) => {যদি (রেকর্ড.স্ট্যাটাস! == অবস্থা) '' মাধ্যমিক '{যদি (অবস্থা ===' অসুস্থ ') ফেরান' বিপদ 'ফেরান} যদি (স্থিতি ===' ' ভ্যাব ') {' হলুদ 'ফেরান}

রোলওভার দিয়ে আনন্দ পান

এই মুহুর্তে, বোতামগুলি আমার যা করতে হয়েছিল তা করেছে (প্লাস আমি এই পোস্টটি ছেড়ে দিয়েছি এমন সমস্ত API অনুরোধ যুক্তি - আমরা এই বোতামগুলি ব্যবহার করে রেকর্ড তৈরি এবং আপডেট করছি)।

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

আমি আমার উপলভ্য / অ্যাড বোতামটিতে একটি onMouseOver এবং একটি onMouseOut ইভেন্ট যুক্ত করেছি:

কনট মাউসওভার = () => {যদি (বিদ্যমান রেকর্ড) {this.setState ({বাটনটেক্সট: 'সরান'}); }}; কনট মাউসআউট = () => this.setState ({বাটনটেক্সট: বাটনটেক্সট ()});

আপনি যদি এখন মাউসটিকে বোতামের উপরে সরিয়ে থাকেন তবে কোনও ডেটা রেকর্ড উপলব্ধ থাকলে (এবং অন্যথায় অপরিবর্তিত থাকে) এটি "সরান" এ পরিবর্তিত হয়। আপনি যখন মাউস নিয়ে বাইরে যান, "উপলব্ধ" আবার প্রদর্শিত হয়। খুব সুন্দর, তাই ক্রিয়ামূলক!

মাউসওভার বোতামের কার্যকারিতা প্রদর্শনের জন্য

অপেক্ষাকৃত সহজ কিছুতে কতটা চিন্তাভাবনা এবং প্রচেষ্টা গিয়েছিল তাতে আমি অবাক হয়েছি। ডান রঙ, পাঠ্য এবং ক্রিয়াগুলি বোতামগুলি মনে হচ্ছে তার চেয়ে জটিল। আসলে, আমি এই বোতামগুলি আমার স্বামীর মতো লোকদের দেখিয়েছি যারা কেবল কাঁধ সরিয়ে নিয়েছে। এটি জীবনের সত্য: আপনার মত বোতামগুলি কেউ পছন্দ করবে না।