here is my JavaScript code, i don't understand why all of my output isn't displaying. i followed the tutorial line for line, and mine isn't displaying like the instructor's. I've checked to make sure all files are without errors, but i'm not sure where to begin troubleshooting.
// Listen for form submit
document.getElementById("myForm").addEventListener("submit", saveBookmark);
// save Bookmark
function saveBookmark(e){
// Get form values
var siteName = document.getElementById('siteName').value;
var siteUrl = document.getElementById('siteUrl').value;
if(!validateForm(siteName, siteUrl)){
return false
}
var bookmark = {
name: siteName,
url: siteUrl
};
/*
// Local Storage Test
window.localStorage.setItem('test', 'Hello World');
console.log(window.localStorage.getItem('test'));
window.localStorage.removeItem('test');
console.log(window.localStorage.getItem('test'));
*/
// Test if bookmarks is null
if(window.localStorage.getItem('bookmarks') === null){
//initialize array
var bookmarks = [];
// Add to array
bookmarks.push(bookmark);
// Set to localStorage
window.localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}else{
// Get bookmarks from localStorage
var bookmarks = JSON.parse(window.localStorage.getItem('bookmarks'));
// Add bookmark to array
bookmarks.push(bookmark);
// Re-set back to localStorage
window.localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}
// clear form
document.getElementById('myForm').reset();
// Re-fetch bookmarks
fetchBookmarks();
// prevent form from submitting
e.preventDefault();
//Delete bookmark
function deleteBookmarks(url) {
//Get bookmarks from localStorage
var bookmarks = JSON.parse(window.localStorage.getItem('bookmarks'));
//loop through bookmarks
for (var i=0; i < bookmarks.length; i++){
if (bookmarks[i].url == url){
//Remove from array
bookmarks.splice(i, 1);
}
}
// Re-set back to localStorage
window.localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
// Re-fetch bookmarks
fetchBookmarks();
}
//Fetch bookmarks
function fetchBookmarks(){
// Get bookmarks from localStorage
var bookmarks = JSON.parse(window.localStorage.getItem('bookmarks'));
// Get output id
var bookmarksResults = document.getElementById('bookmarksResults');
// Build output
bookmarksResults.innerHTML = '';
for(var i = 0; i < bookmarks.length; i++){
var name = bookmarks[i].name;
var url = bookmarks[i].url;
bookmarksResults.innerHTML += '<div class="well">'+
'<h3>'+name+
'<a class="btn btn-default"
target="_blank" href="'+url+'">Visit</a> ' +
'<a
onclick="deleteBookmark(\''+url+'\')" class="btn btn-danger"
href="#">Delete</a> '+
'</h3>' +
'</div>';
}
}
// Validate form
function valideteForm(siteName, siteUrl) {
if(!siteName || !siteUrl) {
alert('Please fill in the form');
return false;
}
var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-
Z0-9@:%_\+.~#?&//=]*)?/gi;
var regex = new RegExp(expression);
if(!siteUrl.match(regex)){
alert('Please use a valid URL')
return false
}
return true
};
var bookmark = {
name: siteName,
url: siteUrl
}
}
and here's my 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.0">
<title>Site Bookmarker</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body window.onload="fetchBookmarks()">
<div class="container">
<div class="header clearfix">
<nav>
</nav>
<h3 class="text-muted">Bookmarker</h3>
</div>
<div class="jumbotron">
<h2>Bookmark Your Favorite Sites</h2>
<form id="myForm">
<div class="form-group">
<label>Site Name</label>
<input type="text" class="form-control" id="siteName" placeholder="Website Name">
</div>
<div class="form-group">
<label>Site URL</label>
<input type="text" class="form-control" id="siteUrl" placeholder="Website URL">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="row marketing">
<div class="col-lg-12">
<div id="bookmarksResults"></div>
</div>
</div>
<footer class="footer">
<p>© InsPiredDesign 2018</p>
</footer>
</div> <!-- /container -->
<script src="http://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>
Aucun commentaire:
Enregistrer un commentaire