hackforla / hackforla/website

ER: Refactor Modal From Project and Wins Page

Open
#8,036 1 comment 0 reactions 0 assignees View on GitHub
Complexity: Large ER Feature: Refactor HTML Issue Making: Level 2 role: front end size: 0.25pt
Dominant language
JavaScript
Stars
363
Forks
872
Avg merge
2d 21h
Merged PRs (30d)
18

Description

### Emergent Requirement - Problem
Redundant code for a modal/overlay on `project` and `wins` pages.

### Issue you discovered this emergent requirement in
- #7866

### Date discovered
03/25/25

### Did you have to do something temporarily
- [ ] YES
- [x] NO

### Who was involved
@dvernon5
@daras-cu
@gmgonzal

### What happens if this is not addressed
There will be redundant code, and the modal will not be able to be reused easily in the future.

### Resources

- Example of modal: [Projects Page](https://www.hackforla.org/projects/) select "Search Tips" link
- Potential approach: https://github.com/hackforla/website/issues/7866#issuecomment-2755710071
- Additional Information: https://github.com/hackforla/website/issues/7866#issuecomment-2755711694

### Recommended Action Items
- [ ] Make a new issue(s)
- [ ] Discuss with team
- [ ] Let a Team Lead know

### Potential solutions [draft]
Create two issues:
Issue 1: Factor out the modal from the `project` page.
* Create a separate JavaScript and CSS file for a modal with generic function and class names.
* Edit `current-projects.html` and `search-tip-modal.html` to replace the previous page-specific modal elements with those imported from the newly created files.
* (May also consider hard-coding the modal content in `search-tip-modal.html` as this does not need to be dynamically generated)

Issue 2: Refactor `wins` page to use the new modal CSS and JavaScript files, maintaining the mobile-specific functionality.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.