nairihar/index.html

## index.html
<html>
  <head>
    <title>Store</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div id="StoreItems"></div>
    <div id="User"></div>
  </body>
  <script src="./user.js"></script>
  <script src="./items.js"></script>
  <script src="./script.js"></script>
</html>

## items.js
const storeItems = [{
  name: 'CocaCola',
  image: './images/CocaCola.png',
  count: 0,
  price: 300
},{
  name: 'Milk',
  image: './images/Milk.png',
  count: 2,
  price: 2000
},{
  name: 'Snickers',
  image: './images/Snickers.png',
  count: 5,
  price: 100
},{
  name: 'Cards',
  image: './images/Cards.png',
  count: 1,
  price: 350
}];

// {
//   Cards: {}
// }

// Object.values

## script.js
// new Date().getHours()

function updateUser() {
  const userMoney = document.getElementsByClassName('UserMoney')[0];
  userMoney.innerHTML = user.money;

  const userItems = document.getElementsByClassName('UserItems')[0];
  userItems.innerHTML = user.myItems.length;
}

function updateStoreItem(item) {
  const elementName = `${item.name}-Count`;
  console.log(elementName)
  const itemCount = document.getElementById(elementName);
  itemCount.innerHTML = item.count;
}

function buyItem(item, element) {
  // TODO :: use element instead of item ids

  // use user object
  if (item.count === 0) {
    return alert(`Store doesn\'t have ${item.name} right now!`);
  }

  if (user.money < item.price) {
    return alert(`You don't have enough money`);
  }

  user.money -= item.price;
  user.myItems.push(item);
  item.count -= 1;

  updateUser();
  updateStoreItem(item)
}

function createStoreItem(item) {
  const e = document.createElement('div');
  e.setAttribute('class', 'StoreItem');

  const name = document.createElement('p');
  name.setAttribute('class', 'Name');
  name.innerHTML = item.name;
  e.appendChild(name);

  const image = document.createElement('img');
  image.setAttribute('class', 'Image');
  image.src = item.image;
  e.appendChild(image);

  const price = document.createElement('p');
  price.setAttribute('class', 'Price');
  price.innerHTML = item.price;
  e.appendChild(price);

  const count = document.createElement('p');
  count.setAttribute('class', 'Count');
  count.setAttribute('id', `${item.name}-Count`);
  count.innerHTML = item.count;
  e.appendChild(count);

  const buy = document.createElement('button');
  buy.onclick = () => buyItem(item, e);
  buy.setAttribute('class', 'Buy');
  buy.innerHTML = 'Buy';
  e.appendChild(buy);

  return e;
}

const item = {
  name: 'CocaCola',
  image: './images/CocaCola.png',
  count: 4,
  price: 300
};

function fillStore() {
  const StoreItems = document.getElementById('StoreItems');
  storeItems.forEach(item => {
    const storeElement = createStoreItem(item);
    StoreItems.appendChild(storeElement);
  });
}

function fillUser() {
  // user object
  const e = document.getElementById('User');

  const name = document.createElement('p');
  name.setAttribute('class', 'UserName');
  name.innerHTML = `Hi ${user.name}`;
  e.appendChild(name);

  const userItems = document.createElement('p');
  userItems.setAttribute('class', 'UserItems');
  userItems.innerHTML = user.myItems.length;
  e.appendChild(userItems);

  const userMoney = document.createElement('p');
  userMoney.setAttribute('class', 'UserMoney');
  userMoney.innerHTML = user.money;
  e.appendChild(userMoney);

  return e;
}

fillStore();
fillUser();

## style.css
body {
  margin: 0;
}

#StoreItems {
  width: 300px;
  font-family: monospace;
}

#User {
  width: 100px;
  top: 0;
  position: absolute;
  right: 0;
  padding: 10px;
  background: antiquewhite;
}

.StoreItem {
  text-align: center;
  background: aliceblue;
  border-bottom: 1px solid gray;
  border-right: 1px solid gray;
  padding: 10px;
}

.Image {
  width: 70px;
}

.Count {
  color: green;
}

.Price {
  color: blue;
}

.Price, .Count {
  font-size: 18px;
  font-weight: bold;
}

.Name {
  font-size: 20Px;
  font-weight: bold;
}

.Name, .Count {
  margin: 0;
}


## user.js
const user = {
  name: 'Nairi',
  myItems: [], // {}, Object.keys, Object.values
  money: 500
};
	<html>
	<head>
	<title>Store</title>
	<link rel="stylesheet" href="./style.css">
	</head>
	<body>
	<div id="StoreItems"></div>
	<div id="User"></div>
	</body>
	<script src="./user.js"></script>
	<script src="./items.js"></script>
	<script src="./script.js"></script>
	</html>
	const storeItems = [{
	name: 'CocaCola',
	image: './images/CocaCola.png',
	count: 0,
	price: 300
	},{
	name: 'Milk',
	image: './images/Milk.png',
	count: 2,
	price: 2000
	},{
	name: 'Snickers',
	image: './images/Snickers.png',
	count: 5,
	price: 100
	},{
	name: 'Cards',
	image: './images/Cards.png',
	count: 1,
	price: 350
	}];

	// {
	// Cards: {}
	// }

	// Object.values
	// new Date().getHours()

	function updateUser() {
	const userMoney = document.getElementsByClassName('UserMoney')[0];
	userMoney.innerHTML = user.money;

	const userItems = document.getElementsByClassName('UserItems')[0];
	userItems.innerHTML = user.myItems.length;
	}

	function updateStoreItem(item) {
	const elementName = `${item.name}-Count`;
	console.log(elementName)
	const itemCount = document.getElementById(elementName);
	itemCount.innerHTML = item.count;
	}

	function buyItem(item, element) {
	// TODO :: use element instead of item ids

	// use user object
	if (item.count === 0) {
	return alert(`Store doesn\'t have ${item.name} right now!`);
	}

	if (user.money < item.price) {
	return alert(`You don't have enough money`);
	}

	user.money -= item.price;
	user.myItems.push(item);
	item.count -= 1;

	updateUser();
	updateStoreItem(item)
	}

	function createStoreItem(item) {
	const e = document.createElement('div');
	e.setAttribute('class', 'StoreItem');

	const name = document.createElement('p');
	name.setAttribute('class', 'Name');
	name.innerHTML = item.name;
	e.appendChild(name);

	const image = document.createElement('img');
	image.setAttribute('class', 'Image');
	image.src = item.image;
	e.appendChild(image);

	const price = document.createElement('p');
	price.setAttribute('class', 'Price');
	price.innerHTML = item.price;
	e.appendChild(price);

	const count = document.createElement('p');
	count.setAttribute('class', 'Count');
	count.setAttribute('id', `${item.name}-Count`);
	count.innerHTML = item.count;
	e.appendChild(count);

	const buy = document.createElement('button');
	buy.onclick = () => buyItem(item, e);
	buy.setAttribute('class', 'Buy');
	buy.innerHTML = 'Buy';
	e.appendChild(buy);

	return e;
	}

	const item = {
	name: 'CocaCola',
	image: './images/CocaCola.png',
	count: 4,
	price: 300
	};

	function fillStore() {
	const StoreItems = document.getElementById('StoreItems');
	storeItems.forEach(item => {
	const storeElement = createStoreItem(item);
	StoreItems.appendChild(storeElement);
	});
	}

	function fillUser() {
	// user object
	const e = document.getElementById('User');

	const name = document.createElement('p');
	name.setAttribute('class', 'UserName');
	name.innerHTML = `Hi ${user.name}`;
	e.appendChild(name);

	const userItems = document.createElement('p');
	userItems.setAttribute('class', 'UserItems');
	userItems.innerHTML = user.myItems.length;
	e.appendChild(userItems);

	const userMoney = document.createElement('p');
	userMoney.setAttribute('class', 'UserMoney');
	userMoney.innerHTML = user.money;
	e.appendChild(userMoney);

	return e;
	}

	fillStore();
	fillUser();
	body {
	margin: 0;
	}

	#StoreItems {
	width: 300px;
	font-family: monospace;
	}

	#User {
	width: 100px;
	top: 0;
	position: absolute;
	right: 0;
	padding: 10px;
	background: antiquewhite;
	}

	.StoreItem {
	text-align: center;
	background: aliceblue;
	border-bottom: 1px solid gray;
	border-right: 1px solid gray;
	padding: 10px;
	}

	.Image {
	width: 70px;
	}

	.Count {
	color: green;
	}

	.Price {
	color: blue;
	}

	.Price, .Count {
	font-size: 18px;
	font-weight: bold;
	}

	.Name {
	font-size: 20Px;
	font-weight: bold;
	}

	.Name, .Count {
	margin: 0;
	}
	const user = {
	name: 'Nairi',
	myItems: [], // {}, Object.keys, Object.values
	money: 500
	};