diff --git a/data/projects.json b/data/projects.json index 1bad3d31..2122a643 100644 --- a/data/projects.json +++ b/data/projects.json @@ -221,6 +221,69 @@ }, { "id": 8, + + "title": "Library Management System", + "skills": ["Java"], + "level": "Beginner", + "interest": "Backend", + "time": "Medium", + "description": "A Java application that helps manage books, students, and borrowing records in a library. This project teaches object-oriented programming concepts, file handling, and menu-driven application design.", + "features": [ + "Add and remove books", + "Issue and return books", + "Store student records", + "Search books by title or author" + ], + "tech_stack": ["Java", "OOP", "File Handling"], + "roadmap": [ + "Step 1: Create Book and Student classes", + "Step 2: Design the menu-driven interface", + "Step 3: Implement add and remove book features", + "Step 4: Add issue and return book functionality", + "Step 5: Store records using file handling", + "Step 6: Implement search functionality", + "Step 7: Test the system with sample records" + ], + "resources": [ + "Java official docs: https://docs.oracle.com/javase/tutorial", + "OOP concepts in Java: https://www.geeksforgeeks.org/object-oriented-programming-oops-concept-in-java", + "Java file handling: https://www.w3schools.com/java/java_files.asp" + ], + "starter_code": "starter_code/library_management.java" + }, + { + "id": 9, + "title": "Real-Time Chat Application", + "skills": ["JavaScript", "Node.js"], + "level": "Intermediate", + "interest": "Web", + "time": "High", + "description": "A real-time chat application that allows multiple users to send and receive instant messages using WebSockets. This project introduces backend communication, event handling, and real-time systems.", + "features": [ + "Multiple user chat support", + "Real-time messaging", + "User join and leave notifications", + "Simple responsive chat interface" + ], + "tech_stack": ["Node.js", "Express.js", "Socket.IO", "HTML", "CSS"], + "roadmap": [ + "Step 1: Initialize the Node.js project", + "Step 2: Install Express and Socket.IO", + "Step 3: Create the server using Express", + "Step 4: Build the frontend chat interface", + "Step 5: Implement real-time messaging with Socket.IO", + "Step 6: Add user connection notifications", + "Step 7: Test the application with multiple users" + ], + "resources": [ + "Node.js docs: https://nodejs.org/en/docs", + "Socket.IO guide: https://socket.io/docs/v4", + "Express.js documentation: https://expressjs.com" + ], + "starter_code": "starter_code/realtime_chat_app.js" + }, + { + "id": 10, "title": "Password Strength Checker", "skills": ["Python"], "level": "Beginner", @@ -248,5 +311,4 @@ ], "starter_code": "starter_code/password_checker.py" } -] - +] \ No newline at end of file diff --git a/starter_code/library_management.java b/starter_code/library_management.java new file mode 100644 index 00000000..84ddadb3 --- /dev/null +++ b/starter_code/library_management.java @@ -0,0 +1,22 @@ +import java.util.*; + +class Book { + String title; + + Book(String title) { + this.title = title; + } +} + +public class LibraryManagement { + public static void main(String[] args) { + ArrayList books = new ArrayList<>(); + + books.add(new Book("Java Basics")); + books.add(new Book("Data Structures")); + + for (Book b : books) { + System.out.println(b.title); + } + } +} \ No newline at end of file diff --git a/starter_code/realtime_chat_app.js b/starter_code/realtime_chat_app.js new file mode 100644 index 00000000..d4310ddb --- /dev/null +++ b/starter_code/realtime_chat_app.js @@ -0,0 +1,13 @@ +const users = []; + +function joinChat(username) { + users.push(username); + console.log(`${username} joined the chat`); +} + +function sendMessage(username, message) { + console.log(`${username}: ${message}`); +} + +joinChat("Vikas"); +sendMessage("Vikas", "Hello World!"); \ No newline at end of file diff --git a/static/script.js b/static/script.js index aebc9225..72b36741 100644 --- a/static/script.js +++ b/static/script.js @@ -60,6 +60,7 @@ if (isIndexPage) { var resultsLoadingEl = document.getElementById("results-loading"); var resultsEmptyEl = document.getElementById("results-empty"); var emptyMessageEl = document.getElementById("empty-message"); + var searchContainer = document.getElementById("results-search-container"); var skillsHidden = document.getElementById("skills"); var skillsTextInput = document.getElementById("skills-input"); var chipsSelectedEl = document.getElementById("skill-chips-selected"); @@ -67,6 +68,7 @@ if (isIndexPage) { // Tracks currently selected skills to prevent duplicates var selectedSkills = []; + var currentProjects = []; // ---------------------------------------------------------- @@ -479,6 +481,8 @@ if (isIndexPage) { function renderResults(projects, message) { resultsSection.style.display = "block"; + searchContainer.style.display = projects.length ? "block" : "none"; + currentProjects = projects; resultsLoadingEl.style.display = "none"; // Clear out any cards from a previous search before showing new ones resultsGrid.innerHTML = ""; @@ -567,6 +571,38 @@ if (isIndexPage) { return text.length > maxLength ? text.slice(0, maxLength) + "..." : text; } + // ---------------------------------------------------------- +// Project title search +// ---------------------------------------------------------- + +var projectSearch = document.getElementById("project-search"); + +if (projectSearch) { + projectSearch.addEventListener("input", function () { + + var searchValue = projectSearch.value.toLowerCase(); + + var filteredProjects = currentProjects.filter(function (project) { + return project.title.toLowerCase().includes(searchValue); + }); + + resultsGrid.innerHTML = ""; + + if (filteredProjects.length === 0) { + resultsGrid.innerHTML = ` +
+ No matching projects found. +
+ `; + return; + } + + filteredProjects.forEach(function (project) { + resultsGrid.appendChild(buildProjectCard(project)); + }); + }); +} + } // end isIndexPage diff --git a/static/style.css b/static/style.css index 18d9cbf7..ef62c43d 100644 --- a/static/style.css +++ b/static/style.css @@ -1968,4 +1968,24 @@ select:focus { #scroll-top-btn.visible { display: flex; +} + +.results-search-container { + margin-bottom: 20px; +} + +#project-search { + width: 100%; + padding: 12px; + border-radius: 10px; + border: 1px solid #ccc; + font-size: 16px; +} + +.empty-search-message { + grid-column: 1 / -1; + text-align: center; + padding: 20px; + font-size: 1rem; + color: #9ca3af; } \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 49556f7d..7e894a8a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -505,6 +505,14 @@

No Projects Found

+ +