1. با دارایی های مورد نیاز شروع کنید

برای اینکه چیدمان کمی منحصربفردتر شود، از چند تصویر SVG دست ساز و یک فونت سفارشی برگرفته از عناصر Envato.

تابستان - بسته فونتتابستان - بسته فونتتابستان - بسته فونت
تابستان – بسته فونت در Envato Elements

شایان ذکر است که بیشتر این دارایی ها از یک آموزش قبلی می آیند. در واقع، ما همچنین از بسیاری از تکنیک های موقعیت یابی که در این آموزش یاد گرفتیم استفاده خواهیم کرد، بنابراین خواندن آن ارزش دارد.

چگونه یک فرم SVG دست ساز پاسخگو بسازیمچگونه یک فرم SVG دست ساز پاسخگو بسازیمچگونه یک فرم SVG دست ساز پاسخگو بسازیم

2. با علامت گذاری صفحه ادامه دهید

ما با SVG و a شروع می کنیم div ظرف:

SVG Sprites

همانطور که بارها در گذشته انجام داده ایم، به عنوان یک تمرین خوب، همه SVG ها را به عنوان ذخیره می کنیم symbols در یک ظرف SVG sprite. سپس، هر زمان که نیاز داشته باشیم، با تماس با آن، آن‌ها را روی صفحه نمایش می‌دهیم use عنصر

در اینجا نشانه گذاری برای SVG sprite آمده است:

توجه کنید preserveAspectRatio="none" ویژگی که ما به بیشتر تصاویر پیوست کردیم. ما این کار را انجام داده‌ایم، همانطور که بعداً خواهیم دید، نمادهای ما مقیاس می‌شوند و ابعاد اولیه خود را از دست می‌دهند.

ظرف

ظرف شامل یک فرم، a div عنصر و یک لیست مرتب شده خالی:

در داخل فرم، یک ورودی و یک دکمه ارسال به همراه SVGهای مرتبط با آنها خواهیم داشت:

توجه کنید name ویژگی ای که به فیلد ورودی اضافه کرده ایم. بعداً از این ویژگی برای دسترسی به مقدار ورودی پس از ارسال فرم استفاده خواهیم کرد.

توجه داشته باشید: در نسخه ی نمایشی ما، autofocus ویژگی فیلد متن کار نخواهد کرد. در واقع، خطای زیر را ایجاد می کند که اگر کنسول مرورگر خود را باز کنید، می توانید ببینید:

خطای مبدا متقاطع به دلیل ویژگی فوکوس خودکارخطای مبدا متقاطع به دلیل ویژگی فوکوس خودکارخطای مبدا متقاطع به دلیل ویژگی فوکوس خودکار

با این حال، اگر این برنامه را به صورت محلی (نه به عنوان پروژه Codepen) اجرا کنید، این مشکل وجود نخواهد داشت. یا می توانید فوکوس را از طریق جاوا اسکریپت تنظیم کنید.

درون div، ما سه تو در تو قرار می دهیم divs و SVG مرتبط. در این بخش، تعداد کل کارها (هم باقی مانده و هم تکمیل شده) را پیگیری می کنیم:

در نهایت آیتم های لیست سفارش داده شده به صورت پویا از طریق جاوا اسکریپت اضافه می شوند.

3. برخی از سبک های اساسی را تعریف کنید

با آماده شدن نشانه‌گذاری، با برخی از سبک‌های بازنشانی ادامه می‌دهیم:

4. سبک های اصلی را تنظیم کنید

بیایید اکنون سبک های اصلی برنامه TODO خود را مورد بحث قرار دهیم.

سبک های ظرف

ظرف حداکثر عرض با محتوای مرکز افقی خواهد داشت:

سبک های فرم

در صفحه های کوچک همه عناصر فرم روی هم چیده می شوند:

طرح بندی فرم در صفحه نمایش های کوچکطرح بندی فرم در صفحه نمایش های کوچکطرح بندی فرم در صفحه نمایش های کوچک

با این حال، در ویوپورت هایی با عرض 600 پیکسل و بالاتر، طرح بندی فرم به صورت زیر تغییر می کند:

