Introduction
Welcome to my project showcase. This project features DareDEV, a dynamic e-learning platform designed to provide an engaging and user-centric learning experience. The platform integrates essential features to support both learners and educators, ensuring a streamlined and efficient educational journey.
User Dashboard
The user dashboard is the central hub for managing learning activities. Key functionalities include:
- Access to enrolled courses
- Quick access to wishlist and cart features
Wishlist Functionality
The wishlist feature allows users to:
- Add courses they are interested in for future reference
- Review and manage their wishlist items in a dedicated modal
Cart System
The cart system enhances the purchasing process by enabling users to:
- Select multiple courses for enrollment
- Review selected courses, including their price, in a cart modal
- Proceed to checkout seamlessly
Additional Features
DareDEV also includes:
- Font Size Controls: Users can adjust font size using easy-to-access controls to suit their reading preferences.
- Carousel: A carousel feature highlights popular courses and key platform messages, enhancing user engagement.
- Popular Courses Section: Showcases a selection of popular courses with detailed information and an option to add them to the cart.
Screenshots or Preview
Key Features
- Responsive Design - Our platform is fully optimized for all devices, ensuring seamless learning experiences on desktops, tablets, and mobile phones.
- Accessibility Features - Inclusive design with features like adjustable font sizes, screen reader compatibility, and keyboard navigation to accommodate all users.
- Wishlist and Cart - Conveniently save courses to your wishlist or cart, making it easy to manage your future enrollments and purchases.
Code Snippet
<!-- JavaScript for Cart Functionality -->
$(document).ready(function() {
let cart = [];
// Function to update the cart display
function updateCart() {
$('#cart-count').text(cart.length);
$('#cart-table-body').empty();
cart.forEach((item, index) => {
$('#cart-table-body').append(`
<tr>
<td>${item.name}</td>
<td>${item.price}</td>
<td><button class="btn btn-danger remove-from-cart" data-index="${index}">Remove</button></td>
</tr>
`);
});
}
// Add item to the cart
$('.add-to-cart').click(function() {
const courseItem = $(this).closest('.course-item');
const courseId = courseItem.data('course-id');
const courseName = courseItem.find('h4').text();
const coursePrice = courseItem.find('p:contains("Price")').text().split('$')[1];
// Check if item is already in the cart
const index = cart.findIndex(item => item.id === courseId);
if (index === -1) {
cart.push({ id: courseId, name: courseName, price: coursePrice });
$(this).addClass('added'); // Mark as added
} else {
cart.splice(index, 1);
$(this).removeClass('added'); // Mark as removed
}
updateCart();
});
// Remove item from the cart
$(document).on('click', '.remove-from-cart', function() {
const index = $(this).data('index');
cart.splice(index, 1);
updateCart();
});
});