Skip to content

Added functionality for user to select courses and display them #85

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
RoyIvia wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added functionality for user to select courses and display them #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
17 changes: 17 additions & 0 deletions dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,23 @@ <h1>Welcome to Your Dashboard</h1>
<h2>Hello, <span id="user-fullname"></span>!</h2>
<p>Welcome to your personalized dashboard.</p>
</section>

<!-- Course Selection Form -->
<form id="course-selection-form">
<h2>Select Your Courses</h2>
<div id="courses-list">
<!-- Courses will be dynamically populated here -->
</div>
<button type="submit">Submit Selection</button>
</form>

<!-- Selected Courses Display -->
<div id="selected-courses">
<h2>My Selected Courses</h2>
<ul id="selected-courses-list">
<!-- Selected courses will be displayed here -->
</ul>
</div>
</main>
<footer>
<p>&copy; 2024 Your LMS</p>
Expand Down
150 changes: 61 additions & 89 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ document.addEventListener('DOMContentLoaded', () => {
const registerForm = document.getElementById('register-form');
const loginForm = document.getElementById('login-form');
const logoutForm = document.getElementById('logout-form');
const courseSelectionForm = document.getElementById('course-selection-form');

registerForm.addEventListener('submit', async (e) => {
e.preventDefault();
Expand Down Expand Up @@ -44,6 +45,8 @@ document.addEventListener('DOMContentLoaded', () => {
});
if (response.ok) {
alert('Login successful');
// Redirect to dashboard after successful login
window.location.href = '/dashboard';
} else {
alert('Invalid username or password');
}
Expand All @@ -60,6 +63,8 @@ document.addEventListener('DOMContentLoaded', () => {
});
if (response.ok) {
alert('Logout successful');
// Redirect to index.html after logout
window.location.href = '/';
} else {
alert('Logout failed');
}
Expand All @@ -68,21 +73,71 @@ document.addEventListener('DOMContentLoaded', () => {
}
});

// Course Selection Form Submission
courseSelectionForm.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(courseSelectionForm);
const selectedCourses = formData.getAll('course'); // Assuming checkboxes with name 'course'

try {
const response = await fetch('/select-courses', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ courses: selectedCourses })
});
if (response.ok) {
alert('Courses selected successfully');
// Refresh selected courses display
displaySelectedCourses();
} else {
alert('Failed to select courses');
}
} catch (error) {
console.error('Error:', error);
}
});

// Function to display selected courses for the logged-in user
function displaySelectedCourses() {
fetch('/get-selected-courses')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
const selectedCoursesList = document.getElementById('selected-courses-list');
selectedCoursesList.innerHTML = ''; // Clear previous list

data.forEach(course => {
const li = document.createElement('li');
li.textContent = course.name;
selectedCoursesList.appendChild(li);
});
})
.catch(error => {
console.error('Error fetching selected courses:', error);
});
}

// Check if the current page is the course content page
if (window.location.pathname === '/course-content') {
// Call the fetchCourseContent function
fetchCourseContent();
}

// Check if the current page is the course content page
if (window.location.pathname === '/leader-board') {
// Fetch course content from server
// Check if the current page is the leaderboard page
if (window.location.pathname === '/leaderboard') {
// Call the fetchLeaderboardData function
fetchLeaderboardData();
}

// Check if the current page is the course content page
// Check if the current page is the dashboard page
if (window.location.pathname === '/dashboard') {
//fetch Logged in user's full name
// Call the fetchFullName function
fetchFullName();
}
});
Expand Down Expand Up @@ -121,87 +176,4 @@ function displayCourseContent(courseContent) {
courseContentElement.innerHTML = '';

// Loop through the modules and display them
courseContent.modules.forEach(module => {
const moduleSection = document.createElement('section');
moduleSection.innerHTML = `
<h2>${module.title}</h2>
<p>${module.description}</p>
<!-- Add more elements as needed (e.g., videos, quizzes) -->
`;
courseContentElement.appendChild(moduleSection);
});
}

function fetchLeaderboardData() {
// Make AJAX request to fetch leaderboard data from server
fetch('/leaderboard')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Display leaderboard data on the page
displayLeaderboardData(data);
})
.catch(error => {
console.error('Error fetching leaderboard data:', error);
});
}

function displayLeaderboardData(leaderboardData) {
// Get the leaderboard element
const leaderboardElement = document.getElementById('leaderboard');
// Clear previous content
leaderboardElement.innerHTML = '';

// Create a table to display leaderboard data
const table = document.createElement('table');
table.innerHTML = `
<tr>
<th>Rank</th>
<th>Name</th>
<th>Score</th>
</tr>
`;

// Loop through the leaderboard data and add rows to the table
leaderboardData.forEach((entry, index) => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${index + 1}</td>
<td>${entry.name}</td>
<td>${entry.score}</td>
`;
table.appendChild(row);
});

// Append the table to the leaderboard element
leaderboardElement.appendChild(table);
}

function fetchFullName() {
// Make AJAX request to fetch the user's full name from the server
fetch('/get-fullname')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Display the user's full name on the dashboard
displayFullName(data.fullName);
})
.catch(error => {
console.error('Error fetching user full name:', error);
});
}

function displayFullName(fullName) {
// Get the element where the full name will be displayed
const fullNameElement = document.getElementById('user-fullname');
// Set the inner HTML of the element to the user's full name
fullNameElement.textContent = fullName;
}
courseContent.modules.forEach}