**مهارت‌های لازم**: + آشنایی با `ReactJS` + کدخوانی -------------------------------------------------- # پروژه اولیه پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/3BuUXtya3j/guess-word.zip) دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است. ``` guess-word-master ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── components │ │ ├── Congrats.js │ │ └── GuessedWords.js │ ├── containers │ │ ├── App.js │ │ └── Input.js │ ├── index.css │ └── index.js ├── README.md ├── package.json └── yarn.lock ``` # راه‌اندازی پروژه **برای اجرای پروژه، باید `NodeJS` و `npm` را از قبل نصب کرده باشید.** - ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید. - در پوشه‌ی `guess-word` ، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید. - در همین پوشه، دستور `npm start` را برای راه‌اندازی پروژه اجرا کنید. - پس از انجام موفق این مراحل، با مراجعه به آدرس `http://localhost:3000/` می‌توانید نتیجه را ببینید. # جزئیات  همان‌طور که مشاهده می‌کنید در این پروژه چهار ‍`Component` موجود است. ابتدا آن‌ها را مطالعه کنید تا با نحوه‌ی کارکرد پروژه آشنا شوید. شما باید چهار فایل زیر را طبق توضیحات تکمیل کنید. - کامپوننت ‍`App.js`: در این کامپوننت سه تابع ناقص وجود دارد. طبق توضیحات آنها را پیاده‌سازی کنید. - تابع ‍`getLetterMatchCount(guessedWord, secretWord)`: این تابع وظیفه این را دارد که با قرار دادن `guessedWord` به عنوان کلمه مبنا، تعداد حروف مشترک بین دو کلمه را بازگرداند. - تابع `setSecretWord(secretWord)`: این تابع یک کلمه را به عنوان آرگومان دریافت می کند و آن را در `state` ذخیره می‌کند. - تابع `guessWord(guessedWord)`: این تابع چک می‌کند که آیا کلمه حدس زده شده همان کلمه مخفی می‌باشد یا خیر. در صورتی که کلمه مخفی باشد متغیر `this.state.success` به `true` تغییر می‌کند. در صورتی که کلمه حدس زده شده کلمه مخفی نباشد آن را در لیست `guessedWords` اضافه می‌کند. هر عضو این لیست ساختار زیر را دارد: ```js { guessedWord : string, letterMatchCount : integer } ``` `letterMatchCount` همان تعداد حروف مشترک بین دو کلمه می‌باشد. - ‍ کامپوننت`Input.js`: در این کامپوننت یک تابع ناقص برای پیاده‌سازی وجود دارد. - ‍ تابع ‍`onSubmitGuessedWord(e)`: این تابع کلمه وارد شده در فرم را به لیست `this.state.guessedWords` اضافه می‌کند.طول کلمه اضافه شده حتما باید غیر صفر باشد. - کامپوننت `Congrats`: این کامپوننت در صورتی که کلمه درست حدس زده شده باشد پیغام `Congratulations! You guessed the word!` را نمایش می دهد. - کامپوننت `GuessedWords` : این تابع لیست کلمات حدس زده شده را نمایش می‌دهد.در صورتی که هیچ کلمه حدس زده شده‌ای وجود نداشته باشد، این تابع پیغام ‍`Try to guess the secret word!` را نمایش می‌دهد. در غیر این صورت این تابع کلمات را در یک جدول رندر می‌کند. # نکات - طبیعتا پس از حدس درست کلمه مخفی کلمه دیگری قابل حدس نمی باشد. - تگی که پیغام `Congratulations! You guessed the word!` را نمایش می‌دهد حتما می‌بایست دارای `id={"congrats-alert"}` و تگی که پیغام `Try to guess the secret word!` را نمایش می‌دهد می بایست دارای ‍`id={"guess-instruction"}` باشد. - همچنین کلمات حدس زده شده باید در تگ با ‍`id={"guessed-word"}` رندر شوند. - شما تنها مجاز به اعمال تغییر در فایل‌های `containers/*`، `components/*` هستید. پس از اعمال تغییرات، پروژه را *zip* کرده و ارسال کنید. - دقت کنید که پوشه‌ی `node_modules` در فایل ارسالی نباشد. - تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آن‌ها می‌توانید کد خود را تست کنید.

حل سؤال در بانک سؤالات