feat: add copy code button with clipboard support to code viewer panel

[Prag-18]

Summary [required]

This PR adds a “Copy Code” feature to the starter code viewer so users can quickly copy starter code snippets directly from the browser. The implementation includes visual success feedback through button state updates and toast notifications while maintaining the existing code viewer layout and styling.

Related Issue [Add copy-to-clipboard button for starter code #23]

Closes #<Add copy-to-clipboard button for starter code #23>

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
templates/project.html	Added “Copy Code” button and toast notification UI to the starter code viewer
static/script.js	Implemented clipboard copy functionality, success feedback, and fallback copy support
static/style.css	Added styling for copy button, copied state, and toast notification

How to Test This PR [required]

1. Clone this branch:

     git checkout feat/add-copy-code-button
     Install dependencies:
     pip install -r requirements.txt
     Run the application:
     python app.py
     Open:
     http://127.0.0.1:5000

2.Navigate to a project page containing starter code snippets.
3.Click the “Copy Code” button.
4.Verify the following:

• Starter code is copied to the clipboard
• Button text changes to “Copied!”
• Success toast notification appears
• Button resets after a few seconds
• Existing code viewer layout remains unchanged

5.Run tests:
python tests/test_basic.py
Expected test output:
27 passed, 0 failed out of 27 tests
Test Results [required]
Screenshots (if UI change)

Self-Review Checklist [required]

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

Notes for Reviewer

Implemented clipboard copy support using the Clipboard API with a textarea fallback for improved browser compatibility. Added temporary success feedback through icon swaps, button state changes, and toast notifications while preserving the existing UI layout.

[vercel]

@Prag-18 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.

[komalharshita]

Thank you for the contribution.

This is a well-scoped and polished implementation. The copy-to-clipboard functionality works cleanly, the fallback support is a nice addition, and the UI feedback integrates well with the existing design system.

I also appreciate the attention to accessibility and the effort to keep the implementation lightweight and beginner-friendly.

All checks are passing and the feature aligns well with the issue requirements. This PR looks good to merge.