Repo | Live URL

The Ratio Calculator is a lightweight Progressive Web App (PWA) designed to compute the remaining value from three provided input values. It was developed as a personal challenge in utilizing array iteration, object-oriented programming (OOP) principles, and implementing test-driven development (TDD) practices. The primary goal was to create a streamlined codebase with a clear separation of concerns.

This app came about as a reaction to previous PWA development. When running builds for sun-tracker, I noticed nodule_modules/ would take up a considerable size relative to the rest of the codebase, due to its third-party depenendcies. By avoiding external dependencies in this app, the file size of app.bundle.js has been kept to a minimum. Additionally, this approach maximized the readability of the source codebase, emphasizing proficiency in fundamental JavaScript, OOP, TDD, and client-side memory management.

• Utilization of array variable objects created via for loop iteration.
• Ensuring data consistency between the DOM and calculator logic through array destructuring, object instantiation, and strict equality.
• Construction of application logic guided by TDD principles.
• Maintenance of value synchronicity among class constructors, the IndexedDB database, and DOM variables through iterative calls.
• Leveraging the data-* attribute to facilitate setting values for form input elements via a UI keypad.

• Implementation of keyboard event listeners to enhance user input accessibility.

• Installation
• Test
• Usage
• Features
• Credits
• Author

Run the following command to install necessary dependencies:

$ npm i

• Desktop : click install icon in address bar.
• iOS: click 'Add to Home Screen'.

Run the following command to run tests:

$ npm run test

Run the following command to run app locally:

$ npm run start:dev

Using the keypad

• Client-Side Database Memory Persistence: Store data locally for seamless user experience across sessions.
• Offline Functionality: Enjoy uninterrupted usage even without an internet connection.
• PWA Optimization: Fast loading times and responsiveness thanks to Progressive Web App technology.
• Accessible UI Touch Keypad: Utilize an intuitive touch keypad with ARIA-label accessibility, enhancing usability for all users.
• Appealing Responsive Design: UI offers clear visual cues for focused elements, improving overall user experience under a variety of displays.

• Languages: HTML, CSS, Javascript
• Frameworks: Node, Jest
• Libraries: webpack, et al.
• Graphics: Adobe Illustrator
• Database: indexedDB

• Email
• GitHub