Created
August 14, 2018 20:15
-
-
Save graywolf336/4528c94e530a0697a90fae4914984168 to your computer and use it in GitHub Desktop.
Simple calculator which takes the cost of living, or how much you want to make, and tells you how much you should make an hour/day.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Simple Cost of Living Calc</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <style> | |
| .questions { | |
| display: flex; | |
| flex-direction: column; | |
| width: 450px; | |
| } | |
| .questions input { | |
| width: fit-content; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="questions"> | |
| <label for="totalExpense">Total Expenses Per Month (cost of living)</label> | |
| <input id="totalExpense" type="number"> | |
| <label for="numberOfWorkDays">Number of Work Days</label> | |
| <input id="numberOfWorkDays" type="number"> | |
| <label for="numberOfWorkHours">Number of Hours Worked Per Day</label> | |
| <input id="numberOfWorkHours" type="number"> | |
| </div> | |
| <div class="results"> | |
| <h2>Daily Requirement: $<span id="dailyResult">0</span></h2> | |
| <h2>Hourly Requirement: $<span id="hourlyResult">0</span></h2> | |
| </div> | |
| <script> | |
| const data = { | |
| costOfLiving: 1160, | |
| numOfWorkDays: 20, | |
| numOfWorkHours: 8, | |
| dailyResult: 0, | |
| hourlyResult: 0 | |
| }; | |
| function calculateResults() { | |
| data.dailyResult = data.costOfLiving / data.numOfWorkDays; | |
| data.hourlyResult = data.dailyResult / data.numOfWorkHours; | |
| jQuery('#dailyResult').text(data.dailyResult); | |
| jQuery('#hourlyResult').text(data.hourlyResult); | |
| } | |
| jQuery(document).ready(function() { | |
| jQuery('#totalExpense').val(data.costOfLiving); | |
| jQuery('#numberOfWorkDays').val(data.numOfWorkDays); | |
| jQuery('#numberOfWorkHours').val(data.numOfWorkHours); | |
| calculateResults(); | |
| jQuery('#totalExpense').on('input', function(e) { | |
| data.costOfLiving = e.target.valueAsNumber; | |
| calculateResults(); | |
| }); | |
| jQuery('#numberOfWorkDays').on('input', function(e) { | |
| data.numOfWorkDays = e.target.valueAsNumber; | |
| calculateResults(); | |
| }); | |
| jQuery('#numberOfWorkHours').on('input', function(e) { | |
| data.numOfWorkHours = e.target.valueAsNumber; | |
| calculateResults(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment