lucaspatenaude/ScoreSpot
1
0
Fork 0
Code Projects 1 Releases 1 Wiki Activity

added dynamic selects in register

Browse Source
This commit is contained in:
dominicjk
2024-04-10 16:42:31 -06:00
parent 003b59d6b8
commit 5fd55ad4c4
4 changed files with 98 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
ProjectSourceCode/src/resources/css/login_and_registration.css
View File

@@ -38,9 +38,9 @@ body {
}
/* Apply modern styling to inputs and select elements */
.form-control,
#form-control,
select {
width: 100%; /* Make inputs and select elements same width */
width: 70%; /* Make inputs and select elements same width */
padding: 0.375rem 0.75rem; /* Example padding */
font-size: 1rem; /* Example font size */
line-height: 1.5; /* Example line height */
@@ -51,6 +51,8 @@ select {
margin-bottom: 10px; /* Example margin */
}
/* Adjust styling for form labels */
.form-label {
font-weight: bold; /* Example font weight */
@@ -61,4 +63,3 @@ select {
margin-top: 10px; /* Example margin */
}

40
ProjectSourceCode/src/resources/js/selectFunctions.js Normal file
View File

@@ -0,0 +1,40 @@
document.addEventListener("DOMContentLoaded", function() {
const league_select = document.getElementById('league_dropdown');
const team_select = document.getElementById('team_dropdown');
league_select.addEventListener('change', updateTeamSelect);
function updateTeamSelect() {
var selectedLeague = league_select.value;
var teamSelect = team_select;
// Clear existing options
teamSelect.innerHTML = "";
// Add options based on the selected value from the first select element
if (selectedLeague === "La Liga") {
// Add options for La Liga
addOption(teamSelect, "Option 1 for LL", "option1A");
addOption(teamSelect, "Option 2 for LL", "option2A");
} else if (selectedLeague === "Serie A") {
// Add options for Serie A
addOption(teamSelect, "Team 1 in Serie A", "option1B");
addOption(teamSelect, "Team 2 in Serie A", "option2B");
} else {
// Add options for Bundesliga
addOption(teamSelect, "Option 1 for Bun", "option1C");
addOption(teamSelect, "Option 2 for Bun", "option2C");
}
}
function addOption(selectElement, text, value) {
var option = document.createElement("option");
option.text = text;
option.value = value;
selectElement.add(option);
}
});

76
ProjectSourceCode/src/views/pages/register.hbs
View File

@@ -2,49 +2,79 @@
<div class="register-page">
<div class="form-container">
<h1 class="mt-5 mb-4">Register</h1>
<form action="/register" method="POST" class="mt-3">
<div class="mb-3">
<label for="username" class="form-label">Username:</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<div class = "dropdowns">
<div id="league_dropdown">
<label for="password" class="form-label">Preferred League :</label><br>
<select id="dropdown">
<div class="dropdowns">
<div>
<label class="form-label">Preferred League :</label><br>
<select id="league_dropdown">
<option value="option1">Premier League</option>
<option value="option2">La Liga</option>
<option value="option3">Bundesliga</option>
<option value="option3">Serie A</option>
<option value="option3">Ligue 1</option>
<option value="option3">Brasilerao</option>
<option value="option4">Serie A</option>
<option value="option5">Ligue 1</option>
<option value="option6">Brasilerao</option>
</select>
</div>
<div id="team_dropdown">
<label for="password" class="form-label">Favourite Team :</label><br>
<select id="dropdown">
<option value="option1">Premier League</option>
<option value="option2">La Liga</option>
<option value="option3">Bundesliga</option>
<option value="option3">Serie A</option>
<option value="option3">Ligue 1</option>
<option value="option3">Brasilerao</option>
<div>
<label class="form-label">Favorite Team :</label><br>
<select id="team_dropdown">
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<p class="mt-3">Already have an account? <a href="/login">Login</a></p>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const league_select = document.getElementById('league_dropdown');
const team_select = document.getElementById('team_dropdown');
league_select.addEventListener('change', updateTeamSelect);
function updateTeamSelect() {
var selectedLeague = league_select.value;
var teamSelect = team_select;
// Clear existing options
teamSelect.innerHTML = "";
// Add options based on the selected value from the first select element
if (selectedLeague === "La Liga") {
// Add options for La Liga
addOption(teamSelect, "Option 1 for LL", "option1A");
addOption(teamSelect, "Option 2 for LL", "option2A");
} else if (selectedLeague === "Serie A") {
// Add options for Serie A
addOption(teamSelect, "Team 1 in Serie A", "option1B");
addOption(teamSelect, "Team 2 in Serie A", "option2B");
} else {
// Add options for Bundesliga
addOption(teamSelect, "Option 1 for Bun", "option1C");
addOption(teamSelect, "Option 2 for Bun", "option2C");
}
}
function addOption(selectElement, text, value) {
var option = document.createElement("option");
option.text = text;
option.value = value;
selectElement.add(option);
}
});
</script>
</body>

2
ProjectSourceCode/src/views/partials/nav.hbs
View File

@@ -20,7 +20,7 @@
</ul>
<div class="nav-item me-1">
<!-- TODO: For Logout, add a <a> tag with an attribute href to call the '/logout API -->
<a class="nav-link" href="/logout">Logout</a>
<a class="nav-link" href="/logout">Logout</a>
</div>
</div>
</div>