Skip to content

Commit

Permalink
Merge pull request #38 from FACK1/update
Browse files Browse the repository at this point in the history 
Update
  • Loading branch information
@RazanTayyem
RazanTayyem authored Nov 29, 2018
2 parents 3bce0ca + 0ea2242 commit 9b9fd91
Show file tree
Hide file tree
Showing 10 changed files with 460 additions and 667 deletions.
72 changes: 36 additions & 36 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
{
"name": "beauty",
"version": "1.0.0",
"description": "Beauty : An application to show all Makeup products to users, allows users to search any products they want and display its information",
"main": "index.js",
"scripts": {
"test": "tape ./src/test.js | tap-spec",
"lint": "eslint src/handler.js",
"lint:fix": "npm run lint -- --fix",
"nodemon": "nodemon src/server.js",
"start": "node src/server.js",
"istanbul": "istanbul cover tape ./src/test.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/FACK1/Beauty.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/FACK1/Beauty/issues"
},
"homepage": "https://github.com/FACK1/Beauty#readme",
"dependencies": {
"dotenv": "^6.1.0",
"nodemon": "^1.18.6",
"request": "^2.88.0",
"supertest": "^3.3.0",
"tap-spec": "^5.0.0",
"tape": "^4.9.1"
},
"devDependencies": {
"eslint": "^5.9.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.14.0",
"istanbul": "^0.4.5"
}
"name": "beauty",
"version": "1.0.0",
"description": "Beauty : An application to show all Makeup products to users, allows users to search any products they want and display its information",
"main": "index.js",
"scripts": {
"test": "tape ./src/test.js | tap-spec",
"lint": "eslint src/*.js",
"lint:fix": "npm run lint -- --fix",
"nodemon": "nodemon src/server.js",
"start": "node src/server.js",
"istanbul": "istanbul cover tape ./src/test.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/FACK1/Beauty.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/FACK1/Beauty/issues"
},
"homepage": "https://github.com/FACK1/Beauty#readme",
"dependencies": {
"dotenv": "^6.1.0",
"nodemon": "^1.18.6",
"request": "^2.88.0",
"supertest": "^3.3.0",
"tap-spec": "^5.0.0",
"tape": "^4.9.1"
},
"devDependencies": {
"eslint": "^5.9.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-import": "^2.14.0",
"istanbul": "^0.4.5"
}
}
98 changes: 22 additions & 76 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,27 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Raleway|Tangerine" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>

<h1 class="title-hd">Beauty Cosmetics</h1>
<h2 class="sub-title-hd">Find your favorite beauty products!</h2>
<img src="./assets/beauty.png" class="beauty-img" alt="logo">
<div class="form-div">
<!-- <form action="/search/" method="get"> -->
<label for="search-bar"></label>
<input name = "makeup" value = "" id="search-bar" type="text" placeholder ="Enter a beauty product..." class="input-field" required>
<button name = "value" class="go-button" id="btn-search" type="submit">Go!</button>

<!-- </form> -->
</div>
</header>


<!-- <section class="container"> -->
<h1 class="search-hd">Search results will be here!</h1>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Raleway|Tangerine" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 class="title-hd">Beauty Cosmetics</h1>
<h2 class="sub-title-hd">Find your favorite beauty products!</h2>
<img src="./assets/beauty.png" class="beauty-img" alt="logo">
<div class="form-div">
<label for="search-bar"></label>
<input name = "makeup" value = "" id="search-bar" type="text" placeholder ="Enter a beauty product..." class="input-field" required>
<button name = "value" class="go-button" id="btn-search" type="submit">Go!</button>
</header>
<!-- <h1 class="search-hd">Search results will be here!</h1> -->
<div class="container" id = "test">

</div>

<!-- <div class="container-div">
<h1 class="div-hd1">Brand</h1>
<h2 class="div-hd2">Name<h2>
<img src="./assets/sample.jpeg" class="product-img">
<h5 class="div-hd5">Price</h5>
</div>
<div class="container-div">
<h1 class="div-hd1">Brand</h1>
<h2 class="div-hd2">Name<h2>
<img src="./assets/sample.jpeg" class="product-img">
<h5 class="div-hd5">Price</h5>
</div>
<div class="container-div">
<h1 class="div-hd1">Brand</h1>
<h2 class="div-hd2">Name<h2>
<img src="./assets/sample.jpeg" class="product-img">
<h5 class="div-hd5">Price</h5>
</div>
<div class="container-div">
<h1 class="div-hd1">Brand</h1>
<h2 class="div-hd2">Name<h2>
<img src="./assets/sample.jpeg" class="product-img">
<h5 class="div-hd5">Price</h5>
</div>
<div class="container-div">
<h1 class="div-hd1">Brand</h1>
<h2 class="div-hd2">Name<h2>
<img src="./assets/sample.jpeg" class="product-img">
<h5 class="div-hd5">Price</h5>
</div>
<div class="container-div">
<h1 class="div-hd1">Brand</h1>
<h2 class="div-hd2">Name<h2>
<img src="./assets/sample.jpeg" class="product-img">
<h5 class="div-hd5">Price</h5>
</div> -->

<!-- </<section> -->

