Fix: add Read more toggle to expand truncated project descriptions

[Kr1491]

Summary [required]

Added a "Read More" / "Read Less" toggle button to project cards on the recommendation results page. When a project description is longer than 120 characters, it is truncated and a "Read more" button appears. Clicking it expands the full description inline without navigating away. Clicking again collapses it back.

Related Issue [required]

Closes #181

Type of Change [required]

• Bug fix — resolves a broken behaviour
• Feature — adds new functionality
• Data — adds new projects to data/projects.json
• Documentation — updates docs, README, or code comments only
• Style — CSS or visual changes only, no logic change
• Refactor — restructures code without changing behaviour
• Test — adds or updates tests

What Was Changed [required]

File	Change made
static/script.js	Added Read More/Less toggle button logic inside buildProjectCard() function
static/style.css	Added .read-more-btn styles to match the site design

How to Test This PR [required]

1. Clone this branch: git checkout fix/read-more-toggle
2. Install dependencies: pip install -r requirements.txt
3. Run the app: python3 app.py
4. Open http://127.0.0.1:5000 and go to Find Project
5. Fill in the form and click Generate My Projects
6. On the results page, click "Read more" on any card to expand the description
7. Click "Read less" to collapse it back

Test Results [required]

No backend tests affected. This is a frontend-only change to static/script.js and static/style.css.

Screenshots (if UI change)

Before	After

|

|

|

Self-Review Checklist [required]

• I have read CONTRIBUTING.md and followed all guidelines
• My branch name follows the convention: feat/, fix/, docs/, data/, style/, test/
• I have run python tests/test_basic.py and all 27 tests pass
• I have run flake8 . locally and there are no errors
• I have not introduced any print() or console.log() debug statements
• Every new function I wrote has a docstring
• I have not modified files outside the scope of the linked issue
• If I changed the UI, I tested it at 375px (mobile) and 1280px (desktop)
• If I added a project to the dataset, it has all required JSON fields

Notes for Reviewer

[vercel]

Someone is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your first pull request to DevPath.

Before review:

• Complete the PR template fully
• Ensure all tests pass
• Link your PR to an issue
• Keep changes scoped to the issue

A maintainer will review your contribution soon.

[Kr1491]

can you please look into this pr @komalharshita, thank you

[komalharshita]

@Kr1491 resolve the merge conflicts

[Kr1491]

Hi @komalharshita , I have resolved the merge conflicts. Please review when you get a chance. Thank you!

[Kr1491]

Hi @komalharshita can you please merge this pr, I have resolved the conflicts, thank you

[Kr1491]

@komalharshita, resolved the conflicts can you please merge this pr, thank you

[komalharshita]

Good UX improvement overall — the feature solves a real readability issue for longer project descriptions and the implementation is fairly clean/scoped.

However, a few improvements are needed before merge:

• Avoid using desc.textContent = ... together with repeatedly appendChild(readMoreBtn). Updating textContent removes child nodes and forces the button to be recreated in the flow each toggle.
• Separate the description text and toggle button into different elements for cleaner DOM handling.
• Add accessibility support (aria-expanded) to the button.
• Verify layout/card-height behavior after expansion since the original truncation existed for visual consistency.

Once these are addressed, this should be good to merge.

[Kr1491]

Hi @komalharshita , I have addressed all the requested changes:
separated the description text and button into different elements, fixed the textContent + appendchild issue, and added aria-expanded support. Please review when you get a chance. Thank you!

[Kr1491]

Also requesting level:intermediate label as the implementation required refactoring the DOM structure, fixing a textContent/appendChild conflict, and adding accessibility support as per the review feedback.

[Kr1491]

Hi @komalharshita can you please look into this, I have made all the requested changes

[Kr1491]

please merge this pr, I have addressed all the requested changes, also resolved the conflicts

[Kr1491]

@komalharshita

[Kr1491]

@komalharshita please look into this pr once,

[komalharshita]

Thanks for addressing the requested changes.

I verified the updated implementation and the previous concerns have been resolved:

• Description text and toggle button are now separated into distinct elements.
• The textContent + appendChild issue has been fixed.
• aria-expanded support has been added for accessibility.
• The Read More button is only rendered when truncation actually occurs.
• Overall DOM handling is cleaner and more maintainable.

The implementation now looks good and achieves the intended UX improvement without the structural issues noted in the previous review.

Please resolve the remaining merge conflicts with the latest main branch and this PR should be ready to merge.

[Kr1491]

@komalharshita conflicts resolved,

[komalharshita]

Okay! Approved for merge....

[Kr1491]

@komalharshita please give appropriate tags like difficulty and quality, or else i am just going to get base points