Skip to content

Commit 0cf7e00

Browse files
jaiminpatel047jaiminpatel047
authored
Add New File
1 parent 9ea7c41 commit 0cf7e00

File tree

5 files changed

+326
-0
lines changed

5 files changed

+326
-0
lines changed

‎Vector.png

1.59 KB
Loading

‎app.js

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
const checkboxList = document.querySelectorAll('.custom-checkbox')
2+
const inputField = document.querySelectorAll('.goal-input')
3+
const errorLable = document.querySelector('.error-lable')
4+
const progessBar = document.querySelector('.progress-bar')
5+
const goalLevel = document.querySelector('.progress-level')
6+
const progressLable = document.querySelector('.progress-lable')
7+
8+
const allQuotes = [
9+
"Raise the bar by completing your goals!",
10+
"Well begun is half done!",
11+
"Just a step away, keep going!",
12+
"Whoa! You just completed all the goals, time for chill :D",
13+
]
14+
15+
// const setGoal = JSON.parse(localStorage.getItem('setGoal')) || {
16+
// firstInput : {
17+
// name: "",
18+
// done : false,
19+
// },
20+
// secoundInput: {
21+
// name: "",
22+
// done : false,
23+
// },
24+
// thiredInput: {
25+
// name: "",
26+
// done : false,
27+
// }
28+
// };
29+
30+
const setGoal = JSON.parse(localStorage.getItem('setGoal')) || {}
31+
32+
33+
let complateGoalCount = Object.values(setGoal).filter((goal) => goal.done).length;
34+
goalLevel.style.width = `${complateGoalCount / inputField.length *100}%`;
35+
goalLevel.firstElementChild.innerText = `${complateGoalCount}/${inputField.length} Completed`;
36+
progressLable.innerText = allQuotes[complateGoalCount]
37+
38+
checkboxList.forEach((checkBox => {
39+
checkBox.addEventListener('click', (e)=>{
40+
41+
const allFieldfilled = [...inputField].every((input)=>{
42+
return input.value
43+
})
44+
45+
if (allFieldfilled){
46+
checkBox.parentElement.classList.toggle('done')
47+
const inputID = checkBox.nextElementSibling.id
48+
setGoal[inputID].done = !setGoal[inputID].done
49+
complateGoalCount = Object.values(setGoal).filter((goal) => goal.done).length;
50+
goalLevel.style.width = `${complateGoalCount / inputField.length *100}%`;
51+
goalLevel.firstElementChild.innerText = `${complateGoalCount}/${inputField.length} Completed`;
52+
progressLable.innerText = allQuotes[complateGoalCount]
53+
localStorage.setItem('setGoal', JSON.stringify(setGoal))
54+
console.log(setGoal)
55+
}else{
56+
progessBar.classList.add('show-error')
57+
}
58+
} )
59+
}))
60+
61+
inputField.forEach((input)=>{
62+
if(setGoal[input.id]){
63+
input.value = setGoal[input.id].name
64+
65+
if(setGoal[input.id].done){
66+
input.parentElement.classList.add('done')
67+
}
68+
}
69+
70+
input.addEventListener('focus', ()=>{
71+
progessBar.classList.remove('show-error')
72+
})
73+
74+
input.addEventListener('input', (e)=>{
75+
if(setGoal[input.id] && setGoal[input.id].done){
76+
input.value = setGoal[input.id].name
77+
return
78+
}
79+
80+
81+
if(setGoal[input.id]){
82+
setGoal[input.id].name = input.value
83+
}else{
84+
setGoal[input.id] = {
85+
name : input.value,
86+
done : false,
87+
}
88+
}
89+
90+
91+
92+
localStorage.setItem('setGoal', JSON.stringify(setGoal))
93+
})
94+
95+
96+
})

‎donesign.svg

Lines changed: 3 additions & 0 deletions
Loading

‎index.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<script src="app.js" defer></script>
9+
<title>Focus on Today</title>
10+
</head>
11+
<body>
12+
<main>
13+
<h1 class="heading">Focus on <span>Today<span></h1>
14+
<div class="appContainer">
15+
<div id="subtitleDiv">
16+
<span class="sub-title">Today</span>
17+
<img class="sun-icon" src="./img/Vector.png" alt="sun-vector">
18+
</div>
19+
<p class="progress-lable">Raise the bar by completing your goals!</p>
20+
<div class="progress-bar">
21+
<div class="progress-level">
22+
<span>2/3 Completed</span>
23+
</div>
24+
<p class="error-lable">Please set all the 3 goals!</p>
25+
</div>
26+
<div class="goal-container">
27+
<div class="custom-checkbox">
28+
<img class="checkBoxDone" src="./img/donesign.svg" alt="">
29+
</div>
30+
<input id="firstInput" class="goal-input" type="text" placeholder="Add New Goal...">
31+
</div>
32+
<div class="goal-container">
33+
<div class="custom-checkbox">
34+
<img class="checkBoxDone" src="./img/donesign.svg" alt="">
35+
</div>
36+
<input id="secoundInput" class="goal-input" type="text" placeholder="Add New Goal...">
37+
</div>
38+
<div class="goal-container">
39+
<div class="custom-checkbox">
40+
<img class="checkBoxDone" src="./img/donesign.svg" alt="">
41+
</div>
42+
<input id="thiredInput" class="goal-input" type="text" placeholder="Add New Goal...">
43+
</div>
44+
<p class="quote">“Move one step ahead, today!”</p>
45+
<p class="madeWith">Made with ❤️ by Jaimin Patel</p>
46+
</div>
47+
</main>
48+
</body>
49+
</html>
50+

‎style.css

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,500;1,800;1,900&display=swap');
2+
3+
*{
4+
margin: 0; padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body{
9+
background-color: #D60355;
10+
font-family: 'Poppins', sans-serif;
11+
}
12+
13+
main{
14+
margin: 0 16px;
15+
}
16+
17+
.heading{
18+
font-size: 4rem;
19+
color: #FFFBF5;
20+
text-align: center;
21+
padding-bottom: 2rem;
22+
}
23+
24+
.heading span{
25+
color: #400E32;
26+
}
27+
28+
.appContainer{
29+
background-color: #fff;
30+
max-width: 660px;
31+
margin-inline: auto;
32+
border-radius: 15px;
33+
padding: 32px 42px;
34+
box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.1)
35+
}
36+
.sub-title{
37+
font-size: 32px;
38+
line-height: 48px;
39+
font-weight: 600;
40+
}
41+
.sun-icon{
42+
vertical-align: middle;
43+
margin-left: 1rem;
44+
}
45+
46+
.progress-lable{
47+
font-size: 14px;
48+
color: #858585;
49+
padding: 0.5rem 0;
50+
}
51+
52+
/* progress bar style */
53+
54+
.progress-bar{
55+
height: 30px;
56+
background: rgba(72, 163, 0, 0.1);
57+
border-radius: 15px;
58+
margin-bottom: 2rem;
59+
position: relative;
60+
}
61+
.progress-level{
62+
height: 100%;
63+
border-radius: 15px;
64+
background-color: #48A300;
65+
font-size: 10px;
66+
color: #EEFFE0;
67+
font-weight: 500;
68+
line-height: 15px;
69+
display: flex;
70+
align-items: center;
71+
width: 0;
72+
overflow: hidden;
73+
transition: width 0.25s ease-in-out;
74+
}
75+
.progress-level span{
76+
padding-left: 20px;
77+
min-width: max-content;
78+
}
79+
80+
81+
.error-lable{
82+
font-size: 14px;
83+
color: #FF5151;
84+
display: none;
85+
position: absolute;
86+
top: 35px;
87+
}
88+
.show-error .error-lable{
89+
display: block;
90+
}
91+
92+
.goal-container{
93+
border: 1px solid rgba(0, 0, 0, 0.1);
94+
border-radius: 17px;
95+
height: 82px;
96+
display: flex;
97+
align-items: center;
98+
padding: 0 22px;
99+
margin-bottom: 36px;
100+
}
101+
.custom-checkbox{
102+
width: 24px;
103+
height: 24px;
104+
border: 2px solid rgba(97, 72, 28, 0.3);
105+
border-radius: 50%;
106+
flex-shrink: 0;
107+
cursor: pointer;
108+
justify-content: center;
109+
align-items: center;
110+
display: flex;
111+
}
112+
.goal-input{
113+
padding-left: 20px;
114+
font-family: inherit;
115+
font-size: 16px;
116+
border: none;
117+
outline: none;
118+
font-weight: 500;
119+
width: 100%;
120+
align-self: stretch;
121+
}
122+
123+
.checkBoxDone{
124+
display: none;
125+
}
126+
127+
.goal-input::placeholder{
128+
color: #D9D9D9;
129+
}
130+
.quote{
131+
font-weight: 500;
132+
text-align: center;
133+
}
134+
.madeWith{
135+
text-align: center;
136+
margin-top: 48px;
137+
font-size: 12px;
138+
color: #858585;
139+
}
140+
141+
.done .custom-checkbox {
142+
background-color: #48A300;
143+
border-color: #48A300;
144+
}
145+
.done .checkBoxDone{
146+
display: block;
147+
}
148+
.done .goal-input{
149+
color: #48A300;
150+
text-decoration-line: line-through;
151+
}
152+
/* --------------------------------- */
153+
154+
@media (max-width: 768px) {
155+
.heading{
156+
font-size: 32px;
157+
margin: 0.5rem;
158+
padding-bottom: 0;
159+
}
160+
.appContainer{
161+
padding: 16px 24px;
162+
margin: 0.5rem auto;
163+
}
164+
.goal-container{
165+
height: 60px;
166+
margin-bottom: 24px;
167+
border-radius: 14px;
168+
}
169+
.custom-checkbox{
170+
width: 20px;
171+
height: 20px;
172+
}
173+
.progress-bar{
174+
height: 24px;
175+
}
176+
177+
}

0 commit comments

Comments
 (0)