$impleTracker

A simple adding/subtracting app to help you track your balance

by cowdd

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<body>

	<div id="appContainer">
		<section id="bannerBranding"><h1>$impleTracker</h1></section>
		<section id="bodyContent">

			<section id="lists">
				<div id="debitContainer">
					<h2>Debits</h2>
					<ul id="debitList"></ul>
				</div>
				
				<div id="creditContainer">
					<h2>Credits</h2>
					<ul id="creditList"></ul>
				</div>
			</section>

			<form>
				<div id="debitGrouping">
					<label for="debitInput" class="forInput"><span class="label">Debit:&nbsp;&nbsp;</span></label>
					<input type="number" name="debitInput" id="debitInput" /> 
					<label for="forInput" class="forInput"><span class="label">For:&nbsp;</span></label>
					<input type="text" name="forInput" id="debitFor"  /> 
				</div>

				<div id="creditGrouping">
					<label for="creditInput" class="forInput"><span class="label">Credit:&nbsp;</span></label>
					<input type="number" name="creditInput" id="creditInput" /> 
					<label for="forInput" class="forInput"><span class="label">For:&nbsp;</span></label>
					<input type="text" name="forInput" id="creditFor"  /> 
				</div>

				<button id="submitBtn" class="button">Submit</button>
				<button id="resetBtn" class="button">Reset</button>
				<div id="total"><label for="total">Total:&nbsp;</label><p id="totalOutput">$</p></div>
			</form>
			<hr>


		</section>
	</div>


</body>

CSS

/*RESET*/
	/* http://meyerweb.com/eric/tools/css/reset/ 
	   v2.0 | 20110126
	   License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

/*END RESET*/
	#appContainer{
		background-color: #cd9b7e;	height: 525px; max-width: 450px; overflow: auto; margin: auto;
	}

	#bannerBranding{
		background-color: #33261F;
		height: 55px;
		text-align: center;
		border-radius: 0px 0px 3px 3px;
	}

	#bannerBranding h1{
		font-family: Century Gothic, Sans-serif;
		font-style: italic;
		font-weight: bold;
		padding-top: 15px;
		color: #e8e8e8;

	}

	#bodyContent{
		margin: 5px 0px;
	}

	#lists{
		max-height: 300px;
		width: 100%;
		margin: 10px auto;
		overflow: auto;
	}

	#lists h2{
		font-family: Century Gothic, Sans-serif;
		font-weight: bold;
		text-decoration: underline;
	}

	#lists ul li{
		margin: 5px auto;
		border-bottom: .5px solid #8D6B57;
		font-family: Century Gothic, Sans-serif;
	}

	.fa-minus-square{
		cursor: pointer;
	}

	.forLabel{
		background-color:...

JavaScript

$(function addCredit() {

    var totalOutput = $("#totalOutput")
    var debits = [];
    var credits = [];

    $("#submitBtn").click(function(e) {
      if ($("#creditInput").val().length != 0){

          var creditFor = $("#creditFor").val();
          var credit = $("#creditInput").val();
          debits.push(Number(-credit));

          var credititem_html = '<li value="' + credit + ' " class="creditItem" ">' + ' <i class="fa fa-minus-square"></i> ';
          credititem_html += '$';
          credititem_html += credit;
          credititem_html += '&nbsp; <span class="forLabel">';
          credititem_html += creditFor; + '</span>'
          credititem_html +='</li>';

          

          $("#creditList").append(credititem_html);
          $("#creditInput").val('');
          $("#creditFor").val('');
          console.log(debits)

      } else {
          var debit = $("#debitInput").val();
           debits.push(Number(debit));
           console.log(debits);
           var debitFor = $("#debitFor").val();

          var debititem_html = '<li value="' + debit + ' " class="debitItem" ">' + ' <i class="fa fa-minus-square"></i> ';
          debititem_html += '$';
          debititem_html += debit;
          debititem_html += '&nbsp; <span class="forLabel">';
          debititem_html += debitFor; + '</span>'
          debititem_html +='</li>';


          

          var debitforitem_html = '<li class="forLabel">';
          debitforitem_html += debitFor;
          debitforitem_html += '</li>';

          $("#debitList").append(debititem_html );
          $("#debitInput").val('');
          $("#debitFor").val('');
      };

        var totalDebits = debits.reduce(function(a, b) {
                   return a + b;
                 });

        if (totalDebits > -1){
          totalOutput.html('<span class="totalLabelPos">' + '$' + totalDebits + '</span>');
        } else{
          totalOutput.html('<span class="totalLabelNeg">' + '$' + totalDebits +...