
<!-- Add below script and Style to utilise php -->
<script>
//Format a currency string
function format_currency(num) {
		var p = num.toFixed(0).split(".");
		return "£" + p[0].split("").reverse().reduce(function(acc, num, i, orig) {
			return  num + (i && !(i % 3) && !(num=='-') ? "," : "") + acc;
		}, "");
	}	

</script>
<style>
	#budget-calculator > ul > li.active > a{
	    cursor: default;
	    background-color: #ca1017;
	    border: 1px solid #ca1017;
	    border-bottom-color: transparent;
	    color: white;
	    font-weight: bold;
	}
	
	.budget-calculator tfoot td .total{
		background-color: #ca1017;
	}
</style>





<div class="monkey-budget-planner-wrapper">
  <div class="monkey-header-wrapper" style="background:#ca1017">

    <div class="monkey-header-r">
      <h1 style="color:white;margin:0;">
              </h1>
    </div>
  </div> 
  <div class="stick-here"></div>
		<div class="toolbar stickThis">
		<div class="toolbar-buttons">
			<button class="btn btn-sm btn-warning reset-localstorage" style="font-size: 14px;"><i class="glyphicon glyphicon-refresh"></i> <span class="reset-button-text" style="margin-left:10px;">Reset Budget Planner</span></button>
		</div>
	</div>
  <div class="modal fade" id="budget-calculator-add-row" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
    data-backdrop="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header" style="background:#ca1017;">
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
            <span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title">Add Row</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="add-row-name">Expense Name</label>
            <input type="text" class="form-control" id="add-row-name" placeholder="">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary btn-add-row" data-type="">Add Row</button>
        </div>
      </div>
    </div>
  </div>
  <div id="budget-calculator" class="budget-calculator">
    <ul class="nav nav-tabs" role="tablist">
      <li class="active">
        <a href="#income" role="tab" data-toggle="tab">
          <i class="glyphicon glyphicon-download"></i> Income</a>
      </li>
      <li>
        <a href="#outgoings" role="tab" data-toggle="tab">
          <i class="glyphicon glyphicon-upload"></i> Outgoings</a>
      </li>
    </ul>
    <div id="monkeyTable" class="tab-content">
      <div class="tab-pane fade in active" id="income">
        <table class="table table-hover">
          <thead>
            <tr>
              <th style="width:50%">Your income</th>
              <th style="width:10%">Frequency</th>
              <th style="width:20%">Amount</th>
              <th style="width:20%">Annual Amount</th>
              <th>&nbsp;</th>
            </tr>
          </thead>
          <tbody></tbody>
          <tfoot>
	         <tr>
              <td colspan="5">
	              <div class="stitched">
				  	<span class="btn btn-xs btn-success add-row" data-type="income"><i class="glyphicon glyphicon-plus-sign"></i> Add Income Row</span>
                  </div>
              </td>
            </tr>
            <tr>
           	  <td colspan="5">
                <span class="total">Total: £0</span>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="tab-pane fade" id="outgoings">
        <table class="table table-hover">
          <thead>
            <tr>
              <th style="width:50%">Outgoing Expenses</th>
              <th class="noprint" style="width:10%">Frequency</th>
              <th class="noprint" style="width:20%">Amount</th>
              <th style="width:20%">Annual Amount</th>
              <th>&nbsp;</th>
            </tr>
          </thead>
          <tbody></tbody>
          <tfoot>
            <tr>
              <td colspan="5">
	              <div class="stitched">
				  	<span class="btn btn-xs btn-success add-row" data-type="outgoings"><i class="glyphicon glyphicon-plus-sign"></i> Add Outgoings Row</span>
                  </div>
              </td>
            </tr>
            <tr>
           	  <td colspan="5">
                <span class="total">Total: £0</span>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="total-buttons" id="totals">
        <div class="totals total-income">
            <h3>Total Annual Income: <span>£0</span></h3>
            <div class="progress progress-striped active">
            	<div class="progress-bar" style="width:0%"></div>
            </div>
        </div>
        <div class="totals total-outgoings">
            <h3>Total Annual Outgoings: <span>£0</span></h3>
            <div class="progress progress-striped active">
            	<div class="progress-bar" style="width:0%"></div>
            </div>
        </div>
      <div class="totals total-savings">
	            <h3>This Leaves a Balance of: <span>£0</span></h3>
	            <div class="progress progress-striped active">
	            	<div class="progress-bar progress-bar-success" style="width:0%"></div>
	            </div>
	        </div>
        <div class="balance">
	        <div class="filter-buttons"><span id="result" style="font-size: 12px;margin-right: 5px;">Filter Result</span>
		        <button id="weekly" type="button" class="btn btn-success btn-sm">Weekly</button>
		        <button id="fortnightly" type="button" class="btn btn-success btn-sm">Fortnightly</button>
		        <button id="monthly" type="button" class="btn btn-success btn-sm">Monthly</button>
		        <button id="annually" type="button" class="btn btn-success btn-sm">Annually</button>
		        
	        </div>
	        
        </div>
      </div>
      <div class="pull-right">
        <span class="printbutton btn btn-primary">
          <i class="glyphicon glyphicon-print"></i> Print Results</span>
        <span class="toggleMail btn btn-primary">
          <i class="glyphicon glyphicon-envelope"></i> Email Results</span>
      </div>
    </div>
  </div>
  
	<div id="emailMokeyForm" style="background:white">
		<div class="box">
        <button class="btn btn-danger btn-sm cancel-mail toggleMail">Close</button>
			<h2>Email Results</h2>
			<p>Send your results in an Email, enter the email address below:</p>
			<form method="post" action="https://www.redstareducation.co.uk/blog/wp-content/plugins/monkey-budget-planner/sendmail.php" id="monkeyForm">
			<div class="form-group ">
				<input name="firstname" type="text" id="firstname">
				<input name="name" type="text" id="name" placeholder="Name" required><br>
				<input name="email" type="email" id="email" placeholder="Email" required><br>
				<input name="data" id="data" type="hidden" value="">
				<button type="submit" class="btn btn-info">Send Results</button>
			</div>
			<span class="label label-danger">Please Note. Non of your personal details or email address is stored.</span>
		</form>
		</div>
	</div>
</div

{"id":310,"date":"2020-08-26T09:09:45","date_gmt":"2020-08-26T08:09:45","guid":{"rendered":"http:\/\/www.redstareducation.co.uk\/blog\/?page_id=310"},"modified":"2024-09-23T17:43:52","modified_gmt":"2024-09-23T16:43:52","slug":"budget-planner","status":"publish","type":"page","link":"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/","title":{"rendered":"Budget Calculator"},"content":{"rendered":"\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":321,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Budget Calculator - Red Star Education Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Budget Calculator - Red Star Education Blog\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/\" \/>\n<meta property=\"og:site_name\" content=\"Red Star Education Blog\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-23T16:43:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.redstareducation.co.uk\/blog\/wp-content\/uploads\/Canva-Bank-Notes-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Chris Dutton\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.redstareducation.co.uk\/blog\/#website\",\"url\":\"https:\/\/www.redstareducation.co.uk\/blog\/\",\"name\":\"Red Star Education Blog\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.redstareducation.co.uk\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/#primaryimage\",\"url\":\"https:\/\/www.redstareducation.co.uk\/blog\/wp-content\/uploads\/Canva-Bank-Notes-scaled.jpg\",\"contentUrl\":\"https:\/\/www.redstareducation.co.uk\/blog\/wp-content\/uploads\/Canva-Bank-Notes-scaled.jpg\",\"width\":2560,\"height\":1707},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/#webpage\",\"url\":\"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/\",\"name\":\"Budget Calculator - Red Star Education Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.redstareducation.co.uk\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/#primaryimage\"},\"datePublished\":\"2020-08-26T08:09:45+00:00\",\"dateModified\":\"2024-09-23T16:43:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog Home\",\"item\":\"https:\/\/www.redstareducation.co.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Budget Calculator\"}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Budget Calculator - Red Star Education Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/","og_locale":"en_GB","og_type":"article","og_title":"Budget Calculator - Red Star Education Blog","og_url":"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/","og_site_name":"Red Star Education Blog","article_modified_time":"2024-09-23T16:43:52+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/www.redstareducation.co.uk\/blog\/wp-content\/uploads\/Canva-Bank-Notes-scaled.jpg","type":"image\/jpeg"}],"author":"Chris Dutton","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.redstareducation.co.uk\/blog\/#website","url":"https:\/\/www.redstareducation.co.uk\/blog\/","name":"Red Star Education Blog","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.redstareducation.co.uk\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/#primaryimage","url":"https:\/\/www.redstareducation.co.uk\/blog\/wp-content\/uploads\/Canva-Bank-Notes-scaled.jpg","contentUrl":"https:\/\/www.redstareducation.co.uk\/blog\/wp-content\/uploads\/Canva-Bank-Notes-scaled.jpg","width":2560,"height":1707},{"@type":"WebPage","@id":"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/#webpage","url":"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/","name":"Budget Calculator - Red Star Education Blog","isPartOf":{"@id":"https:\/\/www.redstareducation.co.uk\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/#primaryimage"},"datePublished":"2020-08-26T08:09:45+00:00","dateModified":"2024-09-23T16:43:52+00:00","breadcrumb":{"@id":"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.redstareducation.co.uk\/blog\/budget-planner\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/www.redstareducation.co.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"Budget Calculator"}]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.redstareducation.co.uk\/blog\/wp-json\/wp\/v2\/pages\/310"}],"collection":[{"href":"https:\/\/www.redstareducation.co.uk\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.redstareducation.co.uk\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.redstareducation.co.uk\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.redstareducation.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=310"}],"version-history":[{"count":8,"href":"https:\/\/www.redstareducation.co.uk\/blog\/wp-json\/wp\/v2\/pages\/310\/revisions"}],"predecessor-version":[{"id":1746,"href":"https:\/\/www.redstareducation.co.uk\/blog\/wp-json\/wp\/v2\/pages\/310\/revisions\/1746"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.redstareducation.co.uk\/blog\/wp-json\/wp\/v2\/media\/321"}],"wp:attachment":[{"href":"https:\/\/www.redstareducation.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}