Hey guys, I'm new to programming and I am working on a little project I thought of. I'm trying to create a study logger that you can update and it saves into local storage, so that when you reload the page it saves your old entries and you can view your personal log. So far, I have it working as far as adding/deleting entries.
My issue is that I cannot get the table to save in the browser's local storage, I think because it saves an object. I've read on other posts that I can somehow stringify it, and then parse it? But I've tried that and didn't have any luck. I might have been doing it wrong though. Let me know what you think. I am new to programming so I'm sorry if my code is hard to read! Let me know if you need any clarification. I really appreciate any help. I am open to other ways to tackle this project! I really want to finish this.
Here's my code if you want to take a look:
HTML:
<form id="tracker" action="" method="post">
<label>Hours worked:<br></label>
<input type="number" name="hours" id="hours"><br>
<label>Date:<br></label>
<input type="date" name="date" id="date"><br><br>
<label>What did you get done?:<br></label><br>
<textarea id="accomplished" name="accomplished"></textarea><br>
<button id="submit-btn" onclick="localStore()">Submit!</button>
</form>
<-- Table to display logged entries -->
<div class="container">
<br>
<h2>Your Log:</h2>
<br>
<table id="myLog" class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>What you did</th>
<th>Hours Studied</th>
<th>Delete Row</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
JS and jQuery:
//Stops button from refreshing page
$("#submit-btn").click( function(event) {
event.preventDefault();
});
//Delete button
var deleteBtn = '<input id="delete-row-btn" type="button" value="X"
onclick="deleteRow(this)"/>';
//Delete button code
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
//Probably a very inefficient way of adding elements to the table!
function localStore() {
var hours = document.getElementById('hours').value;
var date = document.getElementById('date').value;
var accomplished = document.getElementById('accomplished').value;
localStorage.setItem("hours", hours);
localStorage.setItem("date", date);
localStorage.setItem("accomplished", accomplished);
var table = document.getElementById("myLog");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = localStorage.date;
cell2.innerHTML = localStorage.accomplished;
cell3.innerHTML = localStorage.hours;
cell4.innerHTML = deleteBtn;
}