forked from fdnd-task/pleasurable-ui
-
Notifications
You must be signed in to change notification settings - Fork 2
/
script.js
68 lines (53 loc) · 2.23 KB
/
script.js
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
function scrollFunction() {
const element = document.getElementById("info");
element.scrollIntoView({behavior: "smooth"});
}
document.getElementById("formSend").addEventListener("click", function(event){
event.preventDefault()
// console.log("hi");
});
if (window.navigator.onLine == true) {
document.querySelector(".online").style.display="grid";
} else {
document.querySelector(".online").style.display="none";
document.querySelector(".offline").style.display="flex";
}
var loader = document.getElementById("preloader");
window.addEventListener("load", function(){
loader.style.display = "none";
})
// PROGRESS
const totalItems = 75; // Set the total number of items
const progressItems = document.getElementById("progressNumber").textContent; // Set the number of items completed
console.log(progressItems);
const progressBar = document.querySelector('.progress-fill');
const circumference = 251.2; // Adjusted circumference value
const offset = circumference - (progressItems / totalItems) * circumference;
progressBar.style.strokeDashoffset = offset;
// Update color based on value range
if (progressItems >= 0 && progressItems <= 20) {
progressBar.style.stroke = '#FF0000';
} else if (progressItems >= 21 && progressItems <= 40) {
progressBar.style.stroke = '#FF8000';
} else if (progressItems >= 41 && progressItems <= 60) {
progressBar.style.stroke = '#FFFF00';
} else if (progressItems >= 61 && progressItems <= 75) {
progressBar.style.stroke = '#00FF00';
}
document.querySelector('.progress-value').textContent = progressItems; // Display the actual number of items
// Check if progressItems reach 100%
if (progressItems === totalItems) {
const completionImage = document.querySelector('.completion-image');
completionImage.style.display = 'block'; // Show the completion image
const progressValue = document.querySelector('.progress-value');
progressValue.style.display = 'none'; // Hide the progress value
const progressTotal = document.querySelector('.progress-total');
progressTotal.style.display = 'none'; // Hide the progress total
}
// CHAT
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}