Skip to content

Added favorite feature and CONTRIBUTING.md instructions #318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
IshikaBanga26 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added favorite feature and CONTRIBUTING.md instructions #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e2f555e
Added favorite feature and CONTRIBUTING.md instructions
IshikaBanga26 Aug 6, 2025
9718704
Merge branch 'main' into add-fav-feature
IshikaBanga26 Aug 18, 2025
0b56b31
Merge branch 'main' into add-fav-feature
IshikaBanga26 Aug 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions assets/css_files/games.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,56 @@ main {
content: '🎯'; /* Word Guess game */
}

/* Place favorites button to the right */
.favorites-toggle {
display: flex;
justify-content: flex-end;
margin: 0px 30px -30px 30px;
padding: 0;
background: none;
}

#favoritesToggleBtn {
padding: 10px 20px;
font-size: 16px;
background: linear-gradient(to right, #7c3aed, #9333ea);
color: white;
border: none;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background 0.3s ease;
}

#favoritesToggleBtn:hover {
background: linear-gradient(to right, #a855f7, #9333ea);
box-shadow: 0 6px 16px rgba(137, 39, 228, 0.6);
transform: translateY(-2px);
}

.category-card {
position: relative; /* needed for absolute positioning */
}

.fav-btn {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: none;
font-size: 21px;
color: #8966e1 ;
cursor: pointer;
z-index: 2;
transition: transform 0.2s ease;
}

.fav-btn:hover {
transform: scale(1.25);
}


