ক্যালকুলেটর প্রকল্প: কেন এটি সহজ ছিল, তবুও বাধা পূর্ণ

হাই, এটা ব্লেজেজ,

ক্যালকুলেটর প্রকল্পে কাজ করা বেশ মজার ছিল এবং আমি বলব, একটি ভিন্ন অভিজ্ঞতা। Etch-a-Sketch থেকে ভিন্ন যা আরও কঠিন বলে মনে হয়েছিল। তাহলে এটা কিভাবে সম্ভব?

উত্তরটি অনুশীলনের অসুবিধার মধ্যে নাও থাকতে পারে তবে অন্য কিছুতে, আমি অনুমান করি। শুরু থেকে শুরু করা যাক।

ক্যালকুলেটর প্রকল্প শুরু করা হচ্ছে

আমি 2রা মে, 2024 তারিখে ক্যালকুলেটরে কাজ শুরু করি। প্রথম সেশনে আমার তিন ঘন্টা সময় লেগেছিল, সেই সময় আমি এটি সেট আপ করতে এবং চালাতে পেরেছিলাম। এটি মধ্যাহ্নের কাছাকাছি ছিল, তাই আমি একটি চূড়ান্ত প্রতিশ্রুতি তৈরি করার, ডিনার করার এবং কাজ করার সিদ্ধান্ত নিয়েছি।

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

অন্যান্য নিবেদিত ওডিনিস্টদের মতো, আমি কোডিং থেকে বিরতি নিতে চাইনি, বিশেষ করে ক্যালকুলেটর থেকে, যা আমি বিশ্বাস করি ফাউন্ডেশনের সবচেয়ে গুরুত্বপূর্ণ প্রকল্প।

অপ্রত্যাশিত অনুপ্রেরণা

ফরেস্টনাইটের ইউটিউব ভিডিও পপ আপ করার সময় আমি আমার কম্পিউটার বন্ধ করতে যাচ্ছিলাম। তিনি কোডিং উপভোগ করার বিষয়ে কথা বলার পরে আমি কিছুটা দেখলাম এবং বিরতি দিলাম।

আমি এই বিষয়ে চিন্তা করেছি, এবং এখানে একজন শিক্ষানবিশ হিসাবে আমার দৃষ্টিভঙ্গি রয়েছে যিনি সবেমাত্র কোডিং শেষ করেছেন এবং এখনও প্রায়শই নিজেকে এই প্রশ্নটি জিজ্ঞাসা করেন।

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

যাইহোক, আমি আগে কখনো কোডিং করিনি!

প্রাথমিক কোডিং অভিজ্ঞতা

যাইহোক, আমি লক্ষ্য করেছি যে আমি যত বেশি কোড করি এবং এটি কাজ করতে দেখি, ততই আমি প্রক্রিয়াটি উপভোগ করি। এটি বিশেষত ক্যালকুলেটরের সাথে সত্য ছিল, যা সামগ্রিকভাবে মসৃণভাবে চলেছিল এবং আমি গুরুতরভাবে আটকে যাওয়া এড়াতে সক্ষম হয়েছিলাম - ভাল, বেশিরভাগই। আমি পরে যে স্পর্শ করব.

এই প্রকল্পটি Etch-a-Sketch প্রকল্পের তুলনায় উল্লেখযোগ্যভাবে সহজ অনুভূত হয়েছিল, যেখানে আমি দুই দিনের জন্য গ্রেডিয়েন্ট রঙ-পরিবর্তন যুক্তি বাস্তবায়নের সাথে সংগ্রাম করেছি। কোডিং অবশ্যই সহজ নয়, কিন্তু এই প্রকল্পের জন্য, আমি চার দিনের মধ্যে প্রতিদিন প্রায় 1.5 থেকে 2 ঘন্টা উৎসর্গ করেছি, এবং এটি একটি পরিচালনাযোগ্য এবং ফলপ্রসূ অভিজ্ঞতা ছিল।

প্রতিবার আমি VSCode খুলেছি, আমি খুব উত্পাদনশীল অনুভব করেছি, যা আমাকে দ্রুত কাজগুলি সমাধান করতে সাহায্য করেছে। এটিতে কাজ করার সময় সবচেয়ে আকর্ষণীয় জিনিসটি ছিল যে আমি অন্যান্য বিকল্পগুলি কল্পনা করতে পারি যা এই অনুশীলনটিও সমাধান করবে।

আমি একটি শিশুর মত কিছু পাগল লেগো টেকনিক গাড়ি তৈরি করে এবং আবার কি বৈশিষ্ট্য যোগ করার কল্পনা. মজার অনুভূতি।

প্রক্রিয়া উপভোগ করছেন

আমি যে ঠিক কি বোঝাতে চাই? আমি জানতাম যে আমি নয়টি আলাদা আলাদা করার পরিবর্তে সমস্ত অঙ্কের বোতামগুলির জন্য ইভেন্ট সহ একটি ফাংশন তৈরি করতে পারতাম।

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

আমি আরও পাঁচ ঘন্টা বা তার বেশি কিছুতে আটকে থাকার প্রত্যাশা করছিলাম, কিন্তু বাস্তবে তা ঘটেনি। আমি এটি কোডের 244 লাইনের সাথে কাজ করেছি।

CSS এর সাথে চ্যালেঞ্জ

এখন, CSS এর সাথে খেলা শুরু করার এবং এই প্রকল্পটিকে কিছুটা স্টাইল করার সময় ছিল। ওয়েল, আমি আটকে গেছি যখন. এটি জাভাস্ক্রিপ্ট তৈরির চেয়ে আরও কঠিন বলে মনে হয়েছিল।

