Refactor HTML and JavaScript so projects and projects-check pages can share the same files

[roslynwythe]

Dependencies

• Create new issues to refactor Tools data in project md files  #4777
• Add a Tools filter to the projects check page #4427

Overview

We need to refactor the HTML and JavaScript for the Projects and Projects-Check pages, so that both pages share the same HTML and JavaScript files. The differences in filter options between the two pages will be implemented by adding conditional logic in JavaScript based on the current page URL.

Details

1. The difference between the Projects page and the Projects-Check pages is that the Projects-Check page has only the Technologies, Languages, and Tools filter options, in order to enable testing.
2. As time has passed and the Projects page has been developed, the JavaScript code in particular has diverged between the Projects and Projects-Check pages and some unintended differences have been observed in the Projects page.

Action Items

• In the IDE, modify _pages/projects-check.html so that it includes current-projects.html instead of current-projects-check.html. As a result of this change, the projects-check page will reference the same HTML include and same JavaScript as the projects page.
• Examine the differences in JavaScript between /assets/js/current-projects-check.js and /assets/js/current-projects.js. For each difference, determine if the difference is required to implement the distinct filter options required on the Projects-Check page.
  • If the difference is required, add conditional logic in the JavaScript to implement the desired behavior in the Projects Check page
  • If the difference is not required, do nothing
• Confirm that the appearance and behavior of the projects-check page matches that of the projects page except for the filter selection
  • Confirm that if more than 8 categories exist in a filter section, only 8 are displayed but a "View All" link is displayed.
  • Confirm that as filters are applied, filter tags appear under the heading "Applied FIlters" and clicking the tags clears the filters.
  • Confirm that if more than 8 categores exist in both the Technology and Language (and Tools?) groups, it should be possible to view all the filters in both groups at once.

Resources/Instructions

• For a discussion of the intentional differences between projects-check and project pages, see Create a copy of the project page with only two filters: technology and language #2502
• Projects page: webpage | HTML include | JavaScript
• Projects Check page: webpage | HTML include | JavaScript
• This issue is a result of ER: filter on projects-check page differs from filter on projects page #4834

[ExperimentsInHonesty]

We think this is feasible, so this issue will get rewritten to be a large, get it done issue. But it will also the following dependencies

• Create new issues to refactor Tools data in project md files  #4777
• Add a Tools filter to the projects check page #4427

[t-will-gillis]

• Removing Dependency, adding Ready for Dev Lead, and moving to "New Issue Approval" due to merging of Add a Tools filter to the projects check page #4427

[github-actions]

Hi @jphamtv, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[jphamtv]

Availability: Monday-Friday 12–2 PM, 8–10 PM (PST)
Estimated ETA: 12/11/23

[jphamtv]

PR created #5978

Hi @roslynwythe - FYI I didn’t delete _includes/current-projects-check.html and assets/js/current-projects-check.js files after refactoring. Just mentioning it here in case they should be removed after the pull request is approved and merged. I didn't see an action item to remove them.