Skills & Technologies Used:
- HTML
- CSS
- JavaScript
- Autocomplete JavaScript Widget
- Local Storage
- Grid Layout
- Google Fonts
- Flexbox
- Mobile-First Responsive Web Design
Project Description:
For this project I created all of the HTML, CSS, and JavaScript from scratch. I used Grid Layout and Flexbox to layout and arrange all the different sections of the web page. I used mobile-first responsive web design. I used a Google font for all of the text of the website. I used JavaScript to create an alert for tasks. For this alert I used string interpolation to add the HTML to the web page. I implemented charts using charts.js. I used JavaScript to import the data for the traffic chart via an object with data and labels. For all the other chart data and styling customization, I edited the object parameters used by the charts in JavaScript. I made all charts responsive. I used SVG's to implement the social networking icons in their respective cards. I edited SVG parameters to change the fill of each social networking icon. I used margins to fully align SVG's to the center of their containers. I implemented message sending functionality for the messaging section, where if you type a message into the message field and click send, it will send the data to the user specified and then clear the data from the message field. For the settings section I created custom toggle switches from a w3schools example. I also added a timezone dropdown field and a save button to save the settings to the browser using local storage. This project used JavaScript arrays, objects, functions, loops and conditionals. I fulfilled the "exceeds expectations" requirements by adding a notifications dropdown menu displaying all the recent activity by using a w3schools example that utilizes CSS and JavaScript, by adding functionality to show a different chart with animation for each navigation list item for the traffic chart, by adding autocomplete functionality to the user input field in the messaging section with a JavaScript widget called "Awesomplete" and by using local storage to save the settings in the browsers local storage for the settings section.
This project was designed according to the provided mockups.
Exceeds Expectations Requirements:
Display at least two notifications at the same time when the user clicks the alerts icon
- This could be a pop-up window or dropdown menu.
Traffic chart widget
- Create a navigation similar to the one in the mockup to display different data when the Hourly, Daily, Weekly and Monthly button is selected. Add functionality to the Hourly, Daily, Weekly and Monthly buttons so that a different line chart is displayed on click.
Add an "autocomplete" feature for the "Search for User" box, listing names that match the search term.
Use local storage to save the settings.
- The settings are saved to local storage when the "Save" button is clicked.
- The settings are reset when the "Cancel" button is clicked.
- When page is reloaded the settings are remembered.
Grade Received:
Exceeds Expectations
You can see the live project at the following link: https://shoaibkamalkhan.github.io/FEWD-TDP-7-WebApp-Dashboard.
You can see my portfolio at the following link: https://shoaibkamalkhan.github.io.