Skip to content

Instantly share code, notes, and snippets.

@alissoncs

alissoncs/Application.js

Last active May 9, 2020 18:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alissoncs/7c351d65cb5d16b2a7726dbb3c71aee8 to your computer and use it in GitHub Desktop.
Save alissoncs/7c351d65cb5d16b2a7726dbb3c71aee8 to your computer and use it in GitHub Desktop.
Download ZIP
Legacy Javascript DOM Oriented
Raw
addAwardToCart.js
function addAwardToCart(award) {
var div = document.createElement('div');
div.id = 'cart-item-' + award.id;
if (document.getElementById(div.id)) {
return;
}
div.appendChild(document.createTextNode('Added: ' + award.name + ', Price: $' + award.price));
var button = document.createElement('button');
button.innerHTML = 'Remove';
div.appendChild(button);
document.getElementById('cart-list').appendChild(div);
total = total + award.price;
updateTotal();
button.addEventListener('click', function (award, button, div) {
document.getElementById('award-' + award.id + '-button').innerHTML = 'Buy Tickets'
div.parentNode.removeChild(div);
total = total - award.price;
updateTotal();
}.bind(null, award, button, div));
}
Raw
Application.js
var Application = {
listAllAwards: function (success, err) {
console.info('ListAll Awards');
return http.Connection('/Awards', {}, function () {
return success(mockAwardsList);
}, err);
},
BuyTicket: function (awardId, success, err) {
return http.Connection('/BuyTicket', {
awardId: awardId,
}, success, err);
}
}
Raw
legacy.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
Awards List
</h1>
<div id='awards-list'>
Loading...
</div>
<h2>
My cart
</h2>
<div id='cart-list'>
<h3>Total: <span id='total'></span></h3>
</div>
<button id='finish-payment'>
Pay
</button>
<script type="text/javascript">
var mockAwardsList = [
{
id: 1,
name: 'The Game Awards 2019',
price: 199,
},
{
id: 2,
name: 'New York Game Awards ',
price: 99,
},
{
id: 3,
name: 'NAVGTR Awards',
price: 1000,
},
{
id: 4,
name: 'Game Critics Awards',
price: 1299,
},
]
var http = {
Connection: function (url, data, success, err) {
setTimeout(function () {
success();
}, 3);
}
}
var Application = {
listAllAwards: function (success, err) {
console.info('ListAll Awards');
return http.Connection('/Awards', {}, function () {
return success(mockAwardsList);
}, err);
},
BuyTicket: function (awardId, success, err) {
return http.Connection('/BuyTicket', {
awardId: awardId,
}, success, err);
}
}
var total = 0;
function updateTotal() {
document.getElementById('total').innerHTML = total;
}
function addAwardToCart(award) {
var div = document.createElement('div');
div.id = 'cart-item-' + award.id;
if (document.getElementById(div.id)) {
return;
}
div.appendChild(document.createTextNode('Added: ' + award.name + ', Price: $' + award.price));
var button = document.createElement('button');
button.innerHTML = 'Remove';
div.appendChild(button);
document.getElementById('cart-list').appendChild(div);
total = total + award.price;
updateTotal();
button.addEventListener('click', function (award, button, div) {
document.getElementById('award-' + award.id + '-button').innerHTML = 'Buy Tickets'
div.parentNode.removeChild(div);
total = total - award.price;
updateTotal();
}.bind(null, award, button, div));
}
window.onload = function () {
Application.listAllAwards(function (awards) {
console.log(awards);
document.getElementById('awards-list').innerHTML = '';
for (var i in awards) {
var award = awards[i];
var div = document.createElement('div');
div.id = 'award-' + award.id;
var text = 'Name: ' + award.name + ', Price: $' + award.price;
div.appendChild(document.createTextNode(text));
var button = document.createElement('button');
button.innerHTML = 'Buy Tickets';
button.id = 'award-' + award.id + '-button';
button.addEventListener('click', function (award, button) {
button.innerHTML = 'Checking...';
Application.BuyTicket(awards[i].id, function () {
button.innerHTML = 'Added';
addAwardToCart(award);
});
}.bind(null, award, button));
div.appendChild(button);
document.getElementById('awards-list').appendChild(div);
}
}, function () {
});
}
</script>
</body>
</html>
Raw
mockAwardsList.js
var mockAwardsList = [
{
id: 1,
name: 'The Game Awards 2019',
price: 199,
},
{
id: 2,
name: 'New York Game Awards ',
price: 99,
},
{
id: 3,
name: 'NAVGTR Awards',
price: 1000,
},
{
id: 4,
name: 'Game Critics Awards',
price: 1299,
},
]
Raw
onload.js
window.onload = function () {
Application.listAllAwards(function (awards) {
console.log(awards);
document.getElementById('awards-list').innerHTML = '';
for (var i in awards) {
var award = awards[i];
var div = document.createElement('div');
div.id = 'award-' + award.id;
var text = 'Name: ' + award.name + ', Price: $' + award.price;
div.appendChild(document.createTextNode(text));
var button = document.createElement('button');
button.innerHTML = 'Buy Tickets';
button.id = 'award-' + award.id + '-button';
button.addEventListener('click', function (award, button) {
button.innerHTML = 'Checking...';
Application.BuyTicket(awards[i].id, function () {
button.innerHTML = 'Added';
addAwardToCart(award);
});
}.bind(null, award, button));
div.appendChild(button);
document.getElementById('awards-list').appendChild(div);
}
}, function () {
});
}
Raw
updateTotal.js
var total = 0;
function updateTotal() {
document.getElementById('total').innerHTML = total;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment