Examination #1/index.html - master - valentingordienko/JavaScript_LoftSchool_course

Examination #1/index.html

69 строк2 KB

Valentin Gordienko

Examination№1--добавил кнопки удаления/добавления сразу всех друзей

08 авг 2016, 16:22

08 авг 2016, 16:222a00158

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Examination #1</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="conteiner" id="conteiner">
	<header class="header">
		<div class="heading">Выберите друзей</div>
		<button class="close" id="close"></button>
	</header>
	<main id="main">
		<section class="listConteiner left">
			<div class="wrapperInput">
				<input type="text" class="input" id="findFriend" placeholder="Начните вводить имя друга">
			</div>
			<div class="wrapperList">
				<div class="headerList">
					<button class="addOrDelAll right addAll" id="addAll"></button>
					<div class="headerList_content">Ваши друзья</div>
				</div>
				<div class="wrapperListFriends">
					<ul class="listFriends" id="vkListFriends">
					</ul>
				</div>
			</div>
		</section>
		<section class="listConteiner right">
			<div class="wrapperInput">
				<input type="text" class="input" id="nameList" placeholder="Название">
			</div>
			<div class="wrapperList">
				<div class="headerList">
					<button class="addOrDelAll right delAll" id="delAll"></button>
					<div class="headerList_content">Друзья в списке</div>
				</div>
				<div class="wrapperListFriends">
					<ul class="listFriends" id="myListFriends">
					</ul>
				</div>
			</div>
		</section>
	</main>
	<footer>
		<button class="save right" id="saveList">Сохранить</button>
	</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="//vk.com/js/api/openapi.js" type="text/javascript"></script>
<script type="text/x-handlebars-template" id="listFriends">
	{{#each list}}
	{{#if this.added}}
	<li class="listItem added" data-id="{{uid}}">
		{{else}}
	<li class="listItem" data-id="{{uid}}">
		{{/if}}
		<div class="wrapperFoto left">
			<img src="{{photo_100}}" alt="" class="foto">
		</div>
		<button class="addOrDelButton right" id="addOrDelButton"></button>
		<div class="name">{{first_name}} {{last_name}}</div>
	</li>
	{{/each}}
</script>
<script src="main.js"></script>
</body>
</html>