I'm currently building a website to calculate user expenses and use that to help people save money. one of the section takes user input and displays particular paragraphs based on the user input, using if-else statements.
This is the first design I came up with. It does work the way it is designed but I'm hoping there is a cleaner way I can write this. I feel like the way I'm hiding and displaying the div elements could be cleaned up. Here's a link to js.fiddle: https://jsfiddle.net/eb6y9o75/1/
Blockquote
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#PriceOfCar-Wrapper {
display:none;
}
#WSYD-Car-20 , #WSYD-Car-40 , #WSYD-CantBuyCarForForty , #I-
CongratsTextCar , #I-DidntWantCar{
Display:none;
margin:5px;
padding:5px;
}
</style>
</head>
<body>
<script>
function MathFunctions() {
var vMoneyAfterExpensesWOSaving = 758;
var vMoneySavedTwenty = 758 * .20;
var vMoneySavedForty = 758 * .40;
var vMoneyAfterExpensesWSaving40 = vMoneyAfterExpensesWOSaving -
vMoneySavedForty;
// Buying a car for $10,000
var vMonthsForCar = 0;
var vPriceOfCar = parseInt(parseFloat(0));
var vMoneyNeededMonthlyForCar = 0;
var vWSYDCar20 = document.getElementById('WSYD-Car-20').id;
var vWSYDCar40 = document.getElementById('WSYD-Car-40').id;
var vCongratsTextCar = document.getElementById('I CongratsTextCar').id;
vPriceOfCar = document.getElementById('PriceOfCar').value;
console.log(vMonthsForCar , 'Months For Car should equal 0');
if(document.getElementById('PriceOfCar-Wrapper').style.display === 'none'){
document.getElementById('I-DidntWantCar').style.display = 'block';
document.getElementById('I-CongratsTextCar').style.display = 'none';
console.log(document.getElementById('I-DidntWantCar').style.display);
document.getElementById('WSYD-Car-20').style.display = 'none';
document.getElementById('WSYD-Car-40').style.display = 'none';
vPriceOfCar = 0;
}
else if( vPriceOfCar > 0){
while(vMoneyNeededMonthlyForCar < vPriceOfCar) {
console.log(vMoneyNeededMonthlyForCar);
vMoneyNeededMonthlyForCar = +vMoneyNeededMonthlyForCar + +vMoneySavedTwenty;
vMonthsForCar++;
}
}
else{
}
if( vMonthsForCar == 1 ){
document.getElementById('I-CongratsTextCar').style.display = 'block';
document.getElementById('WSYD-Car-20').style.display = 'none';
document.getElementById('WSYD-Car-40').style.display = 'none';
document.getElementById('I-DidntWantCar').style.display = 'none';
}
else if(vMonthsForCar > 1) {
vMoneyNeededMonthlyForCar = vPriceOfCar / vMonthsForCar;
document.getElementById('WSYD-Car-20').style.display = 'block';
console.log(vPriceOfCar);
document.getElementById('I-MonthsNeededToBuyCar').innerHTML = vMonthsForCar;
parseInt(parseFloat(vMoneyNeededMonthlyForCar)).toFixed(2);
document.getElementById('I-PaymentForCar').innerHTML = vMoneyNeededMonthlyForCar;
document.getElementById('I-CongratsTextCar').style.display = 'none';
document.getElementById('WSYD-Car-40').style.display = 'none';
document.getElementById('I-PriceOfCar').innerHTML = vPriceOfCar;
}
else {}
if (vPriceOfCar == 0){
document.getElementById('I-DidntWantCar').style.display = 'block';
document.getElementById('WSYD-Car-20').style.display = 'none';
document.getElementById('WSYD-Car-40').style.display = 'none';
document.getElementById('I-CongratsTextCar').style.display = 'none';
}
else if (vMoneyAfterExpensesWSaving40 > (vMoneySavedTwenty * 2)) {
document.getElementById('WSYD-Car-40').style.display = 'block';
console.log(vPriceOfCar);
document.getElementById('I-PriceOfCarForty').innerHTML = vPriceOfCar;
document.getElementById('I-MonthsNeededToBuyCarForty').innerHTML = vMoneyNeededMonthlyForCar;
document.getElementById('I-PaymentForCarForty').innerHTML = vMoneyNeededMonthlyForCar * 2;
document.getElementById('I-PaymentForCartwenty').innerHTML = vMoneySavedTwenty
}
else {
}
}
</script>
<a href="#"><button style="position:relative;top:30px;" type="button" onclick="MathFunctions()">Submit</button></a>
<section style="position:relative;top:30px;">
<h4>Would you like to purchase a car?</h4> <input type="radio" value="yes" id="CarRadio-yes" onclick="document.getElementById('PriceOfCar-Wrapper').style.display = 'block'" name="group1">Yes
<input type="radio" value="no" onclick="document.getElementById('PriceOfCar-Wrapper').style.display = 'none'" id="CarRadio-No" name="group1">No
<br>
<div id="PriceOfCar-Wrapper">
How much are you willing to spend <input type="Text" value="0" id="PriceOfCar">
</div>
<br>
</section>
</tr>
<tr>
<td class="Sub-Title-td" id="Sub-Title-Show-Car" style="display:none">
<h2>How to buy a car on your current expenses</h2>
<p>One way to buy a car is throught the 20/4 rule</p>
<br>
</p>
<section id="I-DisplayPriceOfCar">
<h2>What Should You Do?</h2>
<div id="WSYD-Car-20" style="display:none;">
Based on saving the recommended amount of 20% from your check, at $<span id="I-PaymentForCar"></span>. It will take you roughly <span id="I-MonthsNeededToBuyCar"></span> months to save up enough for a car worth <span id="I-PriceOfCar"></span>
<br>
</div>
<div id="WSYD-Car-40" style="display:none;">
After saving 20% it seems you still have some extra cash left. Instead, if you were to save 40% it would take you <span id="I-MonthsNeededToBuyCarForty"></span> months to save up enough money to buy a car that is worth $<span id="I-PriceOfCarForty"></span>. Saving 40% would increase that amount that you are saving from $<span id="I-PaymentForCartwenty"></span> to $<span id="I-PaymentForCarForty"></span>.
<br>
</div>
<div id="WSYD-CantBuyCarForForty">Sadly, You cant afford to put away anymore money. here are some ways we recommend making more money
<ul>
<li>Pick up extra hours at work</li>
<li>Earn a passing income</li>
<li>Start a blog</li>
</ul>
</div>
<p id="I-CongratsTextCar">The Money you are currently saving per month is greater than the price of the car! Congratulations!</p>
<div id="I-DidntWantCar">You made it clear that you didn't want to buy a car!</div>
</section>
</td>
</tr>
</table>
</body>
Everything seems to working fine, but I'm going to have 3-5 of these on one page so I would like to know if there is a cleaner way to write this or if what I have done is considered bad practice.
Expected Results There are multiple options that can occur, the user selects they do not want a car - in this case text displays that tells the user they didn't want to buy a car
the user selects they want to buy a car, but doesn't enter a value for the car. The default price is 0. - once again this displays text informing the user that they didn't want a car.
another scenario is the user decides to add a car to their budget but, based on their income, they make more money in a month than the cost of the entire car - in this case the text that displays, informs the user that they make more money in a month than the car cost.
the 2 final scenarios is the user selects they want to buy a car and enters a value greater than their monthly income. this will perform some calculations and inform the user how much money they need to save and how long it will take them to save enough money for them to purchase the car.
if the user makes earns enough money per month that they are able to save double the amount of money, text will appear that informs the user how much more money they can save and how long it will take them to buy their desired car. however if the user does not make this extra money. Text will inform the user that they do not have enough extra money to save and will inform them on quick ways to earn some more money.
Thanks for all the help :)
Aucun commentaire:
Enregistrer un commentaire