Creating A Simple ATM program - javascript

I am trying to create a simple ATM program with 5 buttons ($20, $60, $100, Other Amount, and Withdrawal). I need to create a confirm box when the money buttons are pressed and have the amount deducted from a text box when the withdraw button is pressed. Here is my code:
<form action="" >
<table>
<tr>
<td>
<input type="button" value="$20" onclick='accept())'/>
</td>
<td>
</td>
<td>
</td>
<td>
<input type="button" value="Withdrawal" onclick=''/>
</td>
</tr>
<tr>
<td>
<input type="button" value="$60" onclick='accept()'/>
</td>
<td>Current Balance
</td>
<td>
<input type="Current Balance" value="5000.00" onchange=''/>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="$100" onclick='accept()'/>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="Other Amount" onclick=''/>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
var balance=50000;
function withdraw(amount)
{
var sure = confirm("Are You Sure You Want To Withdraw This Amount?");
if(true)
{
balance = balance - amount;
}else
{
alert("No Withdrawal Made");
}
alert("Your Balance Is "+balance);
function
</script>
Please help! This is driving me crazy. Thanks!

Ok Lets have a look at some of the issues;
Indent your code properly, it will help you spot errors more easily.
Use an editor like notepad++ or better still an IDE that will show your syntactical errors
Don't use tables in your markup for layout purposes, learn css
<form action="" >
<table>
<tr>
<td>
<input type="button" value="$20" onclick='accept())'/> // you have an extra closing brace here
</td>
<td>
</td>
<td>
</td>
<td>
<input type="button" value="Withdrawal" onclick=''/>
</td>
</tr>
<tr>
<td>
<input type="button" value="$60" onclick='accept()'/>
</td>
<td>Current Balance
</td>
<td>
<input type="Current Balance" value="5000.00" onchange=''/> //Current balance is not a valid type
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="$100" onclick='accept()'/>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="Other Amount" onclick=''/>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<script type="text/javascript">
var balance=50000;
function withdraw(amount) //this function should be called accept not withdraw
{ //you didn't close this brace
var sure = confirm("Are You Sure You Want To Withdraw This Amount?");
if(true) //should be if (sure)
{
balance = balance - amount;
}else{
alert("No Withdrawal Made");
}
alert("Your Balance Is "+balance);
function //this shouldn't be here
</script>

I didn't get the question clearly, but I think you need to confirm an amount for your "Other Amount" button, of your ATM application. You are suppose to use "prompt", usage of it is just like an alert box.
<input type="button" value="Get" onclick="prompt('How Much Amount, you want to withdraw?')">
your code can be something, like shown above.

Related

Why doesn't my brain.js LSTM script load from the URL specified in the script tag?

This is my script:
<script src="http://drwerenverlivitz.atspace.cc/scripts/brain-controller.js"></script>
<table>
<tr>
<td>
<b>Calculator.</b>
</td>
<td>
<b>Bot.</b>
</td>
</tr>
<tr>
<td>
<input id="calculator_input">
</td>
<td>
<input id="bot_input">
</td>
</tr>
<tr>
<td>
<input id="calculator_output" disabled>
</td>
<td>
<input id="bot_output" disabled>
</td>
</tr>
</table>
<script>
render=()=>{
requestAnimationFrame(render)
try{
calculator_output.value = eval(calculator_input.value)
net.train([
{
input:calculator_input.value,
output:eval(calculator_input.value),
}
])
}catch(e){}
}
init=()=>{
net = new brain.recurrent.LSTM()
render()
}
setTimeout(init,1)
</script>
I want to program a bot which learns to calculate any string, like if I say to it 1+1 it answer me 2, or if I say 2*2 it answer me 4, but for do that I need to solve that error. How to do it? Thanks for helping.

Using javascript to calculate the total cost of an order based on quantity of products in html form

Trying to use javascript to calculate the total cost of an order using the quantity inputted through the form in html but the total is not displaying in the input box. Been messing around with it for a few days and yesterday was showing NaN but now the box stays completely blank. It's all within a singlular webpage as a pratical assessment for school and am just using the script tag.
See the js below
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = document.getElementByID("quantityCappuccino").value;
var quantityEspresso = document.getElementByID("quantityEspresso").value;
var quantityLatte = document.getElementByID("quantityLatte").value;
var quantityIced = document.getElementByID("quantityIced").value;
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
//print value to orderTotal
document.getElementById("orderTotal").value=total;
}
And here is the html for the form
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>
I found two errors:
(1) In your second four var statements, it's getElementById not getElementByID (don't all-cap "Id").
(2) Your first <input> tag has the id name misspelled. It should be quantityCappuccino (identical to the name attribute).
After fixing those, the code worked like a charm.
NOTE: It took me seconds to figure this out because the error console (In FireFox, strike the F12 key to open it) reported the problems. That console is your friend.
Try this !
$("#orderTotal").click(function () {
calculatePrice();
});
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = $("#quantityCappucino").val();
var quantityEspresso = $("#quantityEspresso").val();
var quantityLatte = $("#quantityLatte").val();
var quantityIced = $("#quantityIced").val();
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
console.log(total);
//print value to orderTotal
$("#orderTotal").val(total);
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>
</td>
</tr>
</form>
</table>
</body>
</html>

How to check if a table has any duplicated rows column in js?

I want to check if a table has any duplicated column in rows. If a table has, an alert to be displayed that without adding database of. Then I want to unplug duplicated data from the table. How can I do that? I'm waiting for your help!
This is my table has duplicated class A:
This is my table html code.
<table id="tblSeatInfo">
<thead>
<tr>
<td>
Class
</td>
<td>
Given Seat
</td>
<td>
Adult Buying Price
</td>
<td>
Adult Selling Price
</td>
<td>
Child Buying Price
</td>
<td>
Child Selling Price
</td>
<td>
Infant Buying Price
</td>
<td>
Infant Selling Price
</td>
</tr>
</thead>
<tbody>
<tr class="tr-notremove">
<td>
<input class="form-control" type="text" name="class" />
</td>
<td>
<input class="form-control seat" type="text" name="givenseat" />
</td>
<td>
<input class="form-control decimal" type="text" name="adultbuyingprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="adultprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="childbuyingprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="childprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="infantbuyingprice" />
</td>
<td>
<input class="form-control decimal" type="text" name="infantprice" />
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-md btn-success btn-addnewseat">Add</button>
<button type="button" class="btn btn-md btn-warning btn-removenewseat">Remove</button>
</div>
</td>
</tr>
</tbody>
</table>
Try something like this
$('[name="class"]').on('input',function(){
var value = $(this).val();
$('[name="class"]').not(this).each(function(){
if($(this).val() == value) {
alert('duplicate content');
}
})
});
demo: https://jsfiddle.net/r3oq636w/1/

javascript calculator with click to calculate

I have a working calculator on my website that is used for business expense savings estimation. currently the calculator auto-calculates in real time as the user inputs numbers. i would like the user to have to click a calculate button in order to see any results. could someone please help as i am having a hard time adjusting the code myself. here is the current code:
function calc() {
var cost = document.getElementById('phone').value * (.30) +
document.getElementById('energy').value * (.05) +
document.getElementById('cell').value * (.30) + document.getElementById('office').value * (.15) + document.getElementById('card').value *
(.35) + document.getElementById('waste').value * (.5) +
document.getElementById('payroll').value * (.5);
document.getElementById('cost').value = (cost * 12).toFixed(2);
}
<form name="form1" method="post" action="">
<table width="33%" align="center">
<tr>
<td valign="top" style="text-align: center"><strong>
Category</strong>
</td>
<td style="text-align: center"><strong>Monthly Expenses</strong>
</td>
</tr>
<tr>
<td valign="top"> </td>
<td> </td>
</tr>
<tr>
<td width="47%" valign="top">Telephone & Internet</td>
<td width="53%">
<input name="phone" id="phone" type="text" onchange="calc
()" />
</td>
</tr>
<tr>
<td valign="top">Energy</td>
<td>
<input name="energy" id="energy" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Cell Phone</td>
<td>
<input name="cell" id="cell" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Office Supplies</td>
<td>
<input name="office" id="office" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Merchant Card Fees</td>
<td>
<input name="card" id="card" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Waste Removal</td>
<td>
<input name="waste" id="waste" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td height="31" valign="top">3rd Party Payroll Fees</td>
<td>
<input name="payroll" id="payroll" type="text" onchange="calc
()" />
</td>
</tr>
<tr>
</tr>
</table>
<p> </p>
<div align="center">
<table width="33%" border="0">
<tr>
<td width="54%" height="31" valign="top"><strong>Estimated Annual
Savings:</strong>
</td>
<td width="46%">
<textarea name="cost" rows="1" id="cost" readonly style="overflow:hidden" input type="number"></textarea>
</td>
</tr>
Currently, your inputs are set up to call calc() whenever their onchange event is fired. This happens whenever the value is changed and the input is blurred (no longer in focus).
Remove the onchange="calc()" attribute on all your inputs, and add a button whever it makes sense to on your page with onclick="calc()":
<button onclick="calc()">Calculate</button>
Place button with Javascript event outside form
<button onclick="calc();">Calculate</button>
Delete all onchange="calc()" and add this html code to your page, that's it.
<button onclick="calc()">Calculate Expenses</button>
Remove the call to onchange="calc()" from all.
Put <div align="center">
<table width="33%" border="0">
<tr>
<td align="Center">
<input type="button" value="Click To Calculate" onclick="calc()" />
</td>
</tr>
</div>

getting some tr values dynamically with jquery and passe them with ajax to php

I want to pass some td values to ajax call when pressing the button "Delete"
How can I do that with jquery?
<table>
<tr>
<td class="datao">first column</td>
<td class="data1">first column</td>
<td class="data2">first column</td>
<td colspan="2"></td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
</table>
UPDATE:
Supposing that I want to grab the value of input type=text inside of the 's.
HTML Example:
<table>
<tr>
<td class="datao">
<select class="someclass">
<option value="asdsa">somevalue</option>
</select>
</td>
<td class="datao">
<input type="text" value="eqw" />
</td>
<td class="datao">
<input type="text" value="gfg" />
</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">
<select class="someclass">
<option value="wq">somevalue</option>
</select>
</td>
<td class="datao">
<input type="text" value="hfd" />
</td>
<td class="datao">
<input type="text" value="vcv" />
</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">
<select class="someclass">
<option value="cva">somevalue</option>
</select>
</td>
<td class="datao">
<input type="text" value="ewd" />
</td>
<td class="datao">
<input type="text" value="asad" />
</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
</table>
jquery's code:
Let's say I want to grab select's value each row of data...
$('input.deleteRow').live('click', function() {
var values = [];
$(this).closest('tr').find("select").each(function() {
values.push($(this).attr('value'));
});
//Confirm
//the ok stores true or false returned by confirm!
var ok = confirm("Are you sure...?");
//testing for true
if(ok){
$.post("phpscript.php", { someName:values[0] }, function(data) {
if(data == '1'){
alert("something");
location.reload();
}
else
alert("something else, error probably");
});
}
});
If you want to grab select and input type="text" just need to do: ...find("select, input[type=text]")...
This is my contribute to the community.
Anyway, I would like to find an elegant way of sending the data to the php script give a hand on it.
May use http://www.datatables.net/ - much easier than program all by your self?
You will want to attach an event handler to each of the input buttons that will go to the button's parent (<td>) and then go to that node's siblings (the other <td>s). For each of these you will get the inner HTML for the respective <td> and then figure out some way to pair these all together (delimited string maybe?)
$('input.deleteRow').live('click', function() {
var returnString = '';
$(this).parent().siblings().each(function() {
returnString += $(this).html();
});
$.ajax({
url: 'somephpurlhere.php',
data: returnString
}).success(function() {
//dosomething
}).fail(function() {
//dosomethingelse
});
});
You will need to modify the .ajax call to suit your needs as you haven't expressed how you are handling responses, etc.
If you want to check if a given DOM element contains a td or an input then you could replace the .each functionality as follows:
$(this).parent().siblings().each(function() {
if ($(this).find('td').length > 0)
resultString += $(this).find('td').html();
else if ($(this).find('input').length > 0)
resultString += $(this).find('input').val();
else
resultString += $(this).html();
});

Categories

Resources