janusnic · April 8, 2017 15:33
diff --git a/test.html b/test.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cart</title>
 </head>

 <body>
              <ul class="sub-menu">

              </ul>

 	<main>

 		<h1>My SHOP</h1>

 		<section class="thumbnail-grid flex">
 			
    </section>
 	</main>


 <script>
 var data = [{

    id: 0,
    name: 'Product 0',
    price: 177,
    carousel: [1,2,3]
 },
 {

    id: 1,
    name: 'Product 1',
    price: 77,
    carousel: [2,3,4]
 },
 {

    id: 2,
    name: 'Product 2',
    price: 88,
    carousel: [3,4,5]
 },
 {
  id: 3,
  name: 'Product 3',
  price: 277,
  carousel: [6,7,8]
 }];


 //var ind = 1;


 var a = document.createElement('a');
 var div = document.createElement('div');
 var img = document.createElement('img');
 var input = document.createElement('input');


 function createItem(ind){
 var a0 = a.cloneNode(true);
 a0.setAttribute('href',"#!");
 a0.setAttribute('class',"flex-item");

 var div1 = div.cloneNode(true);
 div1.setAttribute('class',"carousel");


 for(var i=0; i<data[ind].carousel.length;i++){
    var img1 = img.cloneNode(true);
    img1.setAttribute('src',"images/"+data[ind].carousel[i]+".jpg");
    div1.appendChild(img1);
 }

 a0.appendChild(div1);

 var fig = document.createElement('figure');
  fig.setAttribute('id','fig'+ind);

 var div2 = div.cloneNode(true);

 div2.setAttribute('class', "carousel__images-wrapper");
 div2.setAttribute('index', ind);

 div2.innerHTML = '<div class="controls"><div class="carousel__prev-arrow prev">&lt;</div><div class="carousel__next-arrow next">&gt;</div></div></div>';


 fig.appendChild(div2);


 var figcap = document.createElement('figcaption');

 var h2 = document.createElement('h2');
 h2.setAttribute('class',"productName");
 h2.innerHTML = data[ind].name;
 figcap.appendChild(h2);

 var div3 = div.cloneNode(true);
 div3.setAttribute('class', "quantity-input");

 var input1 = input.cloneNode(true);

 input1.setAttribute('class', "minus btn");
 input1.setAttribute('type', "button");
 input1.setAttribute('value', "-");

 div3.appendChild(input1);

 var input2 = input.cloneNode(true);

 input2.setAttribute('class', "input-text quantity text");
 input2.setAttribute('id', "quantity_"+ind);
 input2.setAttribute('value', "1");
 input2.setAttribute('size', "4");
 div3.appendChild(input2);

 var input3 = input.cloneNode(true);
 input3.setAttribute('class', "plus btn");
 input3.setAttribute('type', "button");
 input3.setAttribute('value', "+");
 div3.appendChild(input3);
 figcap.appendChild(div3);

 var d1 = div.cloneNode(true);
 d1.setAttribute('class', 'button');
 var d2 = div.cloneNode(true);
 d2.setAttribute('class', 'prices');
 d2.innerHTML = data[ind].price;
 d1.appendChild(d2);
 var a1 = a.cloneNode(true);
 a1.setAttribute('class', 'addtocart');
 var d3 = div.cloneNode(true);
 d3.setAttribute('class', 'add');

 d3.setAttribute('rel', "watche_"+data[ind].id);
 d3.setAttribute('product', data[ind].name);
 d3.setAttribute('sel', data[ind].price);

 d3.innerHTML = 'Add to Cart';

 a1.appendChild(d3);
 var d4 = div.cloneNode(true);
 d4.setAttribute('class', 'added');
 a1.appendChild(d4);
 d1.appendChild(a1);

 figcap.appendChild(d1);

 fig.appendChild(figcap);
 a0.appendChild(fig);
 return a0;
 }

 for (var i=0; i<data.length; i++) {
 document.querySelector(".thumbnail-grid").appendChild(createItem(i));
 }



 var sm = document.querySelector('.sub-menu');
 for(var i=0; i<menu.length; i++){
  var li = document.createElement('li');
  var a = document.createElement('a');
  a.innerHTML = menu[i].name;
  a.setAttribute('href',menu[i].link);
  li.appendChild(a);
  sm.appendChild(li);
 //console.log(menu[i].name);
 }


 var div = document.createElement('div');
 div.innerHTML = '<h1>Hello div</h1>';
 var test = document.createTextNode('Hello text');
 console.log(div);
 document.querySelector('h1').appendChild(div);


 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Cart</title>
	</head>

	<body>
	<ul class="sub-menu">

	</ul>

	<main>

	<h1>My SHOP</h1>

	<section class="thumbnail-grid flex">

	</section>
	</main>


	<script>
	var data = [{

	id: 0,
	name: 'Product 0',
	price: 177,
	carousel: [1,2,3]
	},
	{

	id: 1,
	name: 'Product 1',
	price: 77,
	carousel: [2,3,4]
	},
	{

	id: 2,
	name: 'Product 2',
	price: 88,
	carousel: [3,4,5]
	},
	{
	id: 3,
	name: 'Product 3',
	price: 277,
	carousel: [6,7,8]
	}];


	//var ind = 1;


	var a = document.createElement('a');
	var div = document.createElement('div');
	var img = document.createElement('img');
	var input = document.createElement('input');


	function createItem(ind){
	var a0 = a.cloneNode(true);
	a0.setAttribute('href',"#!");
	a0.setAttribute('class',"flex-item");

	var div1 = div.cloneNode(true);
	div1.setAttribute('class',"carousel");


	for(var i=0; i<data[ind].carousel.length;i++){
	var img1 = img.cloneNode(true);
	img1.setAttribute('src',"images/"+data[ind].carousel[i]+".jpg");
	div1.appendChild(img1);
	}

	a0.appendChild(div1);

	var fig = document.createElement('figure');
	fig.setAttribute('id','fig'+ind);

	var div2 = div.cloneNode(true);

	div2.setAttribute('class', "carousel__images-wrapper");
	div2.setAttribute('index', ind);

	div2.innerHTML = '<div class="controls"><div class="carousel__prev-arrow prev"><</div><div class="carousel__next-arrow next">></div></div></div>';


	fig.appendChild(div2);


	var figcap = document.createElement('figcaption');

	var h2 = document.createElement('h2');
	h2.setAttribute('class',"productName");
	h2.innerHTML = data[ind].name;
	figcap.appendChild(h2);

	var div3 = div.cloneNode(true);
	div3.setAttribute('class', "quantity-input");

	var input1 = input.cloneNode(true);

	input1.setAttribute('class', "minus btn");
	input1.setAttribute('type', "button");
	input1.setAttribute('value', "-");

	div3.appendChild(input1);

	var input2 = input.cloneNode(true);

	input2.setAttribute('class', "input-text quantity text");
	input2.setAttribute('id', "quantity_"+ind);
	input2.setAttribute('value', "1");
	input2.setAttribute('size', "4");
	div3.appendChild(input2);

	var input3 = input.cloneNode(true);
	input3.setAttribute('class', "plus btn");
	input3.setAttribute('type', "button");
	input3.setAttribute('value', "+");
	div3.appendChild(input3);
	figcap.appendChild(div3);

	var d1 = div.cloneNode(true);
	d1.setAttribute('class', 'button');
	var d2 = div.cloneNode(true);
	d2.setAttribute('class', 'prices');
	d2.innerHTML = data[ind].price;
	d1.appendChild(d2);
	var a1 = a.cloneNode(true);
	a1.setAttribute('class', 'addtocart');
	var d3 = div.cloneNode(true);
	d3.setAttribute('class', 'add');

	d3.setAttribute('rel', "watche_"+data[ind].id);
	d3.setAttribute('product', data[ind].name);
	d3.setAttribute('sel', data[ind].price);

	d3.innerHTML = 'Add to Cart';

	a1.appendChild(d3);
	var d4 = div.cloneNode(true);
	d4.setAttribute('class', 'added');
	a1.appendChild(d4);
	d1.appendChild(a1);

	figcap.appendChild(d1);

	fig.appendChild(figcap);
	a0.appendChild(fig);
	return a0;
	}

	for (var i=0; i<data.length; i++) {
	document.querySelector(".thumbnail-grid").appendChild(createItem(i));
	}



	var sm = document.querySelector('.sub-menu');
	for(var i=0; i<menu.length; i++){
	var li = document.createElement('li');
	var a = document.createElement('a');
	a.innerHTML = menu[i].name;
	a.setAttribute('href',menu[i].link);
	li.appendChild(a);
	sm.appendChild(li);
	//console.log(menu[i].name);
	}


	var div = document.createElement('div');
	div.innerHTML = '<h1>Hello div</h1>';
	var test = document.createTextNode('Hello text');
	console.log(div);
	document.querySelector('h1').appendChild(div);


	</script>
	</body>
	</html>