/* Animations */
@keyframes slideInUp {
from {
Expand Down
44 changes: 44 additions & 0 deletions assets/css_files/ml.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,50 @@ a {
flex: 1;
}

.fav-btn {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: none;
font-size: 21px;
color: #8966e1 ;
cursor: pointer;
z-index: 2;
transition: transform 0.2s ease;
}

.fav-btn:hover {
transform: scale(1.25);
}

.favorites-toggle {
display: flex;
justify-content: flex-end;
margin: 0px 30px 70px 30px;
padding: 0;
background: none;
}

#favoritesToggleBtn {
padding: 10px 20px;
font-size: 16px;
background: linear-gradient(to right, #7c3aed, #9333ea);
color: white;
border: none;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background 0.3s ease;
}

#favoritesToggleBtn:hover {
background: linear-gradient(to right, #a855f7, #9333ea);
box-shadow: 0 6px 16px rgba(137, 39, 228, 0.6);
transform: translateY(-2px);
}

/* Tech Stack Tags */
.tech-stack {
display: flex;
Expand Down
48 changes: 41 additions & 7 deletions assets/html_files/games.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,65 +75,99 @@
<i class="fas fa-arrow-left"></i> Back to Home</a>
</div>
</nav>

<header>
<h1>Games</h1>
</header>
<main class="category-container">
<div class="category-card">
<h3>Memory Match</h3>
<p>A fun card-flipping memory game built with JavaScript.</p>
<a href="../../Games/Memory_Match/index.html" class="play-button">Play Now</a>
<a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/Memory_Match" class="code-button">View Code <i class="fab fa-github"></i></a>
<main>
<!-- FAVORITES FILTER BUTTON -->
<div class="favorites-toggle">
<button id="favoritesToggleBtn" onclick="toggleFavorites()">Show Favorites</button>
</div>
<div class="category-container">
<div class="category-card">
<h3>Memory Match</h3>
<p>A fun card-flipping memory game built with JavaScript.</p>
<a href="../../Games/Memory_Match/index.html" class="play-button">Play Now</a>
<a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/Memory_Match" class="code-button">View Code <i class="fab fa-github"></i></a>
<!-- Favorite Button -->
<button class="fav-btn" onclick="toggleFavorite(this)">
<i class="fa-regular fa-star"></i>
</button>
</div>

<div class="category-card">
<h3>Snake Game</h3>
<p>Classic snake game implemented in HTML5 canvas.</p>
<a href="../../Games/Snake_Game/index.html" class="play-button" target="_blank">Play Now</a>
<a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/Snake_Game" class="code-button">View Code <i class="fab fa-github"></i></a>
<button class="fav-btn" onclick="toggleFavorite(this)">
<i class="fa-regular fa-star"></i>
</button>
</div>

<div class="category-card">
<h3>Simon Says Game</h3>
<p>Test Your Memory and Reflexes in This Classic Command Game!.</p>
<a href="../../Games/Simon_Says_Game/index.html" class="play-button" target="_blank">Play Now</a>
<a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/Simon_Says_Game" class="code-button">View Code <i class="fab fa-github"></i></a>
<button class="fav-btn" onclick="toggleFavorite(this)">
<i class="fa-regular fa-star"></i>
</button>
</div>
<div class="category-card">
<h3>Reflex Tester</h3>
<p>Test your reaction time and reflexes with this interactive game.</p>
<a href="../../Games/Reflex_tester/index.html" class="play-button" target="_blank">Play Now</a>
<a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/Reflex_tester" class="code-button">View Code <i class="fab fa-github"></i></a>
<button class="fav-btn" onclick="toggleFavorite(this)">
<i class="fa-regular fa-star"></i>
</button>
</div>
<div class="category-card">
<h3>Minesweeper</h3>
<p>Classic minesweeper game with grid-based puzzle solving!.</p>
<a href="../../Games/Minesweeper/index.html" class="play-button" target="_blank">Play Now</a>
<a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/Minesweeper" class="code-button">View Code <i class="fab fa-github"></i></a>
<button class="fav-btn" onclick="toggleFavorite(this)">
<i class="fa-regular fa-star"></i>
</button>
</div>
<div class="category-card">
<h3>Word Guess Game</h3>
<p>A Wordle-style 5-letter puzzle game with scoring and clues.</p>
<a href="../../Games/Word_guess/index.html" class="play-button" target="_blank">Play Now</a>
<a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/" class="code-button">View Code <i class="fab fa-github"></i></a>
<button class="fav-btn" onclick="toggleFavorite(this)">
<i class="fa-regular fa-star"></i>
</button>
</div>
<div class="category-card">
<h3>Candy Crush</h3>
<p>Match colorful candies in this addictive puzzle game with special combinations and power-ups!</p>
<a href="../../Games/Candy_Crush/index.html" class="play-button" target="_blank">Play Now</a>
<a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/Candy_Crush" class="code-button">View Code <i class="fab fa-github"></i></a>
<button class="fav-btn" onclick="toggleFavorite(this)">
<i class="fa-regular fa-star"></i>
</button>
</div>
<div class="category-card">
<h3>Typing Speed Game</h3>
<p>Test your typing speed in a fun and interactive way!</p>
<a href="../../Games/Typing_Speed_Test/index.html" class="play-button" target="_blank">Play Now</a>
<a href=" " class="code-button">View Code <i class="fab fa-github"></i></a> <!-- Link to be updated -->
</div>
<button class="fav-btn" onclick="toggleFavorite(this)">
<i class="fa-regular fa-star"></i>
</button>
</div>
<div class="category-card">
<h3>CSS Math Duel</h3>
<p>Two-player speed math race with beautiful animations and competitive gameplay!</p>
<a href="../../Games/CSS_Math_Duel/index.html" class="play-button" target="_blank">Play Now</a>
<a href="https://github.com/pavitraag/Project-Vault/tree/main/Games/CSS_Math_Duel" class="code-button">View Code <i class="fab fa-github"></i></a>
<button class="fav-btn" onclick="toggleFavorite(this)">
<i class="fa-regular fa-star"></i>
</button>
</div>
<div class="category-card">
<h3>Lights Out Puzzle</h3>
Expand Down
74 changes: 74 additions & 0 deletions assets/html_files/miscellaneous.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,10 @@ <h1>Miscellaneous Projects</h1>
</header>

<main class=".webfolio-main">
<!-- FAVORITES FILTER BUTTON -->
<div class="favorites-toggle">
<button id="favoritesToggleBtn" onclick="toggleFavoritesView()">Show Favorites</button>
</div>
<div class="category-container">

<div class="category-card">
Expand All @@ -62,11 +66,81 @@ <h3>Face Recognition Login System</h3>
learning basic computer vision and authentication.</p>
<a href="https://github.com/pavitraag/Project-Vault/tree/main/Miscellaneous/face-recognition-login"
class="view-button">View Code</a><br>
<button class="fav-btn" onclick="toggleFavorite(this)">
<i class="fa-regular fa-star"></i>
</button>
</div>
</div>
</main>

<div id="footer-placeholder"></div>
<script>
function toggleFavorite(btn) {
const card = btn.closest('.category-card');
const title = card.querySelector('h3').innerText;
const icon = btn.querySelector('i');
const pageKey = window.location.pathname.split("/").pop().replace(".html", "");
const storageKey = `favorites-${pageKey}`;
const favorites = JSON.parse(localStorage.getItem(storageKey)) || [];

card.classList.toggle('favorited');
const isFav = card.classList.contains('favorited');

icon.classList.toggle('fa-regular', !isFav);
icon.classList.toggle('fa-solid', isFav);

if (isFav) {
if (!favorites.includes(title)) favorites.push(title);
} else {
const index = favorites.indexOf(title);
if (index !== -1) favorites.splice(index, 1);
}

localStorage.setItem(storageKey, JSON.stringify(favorites));
}

function loadFavorites() {
const pageKey = window.location.pathname.split("/").pop().replace(".html", "");
const storageKey = `favorites-${pageKey}`;
const favorites = JSON.parse(localStorage.getItem(storageKey)) || [];

document.querySelectorAll('.category-card').forEach(card => {
const title = card.querySelector('h3').innerText;
const icon = card.querySelector('.fav-btn i');
if (favorites.includes(title)) {
card.classList.add('favorited');
icon.classList.remove('fa-regular');
icon.classList.add('fa-solid');
}
});
}

function toggleFavoritesView() {
const btn = document.getElementById('favoritesToggleBtn');
const showOnlyFavorites = btn.classList.toggle('showing');
const pageKey = window.location.pathname.split("/").pop().replace(".html", "");
const storageKey = `favorites-${pageKey}`;
const favorites = JSON.parse(localStorage.getItem(storageKey)) || [];

document.querySelectorAll('.category-card').forEach(card => {
const title = card.querySelector('h3').innerText;
card.style.display = (showOnlyFavorites && !favorites.includes(title)) ? 'none' : 'block';
});

btn.innerText = showOnlyFavorites ? 'Show All' : 'Show Favorites';
}

window.addEventListener('DOMContentLoaded', loadFavorites);
</script>

<script>
fetch("/footer.html")
.then(response => response.text())
.then(data => {
document.getElementById("footer-placeholder").innerHTML = data;
});
</script>

<script>
fetch("../../footer.html")
.then(response => response.text())
Expand Down
Loading