Add Challenges Page to Display and Track Coding Problems #107
Conversation
|
@adityai0 all the merge conflict are fixed |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR adds a new challenges page to the CodeClip application, implementing a progress tracking system for coding problems. The core functionality is delivered through a new pages/challenge.html file that displays coding challenges organized by difficulty levels (Easy, Medium, Hard) with interactive checkboxes for marking completion status.
The implementation leverages localStorage to persist user progress across browser sessions, allowing users to track which problems they've completed. The page features a card-based layout with visual indicators - completed problems display a green left border and updated status text. The JavaScript handles dynamic rendering of problem cards and manages state synchronization with localStorage.
The changes also update navigation links across multiple pages (index.html, profile.html, about.html, editor.html) to point to the new challenges page. The styling is handled through modifications to styles/challenges.css, which implements a dark theme design with custom CSS properties for colors and typography.
The feature integrates with the existing CodeClip architecture by following the established pattern of separate HTML pages for different sections, maintaining consistency with the application's card-based UI design, and using the existing navigation structure.
PR Description Notes:
- The PR body mentions files like "Challenges.html" and "Challenge.css" which don't match the actual filenames in the implementation
- References to
script.jsmodification aren't reflected in the changed files
Confidence score: 1/5
- This PR has critical navigation inconsistencies and file naming conflicts that will break user experience
- Multiple files have inconsistent navigation links pointing to different challenge pages, the
about.htmlfile contains challenge-related content instead of about information, and the CSS implementation breaks the existing theme system - All modified files need attention, particularly
pages/about.htmlwhich appears to be incorrectly implemented, andstyles/challenges.csswhich breaks theme compatibility
6 files reviewed, 6 comments
| <ul class="nav__list"> | ||
| <li><a href="/" data-route="/" class="nav__link">Home</a></li> | ||
| <li><a href="challenges.html" data-route="/challenges" class="nav__link">Challenges</a></li> | ||
| <li><a href="challenge.html" data-route="/challenges" class="nav__link">Challenges</a></li> |
There was a problem hiding this comment.
logic: Navigation inconsistency: header links to 'challenge.html' but footer (line 217) still links to 'challenges.html'
| <ul class="nav__list"> | ||
| <li><a href="/" data-route="/" class="nav__link">Home</a></li> | ||
| <li><a href="challenges.html" data-route="/challenges" class="nav__link active">Challenges</a></li> | ||
| <li><a href="challenge.html" data-route="/challenges" class="nav__link active">Challenges</a></li> |
There was a problem hiding this comment.
logic: Navigation link changed to 'challenge.html' but footer on line 82 still references 'challenges.html', creating inconsistency
| <nav class="header__nav" id="navMenu"> | ||
| <ul class="nav__list"> | ||
| <li><a href="/" data-route="/" class="nav__link">Home</a></li> | ||
| <li><a href="/pages/challenge.html" data-route="/challenges" class="nav__link active">Challenges</a></li> |
There was a problem hiding this comment.
logic: Navigation inconsistency: this links to /pages/challenge.html but other pages link to challenge.html without the path prefix, and the index.html links to challenges.html (plural). This will break navigation.
| :root { | ||
| --bg-color: #f4f7f9; | ||
| --text-color: #1a202c; | ||
| --card-bg: #ffffff; | ||
| --border-color: #e2e8f0; | ||
| --input-bg: #ffffff; | ||
| --accent-color: #3182ce; | ||
| --accent-color-hover: #2b6cb0; | ||
|
|
||
| /* Badge Colors */ | ||
| --easy-bg: #d4edda; | ||
| --easy-text: #155724; | ||
| --medium-bg: #fff3cd; | ||
| --medium-text: #856404; | ||
| --hard-bg: #f8d7da; | ||
| --hard-text: #721c24; | ||
| } | ||
|
|
||
| [data-theme="dark"] { | ||
| --bg-color: #1a202c; | ||
| --text-color: #e2e8f0; | ||
| --card-bg: #2d3748; | ||
| --border-color: #4a5568; | ||
| --input-bg: #2d3748; | ||
| --accent-color: #63b3ed; | ||
| --accent-color-hover: #90cdf4; | ||
|
|
||
| /* Badge Colors */ | ||
| --easy-bg: #1c4532; | ||
| --easy-text: #68d391; | ||
| --medium-bg: #4a3a19; | ||
| --medium-text: #f6e05e; | ||
| --hard-bg: #521b22; | ||
| --hard-text: #f56565; | ||
| --primary-color: #6a00ff; /* A purple tone for highlights */ | ||
| --background-color: #1a1a1a; /* Dark background */ | ||
| --card-background: #2a2a2a; /* Slightly lighter card background */ | ||
| --text-color: #e0e0e0; /* Light grey text */ | ||
| --light-text-color: #b0b0b0; /* Lighter grey for descriptions */ | ||
| --border-color: #444444; /* Darker grey for borders */ | ||
| --success-color: #28a745; /* Green for completed */ | ||
| --pending-color: #ffc107; /* Yellow for pending (or leave as default) */ | ||
| } |
There was a problem hiding this comment.
logic: These hardcoded CSS variables break the existing theme system. Users in light mode will be forced into dark theme colors. Should use the existing theme variables from themes.css instead.
| </section> | ||
| </main> | ||
|
|
||
| <script > |
There was a problem hiding this comment.
syntax: Empty script tag attribute - should be <script> without the space
| <script > | |
| <script> |
| /* header { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: 1rem 3rem; | ||
| background-color: var(--card-background); | ||
| border-bottom: 1px solid var(--border-color); | ||
| } */ |
There was a problem hiding this comment.
logic: Commented-out header styles will break the page layout since the challenges.html expects header styling to be provided.
| /* header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 3rem; | |
| background-color: var(--card-background); | |
| border-bottom: 1px solid var(--border-color); | |
| } */ | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 3rem; | |
| background-color: var(--card-background); | |
| border-bottom: 1px solid var(--border-color); | |
| } |
1 participant
This PR introduces a new "Challenges" page to the application, allowing users to view and track their progress on coding problems.
Key Changes:
challenges.html(or integrated intoindex.htmlas a section, as done in the provided example) for displaying coding problems.localStorageto maintain progress across sessions.Files Added/Modified:
Challenges.html: Updated navigation and added the challenges section.Challenge.css: Added styles for the challenges page, problem cards, and status indicators.script.js: Implemented problem data, dynamic rendering, and local storage management.Preview
Screen.Recording.2025-07-23.154806.mp4
Issue fixed #52