VinithaNarayanan2020 / Myproject

0 stars 0 forks source link

JS Guidelines Issues #5

Open KarthikaRamachandran opened 4 months ago

KarthikaRamachandran commented 4 months ago

Appreciating the effort in creating the web applications. Attaching all my review comments as single issue.

Review Comments:

  1. In displayDataInTable method, we can use _ES6 Template Litera_l to construct the table HTML parts instead of creating "td" element every time inside loops.
  2. We have to store every element in a variable only if we are using it for more than one time. For Ex: btn1, btn2, & etc... need not be defined using let variables.
  3. HTML Elements usage can be minimised. For Ex: DIV with sidebar class is not needed and the class can be added in the my-sidebar element itself in Components Class.
  4. Form Submit actions has to be done in the MyForm Component itself.
  5. Usually "id" attributes should not be set from the JS components. Use CSS classes only. For Ex: form component render method.
  6. Unnecessary lines should not be left inside JS files. And the file indentation should be proper. Please visit https://google.github.io/styleguide/jsguide.html page for JS Guidelines in using different syntaxes.
  7. Since we are not using shadow root now, the style tags need not be placed inside render method.
  8. All the event handlings of the elements rendered by the components should go inside the JS component itself.
  9. We have to use minimal number of JS lines as much as possible. The below set of statements can be converted like
if (popup.scrollTop > 68) {
 header.classList.add("sticky");
} else {
 header.classList.remove("sticky");
}

(to)

header.classList[popup.scrollTop > 68 ? "add" : "remove"]("sticky");

  1. Always try to use realistic datas instead of dummy datas like "Lorem Ipsum".

Apart from this, concentrate on dragging and dropping behavior implementation inside Board section.

VinithaNarayanan2020 commented 4 months ago

Done below points:

  1. HTML Elements usage can be minimised. For Ex: DIV with sidebar class is not needed and the class can be added in the my-sidebar element itself in Components Class.
  2. Form Submit actions has to be done in the MyForm Component itself. 8.All the event handlings of the elements rendered by the components should go inside the JS component itself.