Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Student Matching</title>
  <style>
    /* Button styles */
    button {
      width: 200px;
      height: 50px;
      background-color: #cf808c;
      border-radius: 5px;
      color: #FFFFFF;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      margin: 0 auto;
      display: block;
    }

    button:hover {
      background-color: #495867;
    }

    button:active {
      background-color: #495867;
    }

    /* Match results styles */
    #matchResults {
      /* Center the div horizontally */
      margin: 0 auto;
      background-color: #cf808c;
      /* Center the div vertically */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    #matchResults p {
      font-size: 20px;
      color: white;
    }

    #matchResults {
      border: 1px solid #d45f71;
    }

  </style>
</head>
<body>
    <button style="margin: 0 auto; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" onclick="displayMatchup()">Get Matchup</button>
    <div id="matchResults" style="position: absolute; top: calc(60% + 60px); left: 50%; transform: translate(-50%, -50%); width: 520px;"></div>
    <script>
    var status = false;
   
        // Array of students with their corresponding years
        var students = [
            { name: 'Matas', year: 2 },
            { name: 'Egle', year: 2 },
            { name: 'Lukas', year: 3 },
            { name: 'Gabija', year: 1 },
            { name: 'Sandra', year: 4 },
            { name: 'Jonas', year: 2 },
            { name: 'Paulius', year: 3 },
            { name: 'Gintare', year: 1 },
            { name: 'Marius', year: 3 },
            { name: 'Laura', year: 4 },
            { name: 'Rokas', year: 2 },
            { name: 'Indre ', year: 1 },
            { name: 'Mantas', year: 2 },
            { name: 'Simona', year: 3 },
            { name: 'Linas', year: 2 },
            { name: 'Eglė', year: 1 },
            { name: 'Marius', year: 3 },
            { name: 'Rūperta', year: 4 },
            { name: 'Gintaras', year: 2 },
            { name: 'Lina', year: 1 },
            { name: 'Agnė', year: 3 },
            { name: 'Liepa', year: 4 },
            { name: 'Aysu', year: 2 },
            { name: 'Domantas', year: 3 },
            { name: 'Aistis', year: 3 },
            { name: 'Asta', year: 4 },
            { name: 'Domantas', year: 2 },
            // Add more students and their years as needed
        ];
        var matchedStudents = [];

        function getRandomStudent(excludeName, excludeYear) {
            var availableStudents = students.filter(function(student) {
                return student.name !== excludeName && student.year !== excludeYear && !matchedStudents.includes(student.name);
            });

            if (availableStudents.length === 0) {
                return null; // No suitable match found
            }

            var randomIndex = Math.floor(Math.random() * availableStudents.length);
            return availableStudents.splice(randomIndex, 1)[0];
        }

        function displayMatchup() {
            var studentName = "Matas";
            var studentYear = 2;

            var student = students.find(function (student) {
                return student.name === studentName && student.year === studentYear;
            });

            if (student) {
                var otherStudent = getRandomStudent(studentName, studentYear);

                if (otherStudent) {
                    var matchResults = document.getElementById('matchResults');

                        matchResults.innerHTML = '<p>Logged in as ' + studentName + ' - ' + getYearDescription(studentYear) + ' GiftED student.</p>' +
                        '<p>Your weekly Caffe Match-up is:</p>' +
                        '<p>' + otherStudent.name + ', ' + getYearDescription(otherStudent.year) + '</p>' +
                        '<p id="status"> Status: Already Met!</p>'
                    matchedStudents.push(otherStudent.name);
                    
                } else {
                    alert('No suitable match found.');
                }
            } else {
                alert('Student not found or does not match the provided year.');
            }
        }

        function getYearDescription(year) {
            if (year === 1) {
                return 'First-Year';
            } else if (year === 2) {
                return 'Second-Year';
            } else if (year === 3) {
                return 'Third-Year';
            } else if (year === 4) {
                return 'Fourth-Year';
            } else {
                return 'Unknown Year';
            }
        }


    </script>
</body>
</html>
Editor is loading...