I am following along in a video and my code is exactly the same as video, however his works and mine does not. I am about 52 mins in and almost done but when I try to create a new issue, nothing comes up. It just refreshes. It doesn't fetch the issue as it should, and show it. I am generally just looking for some direction, and how to get through this little hurdle. Thank you in advance, and please let me know if you need more info!
video for reference: https://www.youtube.com/watch?v=NYq9J-Eur9U
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Bug Tracker</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body onload ='fetchIssues()'>
<div class="container">
<h1>JS IssueTracker <small>by Devin Latham</small></h1>
<div class="jumbotron">
<h3>Add New Issue:</h3>
<form id="issueInputForm">
<div class="form-group">
<label for="issueDescInput">Description</label>
<input type="text" class="form-control" id="issueDescInput" placeholder="Describe the issue ...">
</div>
<div class="form-group">
<label for="issueSeverityInput">Severity</label>
<select id="issueSeverityInput" class="form-control"l>
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
<div class="form-group">
<label for="issueAssignedToInput">Assigned To</label>
<input type="text" class="form-control" id="assignedToInput" placeholder="Enter responsible ...">
</div>
<button type="submit" class="btn btn-primary">Add</button>
</form>
</div>
<div class="col-lg-12">
<div id="issueList">
</div>
</div>
<div class="footer">
<p>© Devin Latham</p>
</div>
</div>
<script> src="https://chancejs.com/chance.min.js"</script>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script> src="main.js"</script>
</body>
</html>
main.js
document.getElementById('issueInputForm').addEventListener('submit', saveIssue);
function saveIssue(e){
const issueDesc = document.getElementById('issueDescInput').value;
const issueSeverity = document.getElementById('issueSeverityInput').value;
const issueAssignedTo = document.getElementById('issueAssignedToInput').value;
const issueId = chance.guid();
const issueStatus = 'Open';
let issue = {
id: issueId,
description: issueDesc,
severity: issueSeverity,
assignedTo: issueAssignedTo,
status: issueStatus
}
if (localStorage.getItem('issues') == null){
let issues = [];
issues.push(issue);
localStorage.setItem('issues', JSON.stringify(issues));
} else {
let issues = JSON.parse(localStorage.getItem('issues'));
issues.push(issue);
localStorage.setItem('issues', JSON.stringify(issues));
}
document.getElementById('issueInputForm').reset();
fetchIssues();
e.preventDefault();
}
function fetchIssues(){
let issues = JSON.parse(localStorage.getItem('issues'));
let issuesListe = document.getElementById('issuesList');
issuesList.innerHTML = '';
for(let i = 0; i < issues.length; i++){
let id = issues[i].id;
let desc = issues[i].description;
let severity = issues[i].severity;
let assignedTo = issues[i].assignedTo;
let status = issues[i].status;
issuesList.innerHTML += '<div class="well">' +
'<h6>Issue ID: ' + id + '</h6>'
'<p><span class="label label-info">' + status + '</span></p>' +
'<h3>' + desc + '</h3>' +
'<p><span class="glyphicon glyphicon-time"></span>' + severity + '</p>' +
'<p><span class="glyphicon glyphicon-user"></span>' + assignedTo + '</p>' +
'<a href="#" onclick="setStatusClosed(\''+ id + '\')" class="btn btn-warning">Close</a>' +
'<a href="#" onclick="deleteIssue(\''+ id + '\')" class="btn btn-danger">Delete</a>' +
'</div>'
}
}