Focus-on-Goals/script.js at main · Krish123na/Focus-on-Goals · GitHub

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
const checkBoxLIst = document.querySelectorAll('.custom-checkbox');
const inputFields = document.querySelectorAll('.goal-input');
const errorLevel = document.querySelector('.error-level');
const progressLevel = document.querySelector('.progress-level');
const progressBar = document.querySelector('.progress-bar');
const progressValue = document.querySelector('.progress-value');

const allQuotes = [
     'Raise the bar by completing your goals!',
     'You’ve got momentum—keep it going!',
     "You're halfway to greatness!",
     'Almost there! Keep pushing forward!',
     'Whoa! You just completed all the goals!, time for chill',
]

const allGoals = JSON.parse(localStorage.getItem('allGoals')) || {
     first:{
          name: '',
          completed: false,
     },
     second:{
          name: '',
          completed: false,
     },
     third:{
          name: '',
          completed: false,
     },
     fourth:{
          name: '',
          completed: false,
     },
}


let completedGoalsCount = Object.values(allGoals).filter(goal => goal.completed).length;

progressValue.style.width = `${(completedGoalsCount / inputFields.length) * 100}%`;
progressValue.firstElementChild.innerText = `${completedGoalsCount}/${inputFields.length} completed`;

 progressLevel.innerText = allQuotes[completedGoalsCount];


checkBoxLIst.forEach((checkBox) => {
     checkBox.addEventListener('click', (e) => {
          const allGoalsAdded = [...inputFields].every(function (input){
               return input.value;
          })

          if(allGoalsAdded){
          checkBox.parentElement.classList.toggle('completed');
          // progressValue.style.width = '33.33%';
          const goalId = checkBox.nextElementSibling.id;
          allGoals[goalId].completed = !allGoals[goalId].completed;
          completedGoalsCount = Object.values(allGoals).filter(goal => goal.completed).length;
          progressValue.style.width = `${(completedGoalsCount / inputFields.length) * 100}%`;
          progressValue.firstElementChild.innerText = `${completedGoalsCount}/${inputFields.length} completed`;
          progressLevel.innerText = allQuotes[completedGoalsCount];
          localStorage.setItem('allGoals', JSON.stringify(allGoals));
          }else{
           progressBar.classList.add('show-error');
     }
     })
})

inputFields.forEach((input) => {

     input.value = allGoals[input.id].name;

     if(allGoals[input.id].completed){
          input.parentElement.classList.add('completed');
     }

     input.addEventListener('focus', () => {
          progressBar.classList.remove('show-error');
     })

     input.addEventListener('input', (e) => {
          if(allGoals[input.id].completed){
               input.value = allGoals[input.id].name;
               return
          }
          allGoals[input.id]= {
               name: e.target.value,
               completed: false,
          }
          localStorage.setItem('allGoals', JSON.stringify(allGoals));
     })
})