fix: Prettier Workflow run is failing for the recent PR merges

[theAravinthM]

The Issue

As we can see in these images, Prettier Workflow run if failing for the recent PR merges. The code is not robust and not easy-to-read and this can cause linting errors.

Short term Solution

One can edit the whole index.html file by using the Prettier formatter and make a Pull Request to merge it.

Long term Solution

Although the above solution can be a temporary fix, this problem might arrive in the future as the new Contributors come in and make a PR.

• So, it is better to mention it in the Contribution guidelines to check for this Prettier Code format as well - in order to not encounter the same issue in the future.

---

Tasks

• Short Term Solution
• Long Term Solution

---

[theAravinthM]

Long term solution yet to be merged!

[Honeylabh]

long term solution:
1.Update Contribution Guidelines
Edit the CONTRIBUTING.md file to include Prettier formatting instructions

Code Style Guidelines

Please ensure your code follows the Prettier code style before submitting a Pull Request.

Using Prettier

1. Install Prettier:

   npm install --save-dev prettier
   2.Format your code:
   npx prettier --write "src//*.js"
   3.Verify your changes:
   npx prettier --check "src//*.js"

Enforce Code Style in CI:
name: CI

on: [push, pull_request]

jobs:
lint:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v2
- name: Set up Node.js
  uses: actions/setup-node@v2
  with:
    node-version: '14'
- name: Install dependencies
  run: npm install
- name: Run Prettier
  run: npx prettier --check "src/**/*.js"

[Honeylabh]

Short Term Solution
Reformat index.html:
Install Prettier if it's not already installed:
npm install --save-dev prettier
Run Prettier on the index.html file:
npx prettier --write index.html
Submit PR:
Commit the changes
git add index.html
git commit -m "Reformat index.html using Prettier"
git push origin your-branch

[theAravinthM]

long term solution: 1.Update Contribution Guidelines Edit the CONTRIBUTING.md file to include Prettier formatting instructions

Code Style Guidelines

Please ensure your code follows the Prettier code style before submitting a Pull Request.

Using Prettier

1. Install Prettier:
   npm install --save-dev prettier
   2.Format your code:
   npx prettier --write "src//*.js"
   3.Verify your changes:
   npx prettier --check "src//*.js"

Enforce Code Style in CI: name: CI

on: [push, pull_request]

jobs: lint: runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v2
- name: Set up Node.js
  uses: actions/setup-node@v2
  with:
    node-version: '14'
- name: Install dependencies
  run: npm install
- name: Run Prettier
  run: npx prettier --check "src/**/*.js"

Hi @Honeylabh ! This looks good to me! We welcome your contribution 💯

Upon approval from other maintainers, it could be implemented! Requesting @TenTraicion , @CandidDeer and @malakada to review!