Project Showcase

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();
                });
            });