This project was based off a mockup from the treehouse FEWD techdegree project. I had to develop the HTML, CSS, and JavaScript functionality for this one page layout, I didn't need to build any backend or database functionality as the purpose of this project was to showcase the front end of a webapp. The project contains a few icons to build a beautiful web dashboard, complete with JavaScript-driven charts and graphs.
The project contains extra development work which was for achieving the highest grade:
- Display at least two notifications at the same time when the user clicks the notifications bell icon.
- 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. Which I used a W3 function to do so.
- 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, and when page is reloaded, the settings are remembered.
Browsers tested for compatibility:
- Chrome
Grade: Exceeds Expectations