app.js

const myObj = {"studyGroups":[
            {
                "id": 1,
                "major": "Computer and Information Technology",
                "courses": ["Introduction to Programming", "Data Structures"],
                "studyTimes": ["Wednesday 3:00pm-5:00pm", "Friday 2:00pm-4:00pm"],
                "groupSize": 4
            },
            {
                "id": 2,
                "major": "Engineering",
                "courses": ["Calculus II", "Physics I"],
                "studyTimes": ["Monday 10:00am-12:00pm", "Thursday 1:00pm-3:00pm"],
                "groupSize": 3
            },
            {
                "id": 3,
                "major": "Biology",
                "courses": ["Molecular Biology", "Genetics"],
                "studyTimes": ["Tuesday 9:00am-11:00am", "Thursday 4:00pm-6:00pm"],
                "groupSize": 5
            },
            {
                "id": 4,
                "major": "Business Administration",
                "courses": ["Economics", "Accounting 101"],
                "studyTimes": ["Wednesday 2:00pm-4:00pm", "Friday 11:00am-1:00pm"],
                "groupSize": 6
            },
            {
                "id": 5,
                "major": "Psychology",
                "courses": ["Introduction to Psychology", "Cognitive Psychology"],
                "studyTimes": ["Monday 3:00pm-5:00pm", "Wednesday 10:00am-12:00pm"],
                "groupSize": 4
            },
            {
                "id": 6,
                "major": "Finance",
                "courses": ["Introduction to Finance", "Financial Management"],
                "studyTimes": ["Monday 1:00pm-2:00pm", "Wednesday 9:00am-1:00pm"],
                "groupSize": 7
            },
            {
                "id": 7,
                "major": "Game Development",
                "courses": ["Introduction to Game Development", "Game Development Methodologies"],
                "studyTimes": ["Monday 4:00pm-5:00pm", "Wednesday 6:00am-12:00pm"],
                "groupSize": 8
            },
            {
                "id": 8,
                "major": "Computer Science",
                "courses": ["Introduction to Computer Science", "Systems Programming"],
                "studyTimes": ["Monday 2:00pm-3:00pm", "Wednesday 11:00am-12:00pm"],
                "groupSize": 9
            },
            {
                "id": 9,
                "major": "Cybersecurity",
                "courses": ["Introduction to Cybersecurity", "Cybersecurity Fundamentails"],
                "studyTimes": ["Monday 6:00pm-7:00pm", "Wednesday 10:00am-1:00pm"],
                "groupSize": 11
            },
            {
                "id": 10,
                "major": "Network Administration",
                "courses": ["Introduction to Network Administration", "Network Administration Principals"],
                "studyTimes": ["Monday 4:00pm-9:00pm", "Wednesday 9:00am-4:00pm"],
                "groupSize": 12
            }
    ]
}

document.getElementById("btnSubmit").addEventListener("click", function(event){
    event.preventDefault();
    
    // put values into form values into variables
    const major = document.getElementById("major").value;
    const courses = document.getElementById("courses").value;
    const studyDay = document.getElementById("inputWeekday").value;
    const studyStartTime = document.getElementById("inputStartTime").value;
    const studyEndTime = document.getElementById("inputEndTime").value;
    const groupSize = document.getElementById("inputGroupSize").value;

    // clear result div
    document.getElementById("results-container").innerHTML = "";

    // validate the inputs
    if(!major || !courses || !studyDay || !studyStartTime || !studyEndTime || !groupSize){
        const message = [];
        if(!major){message.push(" Major");}
        if(!courses){message.push(" Courses");}
        if(!studyDay){message.push(" Weekday");}
        if(!studyStartTime){message.push(" Start time");}
        if(!studyEndTime){message.push(" End time");}
        if(!groupSize){message.push(" Group size");}
        alert("Missing fields: " + message);
        return;
    }

    // validate times
    if(studyStartTime >= studyEndTime){
        alert("Improper times!");
        return;
    }

    // function to convert time
    function convertTime(time24) {
        let time = time24.split(":");
        let hours = parseInt(time[0], 10);
        let minutes = parseInt(time[1], 10);
    
        let ampm = hours >= 12 ? 'pm' : 'am';
        hours = hours % 12;
        hours = hours ? hours : 12;
        return hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ampm;
    }
    
    // call function create study date time
    let start12 = convertTime(studyStartTime);
    let end12 = convertTime(studyEndTime);
    let studyDateTime = studyDay + " " + start12 + "-" + end12;

    // check matching groups
    const matchingGroups = myObj.studyGroups.filter(group => group.courses.includes(courses) && 
                                                             group.studyTimes.includes(studyDateTime) &&
                                                             group.groupSize == groupSize);
               
    // if no matches
    if(matchingGroups.length == 0){
        alert("No matching groups! Modify inputs!");
        return;
    }    

    // display results
    const resultsSection = document.createElement('div');   // Create the resultsSection as a div element
    resultsSection.id = 'resultsSection';   // Assign an ID to the div for future reference    
    
    const resultsList = document.createElement('ul');   // Create the resultsList as an unordered list element
    resultsList.id = 'resultsList';     // assign an id
    resultsSection.appendChild(resultsList);    // Append the resultsList (ul) to the resultsSection (div)

    const resultContainer = document.getElementById("results-container");   // get result div
    resultContainer.appendChild(resultsSection);    //append div to result div

    // call function for each group
    matchingGroups.forEach(group => {
        addResultItem(group)
    });

    // add result function
    function addResultItem(group) {
        const item = document.createElement('div');
        item.classList.add('resultItem'); 
        
        // Populate the item with study group details
        item.innerHTML = `
            <h3>${group.major} Study Group</h3>
            <p>Courses: ${group.courses.join(', ')}</p>
            <p>Study Times: ${group.studyTimes.join(', ')}</p>
            <p>Group Size: ${group.groupSize}</p>
        `;
    
        // Create the "Join" button for each study group
        const joinButton = document.createElement('button');
        joinButton.textContent = 'Join Group';
    
        // Add click event listener to the "Join" button
        joinButton.addEventListener('click', function() {
            alert(`Joined the ${group.major} Study Group!`);
        });
        
        item.appendChild(joinButton);   // Append the "Join" button to the item    
        resultsList.appendChild(item);  // Append the item to the resultsList
    }
})