Last active
May 9, 2020 18:28
-
-
Save alissoncs/7c351d65cb5d16b2a7726dbb3c71aee8 to your computer and use it in GitHub Desktop.
Legacy Javascript DOM Oriented
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
| 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)); | |
| } |
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
| 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); | |
| } | |
| } |
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 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> |
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
| 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, | |
| }, | |
| ] |
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
| 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 () { | |
| }); | |
| } |
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
| 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