Anonymous password generator with pure HTML, CSS and JavaScript. No framework, no libraries, work offline.
The HTML uses simple input tags with properties like min, max. Some other tags were used. No custom tags.
For CSS, the SCSS was used, and then compiled to CSS. SCSS add some nice feature like parent and child properties, reusable global variables, and prefix for multiple browser support. The compiled CSS was not minified, as the file itself is relatively small.
JavaScript use module pattern, except for service-worker.js file.
The icon used in the copy and refresh button is SVG to reduce the size of the resources. Another option is icon purely written in CSS
However, the favicon cannot be an SVG file, so the favicon is 16x16 pixels, with 8-bit colors (256 colors), and is already compressed.
This app implements a service worker to cache all the necessary resources in service-worker.js. The code of this file was copied from here with MIT license
The app was tested with Google Pagespeed and Lighthouse.
Report for lighthouse can be found here
The low score for accessibility is because of some unnecessary restriction (in this app context) set by Google.
Report for Google Page Speed can be found here
The app was set with meta tags properly to be shared on Facebook, Google, and Twitter. You can check the index.html file to see the tags
