Created
June 24, 2018 10:52
-
-
Save ellijayne/754e3354a3ee0d3c26c276756660b96a to your computer and use it in GitHub Desktop.
html
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
| $(document).ready(function() { | |
| const balance = { | |
| savings: 0, | |
| checking: 0 | |
| }; | |
| //trying to use function for both accs to go red when on $0 | |
| $(".balance").each(function(account) { | |
| if $(balance[account] === 0) { | |
| $("div .balance").addClass('empty'); | |
| } else { | |
| $("div .balance").removeClass('empty'); | |
| } | |
| }); | |
| const updateScreen = function (balance) { | |
| $('#checking-balance').html("$" + balance.checking) | |
| $('#savings-balance').html("$" + balance.savings) //this it trying to update screen/dom remeber to change these strings into numbers... at the moment it is just adding the strings together | |
| }; | |
| const deposit = function (amount, account){ | |
| balance[account] = balance[account] + amount; | |
| updateScreen(balance); //calling function from above that will update the screen/dom | |
| }; | |
| const withdraw = function (amount, account) { | |
| balance[account] = balance[account] - amount | |
| updateScreen(balance); | |
| } | |
| //for dom stuff you have to pick up info from input box after a click event. | |
| //CHECKING DEPOSIT | |
| $("#checking-deposit").on("click", function() { | |
| let plusBalance = $("#checking-amount").val() + $("#checking-balance").val(); | |
| deposit(+plusBalance, "checking"); | |
| $("#checking-amount").val(''); | |
| }); | |
| //CHECKING WITHDRAW | |
| $("#checking-withdraw").on("click", function() { | |
| let minusBalance = $("#checking-balance").val() - $("#checking-amount").val(); | |
| deposit(+minusBalance, "checking"); | |
| $("#checking-amount").val(''); | |
| }); | |
| //SAVINGS DEPOSIT | |
| $("#savings-deposit").on("click", function() { | |
| let plusBalance = $("#savings-amount").val() + $("#savings-balance").val(); | |
| deposit(+plusBalance, "savings"); | |
| $("#savings-amount").val(''); | |
| }); | |
| //SAVINGS WITHDRAW | |
| $("#savings-withdraw").on("click", function() { | |
| let minusBalance = $("#savings-balance").val() - $("#savings-amount").val(); | |
| deposit(+minusBalance, "savings"); | |
| $("#savings-amount").val(''); | |
| }); | |
| }); //end of document.ready tag |
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> | |
| <meta charset="utf-8"> | |
| <title>ATM</title> | |
| <link rel="stylesheet" href="css/atm.css"> | |
| <script src="js/jquery.js"></script> | |
| <script src="js/atm.js"></script> | |
| </head> | |
| <body> | |
| <div id="content"> | |
| <div id="nav"> | |
| <div id="logo"><img src="img/ga.png" alt="Bank of GA"/></div> | |
| <div id="title">Bank of GA</div> | |
| </div> | |
| <div class="account" id="checking"> | |
| <h1>Checking</h1> | |
| <div class="balance" id="checking-balance">$0</div> | |
| <input id="checking-amount" type="text" placeholder="enter an amount" /> | |
| <input id="checking-deposit" type="button" value="Deposit" /> | |
| <input id="checking-withdraw" type="button" value="Withdraw" /> | |
| </div> | |
| <div class="account" id="savings"> | |
| <h1>Savings</h1> | |
| <div class="balance" id="savings-balance">$0</div> | |
| <input id="savings-amount" type="text" placeholder="enter an amount" /> | |
| <input id="savings-deposit" type="button" value="Deposit" /> | |
| <input id="savings-withdraw" type="button" value="Withdraw" /> | |
| </div> | |
| <div class="clear"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment