add task solution

.github/workflows/test.yml-template

@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm start & sleep 5 && npm test
+      - name: Upload tests report(cypress mochaawesome merged HTML report)
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: report
+          path: reports

README.md

@@ -1,16 +1,17 @@
 1. Replace `<your_account>` with your GitHub username in the link
-    - [DEMO LINK](https://<your_account>.github.io/js_employees_table_DOM/)
+   - [DEMO LINK](https://yana-longstocking.github.io/js_employees_table_DOM/)
 2. Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/)
-    - Run `npm run test` command to test your code;
-    - Run `npm run test:only -- -n` to run fast test ignoring linter;
-    - Run `npm run test:only -- -l` to run fast test with additional info in console, ignoring linter.
+   - Run `npm run test` command to test your code;
+   - Run `npm run test:only -- -n` to run fast test ignoring linter;
+   - Run `npm run test:only -- -l` to run fast test with additional info in console, ignoring linter.
 
 ### Task: Employees table
 
 Dear mate,
 this is the final task of the JS Advanced course. Apply all the acquired skills and demonstrate what you are capable of!
 
 Let's get started. Briefly about the tasks:
+
 1. Implement table sorting by clicking on the title (in two directions).
 2. When the user clicks on a row, it should become selected.
 3. Write a script to add a form to the document. Form allows users to add new employees to the spreadsheet.
@@ -25,46 +26,55 @@ Start table:
 ![Preview](./src/images/preview.png)
 
 ##### Implement table sorting by clicking on the title (in two directions)
+
 - When users click on one of the table headers, the table should be sorted in ASC order; the second click sorts it in DESC order.
 - When users click on a new title, always sort in ASC order.
 
 ##### When the user clicks on a row, it should become selected.
+
 - Use 'active' class for the table row to indicate it is selected.
 - Only one line can be selected at a time.
 
 ##### Write a script to add a form to the document. Form allows users to add new employees to the spreadsheet.
+
 - The form should have class `new-employee-form` (to apply correct styles).
 - The form should have:
   - 4 inputs: `name`, `position`, `age`, and `salary`
   - 1 select: `office`
   - Submit button.
 - Put inputs inside labels:
+
 ```html
-<label>Name: <input name="name" type="text"></label>
+<label>Name: <input name="name" type="text" /></label>
 ```
+
 - Add qa attributes for each input field:
+
 ```
- data-qa="name" 
- data-qa="position" 
- data-qa="office" 
- data-qa="age" 
- data-qa="salary" 
+ data-qa="name"
+ data-qa="position"
+ data-qa="office"
+ data-qa="age"
+ data-qa="salary"
 ```
+
 - Select should have 6 options: `Tokyo`, `Singapore`, `London`, `New York`, `Edinburgh`, `San Francisco`.
 - Use texts for labels and buttons from the screenshot below.
 - Age and salary inputs should be of a numeric type. Don't forget to convert the string from the salary input to the correct value, like in the table.
 - Click on `Save to table`; you should add a new employee to the table.
 - All fields are required.
 
 ##### Show notification if form data is invalid.
+
 - Click on `Save to table` should run validation for form inputs. If the data is valid, add a new employee to the table.
 - If the `Name` value has fewer than 4 letters, show error notification.
 - If the `Age` value is less than 18 or more than 90, show an error notification.
 - If a new employee is successfully added to the table, show success notification.
 - Notification titles and descriptions are up to you.
 - Add qa attribute for notification: `data-qa="notification"` and class `error`/`success` depending on the result.
 
-##### Implement editing of table cells by double-clicking on them (optional). 
+##### Implement editing of table cells by double-clicking on them (optional).
+
 - Double click on the cell of the table, which should remove the text, and append input with `cell-input` class.
 - The input value should be replaced by the input text.
 - Only one cell can be edited at a time.

package.json

@@ -18,13 +18,12 @@
     "postinstall": "npm run update",
     "test": "npm run lint && npm run test:only"
   },
-  "dependencies": {},
   "devDependencies": {
     "@linthtml/linthtml": "^0.9.6",
     "@mate-academy/eslint-config": "latest",
     "@mate-academy/jest-mochawesome-reporter": "^1.0.0",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/stylelint-config": "latest",
     "@parcel/transformer-sass": "^2.12.0",
     "cypress": "^13.13.0",