graywolf336/costOfLivingCalc.html

## costOfLivingCalc.html
<!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>
	<!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>