Skip to content

Commit 8ee283d

Browse files
CodeHumps001CodeHumps001
committed
Working on dashboard
1 parent f97fbde commit 8ee283d

9 files changed

Lines changed: 565 additions & 238 deletions

File tree

‎index.html‎

Lines changed: 73 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,28 @@ <h1 class="tab-name">Focusly</h1>
5757
<div class="tog"><span></span></div>
5858
</div>
5959
</div>
60-
<header class="top-header"></header>
60+
<header class="top-header">
61+
<span class="join-date">1st November, 2025</span>
62+
<div class="search-container">
63+
<input
64+
type="text"
65+
placeholder="filter task by name , description or categories"
66+
/>
67+
</div>
68+
<div class="user-info">
69+
<button class="add">+</button>
70+
<h2 class="username">Yaw Fosu</h2>
71+
<img
72+
src="./src/images/my-image.jpeg"
73+
alt="profile-image"
74+
class="profile-image"
75+
loading="lazy"
76+
width="
77+
50"
78+
height="50"
79+
/>
80+
</div>
81+
</header>
6182
<div class="content-sections">
6283
<section
6384
class="tab-section section-details-1 active--tab-section ov-grid"
@@ -67,19 +88,19 @@ <h1>Overview</h1>
6788
<div class="view-cards">
6889
<div class="all-task">
6990
<h1>All Task</h1>
70-
<span>53</span>
91+
<span class="a-v">0</span>
7192
</div>
7293
<div class="pending-task">
7394
<h1>Pending</h1>
74-
<span>51</span>
95+
<span class="p-v">0</span>
7596
</div>
7697
<div class="completed-task">
7798
<h1>Completed</h1>
78-
<span>2</span>
99+
<span class="c-v">0</span>
79100
</div>
80101
<div class="overdue-task">
81102
<h1>Overdue</h1>
82-
<span>12</span>
103+
<span class="o-v">0</span>
83104
</div>
84105
</div>
85106
</div>
@@ -91,143 +112,8 @@ <h1>Overdue</h1>
91112
<p>by Yaw fosu</p>
92113
</div>
93114
<div class="task-container">
94-
<div class="task-card">
95-
<div class="progress-bar"><p>16%</p></div>
96-
<div class="task-details">
97-
<div class="left-details">
98-
<h1>Practice Communication Skills</h1>
99-
<p>
100-
Lorem ipsum dolor sit amet consectetur adipisicing elit.
101-
Itaque laboriosam sequi ab iste maiores aspernatur!
102-
</p>
103-
</div>
104-
<div class="right-details">
105-
<span>11:53:21 hr</span>
106-
<div class="actions">
107-
<button class="btn start">
108-
<svg
109-
xmlns="http://www.w3.org/2000/svg"
110-
fill="none"
111-
viewBox="0 0 24 24"
112-
stroke-width="1.5"
113-
stroke="currentColor"
114-
class="btn-icon"
115-
>
116-
<path
117-
stroke-linecap="round"
118-
stroke-linejoin="round"
119-
d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"
120-
/>
121-
</svg>
122-
</button>
123-
<button class="btn pause">
124-
<svg
125-
xmlns="http://www.w3.org/2000/svg"
126-
fill="none"
127-
viewBox="0 0 24 24"
128-
stroke-width="1.5"
129-
stroke="currentColor"
130-
class="btn-icon"
131-
>
132-
<path
133-
stroke-linecap="round"
134-
stroke-linejoin="round"
135-
d="M15.75 5.25v13.5m-7.5-13.5v13.5"
136-
/>
137-
</svg>
138-
</button>
139-
<button class="btn reset">
140-
<svg
141-
xmlns="http://www.w3.org/2000/svg"
142-
fill="none"
143-
viewBox="0 0 24 24"
144-
stroke-width="1.5"
145-
stroke="currentColor"
146-
class="btn-icon"
147-
>
148-
<path
149-
stroke-linecap="round"
150-
stroke-linejoin="round"
151-
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
152-
/>
153-
</svg>
154-
</button>
155-
</div>
156-
</div>
157-
</div>
158-
<div class="crud">
159-
<button class="complete">C</button>
160-
<button class="edit">E</button>
161-
<button class="delete">D</button>
162-
</div>
163-
</div>
164-
<div class="task-card">
165-
<div class="progress-bar"><p>16%</p></div>
166-
<div class="task-details">
167-
<div class="left-details">
168-
<h1>Start React</h1>
169-
<p>Learn , coponents, props , useState ......</p>
170-
</div>
171-
<div class="right-details">
172-
<span>11:53:21 hr</span>
173-
<div class="actions">
174-
<button class="btn start">
175-
<svg
176-
xmlns="http://www.w3.org/2000/svg"
177-
fill="none"
178-
viewBox="0 0 24 24"
179-
stroke-width="1.5"
180-
stroke="currentColor"
181-
class="btn-icon"
182-
>
183-
<path
184-
stroke-linecap="round"
185-
stroke-linejoin="round"
186-
d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z"
187-
/>
188-
</svg>
189-
</button>
190-
<button class="btn pause">
191-
<svg
192-
xmlns="http://www.w3.org/2000/svg"
193-
fill="none"
194-
viewBox="0 0 24 24"
195-
stroke-width="1.5"
196-
stroke="currentColor"
197-
class="btn-icon"
198-
>
199-
<path
200-
stroke-linecap="round"
201-
stroke-linejoin="round"
202-
d="M15.75 5.25v13.5m-7.5-13.5v13.5"
203-
/>
204-
</svg>
205-
</button>
206-
<button class="btn reset">
207-
<svg
208-
xmlns="http://www.w3.org/2000/svg"
209-
fill="none"
210-
viewBox="0 0 24 24"
211-
stroke-width="1.5"
212-
stroke="currentColor"
213-
class="btn-icon"
214-
>
215-
<path
216-
stroke-linecap="round"
217-
stroke-linejoin="round"
218-
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
219-
/>
220-
</svg>
221-
</button>
222-
</div>
223-
</div>
224-
</div>
225-
<div class="crud">
226-
<button class="complete">C</button>
227-
<button class="edit">E</button>
228-
<button class="delete">D</button>
229-
</div>
230-
</div>
115+
<h1 class="head">Task / Projects</h1>
116+
<div class="card-container"></div>
231117
</div>
232118
</section>
233119
<section class="tab-section section-details-2"></section>
@@ -236,5 +122,50 @@ <h1>Start React</h1>
236122
</div>
237123
</section>
238124
</main>
125+
126+
<!--Add task modal-->
127+
<div class="overlay">
128+
<form class="form">
129+
<div class="fields">
130+
<label for="name">Task/Project Name:</label>
131+
<input
132+
type="text"
133+
name="name"
134+
placeholder="Enter task name"
135+
id="task-name"
136+
required
137+
/>
138+
</div>
139+
<div class="fields">
140+
<label for="description">Describe Project</label>
141+
<textarea
142+
name="description"
143+
id="description"
144+
placeholder="descript your task"
145+
required
146+
></textarea>
147+
</div>
148+
<div class="fields">
149+
<label for="date">Deadline Date</label>
150+
<input type="date" name="date" id="deadline" required />
151+
</div>
152+
<div class="fields">
153+
<label for="category">Deadline Date</label>
154+
<select name="category" id="category">
155+
<option value="studies">Studies</option>
156+
<option value="personal">Personal</option>
157+
<option value="project">Project</option>
158+
</select>
159+
</div>
160+
<div class="fields">
161+
<label for="break">Break</label>
162+
<input type="number" name="date" id="break" required />
163+
</div>
164+
165+
<div class="add-task-btn">
166+
<button type="submit">Add Task</button>
167+
</div>
168+
</form>
169+
</div>
239170
</body>
240171
</html>

‎src/controller.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,22 @@
11
import ToggleView from "./view/main.js";
2+
import * as model from "./model.js";
3+
import taskView from "./view/taskView.js";
4+
import modalView from "./view/modalView.js";
5+
import overviewUpdate from "./view/overviewUpdate.js";
6+
7+
const controlAddTask = function () {
8+
let addTask = modalView.getInputData();
9+
model.addTask(addTask);
10+
taskView.getDeadlineDate(model.state.tasks.deadline);
11+
12+
taskView.render(model.state.tasks);
13+
overviewUpdate.getOverviewValues(model.state);
14+
15+
console.log(model.state.tasks);
16+
};
17+
18+
const init = function () {
19+
modalView.addHandlerSubmit(controlAddTask);
20+
};
21+
22+
init();

‎src/images/my-image.jpeg‎

95 KB
Loading

‎src/model.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export let state = {
2+
tasks: [],
3+
};
4+
5+
//-- Add new Task --//
6+
export const addTask = function (taskdata) {
7+
const newTask = {
8+
id: state.tasks.length,
9+
name: taskdata.name,
10+
description: taskdata.description,
11+
deadline: taskdata.deadline,
12+
breakDuration: taskdata.break,
13+
createdAt: new Date().toISOString(),
14+
status: "pending",
15+
category: taskdata.category,
16+
};
17+
18+
state.tasks.push(newTask);
19+
return newTask;
20+
};
21+
22+
// get all task

0 commit comments

Comments
 (0)