-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgoaltracker.html
118 lines (104 loc) · 4 KB
/
goaltracker.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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Tracker</title>
<link rel="stylesheet" href="goaltracker.css">
</head>
<body>
<h1>Progress Tracker</h1>
<form id="inputForm">
<label for="numCourses">Number of Courses:</label>
<input type="number" id="numCourses" min="2" max="6" required>
<button type="submit" onclick="showProgress()">Create Table</button>
</form>
<div id="tableContainer"></div>
<div class="progress-container" id="progressContainer">
<input type="range" min="0" max="100" value="0" class="progress-slider" id="progressSlider" oninput="updateProgressMessage()">
<div id="progressMessage">Progress: 0%</div>
</div>
<script>
function showProgress() {
document.getElementById('progressContainer').style.display = 'block';
}
document.getElementById("inputForm").addEventListener("submit", function(event) {
event.preventDefault();
const numCourses = parseInt(document.getElementById("numCourses").value);
createTable(numCourses);
});
function createTable(numCourses) {
const daysOfWeek = ['Day 0', 'Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'];
const tableContainer = document.getElementById('tableContainer');
let tableHTML = '<table><thead><tr><th></th>';
for (let day of daysOfWeek) {
tableHTML += `<th>${day}</th>`;
}
tableHTML += '</tr></thead><tbody>';
for (let i = 1; i <= numCourses; i++) {
tableHTML += `<tr><td>Course ${i}</td>`;
for (let j = 0; j < 7; j++) {
tableHTML += '<td><input type="checkbox" onchange="calculateProgress()"></td>';
}
tableHTML += '</tr>';
}
tableHTML += '</tbody></table>';
tableContainer.innerHTML = tableHTML;
}
function calculateProgress() {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const totalCheckboxes = checkboxes.length;
let checkedCount = 0;
checkboxes.forEach(function(checkbox) {
if (checkbox.checked) {
checkedCount++;
}
});
const progressPercentage = (checkedCount / totalCheckboxes) * 100;
const progressSlider = document.getElementById('progressSlider');
progressSlider.value = progressPercentage;
updateProgressMessage();
}
function updateProgressMessage() {
const progressSlider = document.getElementById('progressSlider');
const progressMessage = document.getElementById('progressMessage');
progressMessage.textContent = `Progress: ${progressSlider.value}%`;
const progressPercentage = parseInt(progressSlider.value);
if (progressPercentage < 20) {
progressMessage.style.color = "red";
progressMessage.textContent += " - You need to work harder. Keep going!";
} else if (progressPercentage < 50) {
progressMessage.style.color = "#FFA500";
progressMessage.textContent += " - You're making progress. Keep it up!";
} else if (progressPercentage < 80) {
progressMessage.style.color = "green";
progressMessage.textContent += " -You're doing great! Keep it up! ";
} else if(progressPercentage < 100){
progressMessage.style.color = "#008000";
progressMessage.textContent += " - Wow! You're almost there!";
removeCongratulationsImage();
} else {
progressMessage.style.color = "#008000";
progressMessage.textContent += " - Congratulations! You've reached 100% progress!";
displayCongratulationsImage();
}
}
function displayCongratulationsImage() {
if (!document.getElementById('congratsImg')) {
const congratsImg = document.createElement('img');
congratsImg.src = "congrats.jpg";
congratsImg.alt = "Congratulations!";
congratsImg.id = "congratsImg";
congratsImg.classList.add('congrats');
document.body.appendChild(congratsImg);
}
}
function removeCongratulationsImage() {
const congratsImg = document.getElementById('congratsImg');
if (congratsImg) {
congratsImg.remove();
}
}
</script>
</body>
</html>