Skip to content

Commit

Permalink
Merge pull request #231 from Tusar7684/main
Browse files Browse the repository at this point in the history 
issue #115 resolved
  • Loading branch information
@IshitaSatpathy
IshitaSatpathy authored Oct 18, 2022
2 parents ee281d4 + 59e357a commit 8c8137e
Show file tree
Hide file tree
Showing 3 changed files with 444 additions and 0 deletions.
123 changes: 123 additions & 0 deletions Tusar Payment Gateway/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment gateway</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='container'>
<div class='window'>
<div class='order-info'>
<div class='order-info-content'>
<h2>Order Summary</h2>
<div class='line'></div>
<table class='order-table'>
<tbody>
<tr>
<td><img src='https://dl.dropboxusercontent.com/s/sim84r2xfedj99n/%24_32.JPG' class='full-width'></img>
</td>
<td>
<br> <span class='thin'>Nike</span>
<br> Free Run 3.0 Women<br> <span class='thin small'> Color: Grey/Orange, Size: 10.5<br><br></span>
</td>

</tr>
<tr>
<td>
<div class='price'>$99.95</div>
</td>
</tr>
</tbody>

</table>
<div class='line'></div>
<table class='order-table'>
<tbody>
<tr>
<td><img src='https://dl.dropboxusercontent.com/s/qbj9tsbvthqq72c/Vintage-20L-Backpack-by-Fj%C3%A4llr%C3%A4ven.jpg' class='full-width'></img>
</td>
<td>
<br> <span class='thin'>Fjällräven</span>
<br>Vintage Backpack<br> <span class='thin small'> Color: Olive, Size: 20L</span>
</td>
</tr>
<tr>
<td>
<div class='price'>$235.95</div>
</td>
</tr>
</tbody>
</table>
<div class='line'></div>
<table class='order-table'>
<tbody>
<tr>
<td><img src='https://dl.dropboxusercontent.com/s/nbr4koso8dpoggs/6136C1p5FjL._SL1500_.jpg' class='full-width'></img>
</td>
<td>
<br> <span class='thin'>Monobento</span>
<br>Double Lunchbox<br> <span class='thin small'> Color: Pink, Size: Medium</span>
</td>

</tr>
<tr>
<td>
<div class='price'>$25.95</div>
</td>
</tr>
</tbody>
</table>
<div class='line'></div>
<div class='total'>
<span style='float:left;'>
<div class='thin dense'>VAT 19%</div>
<div class='thin dense'>Delivery</div>
TOTAL
</span>
<span style='float:right; text-align:right;'>
<div class='thin dense'>$68.75</div>
<div class='thin dense'>$4.95</div>
$435.55
</span>
</div>
</div>
</div>
<div class='credit-info'>
<div class='credit-info-content'>
<table class='half-input-table'>
<tr><td>Please select your card: </td><td><div class='dropdown' id='card-dropdown'><div class='dropdown-btn' id='current-card'>Visa</div>
<div class='dropdown-select'>
<ul>
<li>Master Card</li>
<li>American Express</li>
</ul></div>
</div>
</td></tr>
</table>
<img src='https://dl.dropboxusercontent.com/s/ubamyu6mzov5c80/visa_logo%20%281%29.png' height='80' class='credit-card-image' id='credit-card-image'></img>
Card Number
<input class='input-field'></input>
Card Holder
<input class='input-field'></input>
<table class='half-input-table'>
<tr>
<td> Expires
<input class='input-field'></input>
</td>
<td>CVC
<input class='input-field'></input>
</td>
</tr>
</table>
<button class='pay-btn'>Checkout</button>

</div>

</div>
</div>
</div>
</body>
</html>
44 changes: 44 additions & 0 deletions Tusar Payment Gateway/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
var cardDrop = document.getElementById('card-dropdown');
var activeDropdown;
cardDrop.addEventListener('click',function(){
var node;
for (var i = 0; i < this.childNodes.length-1; i++)
node = this.childNodes[i];
if (node.className === 'dropdown-select') {
node.classList.add('visible');
activeDropdown = node;
};
})

window.onclick = function(e) {
console.log(e.target.tagName)
console.log('dropdown');
console.log(activeDropdown)
if (e.target.tagName === 'LI' && activeDropdown){
if (e.target.innerHTML === 'Master Card') {
document.getElementById('credit-card-image').src = 'https://dl.dropboxusercontent.com/s/2vbqk5lcpi7hjoc/MasterCard_Logo.svg.png';
activeDropdown.classList.remove('visible');
activeDropdown = null;
e.target.innerHTML = document.getElementById('current-card').innerHTML;
document.getElementById('current-card').innerHTML = 'Master Card';
}
else if (e.target.innerHTML === 'American Express') {
document.getElementById('credit-card-image').src = 'https://dl.dropboxusercontent.com/s/f5hyn6u05ktql8d/amex-icon-6902.png';
activeDropdown.classList.remove('visible');
activeDropdown = null;
e.target.innerHTML = document.getElementById('current-card').innerHTML;
document.getElementById('current-card').innerHTML = 'American Express';
}
else if (e.target.innerHTML === 'Visa') {
document.getElementById('credit-card-image').src = 'https://dl.dropboxusercontent.com/s/ubamyu6mzov5c80/visa_logo%20%281%29.png';
activeDropdown.classList.remove('visible');
activeDropdown = null;
e.target.innerHTML = document.getElementById('current-card').innerHTML;
document.getElementById('current-card').innerHTML = 'Visa';
}
}
else if (e.target.className !== 'dropdown-btn' && activeDropdown) {
activeDropdown.classList.remove('visible');
activeDropdown = null;
}
}
Loading

0 comments on commit 8c8137e

Please sign in to comment.