Frontend Forever

task dashboard

About this Code

Hello reader, I am nilimadas. Nice to meet you again in this free code sharing website. In this post I am going to explain about task dashboard. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
	<div class="left-content">
		<div class="task-manager">task manager</div>
		<div class="side-wrapper">
			<div class="user-profile">
				<img src="https://assets.codepen.io/10825904/user.png" alt="user-photo" class="user-photo">
				<div class="user-name">Nalia Smith</div>
				<div class="user-mail">nalia.smith@gmail.com</div>
			</div>
			<div class="user-notification">
				<div class="notify">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="currentColor">
						<path d="M13.533 5.6h-.961a.894.894 0 01-.834-.57.906.906 0 01.197-.985l.675-.675a.466.466 0 000-.66l-1.32-1.32a.466.466 0 00-.66 0l-.676.677a.9.9 0 01-.994.191.906.906 0 01-.56-.837V.467A.467.467 0 007.933 0H6.067A.467.467 0 005.6.467v.961c0 .35-.199.68-.57.834a.902.902 0 01-.983-.195L3.37 1.39a.466.466 0 00-.66 0L1.39 2.71a.466.466 0 000 .66l.675.675c.25.25.343.63.193.995a.902.902 0 01-.834.56H.467A.467.467 0 000 6.067v1.866c0 .258.21.467.467.467h.961c.35 0 .683.202.834.57a.904.904 0 01-.197.984l-.675.676a.466.466 0 000 .66l1.32 1.32a.466.466 0 00.66 0l.68-.68a.894.894 0 01.994-.187.897.897 0 01.556.829v.961c0 .258.21.467.467.467h1.866c.258 0 .467-.21.467-.467v-.961c0-.35.202-.683.57-.834a.904.904 0 01.984.197l.676.675a.466.466 0 00.66 0l1.32-1.32a.466.466 0 000-.66l-.68-.68a.894.894 0 01-.187-.994.897.897 0 01.829-.556h.961c.258 0 .467-.21.467-.467V6.067a.467.467 0 00-.467-.467zM7 9.333C5.713 9.333 4.667 8.287 4.667 7S5.713 4.667 7 4.667 9.333 5.713 9.333 7 8.287 9.333 7 9.333z" />
					</svg>
				</div>
				<div class="notify alert">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
						<path d="M10.688 95.156C80.958 154.667 204.26 259.365 240.5 292.01c4.865 4.406 10.083 6.646 15.5 6.646 5.406 0 10.615-2.219 15.469-6.604 36.271-32.677 159.573-137.385 229.844-196.896 4.375-3.698 5.042-10.198 1.5-14.719C494.625 69.99 482.417 64 469.333 64H42.667c-13.083 0-25.292 5.99-33.479 16.438-3.542 4.52-2.875 11.02 1.5 14.718z" />
						<path d="M505.813 127.406a10.618 10.618 0 00-11.375 1.542C416.51 195.01 317.052 279.688 285.76 307.885c-17.563 15.854-41.938 15.854-59.542-.021-33.354-30.052-145.042-125-208.656-178.917a10.674 10.674 0 00-11.375-1.542A10.674 10.674 0 000 137.083v268.25C0 428.865 19.135 448 42.667 448h426.667C492.865 448 512 428.865 512 405.333v-268.25a10.66 10.66 0 00-6.187-9.677z" />
					</svg>
				</div>
				<div class="notify alert">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
						<path d="M467.812 431.851l-36.629-61.056a181.363 181.363 0 01-25.856-93.312V224c0-67.52-45.056-124.629-106.667-143.04V42.667C298.66 19.136 279.524 0 255.993 0s-42.667 19.136-42.667 42.667V80.96C151.716 99.371 106.66 156.48 106.66 224v53.483c0 32.853-8.939 65.109-25.835 93.291L44.196 431.83a10.653 10.653 0 00-.128 10.752c1.899 3.349 5.419 5.419 9.259 5.419H458.66c3.84 0 7.381-2.069 9.28-5.397 1.899-3.329 1.835-7.468-.128-10.753zM188.815 469.333C200.847 494.464 226.319 512 255.993 512s55.147-17.536 67.179-42.667H188.815z" />
					</svg>
				</div>
			</div>
			<div class="progress-status">12/34</div>
			<div class="progress">
				<div class="bar"></div>
			</div>
			<div class="task-status">
				<div class="stat">
					<div class="number">12</div>
					<div class="condition">Completed</div>
					<div class="tasks">tasks</div>
				</div>
				<div class="stat">
					<div class="number">22</div>
					<div class="condition">To do</div>
					<div class="tasks">tasks</div>
				</div>
				<div class="stat">
					<div class="number">243</div>
					<div class="condition">All</div>
					<div class="tasks">completed</div>
				</div>
			</div>
		</div>
		<div class="side-wrapper">
			<div class="project-title">Projects</div>
			<div class="project-name">
				<div class="project-department">Marketing</div>
				<div class="project-department">Design</div>
				<div class="project-department">Development</div>
				<div class="project-department">Management</div>
			</div>
		</div>
		<div class="side-wrapper">
			<div class="project-title">Team</div>
			<div class="team-member">
				<img src="https://images.unsplash.com/flagged/photo-1574282893982-ff1675ba4900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="" class="members">
				<img src="https://assets.codepen.io/3364143/Screen+Shot+2020-08-01+at+12.24.16.png" alt="" class="members">
				<img src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="" class="members">
				<img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=crop&w=998&q=80" alt="" class="members">
				<img src="https://images.unsplash.com/photo-1541647376583-8934aaf3448a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="" class="members">
			</div>
		</div>
	</div>
	<div class="main-area">
		<div class="header">
			<div class="search-bar">
				<input type="text" placeholder="Search...">
			</div>
			<div class="inbox-calendar">
				<input type="checkbox" class="inbox-calendar-checkbox">
				<div class="toggle-page">
					<span>TaskBoard</span>
				</div>
				<div class="layer"></div>
			</div>
			<div class="color-menu">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 464.7 464.7">
					<path d="M446.6 18.1a62 62 0 00-87.6 0L342.3 35a23 23 0 10-32.5 32.5l5.4 5.4-180.6 180.6L71.9 316c-5 5-8 11.6-8.2 18.7l-.2 3.3-2.5 56.7a9.4 9.4 0 009.4 9.8h.4l30-1.3 18.4-.8 8.3-.4a37 37 0 0024.5-10.8l240.9-240.9 4.5 4.6a23 23 0 0032.5 0c9-9 9-23.6 0-32.6l16.7-16.7a62 62 0 000-87.6zm-174 209.2l-84.6 16 138-138 34.4 34.3-87.8 87.7zM64.5 423.9C28.9 423.9 0 433 0 444.3c0 11.3 28.9 20.4 64.5 20.4s64.5-9.1 64.5-20.4C129 433 100 424 64.5 424z" />
				</svg>
				<input type="color" value="#4d76fd" class="colorpicker" id="colorpicker">
				</input>
			</div>
		</div>
		<div class="main-container">
			<div class="task-container">
				<div class="msg msg-department anim-y">
					Today Task
					<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 492 492">
						<path d="M484.13 124.99l-16.11-16.23a26.72 26.72 0 00-19.04-7.86c-7.2 0-13.96 2.79-19.03 7.86L246.1 292.6 62.06 108.55c-5.07-5.06-11.82-7.85-19.03-7.85s-13.97 2.79-19.04 7.85L7.87 124.68a26.94 26.94 0 000 38.06l219.14 219.93c5.06 5.06 11.81 8.63 19.08 8.63h.09c7.2 0 13.96-3.57 19.02-8.63l218.93-219.33A27.18 27.18 0 00492 144.1c0-7.2-2.8-14.06-7.87-19.12z"></path>
					</svg>
				</div>
				<form id="todo-form" class="todo-form">
					<label>
						<input type="text" name="todo">
					</label>
					<button id="button-add-todo" class="button-add-todo">
						<svg viewBox="-20 -20 240 240" class="svg-plus">
							<g>
								<line x1="100" x2="100" y2="200" />
								<line y1="100" x2="200" y2="100" />
							</g>
						</svg>
					</button>
				</form>
				<ol id="todo-list" class="todo-list anim-y"></ol>
				<div class="todo-type-toggles">
					<button aria-pressed="true">Active</button>
					<button>Completed</button>
				</div>
				<div class="note">Double-click to edit a task</div>
			</div>
			<div class="schedule-bar">
				<div class="header">Schedule</div>
				<div class="right-content">
					<div class="task-box yellow">
						<div class="description-task">
							<div class="time">08:00 - 09:00 AM</div>
							<div class="task-name">Product Review</div>
						</div>
						<div class="more-button"></div>
						<div class="members">
							<img src="https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="member">
							<img src="https://images.unsplash.com/photo-1476657680631-c07285ff2581?ixlib=rb-1.2.1&auto=format&fit=crop&w=2210&q=80" alt="member-2">
							<img src="https://images.unsplash.com/photo-1496345875659-11f7dd282d1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="member-3">
							<img src="https://images.unsplash.com/photo-1455504490126-80ed4d83b3b9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" alt="member-4">
						</div>
					</div>
					<div class="task-box blue">
						<div class="description-task">
							<div class="time">10:00 - 11:00 AM</div>
							<div class="task-name">Design Meeting</div>
						</div>
						<div class="more-button"></div>
						<div class="members">
							<img src="https://images.unsplash.com/photo-1484688493527-670f98f9b195?ixlib=rb-1.2.1&auto=format&fit=crop&w=2230&q=80" alt="member">
							<img src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="member-2">
							<img src="https://images.unsplash.com/photo-1455504490126-80ed4d83b3b9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" alt="member-3">
						</div>
					</div>
					<div class="task-box red">
						<div class="description-task">
							<div class="time">01:00 - 02:00 PM</div>
							<div class="task-name">Team Meeting</div>
						</div>
						<div class="more-button"></div>
						<div class="members">
							<img src="https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="member">
							<img src="https://images.unsplash.com/photo-1475552113915-6fcb52652ba2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80" alt="member-2">
							<img src="https://images.unsplash.com/photo-1493752603190-08d8b5d1781d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80" alt="member-3">
							<img src="https://images.unsplash.com/photo-1484688493527-670f98f9b195?ixlib=rb-1.2.1&auto=format&fit=crop&w=2230&q=80" alt="member-4">
						</div>
					</div>
					<div class="task-box green">
						<div class="description-task">
							<div class="time">03:00 - 04:00 PM</div>
							<div class="task-name">Release Event</div>
						</div>
						<div class="more-button"></div>
						<div class="members">
							<img src="https://images.unsplash.com/photo-1523419409543-a5e549c1faa8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=943&q=80" alt="member">
							<img src="https://images.unsplash.com/photo-1519742866993-66d3cfef4bbd?ixlib=rb-1.2.1&auto=format&fit=crop&w=881&q=80" alt="member-2">
							<img src="https://images.unsplash.com/photo-1521122872341-065792fb2fa0?ixlib=rb-1.2.1&auto=format&fit=crop&w=2208&q=80" alt="member-3">
							<img src="https://images.unsplash.com/photo-1486302913014-862923f5fd48?ixlib=rb-1.2.1&auto=format&fit=crop&w=3400&q=80" alt="member-4">
							<img src="https://images.unsplash.com/photo-1484187216010-59798e9cc726?ixlib=rb-1.2.1&auto=format&fit=crop&w=955&q=80" alt="member-5">
						</div>
					</div>
					<div class="task-box blue">
						<div class="description-task">
							<div class="time">08:00 - 09:00 PM</div>
							<div class="task-name">Release Event</div>
						</div>
						<div class="more-button"></div>
						<div class="members">
							<img src="https://images.unsplash.com/photo-1523419409543-a5e549c1faa8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=943&q=80" alt="member">
							<img src="https://images.unsplash.com/photo-1519742866993-66d3cfef4bbd?ixlib=rb-1.2.1&auto=format&fit=crop&w=881&q=80" alt="member-2">
							<img src="https://images.unsplash.com/photo-1521122872341-065792fb2fa0?ixlib=rb-1.2.1&auto=format&fit=crop&w=2208&q=80" alt="member-3">
							<img src="https://images.unsplash.com/photo-1486302913014-862923f5fd48?ixlib=rb-1.2.1&auto=format&fit=crop&w=3400&q=80" alt="member-4">
							<img src="https://images.unsplash.com/photo-1484187216010-59798e9cc726?ixlib=rb-1.2.1&auto=format&fit=crop&w=955&q=80" alt="member-5">
						</div>
					</div>
					<div class="task-box yellow">
						<div class="description-task">
							<div class="time">11:00 - 12:00 PM</div>
							<div class="task-name">Practise</div>
						</div>
						<div class="more-button"></div>
						<div class="members">
							<img src="https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="member">
							<img src="https://images.unsplash.com/photo-1476657680631-c07285ff2581?ixlib=rb-1.2.1&auto=format&fit=crop&w=2210&q=80" alt="member-2">
							<img src="https://images.unsplash.com/photo-1496345875659-11f7dd282d1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="member-3">
							<img src="https://images.unsplash.com/photo-1455504490126-80ed4d83b3b9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" alt="member-4">
						</div>
					</div>
				</div>
			</div>
			<div class="calendar-container">
				<div class="calender-tab anim-y">
					<div class="week-month">
						<button class=" button active">Week</button>
						<button class=" button button-month">Month</button>
					</div>
					<div class="month-change">
						<div class="current-month">October</div>
						<div class="current-year">2020</div>
					</div>
					<div class="week-month">
						<button class=" button button-weekends">Weekends</button>
						<button class=" button button-task active">Add task</button>
					</div>
				</div>
				<div class="calendar-wrapper anim-y">
					<div class="calendar">
						<div class="days">Monday</div>
						<div class="days">Tuesday</div>
						<div class="days">Wednesday</div>
						<div class="days">Thursday</div>
						<div class="days">Friday</div>
						<div class="days">Saturday</div>
						<div class="days">Sunday</div>
						<div class="day not-work">31</div>
						<div class="day project-market">1
							<div class="hover-title">Marketing</div>
							<div class="project-detail">Sales report from last month</div>
							<div class="project-detail">Prepare offers for clients</div>
							<div class="popup-check">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-square">
									<path d="M9 11l3 3L22 4" />
									<path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
								</svg>
							</div>
						</div>
						<div class="day">2</div>
						<div class="day project-design">3
							<div class="project-detail design">Create 3 illustrations for blog post about design trends</div>
						</div>
						<div class="day">4</div>
						<div class="day">5</div>
						<div class="day">6</div>
						<div class="day project-develop">7
							<div class="project-detail develop">Take part in course about future design trends and new technologies</div>
						</div>
						<div class="day">8</div>
						<div class="day">9</div>
						<div class="day">10</div>
						<div class="day">11</div>
						<div class="day">12</div>
						<div class="day">13</div>
						<div class="day">14</div>
						<div class="day project-market">15
							<div class="hover-title">Marketing</div>
							<div class="project-detail">Write an article about design trends</div>
							<div class="popup-check">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-square">
									<path d="M9 11l3 3L22 4" />
									<path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
								</svg>
							</div>
						</div>
						<div class="day">16</div>
						<div class="day project-market">17
							<div class="hover-title">Marketing</div>
							<div class="project-detail">Create AdWords campaign</div>
							<div class="project-detail">Send newsletter to clients</div>
							<div class="popup-check">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-square">
									<path d="M9 11l3 3L22 4" />
									<path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
								</svg>
							</div>
						</div>
						<div class="day">18</div>
						<div class="day">19</div>
						<div class="day">20</div>
						<div class="day">21</div>
						<div class="day">22</div>
						<div class="day project-finance">23
							<div class="hover-title">Management</div>
							<div class="project-detail finance">Redesign project ui interface for clients and get feedback</div>
							<div class="popup-check">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-square">
									<path d="M9 11l3 3L22 4" />
									<path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
								</svg>
							</div>
						</div>
						<div class="day">24</div>
						<div class="day">25</div>
						<div class="day">26</div>
						<div class="day">27</div>
						<div class="day">28</div>
						<div class="day">29</div>
						<div class="day">30</div>
						<div class="day not-work">1</div>
						<div class="day not-work">2</div>
						<div class="day not-work">3</div>
						<div class="day not-work">4</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");

* {
	box-sizing: border-box;
	outline: none;
}
:root {
	--bg-color: #e1e1e2;
	--main-color: #353536;
	--secondary-color: #8e92a4;
	--main-text-color: #5d606b;
	--task-color: #afb1b8;
	--border-color: #e5e4e9;
	--body-bg-color: #e4e6f5;
	--border-color: #e5e4e9;
	--theme-bg-color: #fff;
	--body-color: #1b1f31;
	--main-color: #7a7e9d;
	--main-light-color: #8295f4;
	--title-color: #919dea;
	--button-bg-color: #edf0f9;
	--button-bg: #cad4f1;
	--button-color: #4d76fd;
	--unselected-mail: #f1f2f7;
	--calendar-border-color: #cbcfe0;
	--main-container-bg: #f0f0f7;
	--button-add-todo: #0e53e8;
	--brand: #0e53e8;
	--box-color: #fff1d6;
	--box-color-2: #d3e6ff;
	--box-color-3: #ffd9d9;
	--box-color-4: #daffe5;
}
body {
	font-family: "DM Sans", sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	overflow: auto;
	width: 100%;
	height: 100vh;
	background-image: url(https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=2858&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
	background-repeat: no-repeat;
	background-size: cover;
}

.container {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1200px;
	height: 90vh;
	max-height: 900px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 0.3px 2.2px rgba(0, 0, 0, 0.011),
		0 0.7px 5.3px rgba(0, 0, 0, 0.016), 0 1.3px 10px rgba(0, 0, 0, 0.02),
		0 2.2px 17.9px rgba(0, 0, 0, 0.024), 0 4.2px 33.4px rgba(0, 0, 0, 0.029),
		0 10px 80px rgba(0, 0, 0, 0.04);
	overflow: hidden;
}

/* --------------LEFT CONTENT--------------- */
.left-content {
	background-color: var(--bg-color);
	width: 360px;
	border-right: 1px solid var(--border-color);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	overflow: auto;
}
.task-manager {
	font-size: 15px;
	color: var(--title-color);
	font-weight: 700;
	text-align: center;
	height: 70px;
	letter-spacing: 0.7px;
	line-height: 70px;
	position: sticky;
	top: 0;
	z-index: 3;
	text-transform: uppercase;
	background-color: var(--theme-bg-color);
	border-bottom: 1px solid var(--border-color);
}
/* --------------SIDE WRAPPER-1--------------- */
.user-photo {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	object-fit: cover;
}

.user-name {
	font-weight: 600;
	margin: 15px 0 8px;
}

.user-mail {
	color: var(--main-light-color);
	font-size: 12px;
	font-weight: 600;
}

.user-profile {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
}

.side-wrapper {
	padding: 25px 40px;
	border-bottom: 1px solid var(--border-color);
	&:last-child {
		border-bottom: none;
	}
}

.user-notification {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 25px;
}
.user-notification svg {
	width: 36px;
	padding: 10px;
	flex-shrink: 0;
	border-radius: 50%;
	overflow: visible;
	background-color: var(--button-bg-color);
	color: var(--button-color);
}

.notify {
	position: relative;
}

.notify:not(:last-child) {
	margin-right: 25px;
}

.notify.alert {
	position: relative;
}

.notify.alert:before {
	content: "2";
	font-size: 9px;
	font-weight: 700;
	position: absolute;
	background-color: #ff537b;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	top: -3px;
	display: flex;
	justify-content: center;
	align-items: center;
	right: 0px;
	color: #fff;
}

.notify.alert:last-child:before {
	content: "5";
}

.progress {
	margin-top: 5px;
	border-radius: 4px;
	background-color: #e7e7ef;
	height: 8px;
	overflow: hidden;
}
.bar {
	background-color: var(--button-color);
	border-radius: 4px;
	width: 35%;
	height: 100%;
	animation: progressAnimation 6s;
	transition: 0.3s linear both;
	transition-property: width, background-color;
}
.status {
	margin-top: 30px;
	text-align: right;
	color: var(--main-color);
	font-size: 10px;
	font-weight: 600;
}

@keyframes progressAnimation {
	0% {
		width: 5%;
		background-color: #a2b6f5;
	}
	100% {
		width: 35%;
	}
}

.task-status {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.stat {
	text-align: center;
}
.number {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 10px;
}
.condition {
	font-size: 12px;
	color: var(--main-color);
	font-weight: 700;
}
.tasks {
	margin-top: 4px;
	font-size: 10px;
	font-weight: 600;
	color: var(--main-light-color);
}
/* --------------SIDE WRAPPER-2--------------- */
.project-title {
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 18px;
}
.project-department {
	position: relative;
	vertical-align: middle;
	padding: 0 30px;
	color: var(--main-color);
	font-size: 13px;
	font-weight: 600;
	margin-top: 14px;
}
.project-department:before {
	position: absolute;
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	top: 10;
	left: 0;
}
.project-department:nth-child(1):before {
	border: 3px solid #b36dfb;
}
.project-department:nth-child(2):before {
	border: 3px solid #625be8;
}
.project-department:nth-child(3):before {
	border: 3px solid #fec267;
}
.project-department:nth-child(4):before {
	border: 3px solid #fc6679;
}
/* --------------SIDE WRAPPER-3--------------- */
.members {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 50%;
}
.team-member {
	display: flex;
	justify-content: space-between;
}

.main-area {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow: hidden;
}

/* ------------------------------MAIN AREA-------------------------------- */
.main-area {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow: hidden;
}
/* --------------HEADER--------------- */

.header {
	height: 70px;
	width: 100%;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px 0 30px;
}
/* --------------SEARCH-BAR--------------- */
.search-bar {
	height: 70px;
	position: relative;
}
.search-bar input {
	height: 100%;
	width: 100%;
	display: block;
	background-color: transparent;
	border: none;
	color: var(--body-color);
	padding: 0 35px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a1a4b9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3e%3ccircle cx='11' cy='11' r='8'/%3e%3cpath d='M21 21l-4.35-4.35'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-size: 18px;
	background-position: 0 50%;
	font-family: var(--body-font);
	font-weight: 600;
	font-size: 14px;
}

.search-bar input::placeholder {
	color: var(--main-light-color);
}

/* --------------INBOX-CALENDAR--------------- */
.inbox-calendar {
	position: relative;
	margin-right: 200px;
	width: 220px;
	border-radius: 20px;
	height: 36px;
	display: flex;
	align-items: center;
	overflow: hidden;
	flex-shrink: 0;
}
.inbox-calendar-checkbox {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	opacity: 0;
	z-index: 3;
	cursor: pointer;
}

.toggle-page {
	overflow: hidden;
	z-index: 2;
}

.layer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: var(--unselected-mail);
	transition: 0.3s ease all;
	z-index: 1;
}

.toggle-page:before,
.toggle-page:after,
.toggle-page span {
	position: absolute;
	top: 4px;
	width: 100px;
	height: 10px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
	padding: 9px 4px;
	border-radius: 20px;
	transition: 0.3s ease all;
}

.toggle-page:before {
	content: "";
	left: 4px;
	background-color: var(--button-color);
}

.toggle-page span {
	color: var(--theme-bg-color);
	z-index: 1;
	left: 6px;
}

.toggle-page:after {
	content: "Calendar";
	right: 4px;
	color: var(--main-light-color);
}

.inbox-calendar-checkbox:checked + .toggle-page span {
	color: var(--main-light-color);
}

.inbox-calendar-checkbox:checked + .toggle-page:before {
	left: 109px;
}

.inbox-calendar-checkbox:checked + .toggle-page:after {
	color: var(--theme-bg-color);
}
/* --------------COLOR-MENU--------------- */
.color-menu {
	flex-shrink: 0;
	border-radius: 50%;
	position: relative;
	overflow: hidden;
	width: 32px;
	height: 32px;
}
.color-menu svg {
	position: absolute;
	z-index: 8;
	width: 17px;
	top: 7px;
	right: 8px;
	fill: #fff;
	pointer-events: none;
}
.colorpicker {
	border: none;
	border-radius: 50%;
	width: 50px;
	height: 55px;
	top: -8px;
	right: -8px;
	position: absolute;
	cursor: pointer;
}

/* ------------------------------TASK-CONTAINER-------------------------------- */
.main-container {
	display: flex;
	flex-grow: 1;
	overflow: hidden;
	background-color: var(--main-container-bg);
}

.task-container {
	border-right: 2px solid var(--border-color);
	width: 500px;
	display: flex;
	flex-direction: column;
	overflow: auto;
	flex-shrink: 0;
}

.msg {
	padding: 30px;
	background-color: var(--unselected-mail);
	border-bottom: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	transition: 0.4s ease;
}

.msg-department {
	display: flex;
	justify-content: space-between;
	text-transform: uppercase;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 3;
	font-weight: 700;
	letter-spacing: 0.8px;
	background-color: var(--theme-bg-color);
	border-left: 4px solid #1f2fe4;
}
.msg-department svg {
	width: 12px;
}

.svg-check,
.svg-plus {
	fill: none;
	stroke-width: 30;
	stroke-linecap: round;
	stroke-linejoin: round;
	display: block;
	pointer-events: none;
}

.todo-form {
	background: var(--main-light-color);
	justify-content: center;
	padding: 1rem;
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	label {
		flex: 1 0;
		max-width: 40ch;
	}
	input {
		background: var(--task-color);
		width: 100%;
		border: 0;
		padding: 0.5rem;
		box-shadow: inset 1px 1px 2px oklch(0% 0% 0 / 0.6);
		border-radius: 5px;
		font: inherit;
		font-size: 1.5rem;
		&:focus {
			background: white;
		}
	}
	.svg-plus {
		stroke: black;
		width: 66%;
	}
}

.button-add-todo {
	border: 0;
	border-radius: 5px;
	font: inherit;
	font-size: 1.5rem;
	font-weight: 900;
	background: var(--button-add-todo);
	aspect-ratio: 1;
	height: 2.75rem;
	display: inline-grid;
	place-items: center;
	line-height: 0;
	&:hover,
	&:focus {
		background: color-mix(in oklch, var(--button-add-todo) 100%, black 10%);
	}
}

.todo-list {
	padding: 0.5rem;
	list-style: none;
	li {
		background: white;
		box-shadow: 1px 1px 2px oklch(0% 0% 0 / 0.2);
		padding: 1rem;
		margin-block-end: 0.5rem;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		.button-complete {
			order: -1;
		}
		.svg-check {
			stroke: black;
			position: absolute;
			width: 2rem;
			height: 2rem;
			top: -0.5rem;
			left: 0.1rem;
			opacity: 0;
		}
		&.complete {
			.svg-check {
				opacity: 1;
				stroke-dasharray: 1;
				stroke-dashoffset: 1;
				/* https://css-tricks.com/a-trick-that-makes-drawing-svg-lines-way-easier/ */
				animation: do-check 1s infinite alternate;
			}
		}
		&.editing {
			outline: 1px solid var(--brand);
			.text {
				display: none;
			}
		}

&[data-complete="true"] {
			.text {
				text-decoration: line-through;
				text-decoration-thickness: 2px;
				text-decoration-color: var(--brand);
				opacity: 0.5;
			}
		}

&.empty {
			justify-content: center;
			background: none;
			box-shadow: none;
		}
	}
}

@keyframes do-check {
	from {
		stroke-dashoffset: 1;
	}
	to {
		stroke-dashoffset: 0;
	}
}

.form-edit {
	width: 100%;
}
.input-edit {
	font: inherit;
	border: 0;
	width: 100%;
	padding: 0;
	&:focus {
		outline: none;
	}
}

.button-complete {
	border: 0;
	border-radius: 3px;
	background: var(--gray100);
	box-shadow: inset 1px 1px 2px oklch(0% 0% 0 / 0.2);
	padding: 0.25rem;
	width: 1.5rem;
	height: 1.5rem;
	position: relative;
}

.note {
	opacity: 0.5;
	font-size: 1rem;
}

.todo-type-toggles {
	display: flex;

button {
		border: 0;
		border-radius: 8px;
		padding: 0.2rem 1rem;
		background: var(--button-bg, white);
		box-shadow: 1px 1px 3px oklch(0% 0% 0 / 0.2);
		&[aria-pressed="true"] {
			--button-bg: var(--brand);
			box-shadow: 0 1px 1px oklch(0% 0% 0 / 0.4);
		}
		&:active {
			position: relative;
			top: 1px;
		}
		&:hover,
		&:focus-visible {
			background: color-mix(in oklch, var(--button-bg), black 10%);
		}
	}
	button:first-child {
		border-radius: 5px 0 0 5px;
	}
	button:last-child {
		border-radius: 0 5px 5px 0;
	}
}

/* --------------RIGHT CONTENT--------------- */
.schedule-bar {
	width: 320px;
	border-left: 1px solid #e3e7f7;
	display: flex;
	flex-direction: column;

.header {
		font-size: 20px;
		color: var(--main-text-color);
		margin-left: 30px;
	}
}
.right-content {
	/* padding: 10px 40px; */
	overflow-y: auto;
	flex: 1;
}

.task-box {
	position: relative;
	border-radius: 12px;
	width: 100%;
	margin: 20px 0;
	padding: 16px;
	cursor: pointer;
	box-shadow: 2px 2px 4px 0px rgba(235, 235, 235, 1);

&:hover {
		transform: scale(1.02);
	}
}
.time {
	margin-bottom: 6px;
	opacity: 0.4;
	font-size: 10px;
}

.task-name {
	font-size: 14px;
	font-weight: 500;
	opacity: 0.6;
}
.yellow {
	background-color: var(--box-color);
}

.blue {
	background-color: var(--box-color-2);
}

.red {
	background-color: var(--box-color-3);
}

.green {
	background-color: var(--box-color-4);
}

.more-button {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: #8e92a4;
	box-shadow: 0 -4px 0 0 #8e92a4, 0 4px 0 0 #8e92a4;
	opacity: 0.4;
	right: 20px;
	top: 30px;
	cursor: pointer;
}
.members {
	display: flex;
	margin-top: 14px;

img {
		border-radius: 50%;
		width: 30px;
		height: 30px;
		margin-right: 4px;
		object-fit: cover;
	}
}

/* --------------CALENDAR--------------- */
.calendar-container {
	flex-direction: column;
	width: 100%;
	padding: 30px 50px;
	overflow: auto;
	display: none;
	&.calendar-show {
		display: flex;
	}
}
.calendar {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(7, minmax(195px, 1fr));
	grid-template-rows: 57px;
	grid-auto-rows: 120px;
	overflow: auto;

&-wrapper {
		width: 100%;
		margin: auto;
		margin-top: 0;
		overflow: auto;
		border-radius: 10px;
		background: #fff;
		max-width: 975px;
		border: 1px solid var(--calendar-border-color);
	}
}

.days {
	font-size: 12px;
	font-weight: 700;
	color: var(--main-color);
	text-align: center;
	line-height: 60px;
	&:not(:nth-of-type(7n + 7)) {
		border-right: 1px solid var(--calendar-border-color);
	}
}

.day {
	padding: 15px;
	overflow: hidden;
	font-weight: 700;
	font-size: 13px;
	border-right: 1px solid var(--calendar-border-color);
	border-top: 1px solid var(--calendar-border-color);
	&:nth-of-type(7n + 7) {
		border-right: 0;
	}
	&.not-work {
		color: var(--main-color);
	}
	&.project-market {
		background-color: #f5eafd;
		border-left: 3px solid #b86df7;
		transition: 0.2s ease;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		&:hover {
			transform: scale(1.3);
			border: 0;
			border-radius: 4px;
			background-image: linear-gradient(
				to top,
				#6625dc,
				#7739e3,
				#874cea,
				#965df1,
				#a46ef8
			);
			color: #fff;
			font-size: 15px;
			.project-detail {
				color: #fff;
				font-size: 9px;
				&:before {
					top: 2px;
				}
			}
			.hover-title {
				display: block;
				font-size: 8px;
				padding-left: 18px;
				margin-top: 5px 0 3px;
			}
			.popup-check {
				display: block;
				width: 12px;
				margin-left: auto;
				margin-top: 6px;
			}
		}
	}
	&.project-design {
		background-color: #eeeffd;
		border-left: 3px solid #736eeb;
	}
	&.project-develop {
		background-color: #fef6e8;
		border-left: 3px solid #ffc263;
	}
	&.project-finance {
		background-color: #fee9ec;
		border-left: 3px solid #ff647a;
		transition: 0.2s ease;
		cursor: pointer;
		&:hover {
			background-image: linear-gradient(
				to top,
				#f7224b,
				#fa3d5d,
				#fd526e,
				#fe637e,
				#ff748e
			);
			transform: scale(1.3);
			border: 0;
			border-radius: 4px;
			color: #fff;
			font-size: 15px;
			.popup-check {
				display: block;
				width: 12px;
				margin-left: auto;
				margin-top: 10px;
			}
			.project-detail {
				color: #fff;
				font-size: 9px;
				&:before {
					top: 2px;
					background-color: #ce283e;
				}
			}
			.hover-title {
				display: block;
				font-size: 8px;
				padding-left: 18px;
				margin-top: 5px;
			}
		}
	}
}

.hover-title {
	display: none;
	color: #fff;
}

.popup-check {
	display: none;
}

.hide {
	display: none;
}

.project-detail {
	color: #783cae;
	font-size: 10px;
	position: relative;
	margin-top: 5px;
	padding-left: 20px;
	line-height: 1.4em;
	& + & {
		margin-top: 5px;
	}
	&:before {
		content: "";
		position: absolute;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #b86df7;
		top: 4px;
		left: 10px;
	}
	&.design {
		color: #4844c1;
		&:before {
			background-color: #6f69ea;
		}
	}
	&.develop {
		color: #de9d3a;
		&:before {
			background-color: #ffc263;
		}
	}
	&.finance {
		color: #e85b6f;
		&:before {
			background-color: #fd667a;
		}
	}
}

.week-month {
	display: flex;
	height: 30px;
}

.button {
	border: 1px solid var(--button-color);
	border-radius: 25px 0 0 25px;
	color: var(--button-color);
	padding: 8px 16px;
	font-weight: 600;
	font-size: 12px;
	flex-shrink: 0;
	cursor: pointer;
	background-color: transparent;
	&.active {
		background-color: var(--button-color);
		color: var(--theme-bg-color);
	}
}

.button-month {
	border-radius: 0 25px 25px 0;
	margin-left: -2px;
}

.calender-tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 975px;
	margin: 0 auto;
	width: 100%;
	padding-bottom: 30px;
}