আমি এটা বিশ্বাস করতে পারিনি! আমি জানতাম যে এই প্রকল্পের জন্য আমার ফ্লেক্সবক্স ব্যবহার করা দরকার, কিন্তু বোতামগুলি আমার আগে তৈরি করা Etch-a-Sketch থেকে একটু আলাদা লাগছিল। ইচ-এ-স্কেচে, আমাকে লুপ ব্যবহার করে একটি গ্রিড তৈরি করতে বলা হয়েছিল:

যখনই আমি ফ্লেক্সবক্সের সাথে আটকে যাই, আমি সর্বদা জোশের ব্লগ পোস্টে ফিরে যাই। তারা কিভাবে কাজ করে তার কোন ভালো ব্যাখ্যা নেই, IMHO।

আমি নিশ্চিত ছিলাম না, তবে, এটি একটি ক্যালকুলেটরের জন্য কাজ করবে কিনা, কারণ সমস্ত বোতাম সমান নয়। আমি 0 বড় হতে চেয়েছিলেন, উদাহরণস্বরূপ.

আমি নিবন্ধটি স্ক্রোল করেছি কারণ আমি মনে করেছি যে সেখানে CSS গ্রিড উল্লেখ করা হয়েছিল। এটা পরিণত আমি আসলে এখানে এটি ব্যবহার করতে হবে.

তাছাড়া, ওডিন যে ক্যালকুলেটরটিকে উদাহরণ হিসেবে দেখানো হয়েছে সেটিও CSS গ্রিড ব্যবহার করে ডিজাইন করা হয়েছে।

CSS গ্রিড আবিষ্কার করা হচ্ছে

এই মুহুর্তে, আমি কিছুটা হারিয়ে গিয়েছিলাম কারণ, আমার মনে আছে, আমরা গ্রিডটিকে মোটেও স্পর্শ করিনি।

আমি এটা গুগল আপ করতে শুরু. আমি কি খুঁজে পেয়েছি? এটি কীভাবে ব্যবহার করবেন তার একটি উন্নত ব্যাখ্যা সহ একটি বড় নিবন্ধ। আমি ভেবেছিলাম যে এটির জন্য সময় ছিল না এবং ধরে নিলাম যে আমরা পরবর্তী সময়ে গ্রিডের সাথে পরিচয় করিয়ে দেব।

তার উপরে, অনুশীলনে শুধুমাত্র ফ্লেক্সবক্সের উল্লেখ ছিল sooooo হ্যাঁ, আমি আশা করি আমরাও গ্রিড শিখব। যদি না হয়, আমি নিজে থেকে এক পর্যায়ে ফিরে আসব.

সামান্য আপডেট - পরের দিন, আমি ওডিন ডিসকর্ডে এই পোস্টটি দেখেছি:

চূড়ান্ত সমন্বয় এবং UI ডিজাইন

আমি কয়েকটি ডিভের সাথে যাওয়ার সিদ্ধান্ত নিয়েছি এবং এইচটিএমএলে বোতামগুলিকে পুনরায় গ্রুপ করার সিদ্ধান্ত নিয়েছি

অন্য একটি অধ্যয়ন অধিবেশনের পরে, ক্যালকুলেটরটিকে একটি সাধারণ ডিভাইসের সাথে কিছুটা পরিচিত লাগছিল।

কীবোর্ড সমর্থন যোগ করা হচ্ছে

আমার জন্য শেষ ধাপ ছিল কীবোর্ড সমর্থন করা।

রক্তাক্ত জাহান্নাম! এটি সহজ ছিল না, এবং এই কীবোর্ড কীগুলি কীভাবে কাজ করে তা বোঝার জন্য আমাকে ইভেন্ট পাঠে ফিরে যেতে হয়েছিল এবং ডকুমেন্টেশনটি বেশ কয়েকবার পড়তে হয়েছিল।

এটি বেশ কঠিন ছিল, কারণ ইভেন্ট বুদবুদ আমাকে বিভ্রান্ত করছিল। এটি 1টি ফাংশন তৈরি করার সঠিক মুহূর্ত ছিল যা বোতামে ক্লিক করবে এবং এটির জন্য 2টি কল করবে। একটি মাউসের জন্য 'ক্লিক' এবং দ্বিতীয়টি কীবোর্ডের জন্য 'কীডাউন'।

আমি সমস্ত অঙ্ক এবং সমান বোতামগুলি সাজাতে পেরেছি কিন্তু অপারেটরদের সাথে না যাওয়ার সিদ্ধান্ত নিয়েছি কারণ আমাকে অপারেটরের বস্তুর সাথে আমার যুক্তি পরিবর্তন করতে হবে।

এই সেটআপটি উপলব্ধি করা সহজ বলে মনে হচ্ছে যদি আমি এটি পরে পর্যালোচনা করতে চাই।

যাইহোক, আমি ভুল হতে পারে, তাই মঞ্জুর জন্য এটি গ্রহণ করবেন না.

সমাপ্ত প্রকল্প এখানে দেখা যাবে:

ক্যালকুলেটর

প্রতিফলন এবং পাঠ শেখা

এখানে কি পাঠ ছিল? আমি একটি অ্যাপ তৈরি এবং এটি ডিজাইন করার প্রক্রিয়া উপভোগ করেছি এবং ইভেন্ট সম্পর্কে অনেক কিছু শিখেছি। আমি আপনাকে এটির সাথে অতিরিক্ত ক্রেডিট প্রক্রিয়ার মধ্য দিয়ে যাওয়ার সুপারিশ করব!

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