پروژه آخر هفته: ساخت سایت تمرین تایپ!

پروژه آخر هفته: ساخت سایت تمرین تایپ!

بعضی وقتا آدم دوست داره از همه تکنولوژی ها و کتابخونه هایی که تریلی اسمشون رو نمیکشه دل بکنه و برگرده به همون جاوااسکریپت و css و html خالی.آخرین باری که این حس بهم دست داد این رو ساختم: https://vrgl.ir/06nUR امروز هم میخوام یه کار باحال دیگه بکنم:چندین ماه پیش وقتی همین حس رو داشتم کمی روی پروژه ای مثل این کار کرده بودم ولی امروز میخوام کاملش کنم. در واقع اسمش رو نمیشه گذاشت “پروژه”. فقط میخوام یه صفحه ساده بسازم. اگه روش کار بشه واقعا میتونید ازش یه سایت درست و حسابی در بیارید ولی از حوصله من خارجه😁 ولی اصل کار رو انجام میدیم😎بزن بریم‌…😊نقشه اینه: یه متن داریم که کاربر قراره روی اون تمرین تایپ کردن بکنه. اول باید تک تک حروف متن رو از هم جدا کنیم و بگذاریم توی تگ span. اینطوری میتونیم به هر حرف یک وضعیت اختصاص بدیم. چهار تا وضعیت داریم:۱- عادی : کاربر هنوز به اونجا نرسیده (پس زمینه سفید)۲- فعال : حرفی که در این لحظه کاربر باید تایپ کنه( پس زمینه زرد)۳- درست : حرفی که کاربر درست تایپ کرده( پس زمینه سبز)۴- غلط : حرفی که کاربر غلط تایپ کرده ( پس زمینه قرمز)بقیه ماجرا رو در عمل متوجه میشید.اگر حوصله خوندن ندارید میتونید کد ها رو در گیتهاب ببینید.فایل index.html :معمولا همیشه یه container دارم که همه چیز رو در بر میگیره. صفحه به دو بخش تقسیم میشه: text-container و keyboard. کلاس text-container در آینده متن ما رو نگه میداره. و keyboard هم دکمه های صفحه کلیدمون هستند:خود keyboard رو هم به سه بخش line-one و line-two و line-three تقسیم بندی کردم که باعث میشه راحت تر اون ها رو خوشگل کنم.فایل app.js هم خالی هست.زیاد به css نیاز نداریم.اول از همه یک سری کار های عمومی انجام میدیم (فونت fira code رو از google fonts گرفتم) :بر اساس وضعیت هامون یک سری کلاس میسازیم:و یک سری استایل برای خوشگل کردن صفحه کلید:یک سری استایل هم برای خوشگل سازی بیشتر و چیز هایی که بعدا ازشون استفاده میکنیم:اول چیز هایی که بهشون نیاز داریم رو از html میکشیم بیرون.const keys = document.querySelectorAll(&quot.key&quot);
const textContainer = document.querySelector(&quot.text-container&quot)یه متن ساده هم داریم که در مورد مریم میرزاخانی عزیز هست. text =
&quotMaryam Mirzakhani was an Iranian mathematician and a professor of mathematics at Stanford University. Her research topics included Teichmüller theory, hyperbolic geometry, ergodic theory, and symplectic geometry. In 2005, as a result of her research, she was honored in Popular Science’s fourth annual ‘Brilliant 10’ in which she was acknowledged as one of the top 10 young minds who have pushed their fields in innovative directions.”با متغیر هامون آشنا بشید:متغیر letters آرایه ای از span هاست که هر span یکی از حروف متن رو در بر داره.متغیر position مشخص میکنه کجای متن رو الان باید کاربر وارد کنه. متغیر time زمانی که برای تایپ کردن متن گرفته رو نگه میداره.متغیر timerId رو بعدا میبینیم.متغیر typing میگه که آیا کاربر شروع به تایپ کرده یا نه. با فشردن اولین کلید این متغیر true و تایمر شروع به کار میکنه. تایمر با این دو متد کنترل میشه:متد setInterval هر ۱۰۰۰ میلی ثانیه که که میشه یک ثانیه، یکی به مقدار time اضافه میکنه. این متد یه آی دی برمیگردونه که برای متوقف کردن تایمر استفاده میشه و تو متغیر timerId ذخیره میشه.متد init وظیفه مقدار دهی اولیه برنامه رو بر عهده داره.خط ۵ : کلمه های متن رو با split از هم جدا میکنه و بینشون میچرخه.خط ۶ و ۷ : این بار با split حروف هر کلمه رو جدا میکنیم و در متغیر ls ذخیره میکنیم. به آخر آرایه ls یک ‘;nbsp&’ اضافه میکنیم که توی html دقیقا معادل اسپیس هست. دلیل اینکه از خود اسپیس استفاده نکرده اینه که شاید موقع مقایسه با سایر حروف دچار مشکل بشیم.خط ۸ : یک div ساختیم که قرار شد حروف کلمه درون اون باشند. دلیل اینکه حروف کلمه هارو توی تگ های div گذاشتیم اینه که : text-container عرض مشخصی داره. اگر تگ های div نبودند ممکن بود نصف یک کلمه توی یه خط باشه و نصف دیگه اون تو خط بعد. ما این رو نمیخوایم. میخوایم؟😡😡خط ۹ تا ۱۳ : به ازای همه حروف داخل کلمه یک span ساختیم (خط ۱۰) که کلاس letter داره (خط ۱۱) و در آخر اون رو به div مون اضافه کردیم (خط ۱۳)خط ۱۵ :‌ محتوای div که لیستی از span ها باشه رو گذاشتیم داخل یک تگ div جدا و کلاس word. نمدونم چرا ولی نتونستم این کار رو مستقیما با خود div اصلی انجام بدم.در آخر متغیر a لیستی از div ها رو نگه میداره که هر کدوم یک کلمه رو نشون میدن و شامل لیستی از حروف هستند.خط ۱۹ : آرایه a رو به هم چسبوندیم و چپوندیم تو text-container .خط ۲۰ و ۲۱:‌گفتیم که letters باید لیستی از حروف رو نگه داره. حروف ما توی span ذخیره شدن پس همه اون ها رو میگیریم و توی letters نگهداری میکنیم. و به عضو اول این حروف هم کلاس active میدیم تا زرد بشه و کاربر بدونه که باید این رو تایپ کنه.باید باید متد whichKey آشنا بشیم. به اسمش گیر ندید. خودمم نمیدونم چرا اسمشو این گذاشتم.کار این متد اینه که یک حرف بگیره و اون حرف رو توی صفحه کلید با کلاس press آبی کنه. اول المنتی که در حال حاضر کلاس press داره رو از این کلاس محروم میکنیم و به جای اون کلاس press رو به المنتی که آی دی key داره میدیم. اگه به html اول کار دقت کرده باشید به ازای هر کلید توی صفحه کلید یه آیدی متناسب با حرفی که نشون میده گذاشتیم. حواستون باشه ورودی این متن (key) حرفی هست که کاربر باید تایپ کنه و ربطی یه صفحه کلید نداره. در خط ۲۳ متد init هم کاری کردیم که حرف اول متن در صفحه کلید به رنگ آبی در بیاد.خسته نباشید . دیگه به آخرای کار نزدیک میشیم. فقط یک متد مهم مونده ولی برای بهتر فهمیدنش باید با چند متد کوچیک آشنا بشید:یک المنت میگیره (el) و کلاس prev رو با کلاس next جایگزین میکنه.وقتی تایپ تموم شد این متد سرعت تایپ رو نشون میشه. در خط ۲ eventListener که تنظیم کردیم رو برمیداره (این رو بعدا میبینیم) و درون text-container که قبلا متن نوشته شده بود سرعت رو نشون میده. به علاوه یک دکمه برای شروع مجدد. این دکمه متد restart رو فراخوانی میکنه.خیلی ساده متن init رو صدا میزنه و eventListener رو دوباره راه میندازه.همچنین اول برنامه eventListener رو تنظیم کردیم:document.addEventListener(&quotkeydown&quot, handleKeyDown);و در آخرفقط یه مشت if و else ساده. چیزی برای ترسیدن نیست و اگر استراتژی مون رو یادتونه فهمیدنش کاری نداره.این متد به باگ کوچیک داره که به کسانی که پیداش کنند به قید قرعه یه دستگاه هدیه داره میشه :)خط ۲ تا ۵: اگر typing برابر false بود یعنی اولین حرفی است که کاربر داره تایپ میکنه پس تایمر رو روشن کن!خط ۷: کلیدی که کاربر فشار داده رو میگیرهخط ۸: بر اساس position حرفی که کاربر باید تایپ کنه رو میگیره.خط ۱۰ تا ۱۲: این رو تو اینترنت پیدا کردم. در حالت عادی وقتی اسپیس رو بزنید باعث میشه صفحه اسکرول که چیز خوش آیندی نیست. با این خطوط از این جلوگیری میکنیم.خط ۱۴ تا ۱۶: اگه بخوایم M رو بزنیم باید اول Shift رو بگیریم و بعد m رو بزنیم. این Shift برنامه ما رو به هم میریزه و ما به راحتی اون رو نادیده میگیریم.خط ۱۸ تا ۳۰ : اگه backspace رو زده بود position رو یکی بیار عقب و با یک سری تغییر کلاس کاری کن که ظاهر برنامه حفظ بشه. بعد با توجه به اینکه کاربر حرف درستی رو وارد کرده یا نه یکم با کلاس ها بازی کن. به همین سادگی.خط ۳۲ و ۳۳: اگه position از صفر کمتر میخواست بشه این کارو نکن تو همون صفر نگهش دار.خط ۳۴ تا ۳۶ :‌اگه position از طول متن بیشتر شد ینی کار تایپ تموم شده پس تایمر رو متوقف کن و سرعت رو بهش نشون بده.خط ۳۷ تا ۴۰ :‌ اگر هیچ کدوم از دو حالت بالا نبود ینی همه چه درسته و طبق برنامه عمل کن.این برنامه واقعا چیزی جز بازی با چند تا کلاس نیست که اگر اونهارو بفهمید دیگه بقیش کاری نداره.میشد با یک سری تغییرات برنامه رو بهتر کنی که اگر میخواستم خودم اون هارو انجام بدم از محدوده آخر هفته ام خارج میشد. در نتیجه اون ها رو به شما میسپارم.ایده اول : به غیر از سرعت تایپ درصد خطا رو هم به کاربر نشون بدید. خیلی ساده میتونید چیز هایی که کلاس incurrect دارند رو بشمارید و بر کل حروف تقسیم کنید.ایده دوم : همونطور که گفتم متد handleKeyDown یه باگ کوچیک داره. اون رو پیدا کنید و حلش کنید.ایده سوم :‌ بد نیست زمان تایمر رو توی صفحه به کاربر هم نشون بدید.ایده چهارم : صفحه کلید من نصف دکمه هارو نداشت. شما میتونید به اونها shift رو اضافه کنید و با توجه به اینکه الان چه حرفی رو کاربر باید تایپ کنه یکی از shift های چپ یا راست رو برای اون آبی کنید.ایده پنجم : اگه دقت کرده باشید در خط ۵ متد showSpeed کل حروف رو تقسیم بر پنج کردم و بر اساس اون سرعت رو حساب کردم. در واقع طول کلمات رو به طور متوسط ۵ در نظر گرفتم که دقت رو پایین میاره. شما میتونید بر اساس تعداد واقعی کلمات سرعت رو حساب کنید.اگر این تغییرات رو انجام دادید یا حتی اگر مشکلی توی برنامه من دیدید میتونید اون رو توی گیتهاب هم بگذارید. باعث شادمانی من در این آخر هفته میشه :)آخر هفته خوبی داشته باشید 🙂

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *