https://github.com/maniebra/wp-hw1
https://github.com/maniebra/wp-hw1
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/maniebra/wp-hw1
- Owner: maniebra
- Created: 2025-03-12T17:42:47.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-27T17:31:09.000Z (2 months ago)
- Last Synced: 2025-03-27T17:35:38.651Z (2 months ago)
- Language: JavaScript
- Size: 3.07 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# تمرین اول درس طراحی وب
| نام دانشجو | شماره دانشجویی |
| --- | --- |
| مانی ابراهیمی | ۴۰۱۱۷۰۴۹۱ |
# اطلاعات صفحه وب ساخته شده
صفحه‌ای که در پیش روی شماست یک صفحه اضافه کردن کالا است (که می‌تواند مربوط به یک کسب و کار عمده‌فروشی باشد) و در آن می‌توانید برای یک کالا اسم، عکس نمایه، توضیحات، تعداد، قیمت واحد و تخفیف تعیین کنید. در پایین فرم ایجاد کالا یک جدول قرار دارد که مالیات و قیمت خام کالا را به شما بعد از اعمال هر تغییر روی اطلاعات کالا گزارش می‌دهد. سپس می‌توانید این اطلاعات را ثبت (از آنجایی که backend از اهداف این تمرین خارج بود، فعلاً به صورت mock) یا اطلاعات وارد شده را پاک نمایید.
# قابلیت‌های قرار داده شده
- طراحی پاسخگو (responsive)
- رنگ‌بندی مطابق با سیستم (پشتیبانی از dark mode)
- بدون وابستگی به هیچ کتابخانه یا اسکریپت خارجی (حتی بوت‌استرپ)
# چگونگی کارکرد
## بخش منطقی (JS)
### binder
یک ماژول binder داریم که در ابتدای امر تمام المان‌های دارای ID را در DOM گرفته و در یک شیء ذخیره می‌کند.
در واقع binding یک map از اسم ID المان‌ها (که از `snake-case` به `camelCase` که قرارداد معمول نامگذاری متغیرها و توابع در JS است تبدیل شده‌اند) به خود آن المان‌ها در DOM است.
مزایای استفاده از binder در ادامه آمده:
1. عدم نیاز به نوشتن کد اضافه: دیگر نیاز نیست هر بار برای event listener اضافه کردن از query استفاده کنیم.
2. جستجوی ساده‌تر: به دلیل عدم استفاده از query، فرآیند دسترسی به المان‌ها بسیار ساده‌تر و سریع‌تر شده و می‌توانیم با سرعت بیشتری به برنامه قابلیت اضافه کنیم.
### formulator
این ماژول یک تابع دارد که فرمول‌های داخل تگ‌های `formula` را پردازش می‌کند و نتیجه‌ی عملیات حسابیشان را برمیگرداند. موارد زیر در فرمول‌ها پشتیبانی می‌شوند:
1. اعداد ثابت (مثلاً 0.09)
2. چهار عمل حسابی
3. باقی‌مانده
4. فاصله میان عبارات جبری
منطق اما همان چیزی است که در مستند تمرین خواسته شده است.
### text-normalizer
این ماژول چالش‌های زبان فارسی را حل کرده و متون فارسی را نرمال‌سازی و قابل استفاده می‌کند.
### main.js
ماژول‌های دیگر در این فایل وارد شده و منطق کلی صفحه اینجا قرار دارد. این فایل به صورت `` در فایل `index.html` وارد شده است.
## بخش استایل‌ها (CSS)
فایل‌های css به ۴ بخش شکانده شده‌اند:
1. `base.css`: کامپوننت‌های پایه (تگ‌های بنیادین) در اینجا حالت داده می‌شوند.
2. `components.css`: کامپوننت‌های خودساخته در اینجا حالت داده می‌شوند.
3. `fonts.css`: قلم‌های خط (fonts) در اینجا تعریف می‌شوند.
4. `theme.css`: متغیرهای پراستفاده (رنگ‌ها و اندازه‌ها و قلم‌ها) در اینجا تعریف شده‌اند.
همه‌ی این فایل‌ها در فایل `styles.css` وارد شده‌اند که این فایل خود در `index.html` وارد شده است.
# قابلیت استفاده مجدد
کد قرار داده شده قابلیت استفاده مجدد دارد چون:
1. هر `binding` به صورت پویا بروزرسانی میشود و نیازی به دخالت توسعه‌دهنده نیست.
2. بروزرسانی هر input موجب بروزرسانی نتایج فرمول‌ها میشود و همچنین فرمول‌ها به طور زنده از روی inputها مورد مقداردهی قرار می‌گیرند.
3. به دلیل شکاندن به‌اندازه فایل‌ها (هم css هم js) اضافه کردن قابلیت به این پروژه کمترین دشواری ممکن را خواهد داشت.