<footer></footer>
</section>
<script type="text/javascript" src="/main.js"></script>
</body>
<footer></footer>
</section>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
188 changes: 66 additions & 122 deletions public/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,144 +1,88 @@
function search() {
var inp = document.getElementById("search-bar");
var btn_search = document.getElementById('btn-search');
var products = document.createElement('div');
var container = document.getElementById('container');
var mydiv = document.getElementById("test");

function search() {
btn_search.addEventListener("click", function (e) {
// removeList();

var makeupIndex = inp.value;
console.log('dddd',makeupIndex);
removeProducts();

var makeupIndex = inp.value;

if (makeupIndex === "") {

alert("Type Something!");
} else {

makeupIndex = searchCases(makeupIndex);

if (makeupIndex) {
fetch('/search/' + makeupIndex)
.then(function (response) {
return response.json();
})
.then(function (data) {

if (data.length <= 0) {
alert("Sorry, No Match Found");
//clear search box
inp.value = '';
} else {
viewProducts(data);
}

// container.replaceChild(todoListNode, container.firstChild);

for (var i = 0; i < data.length; i++) {
// var images = String(data[i].image_link))
// console.log(images);
//

// var createresult = function (data) {
// //start add product:
// var test = document.createElement('DIV')
// test.setAttribute("class", "me");
// mydiv.appendChild(test);

var product = document.createElement('div');
product.setAttribute('class', 'container-div');
mydiv.appendChild(product);
var brand = document.createElement('h1');
brand.setAttribute('class', 'div-hd1');
brand.innerText = data[i].brand;
var name = document.createElement('h2');
name.setAttribute('class', 'div-hd2');
name.innerText = data[i].name;
var image = document.createElement('IMG');
image.setAttribute('class', 'product-img');
image.src = data[i].image;
var price = document.createElement('h5');
price.setAttribute('class', 'div-hd5');
price.innerText = data[i].price + data[i].currency;
product.appendChild(brand);
product.appendChild(name);
product.appendChild(image);
product.appendChild(price);
};









//end
}).catch(function (err) {
return console.log(err)
})

}
})
}

// function viewList(array) {
// var container = document.getElementById("autocomplete");
// //removeList();
// document.getElementById("autocomplete").innerHTML="";
// // container.setAttribute("id", "autocomplete-list");
// inp.parentNode.appendChild(container);
// console.log(array.length);
// for (i = 0; i < array.length; i++) {
// var item = document.createElement("option");
// item.setAttribute("class", "autoComplete-item");
// item.innerHTML = array[i];
// container.appendChild(item);
// }
// }
//
// function removeList() {
// if (document.getElementById("autocomplete")) {
// var list = document.getElementById("autocomplete");
// while(list.firstChild){
// list.firstChild.remove();
// }
// }
// }
function viewProducts(array) {

array.map(element => {

var product = document.createElement('div');
product.setAttribute('class', 'container-div');
mydiv.appendChild(product);
var brand = document.createElement('h1');
brand.setAttribute('class', 'div-hd1');
brand.innerText = element.brand;
var name = document.createElement('h2');
name.setAttribute('class', 'div-hd2');
name.innerText = element.name;
var image = document.createElement('IMG');
image.setAttribute('class', 'product-img');
image.src = element.image;
image.alt = "product image"
var price = document.createElement('h5');
price.setAttribute('class', 'div-hd5');
price.innerText = element.price + element.currency;
product.appendChild(brand);
product.appendChild(name);
product.appendChild(image);
product.appendChild(price);
});
//clear search box
inp.value = '';
}

function removeProducts() {
if (mydiv) {
while (mydiv.firstChild) {
mydiv.firstChild.remove();
}
}
}

function searchCases(value) {
//----- making some miss typing cases work
//first case
if (value === "lipliner" || value === "lip liner") {
value = "lip_liner";
}
//other cases ... need to work on..
return value;
}

search();

//end
// product.setAttribute('class', 'products');
// btn_search.addEventListener("click", searchproduct);
//
// function searchproduct() {
// //var productName = search_bar.value;
// var data = []
// const result = () => {
// url = '/search/' + search_bar.value;
// console.log(url)
// return fetch(url)
// .then((response) => {
// if (response.status == 200) {
// return response.json();
// } else {
// alert('Connection Error , status Code : ' + response.status);
// }
// })
// .then((data) => {
// for (var i = 0; i < data.length; i++) {
//
// var createresult = function (data) {
// //start add product:
// var product = document.createElement('div');
// product.setAttribute('class', 'product');
// var brand = document.createElement('h1');
// brand.setAttribute('class', 'div-hd1');
// brand.innerText = data[i].brand;
// var name = document.createElement('h2');
// name.setAttribute('class', 'div-hd2');
// name.innerText = data[i].name;
// var image = document.createElement('img');
// image.setAttribute('class', 'product-img');
// image.src = data[i].image_link;
// var price = document.createElement('h5');
// price.setAttribute('class', 'div-hd5');
// price.innerText = data[i].price + data[i].price_sign;
// product.appendChild(brand);
// product.appendChild(name);
// product.appendChild(image);
// product.appendChild(price);
// products.appendChild(product);
// };
// });
// };
// };
// //formProduct.reset();
// };
Loading

0 comments on commit 9b9fd91

Please sign in to comment.