Responsive Dashboard with JavaScript Charts and Widgets

A well design, responsive and attractive CSS and JavaScript based dashboard for web apps & admin penal. The dashboard comes with Menu, Search, Charts & Graphs, Widgets, Notifications, Alerts and Profile info.

Plugin Overview

Plugin: Web-App-Dashboard
Author: Triantafyllos Famprikatzis
Licence: MIT Licence
Published: March 1, 2024
Repository: Fork on GitHub
Dependencies: Chart.js 2.7.3 or Latest
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 251 KB

How to Make Responsive Dashboard:

1. To getting started with this dashboard, include the all necessary files into HTML document.

<!-- Main CSS for Dashboard -->
<link rel="stylesheet" href="css/styles.css">

<!-- Chart Js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>

<!-- Main JavaScript for Dashboard -->
<script src="script.js"></script>

2. Create header element and add your customization details into it.

        <header>
            <img class="logo" src="icons/logo.png" alt="logo">
            <div class="header-nav">
                <div class="notification">
                    <img class="bell" id="js-bell" src="icons/icon-bell.svg" alt="bell">
                    <p class="badge" id="badge-1"><strong class="badge-num">1</strong></p>
                    <p class="badge" id="badge-2"><strong class="badge-num">2</strong></p>
                    <p class="badge" id="badge-3"><strong class="badge-num">3</strong></p>
                    <p class="badge" id="badge-4"><strong class="badge-num">4</strong></p>
                    <ul class="notification-menu" id="notif-menu" style="display: none;">
                        <li id="header-li"><strong>Notifications</strong></li>
                        <li class="popuptext" id="li-1">
                            <img class="img" src="images/member-1.jpg" alt="member image">
                            <h3 class="name">Victoria Chambers</h3>
                            <p class="comment">What are your plans for tonight?</p>
                            <button class="btn-notif" type="button" name="delete">X</button>
                        </li>
                        <li class="popuptext" id="li-2">
                            <img class="img" src="images/member-2.jpg" alt="member image">
                            <h3 class="name">Dale Byrd</h3>
                            <p class="comment">Hey what's up?</p>
                            <button class="btn-notif" type="button" name="delete">X</button>
                        </li>
                        <li class="popuptext" id="li-3">
                            <img class="img" src="images/member-3.jpg" alt="member image">
                            <h3 class="name">Dawn Wood</h3>
                            <p class="comment">Just sent you a voice message</p>
                            <button class="btn-notif" type="button" name="delete">X</button>
                        </li>
                        <li class="popuptext" id="li-4">
                            <img class="img" src="images/member-4.jpg" alt="member image">
                            <h3 class="name">Dan Oliver</h3>
                            <p class="comment">Are you going to the game next week?</p>
                            <button class="btn-notif" type="button" name="delete">X</button>
                        </li>
                        <li class="popuptext popupalert" id="alert-bell" style="display: none;">
                            <h3>No new notifications</h3>
                        </li>
                    </ul>
                </div>
                <span class="border-notif"></span>
                <img class="profile-pic" src="images/josh.jpg" alt="User Avatar">
                <h3 class="profile-name">Josh Sullivan</h3>
            </div>
        </header>

3. After this, create Navigation menu like below.

  <nav>
            <div class="side-nav" id="js-nav">
                <a href="#top" class="nav-icons nav-selected" id="btn-top"><img src="icons/icon-dashboard.svg" alt="dashboard"></a>
                <a href="#traffic" class="nav-icons" id="btn-traffic"><img src="icons/icon-visits.svg" alt="visits"></a>
                <a href="#activity" class="nav-icons" id="btn-activity"><img src="icons/icon-members.svg" alt="members"></a>
                <a href="#settings" class="nav-icons" id="btn-settings"><img src="icons/icon-settings.svg" alt="settings"></a>
            </div>
        </nav>

4. Copy the other parts of this dashboard from downloaded index file. Thanks 🙂

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X