.current {
	&-month {
		position: relative;
		padding: 0 10px;
		font-weight: 600;
	}
	&-year {
		font-size: 12px;
		color: var(--main-color);
		font-weight: 600;
		margin-top: 5px;
	}
}

.month-change {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.button-weekends,
.button-task {
	border-radius: 25px;
}

.button-task {
	margin-left: 15px;
}

.button-weekends {
	border-color: var(--main-light-color);
	color: var(--main-light-color);
}

@media screen and (max-width: 900px) {
	.left-content {
		display: none;
	}
	.inbox-calendar {
		margin-right: 100px;
	}
}

@media screen and (max-width: 700px) {
	.main-container {
		flex-direction: column;
		overflow-y: auto;
	}

.task-container,
	.schedule-bar {
		width: 100%;
		/* 		display: block; */
	}
	.inbox-calendar {
		margin-right: 0;
	}
	.calendar-container {
		padding: 30px 20px;
	}
	.search-bar {
		display: none;
	}
}

console.log("Event Fired")
const colorInput = document.getElementById("colorpicker");

colorInput.addEventListener("input", (e) => {
	document.body.style.setProperty("--button-color", e.target.value);
});

document
	.querySelector(".inbox-calendar")
	.addEventListener("click", function () {
		document
			.querySelector(".calendar-container")
			.classList.toggle("calendar-show");
		document.querySelector(".task-container").classList.toggle("hide");
		document.querySelector(".schedule-bar").classList.toggle("hide");
	});

// UI constants
const form = document.querySelector("#todo-form");
const list = document.querySelector("#todo-list");
const buttonAddTodo = document.querySelector("#button-add-todo");
const toggles = document.querySelectorAll(".todo-type-toggles > button");

// Enums
const states = {
	ACTIVE: "Active",
	COMPLETED: "Completed"
};

// Get Data on page load
let TODOs = [];
if (localStorage["data"] !== null && localStorage["data"] !== undefined) {
	TODOs = JSON.parse(localStorage["data"]);
}
// console.log({ TODOs });

function buildUI(state) {
	let HTML = ``;
	let viewTODOs = [];

if (state === states.COMPLETED) {
		viewTODOs = TODOs.filter((todo) => todo.complete);
	} else {
		viewTODOs = TODOs.filter((todo) => !todo.complete);
	}

if (viewTODOs.length === 0) {
		HTML = `<li class="empty">Nothing to do!</li>`;
	}

viewTODOs.forEach((todo) => {
		if (todo !== null) {
			HTML += `<li id="${todo.id}" style="view-transition-name: list-item-${todo.id};" data-complete="${todo.complete}">
      <span class="text">${todo.title}</span>
      <button aria-label="Complete" class="button-complete">
        <svg width="20" height="20" viewBox="0 0 241.44 259.83" class="svg-check">
          <polyline points="16.17 148.63 72.17 225.63 225.17 11.63" pathLength="1" />
        </svg>
      </button>
    </li>`;
		}
	});

list.innerHTML = HTML;
}

form.addEventListener("submit", (event) => {
	event.preventDefault();
	// Don't allow empty todo
	if (!form[0].value) {
		buttonAddTodo.classList.add("shake");
		return;
	}
	addTodo(event);
	form.reset();
});

function addTodo() {
	// TODO (lol): Sanitize user input.
	TODOs.push({
		title: form[0].value,
		complete: false,
		id: self.crypto.randomUUID()
	});
	localStorage["data"] = JSON.stringify(TODOs);
	buttonAddTodo.classList.add("added");
	buildUI();
}

document.documentElement.addEventListener("click", (event) => {
	if (event.target.classList.contains("button-complete")) {
		toggleTodo(event);
	}
});

list.addEventListener("dblclick", (event) => {
	const listItem = event.target.closest("li");

// If already editing, let it be.
	if (listItem.classList.contains("editing")) return;

listItem.classList.add("editing");
	const textItem = listItem.querySelector(".text");
	listItem.insertAdjacentHTML(
		"beforeend",
		`<form onsubmit="updateTodo(event);" class="form-edit"><input onblur="updateTodo(event);" type="text" class="input-edit" value="${textItem.textContent}"></form>`
	);

const input = listItem.querySelector(".input-edit");
	input.focus();

// put cursor at end of input
	input.setSelectionRange(input.value.length, input.value.length);
});

localStorage["data"] = JSON.stringify(TODOs);
	}, 1000);
}

toggles.forEach((toggle) => {
	toggle.addEventListener("click", (event) => {
		toggles.forEach((toggle) => {
			toggle.setAttribute("aria-pressed", false);
		});
		toggle.setAttribute("aria-pressed", true);

if (toggle.textContent === states.ACTIVE) {
			buildUI(states.ACTIVE);
		} else {
			buildUI(states.COMPLETED);
		}
	});
});

buildUI();

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

task dashboard

About this Code

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever