Skip to content

Added favorite feature with toggle and localStorage #47

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 8 commits into
base: master
Choose a base branch
from
Open

Added favorite feature with toggle and localStorage #47

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d6f0df1
Added favorite feature with toggle and localstorage
IshikaBanga26 Jul 31, 2025
82eb892
Resolved conflict in index.html
IshikaBanga26 Jul 31, 2025
9c00d15
Cleaned unresolved conflict markers
IshikaBanga26 Jul 31, 2025
f78a56a
Resolved all issues
IshikaBanga26 Jul 31, 2025
2317f3d
WIP: Started updating category filters
IshikaBanga26 Aug 1, 2025
141897e
WIP: Started updating category filters
IshikaBanga26 Aug 1, 2025
54b74ef
Completed dynamic favorite button and toggle view functionality
IshikaBanga26 Aug 3, 2025
4db331b
Merge branch 'master' into add-favorite-button
IshikaBanga26 Aug 3, 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
112 changes: 91 additions & 21 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,102 +39,129 @@ <h3>Recommended Resources</h3>
</select>
</div>
<input type="text" id="searchInput" placeholder="Search for resources..." />

<!--Add Show Favorites Button-->
<button id="showFavBtn">Show Favorites</button>
</div>

<div class="card" category="coding">
<div class="card" data-id="resource-1" category="coding">
<h4>Coding Practice(mainly for DSA):Leetcode</h4>
<p>LeetCode offers a wide range of problems to practice coding skills for technical interviews.</p>
<a href="https://leetcode.com"> Visit leetcode </a>
<<<<<<< HEAD
<button class="fav-btn">☆</button> <!-- Empty star initially -->
=======
<p></p>
>>>>>>> upstream/master
</div>

<div class="card" category="learning">
<div class="card" data-id="resource-2" category="learning">
<h4>Online learning platform: edX</h4>
<p>edX is an online learning platform offering free and paid courses, certificates, and degrees from top universities like Harvard and MIT to help you gain skills and advance your career.</p>
<a href="https://www.edx.org/">Visit edX</a>
<p></p>

<button class="fav-btn">☆</button>
</div>

<div class="card" category="coding">
<div class="card" data-id="resource-3" category="coding">
<h4>Competitive coding platform: Codeforces</h4>
<p>Codeforces is a competitive programming platform known for regular contests and a vast problem archive to improve algorithmic skills.</p>
<<<<<<< HEAD
<a href="https://www.edx.org/">Visit codeforces</a>
<button class="fav-btn">☆</button>
</div>
<div class="card" data-id="resource-4" category="learning">
=======
<a href="https://codeforces.com/">Visit codeforces</a>
<p></p>

</div>
<div class="card" category="learning">
>>>>>>> upstream/master
<h4>Learning Git: Git Immersion</h4>
<p>Git Immersion is a guided tour that helps you learn Git through hands-on labs and practical examples.</p>
<a href="https://gitimmersion.com" target="_blank">visit gitimmersion</a>
<button class="fav-btn">☆</button>
</div>
<<<<<<< HEAD

<div class="card" data-id="resource-5" category="coding">
=======
<div class="card" category="coding">
>>>>>>> upstream/master
<h4>Coding Practice: Frontend Mentor</h4>
Copy link
Copy Markdown
Owner

@Varshitha713 Varshitha713 Jul 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the merge conflict markers (<<<<<<<, =======, >>>>>>>) were committed by mistake. These need to be removed, and only the correct/combined content should be kept.
@IshikaBanga26

Copy link
Copy Markdown
Author

@IshikaBanga26 IshikaBanga26 Jul 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’ve removed all conflict markers from index.html.
Please let me know if there’s anything else I need to improve.

<p>Frontend Mentor offers real-world frontend challenges to improve your HTML, CSS, and JavaScript skills.</p>
<a href="https://www.frontendmentor.io/">Visit frontend mentor</a>
<p></p>

<button class="fav-btn">☆</button>
</div>

<div class="card" category="documentation">
<div class="card" data-id="resource-6" category="documentation">
<h4>Online Documentation: DevDocs</h4>
<p>Combines multiple developer documentations in one fast, searchable interface.</p>
<a href="https://devdocs.io">Visit devdocs</a>
<p></p>

<button class="fav-btn">☆</button>
</div>

<div class="card" category="sql">
<div class="card" data-id="resource-7" category="sql">
<h4>Practice SQL: SQLZoo</h4>
<p>platform for practing SQL with projects</p>
<a href="https://www.sqlzoo.net/wiki/SQL_Tutorial">Visit sqlzoo</a>
<p></p>
<button class="fav-btn">☆</button>

</div>

<div class="card" category="coding">
<div class="card" data-id="resource-8" category="coding">
<h4>Coding Challenge: Code wars</h4>
<p>Coding practice for all programming levels</p>
<a href="https://www.codewars.com/">Visit Code wars</a>
<p></p>
<button class="fav-btn">☆</button>
</div>

<div class="card" category="coding">
<div class="card" data-id="resource-9" category="coding">
<h4>Coding Test: HackerRank</h4>
<p>Coding Test & Interview Solution</p>
<a href="https://www.hackerrank.com/">Visit HackerRank</a>
<p></p>
<button class="fav-btn">☆</button>
</div>

<div class="card" category="learning">
<div class="card" data-id="resource-10" category="learning">
<h4>Courses and Certifications: Great Learning</h4>
<p>Online courses with Certifications</p>
<a href="https://www.mygreatlearning.com/">Visit Great Learning</a>
<<<<<<< HEAD
<button class="fav-btn">☆</button>

</div>
=======
<p></p>
</div>
>>>>>>> upstream/master

<div class="card" category="learning">
<div class="card" data-id="resource-11" category="learning">
<h4>Practice and Courses: GeeksForGeeks</h4>
<p>Practice coding, learn DSA, and explore computer science topics with tutorials and challenges.</p>
<a href="https://www.geeksforgeeks.org" target="_blank">Visit GeeksForGeeks</a>
<button class="fav-btn">☆</button>
</div>

<div class="card" category="coding">
<div class="card" data-id="resource-12" category="coding">
<h4>Algorithm Learning: Data Structure Visualization</h4>
<p>An interactive resource for visualizing various Data Structures and Algorithms. Perfect for understanding complex concepts through dynamic illustrations.</p>
<a href="https://www.cs.usfca.edu/~galles/visualization/Algorithms.html" target="_blank">Visit Data Structures Visualization</a>
<button class="fav-btn">☆</button>
</div>

<div class="card" category="learning">
<div class="card" data-id="resource-13" category="learning">
<h4>Documentation: Placement ready in 3 months</h4>
<p>A comprehensive guide outlining strategies and essential tips to prepare for your placements in just three months.</p>
<a href="https://medium.com/@varshini_vijay/placement-ready-in-3-months-bfba2512bee2" target="_blank">Visit Medium</a>
<button class="fav-btn">☆</button>
</div>

<div class="card" category="learning">
<div class="card" data-id="resource-14" category="learning">
<h4>Learning: Aptitude Questions and Answers</h4>
<p>Curated resources and practice materials to sharpen your quantitative, logical, and verbal aptitude skills for competitive exams and placements.</p>
<a href="https://www.indiabix.com/" target="_blank">Visit indiabix</a>
<button class="fav-btn">☆</button>
</div>


Expand Down Expand Up @@ -343,6 +370,49 @@ <h4>Interactive Learning: freeCodeCamp</h4>

</script>

<!-- Favorite Button Script -->
<script>
document.addEventListener("DOMContentLoaded", function () {
const buttons = document.querySelectorAll(".fav-btn");

buttons.forEach(button => {
const card = button.closest(".card");
const cardId = card.getAttribute("data-id");

if (localStorage.getItem(cardId) === "true") {
button.classList.add("active");
button.textContent = "★"; // filled star
} else {
button.textContent = "☆"; // empty star
}

button.addEventListener("click", () => {
const isActive = button.classList.toggle("active");
button.textContent = isActive ? "★" : "☆";
localStorage.setItem(cardId, isActive);
});
});
const favBtn = document.getElementById("showFavBtn");

favBtn?.addEventListener("click", function () {
const cards = document.querySelectorAll(".card");
const showOnlyFavs = this.classList.toggle("active");

this.textContent = showOnlyFavs ? "Show All" : "Show Favorites";

cards.forEach(card => {
const cardId = card.getAttribute("data-id");
const isFav = localStorage.getItem(cardId) === "true";

if (showOnlyFavs && !isFav) {
card.classList.add("hidden");
} else {
card.classList.remove("hidden");
}
});
});
});
</script>


</body>
Expand Down
39 changes: 39 additions & 0 deletions styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,30 @@ header {
color: #E0E0E0;
}

#showFavBtn {
padding: 8px 12px;
background-color: #019ea6;
color: white;
border: none;
border-radius: 8px;
margin-left: 10px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
}

#showFavBtn:hover {
background-color: #008a91;
}

body.dark-mode .fav-btn {
color: #cccccc;
}

body.dark-mode .fav-btn.active {
color: #7FDBFF;
}

.card {
background-color: rgba(146, 205, 209, 0.85);
backdrop-filter: blur(4px);
Expand Down Expand Up @@ -154,6 +178,21 @@ header {
text-decoration: underline;

}
.fav-btn {
font-size: 22px;
background: none;
border: none;
cursor: pointer;
transition: transform 0.2s ease;
}

.fav-btn.active {
color: #00adb5;
}

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

footer {
background-color: #3c7e8f;
Expand Down