Skip to content

Instantly share code, notes, and snippets.

@byron-perez

byron-perez/Solution2 javascript course

Created June 11, 2019 05:26
Show Gist options
  • Save byron-perez/296b938517d6925dca353eaac9f87b0b to your computer and use it in GitHub Desktop.
Save byron-perez/296b938517d6925dca353eaac9f87b0b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Solution2 javascript course
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="library.js"></script>
</head>
<body>
<div>
<h3>Search Product by Type</h3>
<input id="inputType">
<button id="inputButtonType" >Search Product</button>
</div>
<div>
<h3>Search Product by Price</h3>
<input id="inputPrice">
<button id="inputButtonPrice" >Search Product</button>
</div>
<div>
<h3>Search Product by Id</h3>
<input id="inputId">
<button id="inputButtonId">Search Product</button>
</div>
<div >
<h3>Examined Product</h3>
<p id="productText">Product Id: <br>Price: <br>Type: </p>
<h3>List of Similar Products</h3>
<table id="similarTable" width="300px" border="1" >
<tr>
<th>ProductId</th>
<th>Type</th>
<th>Price</th>
<th>Examine</th>
</tr>
</table>
</div>
<div >
<h3>List of All Products</h3>
<table id="allTable" width="300px" border="1" >
<tr>
<th>ProductId</th>
<th>Type</th>
<th>Price</th>
<th>Examine</th>
</tr>
</table>
</div>
<script src="productCatalog.js"></script>
</body>
</html>
-----------------------------------------------------------------------------------------------
productCatalog.js
function createTableHeader(tableId){
var tableHeaderRow = document.createElement('TR');
var th1 = document.createElement('TH');
var th2 = document.createElement('TH');
var th3 = document.createElement('TH');
var th4 = document.createElement('TH');
th1.appendChild(document.createTextNode("ProductId"));
th2.appendChild(document.createTextNode("Type"));
th3.appendChild(document.createTextNode("Price"));
th4.appendChild(document.createTextNode("Examine"));
tableHeaderRow.appendChild(th1);
tableHeaderRow.appendChild(th2);
tableHeaderRow.appendChild(th3);
tableHeaderRow.appendChild(th4);
document.getElementById(tableId).appendChild(tableHeaderRow);
}
function updateTable(tableId,productArray){
var tableBody = document.getElementById(tableId);
//reset table
while (tableBody.hasChildNodes()) {
tableBody.removeChild(tableBody.firstChild);
}
//create table header
createTableHeader(tableId);
//populate table rows
for (i = 0; i < productArray.length; i++) {
var tr = document.createElement('TR');
var td1 = document.createElement('TD');
var td2 = document.createElement('TD');
var td3 = document.createElement('TD');
var td4 = document.createElement('button');
td4.addEventListener('click',function(){
processSearchById(this.parentNode.firstChild.innerHTML);
});
td1.appendChild(document.createTextNode(productArray[i].id));
td2.appendChild(document.createTextNode(productArray[i].type));
td3.appendChild(document.createTextNode(productArray[i].price));
td4.appendChild(document.createTextNode("Examine"));
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tableBody.appendChild(tr);
}
}
api.searchAllProducts().then(function(value){
updateTable('allTable',value);
});
function updateExaminedText(product){
var outputString = "Product Id: " + product.id;
outputString += "<br> Price: " + product.price;
outputString += "<br> Type: " + product.type;
document.getElementById("productText").innerHTML = outputString;
}
function getIntersection(arrA,arrB,searchedId){
var samePrice = arrA;
var sameType = arrB;
var similarArray = [];
samePrice.forEach(function(obj1){
sameType.forEach(function(obj2){
if(obj1.id == obj2.id && obj1.id != searchedId)
similarArray.push(obj1);
});
});
return similarArray;
}
function processSearchById(searchId){
api.searchProductById(searchId).then(function(val){
return Promise.all([api.searchProductsByPrice(val.price,50),api.searchProductsByType(val.type),val]);
}).then(function(val){
var similarArray = getIntersection(val[0],val[1],val[2].id);
updateExaminedText(val[2]);
updateTable('similarTable',similarArray);
}).catch(function(val){
alert(val);
});
}
function processSearchByType(type){
api.searchProductsByType(type).then(function(val){
updateTable('similarTable', val);
}).catch(function(val){
alert(val);
});
}
function processSearchByPrice(price){
api.searchProductsByPrice(price, 10).then(function(val){
updateTable('similarTable', val);
}).catch(function(val){
alert(val);
});
}
document.getElementById("inputButtonId").addEventListener('click',function(){
processSearchById(document.getElementById('inputId').value);
});
document.getElementById("inputButtonType").addEventListener('click',function(){
processSearchByType(document.getElementById('inputType').value);
});
document.getElementById("inputButtonPrice").addEventListener('click',function(){
processSearchByPrice(document.getElementById('inputPrice').value);
});
--------------------------------------------------------------------------------------
library.js
(function(window){
function myLibrary(){
//execute code here
var catalog = createRandomCatalog(100);
return {
searchProductById: searchProductById,
searchProductsByPrice: searchProductsByPrice,
searchProductsByType: searchProductsByType,
searchAllProducts: searchAllProducts
};
//function definitions go here
function createRandomProduct(){
var typeArray = ['Electronics','Book','Clothing','Food'];
var price = (Math.random()*500).toFixed(2);
var type = typeArray[Math.floor(Math.random()*4)];
return {price:price, type:type};
}
function createRandomCatalog(num){
var catalog = [];
for (var i = 0; i < num; i++){
var obj = createRandomProduct();
catalog.push({id:i,price:obj.price,type:obj.type});
}
return catalog;
}
function searchAllProducts(){
var promise = new Promise(function(resolve, reject) {
setTimeout(function(){
resolve(catalog);
},1000);
});
return promise;
}
function searchProductById(id){
var promise = new Promise(function(resolve,reject){
var i = 0;
setTimeout(function(){
while (i < catalog.length){
if (catalog[i].id == id){
resolve({id:id,price:catalog[i].price,type:catalog[i].type});
}
i++;
}
reject("Invalid ID: " + id);
},1000);
});
return promise;
}
function searchProductsByPrice(price,difference){
var promise = new Promise(function(resolve,reject){
var i = 0;
var priceArray = [];
if(!isFinite(price)){
reject("Invalid Price: " + price);
}
else{
setTimeout(function(){
while (i < catalog.length){
if (Math.abs(catalog[i].price - price) < difference){
priceArray.push({id:catalog[i].id,price:catalog[i].price,type:catalog[i].type});
}
i++;
}
resolve(priceArray);
},1000);
}
});
return promise;
}
function searchProductsByType(type){
var promise = new Promise(function(resolve,reject){
var i = 0;
var typeArray = [];
var possibleTypes = ['Electronics','Book','Clothing','Food'];
if(!possibleTypes.includes(type)){
reject("Invalid Type: " + type);
}
else{
setTimeout(function(){
while (i < catalog.length){
if (catalog[i].type == type){
typeArray.push({id:catalog[i].id,price:catalog[i].price,type:catalog[i].type});
}
i++;
}
resolve(typeArray);
},1000);
}
});
return promise;
}
}
if(typeof(window.api) === 'undefined'){
window.api = myLibrary();
}
})(window);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment