Just trying out these using a video tutorial but the delete function isn’t working.I’v checked this more than 10 times and still can’t find the error,please I need your help
HTML FILE
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="icon" href="favicon.ico">
<title>Website Bookmaker</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
/* Space out content a bit */
body {
padding-top: 20px;
padding-bottom: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-right: 15px;
padding-left: 15px;
}
/* Custom page header */
.header {
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
/* Customize container */
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.header,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
</style>
</head>
<body onload="fetchBookmarks()">
<div class="container">
<div class="header clearfix">
<nav>
</nav>
<h3 class="text-muted">Bookmark App</h3>
</div>
<div class="jumbotron">
<h2>Tunjiy's Bookmarker</h2>
<form id="myForm">
<div class="form-group">
<label>Website Name</label>
<input type="test" class="form-control" id="sitename" placeholder="Enter sitename">
</div>
<div class="form-group">
<label>Website URL</label>
<input type="test" class="form-control" id="siteurl" placeholder="Enter siteURL">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="row marketing">
<div class="col-lg-12">
<div id="results"></div>
</div>
</div>
<footer class="footer">
<p>© 2018 Bookmarker Inc.</p>
</footer>
</div> <!-- /container -->
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="js\bootstrap.min.js"></script>
<script src="js\main.js"></script>
</body>
</html>
JSCRIPT FILE
document.getElementById("myForm").addEventListener("submit",storeBookmark);
//save bookmark
function storeBookmark(e){
//get form values
var siteName=document.getElementById("sitename").value;
var siteUrl=document.getElementById("siteurl").value;
var bookmark=
{
name:siteName,
url:siteUrl
}
console.log(bookmark);
/* //local storage Test
localStorage.setItem("test","Hello world");
console.log(localStorage.getItem("test"));
localStorage.removeItem("test");
console.log(localStorage.getItem("test"));
*/
//Test if bokmarks is null
if (localStorage.getItem("bookmarks")===null)
{
//array initialization
var bookmarks=[];
//add to array
bookmarks.push(bookmark);
//set to local storage
localStorage.setItem("bookmarks",JSON.stringify(bookmarks));
}else
{
//get bookmarks from local storage
var bookmarks=JSON.parse(localStorage.getItem("bookmarks"));
//add bookmark to array
bookmarks.push(bookmark);
//reset to local storage
localStorage.setItem("bookmarks",JSON.stringify(bookmarks));
}
//refetch bookmark
fetchBookmarks();
//prevent form from submitting
e.preventDefault();
}
function deletBookmark(url)
{
//console.log(url);
// get bookmarks from localstorage
var bookmarks=JSON.parse(localStorage.getItem("bookmarks"));
for (var i=0; i < bookmarks.length; i++)
{
if(bookmarks[i].url == url)
{
//remove from array
bookmarks.splice(i, 1);
}
}
//reset back to local storage
localStorage.setItem("bookmarks",JSON.stringify(bookmarks));
//refetch bookmarks,continue from here
fetchBookmarks();
}
//fetch bookmarks
function fetchBookmarks()
{
var bookmarks=JSON.parse(localStorage.getItem("bookmarks"));
//console.log(bookmarks);
//get output id
var results=document.getElementById("results");
//build output
results.innerHTML="";
for(var i = 0; i < bookmarks.length; i++)
{
var name= bookmarks[i].name;
var url= bookmarks[i].url;
results.innerHTML+="<div class='well'>"+
"<h3>"+name+
"<a class='btn btn-default' target='_blank' href='"+url+"'>Visit</a> "+
"<a onClick='deletBookmark(\" "+url+"\")' class='btn btn-danger' href='#'>Delete</a>" +
"<h3>" +
"</div>";
}
}