lugaye · Thuo0956 · May 25, 2024
diff --git a/lms/README.md b/lms/README.md
@@ -0,0 +1,102 @@
+# Learning Managment System
+
+## Step 1: Project Setup
+
+### Create a new directory for your project and navigate into it.
+```bash
+mkdir learning-management-app
+cd learning-management-app
+```
+### Initialize a new Node.js project.
+```bash
+npm init -y
+```
+### Install necessary dependencies.
+```bash
+npm install express mysql ejs bcryptjs express-session express-validator
+```
+
+## Step 2: Set up the Backend
+
+### Create a `server.js` file in your project directory.
+
+### Create a MySQL database named `learning_management` 
+
+#### Create users table
+```bash
+-- Create users table
+CREATE TABLE users (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    username VARCHAR(255) UNIQUE,
+    password VARCHAR(255),
+    email VARCHAR(255) UNIQUE,
+    full_name VARCHAR(255)
+);
+```
+
+#### Create courses table
+```bash
+-- Create courses table
+CREATE TABLE courses (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    name VARCHAR(255)
+);
+
+-- Insert sample data into courses table
+INSERT INTO courses (name) VALUES
+('Introduction to HTML'),
+('CSS Fundamentals'),
+('JavaScript Basics');
+```
+
+#### Create leaderboard table
+```bash
+-- Create leaderboard table
+CREATE TABLE leaderboard (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    name VARCHAR(255),
+    score INT
+);
+
+-- Insert sample data into leaderboard table
+INSERT INTO leaderboard (name, score) VALUES
+('John Doe', 100),
+('Jane Smith', 90),
+('Michael Brown', 85),
+('Emily Jones', 80);
+```
+
+### Run the server.
+```bash
+node server.js
+```
+
+## Step 3: Frontend Setup
+
+### Create an `index.html` file for the frontend.
+
+### Create a `course-content.html` file for the course content.
+
+### Create a `leader-board.html` file for the leader board.
+
+### Create a `style.css` file to style your HTML.
+
+### Create a `script.js` file to handle frontend interactions.
+
+## Step 4: Testing
+Open your web browser and navigate to http://localhost:3000.
+
+# Hackathon Instructions
+Finish up the project by: 
+1. creating functionality for the logged in user to select their preferred courses.
+2. store the selection in the database
+3. create a page where the selected courses for each specific logged in user is displayed.
+
+## Submission Guidelines
+Fork this repository and clone it to your local machine. 
+Create a new branch with your GitHub username (git checkout -b username). 
+Complete the tasks. 
+Commit your changes and push them to your forked repository. 
+Submit a pull request to the main repository for review.
+
+Happy hacking! 🚀
diff --git a/lms/app.js b/lms/app.js
@@ -0,0 +1,20 @@
+// Route to select a course
+app.post('/select-course', (req, res) => {
+    const userId = req.user.id;
+    const courseId = req.body.courseId;
+    const query = 'INSERT INTO user_courses (user_id, course_id) VALUES (?, ?)';
+    db.query(query, [userId, courseId], (err) => {
+        if (err) throw err;
+        res.redirect('/my-courses');
+    });
+});
+
+// Route to display selected courses
+app.get('/my-courses', (req, res) => {
+    const userId = req.user.id;
+    const query = 'SELECT * FROM courses WHERE id IN (SELECT course_id FROM user_courses WHERE user_id = ?)';
+    db.query(query, [userId], (err, results) => {
+        if (err) throw err;
+        res.render('my-courses', { courses: results });
+    });
+});
diff --git a/lms/course-content.html b/lms/course-content.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Courses</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>My Courses</h1>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="course-content.html">Course Content</a></li>
+                <li><a href="leader-board.html">Leaderboard</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <section id="selected-courses">
+            <h2>Selected Courses</h2>
+            <!-- This will be dynamically populated with user's selected courses -->
+        </section>
+    </main>
+    <footer>
+        <p>&copy; 2024 Your LMS</p>
+    </footer>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/lms/dashboard.html b/lms/dashboard.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Courses</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>My Courses</h1>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="course-content.html">Course Content</a></li>
+                <li><a href="leader-board.html">Leaderboard</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <section id="selected-courses">
+            <h2>Selected Courses</h2>
+            <!-- This will be dynamically populated with user's selected courses -->
+        </section>
+    </main>
+    <footer>
+        <p>&copy; 2024 Your LMS</p>
+    </footer>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/lms/index.html b/lms/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Learning Management App</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>Learning Management App</h1>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="course-content.html">Course Content</a></li>
+                <li><a href="leader-board.html">Leaderboard</a></li>
+                <li><a href="my-courses.html">My Courses</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <form id="register-form">
+            <h2>Register</h2>
+            <section id="input-section">
+                <input type="text" name="username" placeholder="Username" required>
+                <input type="password" name="password" placeholder="Password" required>
+                <input type="email" name="email" placeholder="Email" required>
+                <input type="text" name="full_name" placeholder="Full Name" required>
+                <button type="submit">Register</button>
+            </section>
+        </form>
+        <form id="login-form">
+            <h2>Login</h2>
+            <input type="text" name="username" placeholder="Username" required>
+            <input type="password" name="password" placeholder="Password" required>
+            <button type="submit">Login</button>
+        </form>
+        <form id="logout-form">
+            <button type="submit">Logout</button>
+        </form>
+    </main>
+    <footer>
+        <p>&copy; 2024 Your LMS</p>
+    </footer>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/lms/leader-board.html b/lms/leader-board.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Leaderboard</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>Leaderboard</h1>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="course-content.html">Course Content</a></li>
+                <li><a href="my-courses.html">My Courses</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main id="leaderboard">
+        <!-- Leaderboard data will be dynamically populated here -->
+    </main>
+    <footer>
+        <p>&copy; 2024 Your LMS</p>
+    </footer>
+    <script src="server.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>