طرح بندی فرم در صفحه های متوسط ​​و بالاترطرح بندی فرم در صفحه های متوسط ​​و بالاترطرح بندی فرم در صفحه های متوسط ​​و بالاتر

بیایید به دو نکته توجه کنیم:

  • در نماهای عریض، ورودی دو برابر اندازه دکمه خواهد بود.
  • SVG ها عناصری کاملاً در موقعیت هستند و در زیر کنترل فرم مجاور خود قرار می گیرند. باز هم برای توضیح دقیق تر، نگاهی به این آموزش قبلی بیندازید.

در اینجا سبک های این بخش آمده است:

سبک های آمار

در مرحله بعد، بیایید به نوار وضعیت نگاه کنیم که گزارشی سریع درباره تعداد کل کارها به ما می دهد.

در صفحه نمایش های کوچک ظاهر انباشته زیر را خواهد داشت:

طرح بندی آمار در صفحه نمایش های کوچکطرح بندی آمار در صفحه نمایش های کوچکطرح بندی آمار در صفحه نمایش های کوچک

با این حال، در ویوپورت هایی با عرض 600 پیکسل و بالاتر، باید به صورت زیر تغییر کند:

طرح بندی آمار در صفحه های متوسط ​​و بالاترطرح بندی آمار در صفحه های متوسط ​​و بالاترطرح بندی آمار در صفحه های متوسط ​​و بالاتر

بیایید به دو نکته توجه کنیم:

  • در نماهای گسترده، همه کودک div عرض عناصر برابر خواهد بود.
  • مشابه SVG های قبلی، این نیز کاملاً در موقعیت قرار می گیرد و به عنوان یک تصویر پس زمینه عمل می کند که کل بخش را پوشش می دهد.

سبک های مرتبط:

سبک های وظیفه

طرح‌بندی وظایف، که به صورت پویا در بخش آینده ایجاد می‌کنیم، به شکل زیر خواهد بود:

طرح وظایفطرح وظایفطرح وظایف

هر وظیفه ای که با یک نشان داده می شود li دو قسمت خواهد داشت

نمایش نشانه گذاری یک کارنمایش نشانه گذاری یک کارنمایش نشانه گذاری یک کار

در قسمت اول، یک چک باکس همراه با نام کار مشاهده خواهید کرد. در قسمت دوم متوجه دکمه حذف برای حذف کار می شوید.

در اینجا سبک های مرتبط آورده شده است:

وقتی یک کار است ناقص، یک کادر خالی ظاهر می شود. از سوی دیگر، اگر وظیفه ای به عنوان علامت گذاری شود تکمیل شد، یک علامت چک ظاهر می شود. علاوه بر این، به نام آن 50 درصد کدورت و همچنین یک خط از طریق آن داده می شود.

در اینجا سبک های مسئول این رفتار آمده است:

در نهایت، در زیر استایل های دکمه حذف آمده است:

5. جاوا اسکریپت را اضافه کنید

در این مرحله، ما آماده ساختن عملکرد اصلی برنامه لیست TODO خود هستیم. بیایید آن را انجام دهیم!

در ارسال فرم

هر بار که کاربر فرم را با فشار دادن دکمه ارسال می کند وارد کلید یا ارسال را فشار دهید، کارهای زیر را انجام خواهیم داد:

  1. از ارسال فرم جلوگیری کنید، در نتیجه از بارگذاری مجدد صفحه جلوگیری کنید.
  2. مقدار موجود در فیلد ورودی را بگیرید.
  3. با فرض خالی نبودن فیلد ورودی، یک شیء جدید به صورت واقعی ایجاد می کنیم که وظیفه را نشان می دهد. هر کار یک شناسه منحصر به فرد، یک نام دارد و به طور پیش فرض فعال (تکمیل نشده) خواهد بود.
  4. این وظیفه را به tasks آرایه.
  5. آرایه را در حافظه محلی ذخیره کنید. ذخیره سازی محلی فقط رشته ها را پشتیبانی می کند، بنابراین برای انجام این کار، باید از آن استفاده کنیم JSON.stringify() روش تبدیل اشیاء داخل آرایه به رشته.
  6. با … تماس بگیر createTask() عملکردی برای نمایش بصری کار بر روی صفحه نمایش.
  7. فرم را پاک کنید.
  8. به قسمت ورودی تمرکز کنید.

این هم کد مربوطه:

یک Task ایجاد کنید

را createTask() تابع مسئول ایجاد نشانه گذاری کار خواهد بود.

برای مثال، ساختار تکلیف «برو پیاده روی» در اینجا آمده است:

ساختار نشانه گذاری برای یک کارساختار نشانه گذاری برای یک کارساختار نشانه گذاری برای یک کار

دو چیز در اینجا مهم است:

  • اگر کار تکمیل شود، علامت چک ظاهر می شود.
  • اگر کار تکمیل نشده باشد، span عنصر را دریافت خواهد کرد contenteditable صفت. این ویژگی به ما امکان ویرایش/به‌روزرسانی نام آن را می‌دهد.

در زیر دستور این تابع آمده است:

یک کار را به روز کنید

یک کار را می توان به دو روش مختلف به روز کرد:

  • با تغییر وضعیت آن از «ناقص» به «تمام» و بالعکس.
  • با تغییر نام آن در صورتی که کار ناقص باشد. به یاد داشته باشید که در این مورد، span عنصر دارای contenteditable صفت.

برای پیگیری این تغییرات، ما از مزایای آن استفاده خواهیم کرد input رویداد. این یک رویداد قابل قبول برای ما است زیرا در هر دو مورد صدق می کند input عناصر و عناصر با contenteditable فعال شد.

نکته دشوار این است که ما نمی توانیم مستقیماً این رویداد را به عناصر هدف متصل کنیم (چک باکس، span) زیرا به صورت پویا ایجاد می شوند و در بارگذاری صفحه بخشی از DOM نیستند.

با تشکر از هیئت رویداد، ما ضمیمه می کنیم input رویداد به لیست والد که بخشی از نشانه گذاری اولیه است. سپس، از طریق target ویژگی آن رویداد، عناصری را که رویداد روی آنها رخ داده است بررسی می کنیم و آن را فراخوانی می کنیم updateTask() عملکرد:

درون updateTask() تابع، ما کارهای زیر را انجام خواهیم داد:

  1. کاری را که نیاز به به روز رسانی دارد، بگیرید.
  2. عنصری را که رویداد را آغاز کرده است بررسی کنید. اگر عنصر دارای contenteditable ویژگی (یعنی این است span عنصر)، نام کار را برابر با تعیین می کنیم spanمحتوای متن
  3. در غیر این صورت (یعنی چک باکس است)، وضعیت کار و آن را تغییر می دهیم checked صفت. به علاوه، ما نیز آن را تغییر می دهیم contenteditable ویژگی مجاور span.
  4. مقدار را به روز کنید tasks کلید در ذخیره سازی محلی
  5. با … تماس بگیر countTasks() عملکرد.

در اینجا نحو این تابع آمده است:

یک کار را حذف کنید

ما می توانیم یک کار را از طریق دکمه “بستن” حذف کنیم.

دکمه برای حذف یک کاردکمه برای حذف یک کاردکمه برای حذف یک کار

مشابه عملیات به‌روزرسانی، نمی‌توانیم رویدادی را مستقیماً به این دکمه متصل کنیم زیرا هنگام بارگیری صفحه در DOM نیست.

با تشکر مجدد از هیئت رویداد، ما یک را پیوست خواهیم کرد click رویداد را در لیست والد قرار دهید و اقدامات زیر را انجام دهید:

  1. بررسی کنید که آیا عنصری که روی آن کلیک می‌شود دکمه «بستن» است یا SVG فرزند آن.
  2. اگر این اتفاق بیفتد، ما آن را می گیریم id مورد لیست والد
  3. این را پاس کن id به removeTask() عملکرد.

این هم کد مربوطه:

درون removeTask() تابع، ما کارهای زیر را انجام خواهیم داد:

  1. حذف از tasks کار مرتبط را آرایه کنید.
  2. مقدار را به روز کنید tasks کلید در ذخیره سازی محلی
  3. مورد لیست مرتبط را حذف کنید.
  4. با … تماس بگیر countTasks() عملکرد.

در اینجا نحو این تابع آمده است:

شمارش وظایف

همانطور که قبلاً بحث کردیم، بسیاری از توابع بالا شامل countTask() عملکرد.

وظیفه آن نظارت بر وظایف برای تغییرات (افزودن، به روز رسانی، حذف) و به روز رسانی محتوای عناصر مرتبط است.

شمارش وظایفشمارش وظایفشمارش وظایف

این هم امضای آن:

جلوگیری از افزودن خطوط جدید

هر بار که یک کاربر نام یک کار را به روز می کند، نباید با فشار دادن دکمه، خطوط جدیدی ایجاد کند وارد کلید

جلوگیری از چند خطجلوگیری از چند خطجلوگیری از چند خط

برای غیرفعال کردن این عملکرد، یک بار دیگر از امکان نمایندگی رویداد استفاده می کنیم و آن را پیوست می کنیم keydown رویداد به لیست، مانند این:

توجه داشته باشید که در این سناریو فقط span عناصر می توانند آن رویداد را تحریک کنند، بنابراین نیازی به بررسی اضافی مانند این نیست:

داده های ماندگار در بارگذاری صفحه

تا اینجا، اگر مرورگر را ببندیم و به پروژه دمو برویم، وظایف ما ناپدید می شوند.

اما، صبر کنید که 100٪ درست نیست! به یاد داشته باشید که هر بار که دستکاری کار را انجام می دهیم، آن را نیز ذخیره می کنیم tasks آرایه در ذخیره سازی محلی به عنوان مثال، در کروم، برای دیدن کلیدها و مقادیر ذخیره سازی محلی، روی آن کلیک کنید کاربرد برگه سپس، را گسترش دهید محل ذخیره سازی منو و در نهایت روی یک دامنه کلیک کنید تا جفت های کلید-مقدار آن را مشاهده کنید.

در مورد من، در اینجا مقادیر برای tasks کلید:

نمونه ای با ذخیره سازی محلینمونه ای با ذخیره سازی محلینمونه ای با ذخیره سازی محلی

بنابراین، برای نمایش این وظایف، ابتدا باید آنها را از حافظه محلی بازیابی کنیم. برای انجام این کار، از JSON.parse() روشی که رشته ها را دوباره به اشیاء جاوا اسکریپت تبدیل می کند.

در مرحله بعد، همه وظایف را در قسمت آشنا ذخیره می کنیم tasks آرایه. به خاطر داشته باشید که اگر هیچ داده ای در حافظه محلی وجود نداشته باشد (به عنوان مثال اولین باری که از برنامه بازدید می کنیم)، این آرایه خالی است. سپس، باید از طریق آرایه تکرار کنیم و برای هر کار، آن را فراخوانی کنیم createTask() عملکرد. و، این همه است!

قطعه کد مربوطه:

نتیجه

اوه! با تشکر از همراهی شما در این سفر طولانی. امیدوارم امروز دانش جدیدی کسب کرده باشید که بتوانید در پروژه های خود به کار ببرید.

بیایید به خود یادآوری کنیم که چه چیزی ساخته ایم:

بدون شک، ساخت چنین برنامه‌ای با چارچوب جاوا اسکریپت ممکن است پایدارتر، آسان‌تر و کارآمدتر باشد (رنگ‌آمیزی مجدد DOM گران است). با این حال، دانستن حل این نوع تمرین با جاوا اسکریپت ساده به شما کمک می کند تا درک کاملی از اصول آن داشته باشید و شما را به یک توسعه دهنده بهتر جاوا اسکریپت تبدیل کنید.

قبل از پایان، اجازه دهید دو ایده برای گسترش این تمرین پیشنهاد کنم:

  • استفاده کنید HTML Drag and Drop API یا یک کتابخانه جاوا اسکریپت مانند Sortable.js برای ترتیب دادن مجدد وظایف
  • داده ها (وظایف) را به جای مرورگر در فضای ابری ذخیره کنید. به عنوان مثال، ذخیره سازی محلی را با یک پایگاه داده بلادرنگ جایگزین کنید Firebase.

مثل همیشه، خیلی ممنون که خواندید!

بیشتر برنامه های Vanilla JavaScript

اگر می خواهید ساخت برنامه های کوچک با جاوا اسکریپت ساده را یاد بگیرید، آموزش های زیر را بررسی کنید: