Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit aa510f8

Browse files
DOM manipulation example
1 parent 6405709 commit aa510f8

File tree

2 files changed

+157
-0
lines changed

2 files changed

+157
-0
lines changed

‎DOM Maniulation Example.html‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<title>Assignment</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
8+
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
9+
<style>
10+
.calculate-balance{
11+
display: flex;
12+
justify-content: center;
13+
}
14+
button{
15+
color: black;
16+
/* background-color: white; */
17+
font-family: 'Times New Roman', Times, serif;
18+
padding: 5px;
19+
border-radius: 5px;
20+
}
21+
.transactions{
22+
height: 100px;
23+
overflow: auto;
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<div class="container">
30+
<div class="row">
31+
<div class="col-6">
32+
<label for="intialBalanceH"> Harsha's Initial Balance</label>
33+
<input type="text" readonly value="100 USD" name="balanceH" id="intialBalanceH">
34+
</div>
35+
<div class="col-6">
36+
<label for="intialBalanceS"> Scott's Initial Balance</label>
37+
<input type="text" readonly value="200 USD" name="balanceS" id="intialBalanceS">
38+
</div>
39+
</div>
40+
<div style="margin : 10px 0px;padding: 20px 0px; border: 2px solid black;">
41+
<h4>Add Transaction</h4>
42+
<form class="needs-validation" novalidate="novalidate">
43+
<div class="row" style="padding:20px 0px;">
44+
<div class="col-4" >
45+
<label for="">From:</label>
46+
<select id="fromAcc" style="width: 80%;">
47+
<option value="" selected>Select one</option>
48+
<option value="Harsha">Harsha</option>
49+
<option value="Scott">Scott</option>
50+
</select>
51+
</div>
52+
<div class="col-4">
53+
<label for="">To:</label>
54+
<select id="toAcc" style="width: 80%;">
55+
<option value="" selected>Select one</option>
56+
<option value="Harsha">Harsha</option>
57+
<option value="Scott">Scott</option>
58+
</select>
59+
</div>
60+
<div class="col-4">
61+
<label for="amount"> Amount</label>
62+
<input type="number" name="balanceH" id="amount">
63+
</div>
64+
</div>
65+
<button type="button" id="addAmount">Add</button>
66+
</form>
67+
</div>
68+
<div id="transactions" class="transactions">
69+
</div>
70+
<div class="calculate-balance">
71+
<button type="button" id="currentBalance">Calculate Balances</button>
72+
</div>
73+
<div class="row">
74+
<div class="col-6">
75+
<label for="currentBalanceH"> Harsha's Current Balance</label>
76+
<input type="text" readonly name="currBalanceH" id="currentBalanceH">
77+
</div>
78+
<div class="col-6">
79+
<label for="currentBalanceS"> Scott's Current Balance</label>
80+
<input type="text" readonly name="currBalanceS" id="currentBalanceS">
81+
</div>
82+
</div>
83+
</div>
84+
<!-- js file loaded -->
85+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
86+
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
87+
crossorigin="anonymous"></script>
88+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
89+
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
90+
crossorigin="anonymous"></script>
91+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
92+
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
93+
crossorigin="anonymous"></script>
94+
95+
<script>
96+
let transactions=[];
97+
iterator=0;
98+
document.getElementById("addAmount").addEventListener("click",function (event) {
99+
let fromAccountValue=document.getElementById("fromAcc").value;
100+
let toAccountValue = document.getElementById("toAcc").value;
101+
let amount=document.getElementById("amount").value;
102+
if(amount==="" || amount<0 || amount>10000){
103+
alert("Amount can't be negative or zero and it should be less than 10000");
104+
return;
105+
}
106+
if(fromAccountValue=="" || toAccountValue==""){
107+
alert("Please Choose both From Account and To Account");
108+
return;
109+
}
110+
if(fromAccountValue==toAccountValue){
111+
alert("Amount can't transfer to same account");
112+
return;
113+
}
114+
transactions.push(
115+
{
116+
"from":fromAccountValue,
117+
"to":toAccountValue,
118+
"amount":amount,
119+
}
120+
)
121+
console.log(transactions);
122+
let divv=document.getElementById("transactions");
123+
let para=document.createElement("p");
124+
para.innerHTML=`Amount ${transactions[iterator].amount} is Transfer from ${transactions[iterator].from}'s account to ${transactions[iterator].to}'s.`;
125+
iterator++;
126+
divv.appendChild(para);
127+
});
128+
129+
document.getElementById("currentBalance").addEventListener("click",function (events) {
130+
var harshaCurrentBalance=100;
131+
var scottCurrentBalance=200;
132+
for(let i=0;i<transactions.length;i++){
133+
if(transactions[i].from=="Harsha"){
134+
harshaCurrentBalance-=(+transactions[i].amount);
135+
scottCurrentBalance+=(+transactions[i].amount);
136+
}else{
137+
harshaCurrentBalance+=(+transactions[i].amount);
138+
scottCurrentBalance-=(+transactions[i].amount);
139+
}
140+
}
141+
document.getElementById("currentBalanceH").value=`${harshaCurrentBalance} USD`;
142+
document.getElementById("currentBalanceS").value=`${scottCurrentBalance} USD`;
143+
});
144+
</script>
145+
</body>
146+
147+
</html>

‎reverse.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
var input = "deltax";
2+
console.log(reverseString(input));
3+
function reverseString(str) {
4+
var n=str.length;
5+
var result="";
6+
for(let i=n-1;i>=0;i--){
7+
result+=str[i];
8+
}
9+
return result;
10+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /