Solution

.github/workflows/test.yml

@@ -1,29 +1,32 @@
-name: Test
+# This workflow installs build dependencies and runs tests
+
+name: CI
 
 on:
+  push:
+    branches:
+      - main
   pull_request:
-    branches: [ master ]
+    branches:
+      - main
 
 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@v4
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
         with:
-          name: report
-          path: reports
+          node-version: '14'
+
+      - name: Install build dependencies
+        run: |
+          npm ci --build-from-source
+
+      - name: Run tests
+        run: |
+          npm test

README.md

@@ -1,5 +1,5 @@
-1. Replace `<your_account>` with your Github username in the link
-    - [DEMO LINK](https://<your_account>.github.io/js_task_fix_form_DOM/)
+1. Replace `TIgor22` with your Github username in the link
+    - [DEMO LINK](https://TIgor22.github.io/js_task_fix_form_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;

src/scripts/main.js

@@ -1,3 +1,30 @@
 'use strict';
 
-// write code here
+const forms = document.querySelectorAll('form');
+
+function capitalize(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+forms.forEach((form) => {
+  const inputs = form.querySelectorAll('input');
+
+  inputs.forEach((input, index) => {
+    const fieldName = input.name || `field${index}`;
+
+    if (!input.id) {
+      input.id = `${fieldName}-input`;
+    }
+
+    const label = document.createElement('label');
+
+    label.className = 'field-label';
+    label.htmlFor = input.id;
+
+    const labelText = capitalize(fieldName);
+
+    label.textContent = labelText;
+    input.placeholder = labelText;
+    input.parentNode.insertBefore(label, input);
+  });
+});