update task description and acceptance criteria (#1862)

* fix: links

* fix: class components

* fix: error

* fix: ModResponse

Author: andron13

react/modules/class-component/README.md

@@ -24,11 +24,11 @@ Students will:
 Students are encouraged to study the following resources:
 
 1. **Understanding Class Components:**
-   - [**React Docs** - Component API](https://react.dev/reference/react/Component) - [1 hour]
+   - **React Docs** - Component API - [1 hour]
      - [Defining a class component](https://react.dev/reference/react/Component#defining-a-class-component)
      - [Adding state to a class component](https://react.dev/reference/react/Component#adding-state-to-a-class-component)
      - [Adding lifecycle methods to a class component](https://react.dev/reference/react/Component#adding-lifecycle-methods-to-a-class-component)
-   - [**React Docs (Legacy)** - React.Component](https://legacy.reactjs.org/docs/react-component.html) - [1 hour]
+   - **React Docs (Legacy)** - React.Component - [1 hour]
      - [Components and Props](https://legacy.reactjs.org/docs/components-and-props.html)
      - [State and Lifecycle](https://legacy.reactjs.org/docs/state-and-lifecycle.html)
      - [Handling Events](https://legacy.reactjs.org/docs/handling-events.html)
@@ -44,3 +44,8 @@ Expand your knowledge with these additional materials:
 
 - [**DigitalOcean Tutorial** - Understanding Constructors with React Components](https://www.digitalocean.com/community/tutorials/react-constructors-with-react-components) - [30 minutes]
 - [**freeCodeCamp Article** - This is why we need to bind event handlers in Class Components in React](https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/) - [30 minutes]
+
+Official documentation:
+
+- [**React Docs** - Component API](https://react.dev/reference/react/Component)
+- [**React Docs (Legacy)** - React.Component](https://legacy.reactjs.org/docs/react-component.html)

react/modules/tasks/class-components.md

@@ -1,11 +1,11 @@
 # React project setup. Class components. Error boundary
 
-## Functional Requirements
+## Functional Requirements (max **100 points**)
 
 ### Feature 1: Application Layout Structure (**5 points**)
 
-**As a** user  
-**I want** to see a clearly organized page layout  
+**As a** user
+**I want** to see a clearly organized page layout
 **So that** I can easily interact with the search functionality and view results
 
 **Scenario:** Page Layout Organization
@@ -15,10 +15,15 @@
   - A smaller search section at the top
   - A larger results section at the bottom
 
+**Acceptance Criteria:**
+
+- The page contains exactly two main sections: a search area and a results area.
+- Both sections are visually distinct and clearly separated by layout or styling (e.g., spacing, borders, or background).
+
 ### Feature 2: Search Functionality with Local Storage (**15 points**)
 
-**As a** user  
-**I want** to have a search interface that remembers my last search  
+**As a** user
+**I want** to have a search interface that remembers my last search
 **So that** I can continue my previous search session
 
 **Scenario:** Initial Search Component Load
@@ -29,10 +34,16 @@
 - **And** populate the search input if a term exists
 - **Or** leave it empty if no previous term is found
 
+**Acceptance Criteria:**
+
+- When the application loads, the search component checks local storage for a previously saved search term:
+  - If a saved search term exists, it is automatically displayed in the search input field.
+  - If no saved search term exists in local storage, the search input field remains empty.
+
 ### Feature 3: Search Results Display (**10 points**)
 
-**As a** user  
-**I want** to see search results clearly displayed  
+**As a** user
+**I want** to see search results clearly displayed
 **So that** I can easily review the found items
 
 **Scenario:** Results Display Format
@@ -42,10 +53,18 @@
   - Item name
   - Item description
 
+**Acceptance Criteria:**
+
+- Search results are displayed in the results section after a search is performed.
+- Each result item includes at least the following fields:
+  - Name
+  - Description
+- Results are presented in a clear and readable format (consistent spacing, alignment, and typography).
+
 ### Feature 4: Initial Data Load (**10 points**)
 
-**As a** user  
-**I want** to see relevant items when I first open the application  
+**As a** user
+**I want** to see relevant items when I first open the application
 **So that** I can start browsing immediately
 
 **Scenario:** Default Data Load
@@ -56,10 +75,18 @@
   - The search term from input if it exists
   - All available items if no search term exists
 
+**Acceptance Criteria:**
+
+- On initial load, the application **sends a data request** according to the defined logic:
+  - If a search term exists in the input, the request includes that term.
+  - If no search term exists, the request retrieves all available items.
+- The items **returned by the request** are correctly **displayed** in the results section.
+- The displayed items **match the query** used in the request.
+
 ### Feature 5: Search Execution (**20 points**)
 
-**As a** user  
-**I want** to search for specific items  
+**As a** user
+**I want** to search for specific items
 **So that** I can find relevant content
 
 **Scenario:** Perform Search
@@ -72,10 +99,18 @@
   - Fetch the first page of matching results
   - Update the display with new results
 
+**Acceptance Criteria:**
+
+- When the **Search** button is clicked, if the input text hasn’t changed, **no new request** is made.
+- **Extra spaces** at the start or end of the search text are **removed**.
+- The app sends a **request for the first page** of results only.
+- The **search term** is included in the request.
+- The **results area** shows the items from the server response.
+
 ### Feature 6: Search Term Persistence (**5 points**)
 
-**As a** user  
-**I want** my search terms to be saved  
+**As a** user
+**I want** my search terms to be saved
 **So that** I can resume my search later
 
 **Scenario:** Save Search Term
@@ -85,10 +120,15 @@
 - **Then** the search term should be saved to local storage
 - **And** overwrite any existing saved term
 
+**Acceptance Criteria:**
+
+- If the search text **has not changed**, nothing happens.
+- If the text **has changed**, the **trimmed value** (without extra spaces) is **saved to local storage**, replacing the previous one.
+
 ### Feature 7: Loading State Indication (**10 points**)
 
-**As a** user  
-**I want** to know when the application is loading data  
+**As a** user
+**I want** to know when the application is loading data
 **So that** I understand when to wait for results
 
 **Scenario:** API Request Loading State
@@ -97,10 +137,16 @@
 - **Then** I should see a loading indicator (Spinner/Skeleton/Loading Bar/Blur)
 - **And** the indicator should remain until data loads
 
+**Acceptance Criteria:**
+
+- A **loading indicator** (e.g., spinner, skeleton, or loading bar) appears **while data is being loaded**.
+- The indicator **remains visible** until the data is fully received and displayed.
+- Once loading is complete, the **indicator is hidden**.
+
 ### Feature 8: Error Handling (**10 points**)
 
-**As a** user  
-**I want** to be informed when something goes wrong  
+**As a** user
+**I want** to be informed when something goes wrong
 **So that** I understand why my request failed
 
 **Scenario:** Failed API Request
@@ -109,10 +155,15 @@
 - **When** the server returns an error (4xx or 5xx)
 - **Then** I should see a meaningful error message
 
+**Acceptance Criteria:**
+
+- A **clear, human-readable error message** is shown to the user when the server returns an error (4xx or 5xx).
+- The **console remains clean** — no uncaught errors or unnecessary error logs are displayed.
+
 ### Feature 9: Application Error Boundary (**15 points**)
 
-**As a** user  
-**I want** the application to handle errors gracefully  
+**As a** user
+**I want** the application to handle errors gracefully
 **So that** I can still use the app even if parts of it fail
 
 **Scenario:** Error Boundary Implementation
@@ -122,10 +173,15 @@
 - **And** a fallback UI should be displayed
 - **And** there should be a test button to simulate errors
 
-## Template
+**Acceptance Criteria:**
 
-This template represents the possible layout for your app, but you can create your app based on your own preferences.
+- A **test button** is available to simulate an application error.
+- Clicking the test button **triggers an error** that is **logged in the console**.
+- A **fallback UI** is displayed when an error occurs.
 
+## Template
+
+This template represents the **possible layout** for your app, but you can create your app based on your own preferences. Feel free to customize it — your creativity is not limited, and **you can design the UI** your users truly deserve.
 Successful response.
 
 ```text
@@ -183,6 +239,34 @@ Non-successful response.
 
 6. You can use CSS frameworks (e.g. Tailwind CSS).
 
+### Penalties
+
+- **1. Project setup**
+  - Project has been set up without using [Vite](https://vitejs.dev/guide/) with the [_react-ts_ template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts): **-95 points**
+
+- **2. TypeScript & Code Quality**
+  - TypeScript isn't used: **-95 points**
+  - Usage of _any_: **-20 points per each**
+  - Usage of _ts-ignore_: **-20 points per each**
+  - Presence of _code-smells_ (God-object, chunks of duplicate code), commented code sections: **-10 points per each**
+
+- **3. React Best Practices**
+  - Direct DOM manipulations inside the React components: **-50 points per each**
+  - React hooks are used to get access to either state, or to the component lifecycle: **-70 points**
+
+- **4. External Dependencies**
+  - Usage of Redux or other state management libraries: **-100 points**
+  - Usage of component libraries, e.g. Material UI, Ant Design: **-100 points**
+
+- **5. Project Management**
+  - Pull Request doesn't follow guideline (including checkboxes in Score) [PR example](https://rs.school/docs/en/pull-request-review-process#pull-request-description-must-contain-the-following): **-10 points**
+
+- **6. Technical Requirements**
+  - React setup files are located in the `main` branch: **-100 points**
+  - Missing dedicated branch named `class-components`: **-100 points**
+  - Usage of React hooks: **-100 points**
+  - Lack of component decomposition (everything in one file or poorly structured): **-50 points**
+
 ## FAQ (Frequently Asked Questions)
 
 ### ❓ Does the search input require an exact name match?
@@ -195,7 +279,11 @@ Fetch the full list (or first page) of items from the API.
 
 ### ❓ How to simulate a failed request?
 
-Use ModResponse or set an invalid endpoint to trigger a 4xx/5xx response.
+Use [ModResponse](https://chromewebstore.google.com/detail/modresponse-mock-and-repl/bbjcdpjihbfmkgikdkplcalfebgcjjpm?pli=1) or set an invalid endpoint to trigger a 4xx/5xx response.
+
+### ❓ How to see the loader during a request?
+
+In your browser’s **Developer Tools → Network** tab, you can **throttle the network speed** to observe the loading indicator.
 
 ### ❓ My loader is not visible — API is too fast. What to do?
 
@@ -214,29 +302,3 @@ No. The PR will update automatically as long as it's not merged.
 
 Function components are allowed, but **state and lifecycle functionality must be implemented using class components**.
 Hooks are not permitted in this task.
-
-### Penalties
-
-- **1. Project setup**
-
-  - Project has been set up without using [Vite](https://vitejs.dev/guide/) with the [_react-ts_ template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts): **-95 points**
-
-- **2. TypeScript & Code Quality**
-
-  - TypeScript isn't used: **-95 points**
-  - Usage of _any_: **-20 points per each**
-  - Usage of _ts-ignore_: **-20 points per each**
-  - Presence of _code-smells_ (God-object, chunks of duplicate code), commented code sections: **-10 points per each**
-
-- **3. React Best Practices**
-
-  - Direct DOM manipulations inside the React components: **-50 points per each**
-  - React hooks are used to get access to either state, or to the component lifecycle: **-70 points**
-
-- **4. External Dependencies**
-
-  - Usage of Redux or other state management libraries: **-100 points**
-  - Usage of component libraries, e.g. Material UI, Ant Design: **-100 points**
-
-- **5. Project Management**
-  - Pull Request doesn't follow guideline (including checkboxes in Score) [PR example](https://rs.school/docs/en/pull-request-review-process#pull-request-description-must-contain-the-following): **-10 points**