Skip to content

fix: define renderCodeWithLineNumbers in script.js to resolve ReferenceError#436

Open
anshul23102 wants to merge 1 commit into
komalharshita:mainfrom
anshul23102:fix/render-code-with-line-numbers
Open

fix: define renderCodeWithLineNumbers in script.js to resolve ReferenceError#436
anshul23102 wants to merge 1 commit into
komalharshita:mainfrom
anshul23102:fix/render-code-with-line-numbers

Conversation

@anshul23102
Copy link
Copy Markdown
Contributor

Summary [required]

Clicking View Code on any project detail page crashed the JavaScript with ReferenceError: renderCodeWithLineNumbers is not defined. The fetchStarterCode callback called this function to render the fetched code with a numbered gutter, but the function had never been implemented, so the code panel stayed blank after every click.

This PR adds the missing renderCodeWithLineNumbers function inside the detail-page block of static/script.js. It splits the raw code string by newline and builds one div.code-line element per line. Each row contains a span.line-number for the gutter and a span.line-content for the code text. These class names exactly match the CSS rules already defined in static/style.css (.code-line, .line-number, .line-content), so the display renders correctly with no CSS changes required. textContent is used for both spans, which means any HTML-like content in the source files is displayed as literal text and cannot be interpreted by the browser.

Related Issue [required]

Closes #406

Type of Change [required]

  • Bug fix — resolves a broken behaviour

What Was Changed [required]

File Change made
static/script.js Added the missing renderCodeWithLineNumbers function inside the detail-page block

How to Test This PR [required]

  1. Clone this branch: git checkout fix/render-code-with-line-numbers
  2. Install dependencies: pip install -r requirements.txt
  3. Run the app: python app.py
  4. Navigate to http://127.0.0.1:5000/project/1
  5. Open the browser developer console (F12).
  6. Click the "View Code" button.
  7. The code panel should open and display the starter code with numbered lines. No errors should appear in the console.
  8. Run the tests: python tests/test_basic.py

Expected test output:

30 passed, 0 failed out of 30 tests

Test Results [required]

  PASS  test_projects_json_loads
  PASS  test_each_project_has_required_fields
  PASS  test_find_project_by_id_found
  PASS  test_find_project_by_id_missing
  PASS  test_parse_skills_basic
  PASS  test_parse_skills_empty_string
  PASS  test_parse_skills_single_entry
  PASS  test_score_single_project_full_match
  PASS  test_score_single_project_no_match
  PASS  test_get_recommendations_returns_results
  PASS  test_get_recommendations_max_three
  PASS  test_get_recommendations_no_match_returns_empty
  PASS  test_get_recommendations_result_format
  PASS  test_validate_all_valid
  PASS  test_validate_missing_skills
  PASS  test_validate_missing_level
  PASS  test_validate_missing_interest
  PASS  test_validate_missing_time
  PASS  test_validate_all_missing
  PASS  test_home_route
  PASS  test_recommend_api_valid
  PASS  test_recommend_api_missing_field
  PASS  test_recommend_api_empty_body
  PASS  test_project_detail_found
  PASS  test_project_detail_not_found
  PASS  test_internal_server_error_page
  PASS  test_view_code_found
  PASS  test_download_code_found
  PASS  test_health_check
  PASS  test_scoring_weights_has_all_keys

30 passed, 0 failed out of 30 tests

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 tests pass
  • I have not introduced any print() or console.log() debug statements
  • I have not modified files outside the scope of the linked issue
  • Code uses var declarations and ES5-compatible patterns per the project JS style guide

Notes for Reviewer

The CSS classes .code-line, .line-number, and .line-content were already defined in static/style.css (lines 2824 to 2848) with the correct flex layout and gutter styling. The function was the only missing piece. Using textContent instead of innerHTML ensures source files containing HTML or script tags are rendered safely as plain text.

…ceError (komalharshita#406)

The fetchStarterCode callback called renderCodeWithLineNumbers(data.code)
but the function was never defined, causing a ReferenceError that left the
code panel blank after every View Code click.

Added the missing function inside the detail-page block. It splits the
code string by newline, then builds one div.code-line per line containing
a span.line-number (gutter) and a span.line-content (code text), matching
the CSS classes already defined in style.css. textContent is used for both
spans so no markup in the source file can be interpreted as HTML.
@vercel
Copy link
Copy Markdown

vercel Bot commented May 22, 2026

@anshul23102 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: ReferenceError: renderCodeWithLineNumbers is not defined in script.js

1 participant