The time_step_str(date, step) function calculates and returns a time string based on the input date and step andform_validate_hour() function validates the start and end time values of the form and updates the end time if needed.
Finally, the function form_init() is called to initialize the form.
How to Create JavaScript Dashboard
First of all, load the following assets into the head tag of your HTML document.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
Create the HTML structure for the dashboard as follows:
<body>
<div class="layout">
<a class="header" href="#0">
<i class="fa fa-bars"></i>
<div class="header-user"><i class="fas fa-user-circle icon"></i>Hello John Dee</div>
</a>
<div class="sidebar">
<ul>
<li> <a class="sidebar-list-item" href="#0"> <i class="fas fa-home icon"></i><em>Dashboard</em></a></li>
<li> <a class="sidebar-list-item" href="#0"> <i class="fas fa-user icon"></i><em>Users</em></a></li>
<li> <a class="sidebar-list-item" href="#0"> <i class="fas fa-tasks icon"></i><em>Projects</em></a></li>
<li> <a class="sidebar-list-item active" href="#0"> <i class="fas fa-calendar icon"></i><em>Events</em></a>
</li>
<li> <a class="sidebar-list-item" href="#0"> <i class="fas fa-toolbox icon"></i><em>Preferences</em></a>
</li>
<li> <a class="sidebar-list-item" href="#0"> <i class="fas fa-comments icon"></i><em>Feedback</em></a></li>
<li> <a class="sidebar-list-item" href="#0"> <i class="fas fa-lightbulb icon"></i><em>Suggestions</em></a>
</li>
</ul>
</div>
<main class="content">
<div class="main-header">
<div class="main-title">
<h1>New Event</h1>
</div>
<div class="main-form">
<form name="event">
<input type="text" id="ftitle" placeholder="Add title">
<input type="text" id="fdescription" placeholder="Add description">
<input type="text" id="flocation" placeholder="Add location">
<div class="input-group">
<input type="date" id="fdate">
<label for="fallday" class="all_day">All day:</label>
<input type="checkbox" class="checkbox" id="fallday" onchange="form_display_hour()">
</div>
<div class="input-hour">
<div id="fhourdiv">
<input type="time" id="fstart" class="hour" onchange="form_validate_hour()">
<input type="time" id="fend" class="hour" onchange="form_validate_hour()">
</div>
</div>
<input type="submit" id="fsubmit" value="Save" class="button">
</form>
</div>
</div>
</main>
<footer class="footer">
<div class="footer_sign">made with <span class="fas fa-heart"></span> by <a href="https://mafda.github.io/" target="blank">mafda</a></div>
</footer>
</div>
</body>
Now, style the dashboard using the following CSS styles:
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;900&display=swap");
body {
font: 400 14px Roboto, sans-serif;
background: #f6f4fc;
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
em {
font-style: normal;
}
a {
text-decoration: none;
color: inherit;
}
.layout {
display: flex;
align-items: center;
justify-content: right;
padding: 0 16px;
background-color: #f6f4fc;
margin: 0 20px;
}
.cd__main{
display: block !important;
}
.content {
display: flex;
justify-content: center;
align-items: top;
flex: 1;
margin: 5.5em 0;
width: 100%;
min-width: 260px;
}
.main-header {
background-color: #fefefe;
border-radius: 40px;
padding: 20px;
width: 100%;
max-width: 650px;
}
.main-title {
width: 100%;
}
.main-header .main-title h1 {
margin: 30px;
font-size: 42px;
color: #3ba8d4;
}
.main-form {
display: flex;
align-items: center;
justify-content: center;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 4em;
background-color: #f6f4fc;
border-top: 1px solid #b3b3b3;
}
.footer_sign {
position: absolute;
top: 50%;
right: 1em;
transform: translateY(-50%);
font-size: 14px;
color: #b3b3b3;
}
.footer_sign span,
a {
color: #49c1c3;
text-decoration: none;
}
.header {
z-index: 2;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4em;
background-color: #f6f4fc;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5em;
border-bottom: 1px solid #3ba8d4;
}
.header-user {
font-size: 1.2em;
color: #3ba8d4;
}
.header-user > i {
padding-right: 10px;
}
/* ==== sidebar ==== */
*,
*::before,
*::after {
box-sizing: border-box;
}
.sidebar {
position: fixed;
top: 0;
left: -15em;
overflow: hidden;
transition: all 0.3s ease-in;
width: 15em;
height: 100%;
background: #fefefe;
font-size: 1.2em;
}
.active {
color: #3ba8d4;
background-color: #f5f8fe;
border-right: 2px solid #3ba8d4;
}
.sidebar:hover,
.sidebar:focus,
.header:focus + .sidebar,
.header:hover + .sidebar {
left: 0;
}
.sidebar ul {
position: absolute;
top: 4em;
left: 0;
margin: 0;
padding: 0;
width: 15em;
}
.sidebar ul li {
width: 100%;
}
.sidebar-list-item {
position: relative;
display: inline-block;
width: 100%;
height: 3em;
color: #394951;
}
.sidebar-list-item em {
position: absolute;
top: 50%;
left: 4em;
transform: translateY(-50%);
}
.sidebar-list-item:hover {
background: #f5f8fe;
}
.sidebar-list-item > i {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 4em;
height: 3em;
}
.sidebar-list-item > i::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (min-width: 42em) {
.content {
margin-left: 5em;
}
.sidebar {
width: 4em;
left: 0;
}
.sidebar:hover,
.sidebar:focus,
.header:hover + .sidebar,
.header:focus + .sidebar {
width: 15em;
}
}
@media (min-width: 68em) {
.content {
margin-left: 18em;
}
.sidebar {
width: 15em;
}
}
/* ==== form ==== */
input,
button,
textarea {
font: 400 14px Roboto, sans-serif;
}
form input {
width: 100%;
height: 50px;
color: #a6a6a6;
border: 1px solid #dcdce6;
border-radius: 8px;
padding: 0 24px;
}
.main-header .main-form form {
width: 100%;
max-width: 450px;
}
.main-header .main-form form input {
margin-top: 8px;
}
.main-header .main-form form .input-group {
display: flex;
align-items: center;
justify-content: center;
}
.input-hour {
height: 50px;
}
#fhourdiv {
display: flex;
align-items: center;
justify-content: space-between;
}
#fhourdiv > input {
width: 47%;
}
.main-header .main-form form .input-group input + input {
margin-right: 8px;
}
.main-header .main-form form .input-group .all_day {
width: 120px;
height: 50px;
text-align: right;
padding: 18px 0;
margin-top: 8px;
color: #a6a6a6;
}
.main-header .main-form form .input-group .checkbox {
width: 60px;
height: 30px;
color: #a6a6a6;
border: 1px solid #dcdce6;
border-radius: 10px;
margin-left: 10px;
}
.main-header .main-form form .input-group .hour {
width: 219px;
}
.main-header .main-form form .button {
width: 100%;
height: 60px;
background: #3ba8d4;
border: 0;
border-radius: 10px;
color: #fff;
font-weight: 700;
margin: 20px 0 15px 0;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 18px;
transition: filter 0.2s;
cursor: pointer;
}
.button:hover {
filter: brightness(90%);
}
Finally, add the following JavaScript function for its functionality:
function form_display_hour() {
if (document.getElementById("fallday").checked) {
document.getElementById("fhourdiv").style.display = "none";
} else {
document.getElementById("fhourdiv").style.display = "flex";
}
}
function form_init() {
const today = new Date().toISOString();
const date = today.split("T")[0];
document.getElementById("fdate").min = date;
document.getElementById("fstart").step = 900;
document.getElementById("fend").step = 900;
}
function time_step_str(date, step) {
var minutes = date.getMinutes() + step;
var hours = date.getHours() + Math.floor(minutes / 60);
minutes %= 60;
hour = String(hours).padStart(2, "0");
minutes = String(minutes).padStart(2, "0");
return `${hours}:${minutes}`;
}
function form_validate_hour() {
const start = document.getElementById("fstart");
const end = document.getElementById("fend");
var startDate = new Date();
var endDate = new Date();
startDate.setHours(...start.value.split(":").map(Number));
if (end.value === "") {
end.value = time_step_str(startDate, Number(end.step) / 60);
}
endDate.setHours(...end.value.split(":").map(Number));
if (startDate > endDate) {
end.value = time_step_str(startDate, Number(end.step) / 60);
}
}
form_init();
That’s all! hopefully, you have successfully created a JavaScript dashboard. If you have any questions or suggestions, feel free to comment below.
