Web App

Form Button Styling
SVG Optimisation
JS Notifications
Use of Local Storage
Chart Library

The Brief

On top of using build tools and SASS to create this site, you needed to add lots of interactivity. Notification bubbles, popups and include interactive use of a graph from a JS library.

To further improve the site slider were styled from scratch and even local storage is enabled.

The Build

This site was packed with features. Without using a backend database I emulated the use of one-time only notifications with one-time js functions.

Recreating the graph from the Chart.js library took some time. jQuery aside, this was my first interaction with a JS library. I was pleased with how the graphs came out and once I became familiar with how the documentation wanted you to build objects, I was able to match the design.

One of the last features I took time perfecting was the custom buttons and sliders. Both the slider and the dropdown menu would look different on different browsers so it was worth spending the extra time bringing more uniformity.

Inspect the Code Visit the Site