How to Add an "Add to Favorites" Button or Link on My Website

$(function() {  $('#bookmarkme').click(function() {    if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark      window.sidebar.addPanel(document.title, window.location.href, '');    } else if (window.external && ('AddFavorite' in window.external)) { // IE Favorite      window.external.AddFavorite(location.href, document.title);    } else if (window.opera && window.print) { // Opera Hotlist      this.title = document.title;      return true;    } else { // webkit - safari/chrome      alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');    }  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark This Page</a>

How do I add a favorite option on my site?

I would try the following: In your <ul> you can add icons to your buttons like this:

<ul id="itemsToFilter">
                <li data-type="alleen" class="meal">
                    <figure><img src="/Menukaart_wk5/image/sushi_1.jpg" alt="Sushi close up"></figure>
                    <h2><strong>Sushi box | €14.50 </strong></h2>
                    <p>Keuze uit 3 grote sushisoorten en 4 kleine. Of laat je verassen door de keuze van de chef!</p>
                    <button class="hartje" onclick="favorizeMeal(0)"><i id="0" class="fa fa-heart-o"></i></i></button>
                </li>
                <li data-type="alleen" class="meal">
                    <figure><img src="/Menukaart_wk5/image/sushi_2.jpg" alt="Vegetarische sushi"></figure>
                    <h2><strong>Sushi vegabox | €19.50</strong></h2>
                    <p>Keuze uit 3 grote sushisoorten en 4 kleine, zonder vis. Of laat je verassen door de keuze van de chef! </p>
                    <button class="hartje" onclick="favorizeMeal(1)"><i id="1" class="fa fa-heart-o"></i></i></button>
                </li>
                <li data-type="delen" class="meal">
                    <figure><img src="/Menukaart_wk5/image/sushi_3.jpg" alt="Grote box met sushi"></figure>
                    <h2><strong>Sushi box groot | €29.95 </strong></h2>
                    <p>Keuze uit 7 grote sushisoorten en 8 kleine. Ideaal om te delen! </p>
                    <button class="hartje" onclick="favorizeMeal(2)"><i id="2" class="fa fa-heart"></i></i></button>
                </li>
                <li data-type="groot" class="meal">
                    <figure><img src="/Menukaart_wk5/image/pasta_1.jpg" alt="Pasta tagliatelle"></figure>
                    <h2><strong>Pasta tagliatelle | €12.50 </strong></h2>
                    <p>Altijd lekker en dit gerecht is vegetarisch!</p>
                    <button class="hartje" onclick="favorizeMeal(3)"><i id="3" class="fa fa-heart-o"></i></i></button>
                </li>
                <li data-type="alleen" class="meal">
                    <figure><img src="/Menukaart_wk5/image/champ_soep.jpg" alt="Champignonsoep"></figure>
                    <h2><strong>Champignonsoep | €8.50 </strong></h2>
                    <p>Heerlijk als voorgerecht en dit gerecht is vegetarisch!</p>
                    <button class="hartje" onclick="favorizeMeal(4)"><i id="4" class="fa fa-heart-o"></i></i></button>
                </li>
                <li data-type="groot" class="meal">
                    <figure><img src="/Menukaart_wk5/image/gnocchi.jpg" alt="Gnocchi"></figure>
                    <h2><strong>Gnocchi | €11.50</strong></h2>
                    <p>Te bestellen als vega gerecht, of met vlees!</p>
                    <button class="hartje" onclick="favorizeMeal(5)"><i id="5" class="fa fa-heart-o"></i></i></button>
                </li>
                <li data-type="delen" class="meal">
                    <figure><img src="/Menukaart_wk5/image/ei_in_saus.jpg" alt="Shakshuka"></figure>
                    <h2><strong>Shakshuka | vanaf €8.50 </strong></h2>
                    <p>Heerlijk om mee te dippen. Kies je eigen dipsoort!</p>
                    <button class="hartje" onclick="favorizeMeal(6)"><i id="6" class="fa fa-heart-o"></i></i></button>
                </li>
                <li data-type="delen" class="meal">
                    <figure><img src="/Menukaart_wk5/image/pizza.jpg" alt="Pizza"></figure>
                    <h2><strong>Pizza | vanaf €11.50 </strong></h2>
                    <p>Stel jouw eigen pizza samen!</p> 
                    <button class="hartje" onclick="favorizeMeal(7)"><i id="7" class="fa fa-heart-o"></i></i></button>
                </li>
                <li data-type="groot" class="meal">
                    <figure><img src="/Menukaart_wk5/image/patat.jpg" alt="Patat"></figure>
                    <h2><strong>Patat | vanaf €3.50 </strong></h2>
                    <p>Stel jouw eigen patatje samen! Ga jij voor de patat met of pak je uit met een patatje oorlog?</p>
                    <button class="hartje" onclick="favorizeMeal(8)"><i id="8" class="fa fa-heart-o"></i></i></button>
                </li>
            </ul>

For the icons to show up you need to add this link to the icon library I used in the head section of your html:

<head>
...
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

There are more icon libraries, find a tutorial here: https://www.w3schools.com/icons/default.asp

Then you need to implement a logic in your Javascript that exchanges the icon class 'fa-heart' with 'fa-heart-o' if the user clicked on the button.

favorizeMeal(mealNumber) {
  console.log("favorizeMeal clicked for meal number: ", mealNumber);
  var selectedIcon = document.getElementById(mealNumber);
  if (selectedIcon.classList.contains('fa-heart') { 
   selectedIcon.classList.remove("fa-heart");
   selectedIcon.classList.add("fa-heart-o");
  } else {
   selectedIcon.classList.add("fa-heart");
   selectedIcon.classList.remove("fa-heart-o");
  }
}

Something like this (I didn't test it though!)

Cross-browser bookmark/add to favorites JavaScript

jQuery Version

JavaScript (modified from a script I found on someone's site - I just can't find the site again, so I can't give the person credit):

$(document).ready(function() {
  $("#bookmarkme").click(function() {
    if (window.sidebar) { // Mozilla Firefox Bookmark
      window.sidebar.addPanel(location.href,document.title,"");
    } else if(window.external) { // IE Favorite
      window.external.AddFavorite(location.href,document.title); }
    else if(window.opera && window.print) { // Opera Hotlist
      this.title=document.title;
      return true;
    }
  });
});

HTML:

<a id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark This Page</a>

IE will show an error if you don't run it off a server (it doesn't allow JavaScript bookmarks via JavaScript when viewing it as a file://...).

Add bookmark this page button - 2016

Since there has been no solution this is the best I was able to come up with, after some research.

// Bookmark me
$('.js-bookmarkme').click(function(e) {
    e.preventDefault();
    var bookmarkURL = window.location.href;
    var bookmarkTitle = document.title;

    if ('addToHomescreen' in window && window.addToHomescreen.isCompatible) {
        // Mobile browsers
        addToHomescreen({ autostart: false, startDelay: 0 }).show(true);
    } else if (window.sidebar && window.sidebar.addPanel) {
        // Firefox version < 23
        window.sidebar.addPanel(bookmarkTitle, bookmarkURL, '');
    } else if ((window.sidebar && /Firefox/i.test(navigator.userAgent)) || (window.opera && window.print)) {
        // Firefox version >= 23 and Opera Hotlist
        $(this).attr({
            href: bookmarkURL,
            title: bookmarkTitle,
            rel: 'sidebar'
        }).off(e);
        return true;
    } else if (window.external && ('AddFavorite' in window.external)) {
        // IE Favorite
        window.external.AddFavorite(bookmarkURL, bookmarkTitle);
    } else {
        // Other browsers (mainly WebKit - Chrome/Safari)
        alert('Please press ' + (/Mac/i.test(navigator.userAgent) ? 'CMD' : 'Strg') + ' + D to add this page to your favorites.');
    }

    return false;
});

How to create Add To Favorites hyperlink?

I have been unable to find a clear-cut answer to this question, or an answer that was posted to the Internet less than 7 years ago that still works.

How is this for clear cut... you can't.

7 years ago, various browsers supported various ways (some hacks, some official) to add bookmarks using javascript. However, as duskwuff mentioned, support for this functionality is on the way out - maybe because it was little used, maybe because it is a security issue.

How to insert save to favourites feature link within modal?

An interesting question, I check the Nasa.api and i find that the sever will return you an array that contain object, so a good option is to use an array to store all the liked item and it will be easier for you display.

My suggestion for you is to directly store the info that nasa.api give to you to the array and store in localStorage. It will be easier for you to display later.

I also created an example for you that use nasa.api that you could use it since I doesn't have your full code and how you get the code/display it, but you could just see the part that how i modify the localStorage

So in the example I created, every time user click on the liked button, it will save to liked (array) and save to localStorage. Every second time, user click the button , we will delete the item from the liked array and update localStorage.

let source;
let xhr = new XMLHttpRequest();
let link = "https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&count=5"
xhr.open('GET', link, true);
xhr.send();
let liked = JSON.parse(localStorage.getItem("likeditem"));

if (liked == null) liked = [];
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    source = JSON.parse(xhr.responseText);
    create()
  }
} //Check if liked is null, if it is, assign empty array value to it.

function create() {
  for (let i = 0; i < source.length; i++) {
    console.log(source[i])
    document.body.innerHTML += `
         <img src=${source[i].url}>
         <div >${source[i].title}</div>
         <div >Date: ${source[i].date}</div>
          <div>Copyright: ${source[i].copyright}</div>
          <div>Media_type: ${source[i].media_type}</div>
          <div>Service_version: ${source[i].service_version}</div>
         <div>Explanation: ${source[i].explanation}</div>
          <button onclick='save(${i})'>Save to like</button>
`
    //TO save/remove liked item from local Storage when button clicked
    window.save = function(index) {
      let thisbutton = document.querySelectorAll('button')[index]
      if (thisbutton.textContent == 'Save to like') {
        liked.push(source[index])
        localStorage.setItem('likeditem', JSON.stringify(liked));
        thisbutton.textContent = "Saved"
      } else {
        //Remove it from local storage when user click it every two times
        liked.splice(liked.indexOf(source[index]), 1)
        localStorage.setItem('likeditem', JSON.stringify(liked));
        thisbutton.textContent = 'Save to like'
      }
    }
  }
}