https://github.com/jmgogo/salary-js

Demonstrating design best practices with 'separation-of-concern' (SoC) techniques to dynamically render salary data via user input with JavaScript.
https://github.com/jmgogo/salary-js

css html javascript js liveserver module separation-of-concerns

Last synced: about 18 hours ago
JSON representation

Demonstrating design best practices with 'separation-of-concern' (SoC) techniques to dynamically render salary data via user input with JavaScript.

• Host: GitHub
• URL: https://github.com/jmgogo/salary-js
• Owner: jmgogo
• License: mit
• Created: 2024-02-26T21:09:36.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-02-27T16:00:26.000Z (8 months ago)
• Last Synced: 2024-09-21T01:33:47.073Z (about 2 months ago)
• Topics: css, html, javascript, js, liveserver, module, separation-of-concerns
• Language: JavaScript
• Homepage:
• Size: 1.43 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Dynamic Salary Data with JS






  

    

  

  
Foreword


  


    Demonstrating design best practices with 'separation-of-concern' (SoC) techniques to dynamically render salary data via user input with JavaScript.

    


    Report Bug

    ·

    Request Feature

  


## Table of Contents

- [Dynamic Salary Data with JS](#dynamic-salary-data-with-js)

  - [Table of Contents](#table-of-contents)

  - [About](#about)

  - [Prerequisites](#prerequisites)

  - [Getting started](#getting-started)

  - [License](#license)

## About

This repository features a simple web application that dynamically renders salary data from a small dataset. It demonstrates Separation of Concerns (SoC) via distict features in the [modules](./modules/) folder. SoC is a design principle that manages complexity by partitioning a computer program into distinct features that overlap in functionality as little as possible.

## Prerequisites

To start, you need to have Visual Studio Code downloaded on your machine. You should have it installed along with the [live server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&ssr=false#review-details) extension to enable a local development server with live reload features for static & dynamic pages. Without it you will run into [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues. Modules only work via HTTP(S) protocols imports. For more information reference this post on [Stack Overflow](https://stackoverflow.com/questions/52919331/access-to-script-at-from-origin-null-has-been-blocked-by-cors-policy).

## Getting started

Git clone this repository to your local machine. This will give you access to all the files. Open the project folder on VS Code. With the [live server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&ssr=false#review-details) extension installed, start your local development server. This can be done by launching the command palette `ctrl + shift + p` and executing the `Live Server: Open with Live Server` command. The webpage will render via `index.html` and display data for salary based on role and company inputs as shown below.

![Salary Data](./media/salary-js_capture.gif)

## License

Distributed under the MIT License. See `LICENSE` for more information.