PathwayPioneer

by pitabread45

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PathwayPioneer</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Popup -->
  <div class="popup">
    <div class="popup-content">
      <h2>Our Mission</h2>
      <p>We are a non-profit organization that is directed towards helping underprivledged striving students achieve their dreams at university and and find their foothold in life.</p>
      <button class="close-popup">Close</button>
    </div>
  </div>

  <!-- Header -->
  <header>
    <div class="logo">PathwayPioneer</div>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Apply for Mentor</a></li>
        <li><a href="#">Sign Up</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content -->
  <div class="container">
    <!-- Your content goes here -->
  </div>

  <!-- Footer -->
  <footer>
    <p>This website is run by donations. You can contribute <a href="#">here</a>.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>
<!-- Main Content -->
<div class="container">
  <!-- Registration Form -->
  <div class="registration-form">
    <h2>Sign Up</h2>
    <form id="signup-form">
      <input type="text" placeholder="First Name" id="first-name" required>
      <input type="text" placeholder="Last Name" id="last-name" required>
      <input type="email" placeholder="Email" id="email" required>
      <input type="password" placeholder="Password" id="password" required>
      <input type="date" placeholder="Date of Birth" id="date-of-birth" required>
      <button type="submit">Sign Up</button>
    </form>
  </div>

  <!-- Mentor Recommendation -->
  <div class="recommendation-section">
    <h2>Recommended Mentors</h2>
    <p>Select your interests:</p>
    <select id="interests" multiple>
      <option value="science">Science</option>
      <option...

CSS

/* Basic styling */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Header styles */
header {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.logo {
  font-size: 24px;
}

nav ul {
  list-style: none;
  display: flex;
}

nav ul li {
  margin-right: 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

/* Popup styles */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

/* Footer styles */
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

footer a {
  color: #fff;
  text-decoration: underline;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const popup = document.querySelector('.popup');
  const closePopupButton = document.querySelector('.close-popup');

  // Show popup on page load
  popup.style.display = 'flex';

  // Close popup when the close button is clicked
  closePopupButton.addEventListener('click', () => {
    popup.style.display = 'none';
  });
});

document.addEventListener('DOMContentLoaded', () => {
  // ... (Previous code)

  // Signup form validation
  const signupForm = document.getElementById('signup-form');
  signupForm.addEventListener('submit', (event) => {
    event.preventDefault();

    const firstName = document.getElementById('first-name').value;
    const lastName = document.getElementById('last-name').value;
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    const dateOfBirth = document.getElementById('date-of-birth').value;

    // Add form validation and submission logic here
    // Check password requirements and age

		const UserName = document.getElementById()

    // Once form is validated, you can redirect user to home page or perform other actions
  });

  // Mentor recommendation
  const recommendButton = document.getElementById('recommend-button');
  recommendButton.addEventListener('click', () => {
    const selectedInterests = Array.from(document.getElementById('interests').options)
      .filter(option => option.selected)
      .map(option => option.value);

    // Implement logic to recommend mentors based on selected interests
    // Display recommended mentors in the 'recommended-mentors' div
  });
});