99 lines
3.7 KiB
HTML
99 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Find Classmates</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<script>
|
|
/*to prevent Firefox FOUC, this must be here*/
|
|
let FF_FOUC_FIX;
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container" id="main-container">
|
|
<div class="form-section" id="form-section">
|
|
<h1>Enter Your Information</h1>
|
|
<form action="/submit" method="post">
|
|
<label for="name">Name:</label>
|
|
<input type="text" id="name" name="name" required>
|
|
|
|
<label for="email">Email:</label>
|
|
<input type="email" id="email" name="email">
|
|
|
|
<label for="phone">Phone:</label>
|
|
<input type="text" id="phone" name="phone">
|
|
|
|
<label for="dorm">Dorm:</label>
|
|
<input type="text" id="dorm" name="dorm">
|
|
|
|
<label>Classes:</label>
|
|
<div class="tags-input-container" id="classes-container">
|
|
<input type="text" id="classes-input" placeholder="Enter classes">
|
|
</div>
|
|
|
|
<input type="submit" value="Submit">
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Hidden matches section until classes are entered -->
|
|
<div class="matches-section" id="matches-section">
|
|
<h2>People with Similar Classes</h2>
|
|
<div id="class-filter-container">
|
|
<p>Filter by classes:</p>
|
|
</div>
|
|
<div id="matches-container">
|
|
<p>No one has a similar class yet!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/util.js"></script>
|
|
<script>
|
|
const classInput = document.getElementById('classes-input');
|
|
const formSection = document.getElementById('form-section');
|
|
const matchesSection = document.getElementById('matches-section');
|
|
const mainContainer = document.getElementById('main-container');
|
|
const tagsInputContainer = document.getElementById('classes-container');
|
|
|
|
// Add event listener to handle Enter key for adding chips
|
|
classInput.addEventListener('keydown', function(event) {
|
|
if (event.key === 'Enter' && classInput.value.trim() !== "") {
|
|
event.preventDefault();
|
|
addClassChip(classInput.value.trim());
|
|
classInput.value = ''; // Clear input after adding
|
|
}
|
|
});
|
|
|
|
// Function to add a chip (tag)
|
|
function addClassChip(className) {
|
|
const tag = document.createElement('div');
|
|
tag.classList.add('tag');
|
|
tag.innerHTML = className + '<span class="close">x</span>';
|
|
|
|
// Append the new tag to the tags container
|
|
tagsInputContainer.insertBefore(tag, classInput);
|
|
|
|
// Check if any chips exist, and show the matches section
|
|
updateMatchesVisibility();
|
|
|
|
// Remove tag on close click
|
|
tag.querySelector('.close').addEventListener('click', function() {
|
|
tag.remove();
|
|
updateMatchesVisibility(); // Check visibility when a chip is removed
|
|
});
|
|
}
|
|
|
|
function updateMatchesVisibility() {
|
|
const chipCount = tagsInputContainer.getElementsByClassName('tag').length;
|
|
console.log('Chip count:', chipCount); // Debugging message
|
|
if (chipCount > 0) {
|
|
mainContainer.classList.add('show-matches');
|
|
} else {
|
|
mainContainer.classList.remove('show-matches');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|