Bill spliter

by Anshul Pandey

HTML

<div id="wrapepr">
	<div class="actions">
		<a href="javascript:;" class="actionBtn AddFriend">Add a friend</a>
		<a href="javascript:;" class="actionBtn AddLists">Add a bill</a>
	</div>
	<div class="listform EnterFriendDetails">
		<form name="addFR" if="addFR" onsubmit="return validateFr();" action="javascript:;">
			<label for="friendName">Enter Friend Name</label>
			<input type="text" required placeholder="Enter Friend Name"  name="name" id="friendName">
			<input type="submit" value="Add" id="frSubmit">
			<input type="submit" value="Save" id="frSave">
		</form>
	</div>
	<div class="listform EnterListDetails">
		<form name="addaBill" id="addBill" onsubmit="return validateList();" action="javascript:;">
			<div class="formRow">
				<label for="ListName">List Details</label>
				<input type="text" required placeholder="Enter List details" id="listName">
			</div>
			<div class="formRow">
				<label for="listAmount">Amount to be split</label>
				<input type="number" min="1" required placeholder="Enter Amount"id="listAmount">
			</div>
			<div class="formRow">
				<label for="listFriends">Choose Friends</label>
				<select required multiple id="listFriends"></select>
			</div>
			<input type="submit" value="Add" id="lsSubmit">
			<input type="submit" value="Save" id="lsChange">
		</form>
	</div>
	<div class="conatiner">
		<div class="myLists">
			<h1>Bill</h1>
			<ul>
				
			</ul>
		</div>
		<div class="myFriend">
			<h1>Friends</h1>
			<ul>
				
			</ul>
		</div>
	</div>

</div>

CSS

*{
	margin:0;
	padding:0;
}
ul,li{
	padding: 0;
	list-style: none;
}
body{
	font:14px Arial;
}
a{
	text-decoration: none;
}
.actions{
	padding:10px;
	background: #666;
}
.actionBtn{
	width:100px;
	height: 40px;
	background: #91D5D0;
	color: #333;
	display: inline-block;
	line-height: 40px;
	text-align: center;
	margin-right: 10px;
}
.listform,#frSave{
	display: none;
}
.conatiner h1{padding:10px;font-size: 16px;}
.conatiner .myFriend,.conatiner .myLists{width:50%;float: left;}
.NeedToPay{display: none;}
.NeedToPay span{display: block;}
.conatiner li a{display: block;}
.ListDescription{font-size: 14px;font-weight: bold;}
.myFriend li,.myLists li{padding: 10px;}
.listform{padding: 10px;}
.listform label{display: block;font-weight: bold;font-size: 12px;padding-bottom: 5px}
.listform input[type=text],.listform input[type=number]{
	width:300px;
	border:1px solid #ccc;
	height: 28px;
	line-height: 28px;
	padding: 5px;
	box-sizing:border-box;
}
.listform input[type=number]{
	padding:0 5px; 
}
.listform input[type=submit]{
	width:80px;
	height: 30px;
	line-height: 30px;
	border:1px solid #ccc;
	background: #333;
	color: #fff;
}
#listFriends{
	max-height: 100px;
	min-height: 50px;
	width:300px;
	border:1px solid #ccc;
}
.formRow{padding:5px 0}
#lsChange{display: none;}

JavaScript

var $ = function(selector){
	return document.querySelectorAll(selector);
}
var Spliter = function (config) {
    this.val = config.val;
	$mythis = this;
}
function cleanArray(actual){
  var newArray = new Array();
  for(var i = 0; i<actual.length; i++){
      if (actual[i]){
        newArray.push(actual[i]);
    }
  }
  return newArray;
}
Spliter.prototype = {
    constructor: Spliter,
    init:function ()  {
		if(typeof(Storage) !== "undefined") {
			if(localStorage['friends'] == null){
				var FriendList = [];
				localStorage.setItem('friends',JSON.stringify(FriendList));
			}else{
				$mythis.loadFriends();
			}
			if(localStorage['lists'] == null){
				var MoneyList = [];
				localStorage.setItem('lists',JSON.stringify(MoneyList));
			}else{
				$mythis.loadLists();
			}
		}else{
			alert('LocalStorage not supported!!');
		}
    },
    loadThisName: function(e){
    	$('.EnterFriendDetails')[0].style.display = 'block';
    	$('.EnterListDetails')[0].style.display = 'none';
    	$('#frSubmit')[0].style.display = 'none';
    	$('#frSave')[0].style.display = 'inline-block';
    	var index = e.target.parentNode;
    	index = index.getAttribute('data-attr');
    	var frtemp = JSON.parse(localStorage['friends']);
    	$('#friendName')[0].value = frtemp[index].Name;
    	$mythis.val = index;
    },
    saveThisName: function(index){
    	var fr = JSON.parse(localStorage['friends']);
    	fr[index].Name = $('#friendName')[0].value;
    	localStorage.setItem('friends',JSON.stringify(fr));
    	$mythis.loadFriends();
    	setTimeout($mythis.clearFrName,100);
    },
    deleteThisName: function(e){
    	var index = e.target.parentNode.getAttribute('data-attr');
    	var fr = JSON.parse(localStorage['friends']);
    	fr.splice(index,1);
    	localStorage.setItem('friends',JSON.stringify(fr));
    	$mythis.loadFriends();	
    },
    loadFriends: function(){
    	var fr = localStorage['friends'];
    	fr = JSON.parse(fr);
    	$('.myFriend ul')[0].innerHTML = '';
		for(i...