Skip to content

[Bug]: Three script.js defects — recommendation cards never render, duplicate fetch on error, spinner display overwrite #338

@anshul23102

Description

@anshul23102

Describe the bug

Three related defects in `static/script.js` that together break the core recommendation flow.


Bug 1 : Recommendation cards never render (CRITICAL)

Location: `renderResults()`, lines 611–634

The success-path code (hiding the empty state, showing the grid, and calling `projects.forEach` to build cards) is trapped inside the `if (!projects || projects.length === 0)` block due to a missing closing brace. A nested duplicate `if` with an early `return` makes those lines unreachable in every code path:

```js
if (!projects || projects.length === 0) { // outer if opens
// ...empty-state display code...
if (!projects || projects.length === 0) { // inner duplicate
return; // exits early
}

// BUG: these lines are inside the outer if - unreachable:
resultsEmptyEl.style.display = "none";
resultsGrid.style.display    = "grid";
projects.forEach(...buildProjectCard);    // cards never built

} // outer if closes - function ends here with no else branch
```

Effect: When the API returns matching projects, the results grid stays hidden and no cards are ever appended to the DOM.


Bug 2 : Duplicate fetch fired inside `.catch()` (CRITICAL)

Location: form `submit` handler, lines 528–563

The `.catch()` of the first `fetch("/api/recommend", ...)` contains a full second `fetch` call with a re-declared `payload`. On a network error the second request fires and then unconditionally shows "Something went wrong" regardless of its response. Lines 558–563 after the catch closure reference `data` which is out of scope - dead code that never runs.

```js
fetch("/api/recommend", { ... })
.then(...)
.catch(function () {
setLoadingState(false);
var payload = { ... }; // duplicate payload
fetch("/api/recommend", { ... }) // second request on error
.then(...)
.then(function (data) {
generalErr.textContent = "Something went wrong."; // always shown
});
});
// lines 558-563: reference data (out of scope) - unreachable dead code
```


Bug 3 - Spinner display value overwritten (MEDIUM)

Location: `setLoadingState()`, lines 580–582

`btnLoading.style.display` is set twice in immediate succession. The first assignment uses `"inline-flex"` (correct for a flex spinner), the second overrides it with `"inline"`, breaking the spinner's alignment:

```js
btnLoading.style.display = isLoading ? "inline-flex" : "none"; // line 580 - correct
btnLoading.style.display = isLoading ? "inline" : "none"; // line 582 - overwrites, wrong value
```


Steps to reproduce

  1. Open the app and fill in the recommendation form with valid inputs (e.g. Python / Beginner / Data / Low).
  2. Click Generate My Projects.
  3. Observe: the results section stays blank - no project cards appear even when the API returns results.
  4. Open DevTools → Network: on a simulated network failure, a second `/api/recommend` request fires.

Expected behaviour

  • Project cards are rendered in the grid when the API returns results.
  • A single fetch fires per form submission; network errors show "Something went wrong" without retrying.
  • The loading spinner displays correctly with `inline-flex`.

Proposed fix

  • Fix `renderResults`: close the outer `if` block immediately after the empty-state code and move the success path (grid display + `forEach`) into a proper `else` branch.
  • Fix the submit handler: remove the second `fetch` from inside `.catch()` and the dead code after it; keep a clean catch that only calls `setLoadingState(false)` and shows the error message.
  • Fix `setLoadingState`: remove the duplicate `btnLabel` and `btnLoading` assignments (lines 581–582).

All three changes are isolated to `static/script.js` with no behaviour changes elsewhere.


I am a GSSoC 2026 contributor and would like to work on this fix. Could you please assign this issue to me? @komalharshita

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions