JSFiddle - React, Tailwind, and code Playground

by Joel Virothaisakun

HTML

<div data-role="content" id="content">
		<h3 class="center_p">Total income: $ </h3>
		<ul id="list">
		</ul>
		<div class="centered" >
			<a href="#popupAddIncome" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" data-transition="pop">add more income</a>
		</div>
		<div data-role="popup" id="popupAddIncome" data-theme="a" class="ui-corner-all" class="myPopUps" data-overlay-theme="b">
		    <form>
			<div class="POP">
				
				<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><br>
				<h3>Add Another Income</h3>
				<form id="page2_popup">
					<p>how much are you paid?</p>
					<label for="un" class="ui-hidden-accessible">Paid:</label>
					<input type="number" name="paid_amount" id="income_amount" value="" placeholder="$" data-theme="a">
					<p>name your income</p>
					<label for="un" class="ui-hidden-accessible">Name:</label>
					<input type="text" name="paid_name" id="income_name" value="" placeholder="name" data-theme="a">
					<select name="paid_how_often" id="paid_how_often">
						<option value="month">Every Month</option>
						<option value="2week">Every 2 Weeks</option>
						<option value="week">Every Week</option>
						<option value="one_time">One Time</option>
					</select>
				</form>	
				<a href="#" data-rel="back" style="text-decoration: none;"><input type="button" value="Save" data-rel="back" id="incomeButton" /></a>
				
			</div>
		    </form>
		</div>
	</div><!-- /content -->

JavaScript

//On track budget app

$( document ).ready(function() {
    var incomeArray = getIncomeArray();
    
    //button interaction
    $( "#incomeButton" ).click(function() {
        
        createIncomeItem("income_amount");
        console.log(incomeArray);
    });
    
    //create initial list
    for(var i = 0; i < incomeArray.length; i++){
        
        var key = incomeArray[i];
        var value = incomeArray[key];
        console.log(key);
        addToList(value);
    }
});

//reset form after submit
function resetForm(form){
    
    form.reset()
}

function convertToInt(key) {
    
    var numItem = parseInt(localStorage.getItem(key));
    console.log(numItem);
    //numItem = numItem + 1;
    //code
    return numItem;
}

function addToList(value) {
    
    var list = document.getElementById("list");
    var listItem = document.createElement("li");
    var span = document.createElement("span");
    span.setAttribute("class", "listItem");
    span.innerHTML = value;
    listItem.appendChild(span);
    list.appendChild(listItem);
    //code
}

//income functions

function createIncomeItem(formItem) {
    
    var incomeArray = getIncomeArray();
    var currentDate = new Date();
    var time = currentDate.getTime();
    var key = "income_" + time;
    var value = document.getElementById(formItem).value;
    incomeArray.push(key);
    localStorage.setItem("incomeArray", JSON.stringify(incomeArray));
    //console.log(incomeArray);
    addToList(value);
    //console.log(incomeArray);
    //code
}

function getIncomeArray(){
    
    //get or create storage arrays
    var incomeArray = localStorage.getItem("incomeArray");
    console.log(incomeArray);
    if (!incomeArray) {
        
        incomeArray = [];
        localStorage.setItem("incomeArray", JSON.stringify(incomeArray));
        //code
        console.log("there is no array so I made one");
    }
    else{
        incomeArray = JSON.parse(incomeArray);
        console.log("there is an array and...