JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<html>
	<head>
		<title>Elements - Editorial by HTML5 UP</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
		<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
		<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
	<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

	</head>
	<body>
			<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
		<!-- Wrapper -->
			<div id="wrapper">

				<!-- Main -->
					<div id="main">
						<div class="inner">

							
							<!-- Content -->
								<section>

									<!-- Elements -->
										<h2 id="elements">401k Simulator</h2>
										<div class="row 200%">
											<div class="6u 12u$(medium)">

													
												<!-- Form -->
													

													<form method="post" id="401k">
														<div class="row uniform">
															<div class="6u 12u$(xsmall)">
																Percentage to Contribute:
																<input type="text" name="percent" id="percent" value="10" placeholder="" />%
															</div>
														</div>
														<div class="row uniform">
															<div class="6u 12u$(xsmall)">
																Annual Salary Growth:
																<input type="text" name="salaryincrease" id="salaryincrease" value="3" placeholder="" />%
															</div>
														</div>
														<div class="row uniform">
															<div class="6u 12u$(xsmall)">
																Current Age:
																<input type="text" name="currentage" id="currentage" value="22" placeholder="" />
															</div>
														</div>
														<div class="row uniform">
															<div class="6u 12u$(xsmall)">
																Retirement...

CSS

div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: 80px;					
    height: 100px;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: lightsteelblue;	
    border: 0px;		
    border-radius: 8px;			
	pointer-events: none;	
	color: white;		
}
circle {
	stroke-width: 2;
	stroke: white;
}

table.blueTable {
	border: 1px solid #1C6EA4;
	background-color: #EEEEEE;
	width: 100%;
	text-align: left;
	border-collapse: collapse;
  }
  table.blueTable td, table.blueTable th {
	border: 1px solid #AAAAAA;
	padding: 3px 2px;
  }
  table.blueTable tbody td {
	font-size: 13px;
  }
  table.blueTable tr:nth-child(even) {
	background: #D0E4F5;
  }
  table.blueTable thead {
	background: #1C6EA4;
	background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
	background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
	background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
	border-bottom: 2px solid #444444;
  }
  table.blueTable thead th {
	font-size: 15px;
	font-weight: bold;
	color: #FFFFFF;
	border-left: 2px solid #D0E4F5;
  }
  table.blueTable thead th:first-child {
	border-left: none;
  }
  
  table.blueTable tfoot {
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	background: #D0E4F5;
	background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
	background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
	background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
	border-top: 2px solid #444444;
  }
  table.blueTable tfoot td {
	font-size: 14px;
  }
  table.blueTable tfoot .links {
	text-align: right;
  }
  table.blueTable tfoot .links a{
	display: inline-block;
	background: #1C6EA4;
	color: #FFFFFF;
	padding: 2px 8px;
	border-radius: 5px;
  }
  
.chart {
width: 700px;
height: 400px;
background-color: #315ABC;
display: inline-block;
}

div#chart {
  position: relative;
}
.axis line {
	fill: none;
	stroke:...

JavaScript

Number.prototype.formatMoney = function (c, d, t) {
						var n = this,
							c = isNaN(c = Math.abs(c)) ? 2 : c,
							d = d == undefined ? "." : d,
							t = t == undefined ? "," : t,
							s = n < 0 ? "-" : "",
							i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
							j = (j = i.length) > 3 ? j % 3 : 0;
						return s + '$' + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
					};
				var startingsalary = 50000;
				var startingsalaryedit = startingsalary.formatMoney(2,'.',',');
				var match = 6;
				
				jQuery(function () {
					$('#401k').submit(function (e) {
						var tabledata = '';
						var salary = [];
						var age = [];
						
						var barOffset = 1;
						var employeecontribution = [];
						var employercontribution = [];
						var currentbalanceaged = [];
						var employeecontributionaged = [];
						var employercontributionaged = [];
						var endbalance = [];
						var height = 400;
						var width = 700;
						
						var data = $('#401k :input').serializeArray();
						currentage = +data[2].value;
						retirementage = +data[3].value;
						contribution = +data[0].value/100;
						salaryincrease = +data[1].value;
						currentbalance = +data[4].value;
						growth = +data[5].value/100;
						var barWidth = width/(retirementage-currentage);

						tabledata += "<h3>Starting Salary: " + startingsalaryedit + "</h3><h3>401k Match Percentage: " + match + "%</h3>";
						tabledata += "<table class=bluetable>";
						tabledata += "<tr><th>Age</th><th>Employee Contribution</th><th>Employer Contribution</th><th>Ending Balance (No Contribution)</th><th>Ending Balance (Contributions)</th><th>Ending Balance (Total)</th></tr>";
						if (currentbalance > 0) {
							tabledata += "<tr><td>" + (currentage - 1) + "</td><td></td><td></td><td></td><td></td><td>" + currentbalance.formatMoney(2,'.',',') + "</td></tr>"
						}
						for (i = 0; i <=...