ظاهر کلی برنامه بدین صورت است:
پروژه اولیه را از این لینک دانلود کنید. ساختار فایلهای این پروژه به صورت زیر است.
index.html
را در مرورگر خود باز کنید.در فایل html
داده شده دو تگ p
در داخل یک div
با ایدی container
و یک تگ p
دیگر بیرون از آن قرار گرقته است.
شما باید با استفاده از انتخابکنندههای مناسب استایلی بسازید که باعث شود تگهای داخل container
دارای رنگ indigo
و تگ خارج از آن دارای رنگ indianred
باشد.
styles.css
هستید.در این قسمت راهنماییهای سوال، به مرور اضافه میشود. مشکلاتتان در راستای حل سوال را میتوانید از بخش "سوال بپرسید" مطرح کنید.
مقدار یک ویژگی المان ممکن است چندین بار تغییر کند ولی هربار مقدار جدیدی بگیرد. برای مثال رنگ یک تگ p
یکبار مشکی است و یکبار قرمز.
درباره این موضوع یک سری قواعد وجود دارد که هرکدام اولویتی دارند و بسته به اولویت آنها، استایلها داده میشود.
یکی از این موارد قرار گرفتن استایل جدید بعد از استایل ما میباشد.
یکی دیگر از این موارد استفاده از !important
در هنگام استایلدهی میباشد که صرف از نظر از تقدم استایلها، آن استایل که دارای !important
میباشد، انتخاب میشود.
درنهایت ترکیب اولویتها و انتخابکنندهها منجر به انتخاب استایل توسط مرورگر میشود.
مهمترین و پرکاربردترین قواعد انتخاب استایل توسط مرورگر این است که هرچه انتخابکننده (selector) خاصتر باشد، آن انتخاب میشود.
در مثال بالا رنگ تگهای a
سبز انتخاب میشود چرا که انتخابکننده خاصتر است.
ترکیب این قاعده با قاعده قبلی منجر به انتخاب استایل توسط مرورگر میشود.
استایلهای داخل HTML به استایلهای داخل فایلهای CSS مقدم هستند. این تقدم را میتوان با استفاده از important!
از بین برد.
برای تغییر تقدم important!
میتوان سلکتور را مشخصتر کرد. در این حالت استایلی که سلکتور آن خاصتر باشد، انتخاب میشود.
ظاهر کلی برنامه بدین صورت است:
پروژه اولیه را از این لینک دانلود کنید. ساختار فایلهای این پروژه به صورت زیر است.
index.html
را در مرورگر خود باز کنید.در این سوال میخواهیم تغییراتی را در لیست داده شده ایجاد کنیم و لیست جدید را رندر کنیم. در پروژه اولیه در فایل script.js
تابعی با نام changeProducts
وجود داره که کد شما در آن قسمت قرار میگیرد. شما باید در این تابع لیست جدیدی با تغییرات خواسته شده ایجاد کنید و تابع renderProducts
را با لیست جدید صدا بزنید. تابع changeProducts
وقتی صدا زده میشود که دکمه "اعمال تغییرات" کلیک شود. (کد این قسمت در پروژه اولیه وجود دارد)
تغییرات خواسته شده
Date
و متد toLocaleDateString
فرمت شود. (راهنمایی: timestamp
داده شده در فیلد date
محصولات به صورت ثانیه است اما Date
نیاز به میلی ثانیه دارد. این تبدیل باید انجام شود)script.js
هستید.در این قسمت راهنماییهای سوال، به مرور اضافه میشود. مشکلاتتان در راستای حل سوال را میتوانید از بخش "سوال بپرسید" مطرح کنید.
با استفاده از map روی لیست محصولات داده شده میتوانید لیست جدید با تغییرات خواسته شده را ایجاد کنید.
تغییر خواسته شده برای تاریخ به این صورت است که ابتدا date
را ضرب در ۱۰۰۰ میکنیم که به میلی ثانیه تبدیل شود بعد آن را به new Date میدهیم و متد toLocaleDateString
رو آن صدا میزنیم.
برای خواندن مطالب بیشتر در مورد map
و Date
میتوانید از این لینکها استفاده کنید:
ظاهر کلی برنامه بدین صورت است:
پروژه اولیه را از این لینک دانلود کنید. ساختار فایلهای این پروژه به صورت زیر است.
index.html
را در مرورگر خود باز کنید.این سوال یکی از تمرینهای دوره فرانتاند و بخش سوم ساخت بازی XO است. تا این بخش کلیات بازی ساخته شده اما بازی هیچگاه برنده ندارد. در این بخش میخواهیم این قوانین را به بازی اضافه کنیم.
نکاتی که برای اضافه کردن عملکرد برد و باخت و مساوی به بازی باید به آنها توجه کنید:
X
باشند، این بازیکن برنده بازی است و در قسمت وضعیت بازی باید "Player X has won" نوشته شود و اگر O
باشند، باید در قسمت وضعیت بازی "Player O has won" نوشته شود.X
یا O
پر نشود).script.js
هستید.در این قسمت راهنماییهای سوال، به مرور اضافه میشود. مشکلاتتان در راستای حل سوال را میتوانید از بخش "سوال بپرسید" مطرح کنید.
با استفاده از gameState
میتوانید تمام شدن بازی و برنده یا مساوی بودن بازی را مشخص کنید. اگر بازی برنده داشت بازی را متوقف کنید.
بعداز اینکه بازی برنده یا مساوی شد، gameActive
باید false
شود و موقع کلیک چک شود که اگر gameActive
برابر false
بود حرکت انجام نشود. gameActive
بعداز کلیک شدن روی شروع دوباره true
میشود.
برای تشخیص برد میتوانید یک آرایه به این صورت تعریف کنید: (لیست زیر کامل نیست و فقط شامل حالتهای افقی برای برد است)
شامل تمام حالتهای برد و با یک حلقه روی winningConditions
اگر این سه تا نقطه در gameState برابر بودند، یعنی بازی برنده دارد.
مهارتهای لازم:
ظاهر کلی برنامه بدین صورت است:
پروژه اولیه را از این لینک دانلود کنید. ساختار فایلهای این پروژه به صورت زیر است.
برای اجرای پروژه، باید NodeJS
و npm
را از قبل نصب کرده باشید.
input-mask
، دستور npm install
را برای نصب نیازمندیها اجرا کنید.npm start
را برای راهاندازی پروژه اجرا کنید.http://localhost:3000/
میتوانید نتیجه را ببینید.در این سوال شما باید:
cities.json
بخوانیدInput
را داخل div رندر کنیدhandleChange
اینپوت میدهید، اولین شهری که با حروف ورودی اینپوت شروع میشود را پیدا کنید و شهر پیدا شده را به hint
اینپوت بدهیدhint
هم باید خالی شودhint
باید خالی باشدApp.js
هستید.node_modules
در فایل ارسالی نباشد.در این قسمت راهنماییهای سوال، به مرور اضافه میشود. مشکلاتتان در راستای حل سوال را میتوانید از بخش "سوال بپرسید" مطرح کنید.
در جاوااسکریپت تابعی وجود دارد به اسم startsWith که وظیفهاش چک کردن اینکه یک string با string دیگر شروع شده باشد.
برای hint
از هوک useState
استفاده کنید که در ابتدا یک رشته خالی "" است. وقتی شهر را پیدا کردید مقدارش را به مقدار آن شهر تغییر دهید و وفتی متن داخل اینپوت خالی شد مقدارش را به خالی "" تغییر دهید.
مقدار اینپوت را میتوانید به وسیله تابعی که به کامپوننت Input
میدهید بدست آورید. این تابعی که تعریف میکنید یک event میگیرد و با event.target.value
میتوانید به مقدار اینپوت دسترسی پیدا کنید.
مهارتهای لازم:
ظاهر کلی برنامه بدین صورت است:
پروژه اولیه را از این لینک دانلود کنید. ساختار فایلهای این پروژه به صورت زیر است.
برای اجرای پروژه، باید NodeJS
و npm
را از قبل نصب کرده باشید.
auth-context
، دستور npm install
را برای نصب نیازمندیها اجرا کنید.npm start
را برای راهاندازی پروژه اجرا کنید.http://localhost:3000/
میتوانید نتیجه را ببینید.در این سوال شما باید در فایل auth-context.js
کانتکس و provider بسازید که وظیفه آن بهاشتراکگذاری کاربر و لاگین یا لاگاوت بودن آن در تمام کامپوننتها است. کامپوننتهای login
و register
را طوری کامل کنید که هنگام submit فرم موجود، اطلاعات کاربر به صورت درخواست POST به آدرس سرور مورد نظر ارسال شود. اگر درخواست فرستاده شده موفقیتآمیز بود کاربر باید در کانتکست ثبت شود و اگر ایراد داشت باید هندل شود و ارور برگشت داده شده در div با کلاس error-message نشان داده شود.
آدرس سرور برای ثبت نام:
http://localhost:8989/api/register
آدرس سرور برای لاگین:
http://localhost:8989/api/login
برای دانستن بیشتر در مورد fetch میتوانید از این لینک استفاده کنید:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
شما تنها مجاز به اعمال تغییر در فایلهای زیر هستید:
src/context/auth-context.js
src/components/login.js
src/components/register.js
node_modules
در فایل ارسالی نباشد.در این قسمت راهنماییهای سوال، به مرور اضافه میشود. مشکلاتتان در راستای حل سوال را میتوانید از بخش "سوال بپرسید" مطرح کنید.
برای قسمت مقدار AuthProvider
نیاز به ابجکت با سه تا فیلد: user که ابجکت کاربر، login تابعی که کاربر را ثبت میکند و و logout که کاربر را null قرار میدهد. هنگام ثبتنام و لاگین بعداز ارسال درخواست تابع login از این context صدا زده میشود.
در صفحات لاگین و ثبتنام هنگام submit فرم باید یک درخواست POST بوسیله fetch به آدرس گفته شده ارسال شود. داده ارسالی یک آبجکت شامل username و password است. این username و password را میتوانید به دو صورت بگیرید. اگر از onSubmit روی فرم استفاده میکنید میتوانید از event.target.elements
بگیرید که برای مثال مقدار username به صورت event.target.elements.username.value
است یا میتوانید از استیت استفاده کنید.
نکته: مقدار value اینپوتها داخل فرمها را تغییر ندهید، نیازی به اینکار نیست و با value تستها تداخل ایجاد میکند.
مهارتهای لازم:
ظاهر کلی برنامه بدین صورت است:
پروژه اولیه را از این لینک دانلود کنید. ساختار فایلهای این پروژه به صورت زیر است.
برای اجرای پروژه، باید NodeJS
و npm
را از قبل نصب کرده باشید.
snake-game
، دستور npm install
را برای نصب نیازمندیها اجرا کنید.npm start
را برای راهاندازی پروژه اجرا کنید.http://localhost:3000/
میتوانید نتیجه را ببینید.در این سوال شما باید هوک useSnake که در فایل hooks/use-snake.js
تعریف شده را کامل کنید. این هوک در کامپوننت game.js
استفاده شده و آبجکتی شامل تمام اعضای وضعیت اولیه بازی برمیگرداند که در ابتدا برابر با آن است و سپس براساس موارد زیر تغییر میکند. شما در این سوال باید تغییرات لازم را در هر ۱۰۰ میلیثانیه (سرعت بازی) و کلیک شدن دکمههای w s a d در کیبورد روی وضعیت بازی اعمال کنید. (وضعیت اولیه بازی را حتما از فایل initialState.js
بخوانید)
وضعیت اولیه بازی
مختصات
مختصاتها در بازی مار به صورت یه ابجکت هستند. مبدا مخصات {x: 0, y: 0}
گوشه بالا سمت چپ بورد بازی است.
مربع ابی نشان داده شده در مختصات {x: 2, y: 1}
است.
hooks/use-snake.js
و logic.js
هستید.logic.js
فقط یک فایل اضافه است که بتوانید توابعی که مربوط به logic بازی است را در آن تعریف کنید. این فایل میتواند خالی باشدnode_modules
در فایل ارسالی نباشد.در این قسمت راهنماییهای سوال، به مرور اضافه میشود. مشکلاتتان در راستای حل سوال را میتوانید از بخش "سوال بپرسید" مطرح کنید.
از useReducer
برای مدیریت استیت بازی استفاده کنید و INIT_STATE
را به عنوان استیت اولیه به آن بدهید.
بعداز تعریف useReducer
از یک useEffect
برای تعریف یک interval استفاده میکنیم که در هر ۱۰۰ میلی ثانیه dispatch را با یک اسمی مانند move صدا میزند این interval را در یک متغیر میذاریم تا هنگام return
، بتوانیم clearInterval
را روی آن صدا بزنیم.
از یک useEffect
دیگر برای تعریف دکمههای w a s d استفاده میکنیم و dispatch را با اسمی مانند change_direction و البته جهت جدید صدا میزنیم.
بقیه برنامه، فقط منطق برنامه است که داخل reducer نوشته میشوند.
توجه: این فقط یکی از روشهای ساخت این بازی است و قطعا روشهای دیگری هم وجود دارد.
قوانین بازی مار:
اگر head بعدی مار که قراره حرکت کنیم را nextHead در نظر بگیریم