-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (95 loc) · 4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ballers Calculator</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
select { margin-bottom: 10px; }
#total { margin-top: 20px; font-size: 20px; }
</style>
</head>
<body>
<h2>Player Lineup Calculator</h2>
<form id="playerForm">
<div>
<label for="dropdown1">Player 1:</label>
<select id="dropdown1" onchange="updateSelections(); updateTotal();"></select>
</div>
<div>
<label for="dropdown2">Player 2:</label>
<select id="dropdown2" onchange="updateSelections(); updateTotal();"></select>
</div>
<div>
<label for="dropdown3">Player 3:</label>
<select id="dropdown3" onchange="updateSelections(); updateTotal();"></select>
</div>
<div>
<label for="dropdown4">Player 4:</label>
<select id="dropdown4" onchange="updateSelections(); updateTotal();"></select>
</div>
<div>
<label for="dropdown5">Player 5:</label>
<select id="dropdown5" onchange="updateSelections(); updateTotal();"></select>
</div>
<div id="total">Total: 0.0</div>
</form>
<script> //id matches player number, value is the point classification of the player
const players = [
{ id: 1, name: "Rod #1", value: 4.5 },
{ id: 45, name: "Zak #45", value: 4.5 },
{ id: 13, name: "Kyle #13", value: 4.5 },
{ id: 15, name: "Kai #15", value: 3.5 },
{ id: 11, name: "Ashton #11", value: 3.0 },
{ id: 4, name: "Jarrod #4", value: 2.5 },
{ id: 5, name: "Rich #5", value: 2.5 },
{ id: 33, name: "Gage #33", value: 2.5 },
{ id: 23, name: "Matt #23", value: 2.0 },
{ id: 6, name: "Karlton #6", value: 2.0 },
{ id: 20, name: "Francois #20", value: 1.5 },
{ id: 10, name: "Wolff #10", value: 1.5 },
{ id: 100, name: "Cameron #", value: 1.5 }
];
window.onload = function() {
const form = document.getElementById('playerForm');
Array.from(form.getElementsByTagName('select')).forEach(select => {
const defaultOption = document.createElement('option');
defaultOption.textContent = 'Select a player';
defaultOption.value = '0';
select.appendChild(defaultOption);
players.forEach(player => {
const option = document.createElement('option');
option.textContent = `${player.name} (${player.value})`;
option.value = player.id;
select.appendChild(option);
});
});
};
function updateTotal() {
const selects = document.querySelectorAll('select');
let total = 0;
selects.forEach(select => {
const player = players.find(p => p.id.toString() === select.value); // Find the player by id
if (player) {
total += parseFloat(player.value); // Use the player's value for the total calculation
}
});
document.getElementById('total').textContent = 'Total: ' + total.toFixed(1); // Display the formatted total
}
function updateSelections() {
const selects = document.querySelectorAll('select');
const selectedValues = Array.from(selects).map(select => select.value);
selects.forEach(select => {
Array.from(select.options).forEach(option => {
if (option.value !== '0' && selectedValues.includes(option.value)) {
option.disabled = selectedValues.includes(option.value) && option.value !== select.value;
} else {
option.disabled = false;
}
});
});
}
</script>
</body>
</html>