JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<button class="add-wishlink" data-wishlink="http://www.example-1.com">
    Add link 1 to wish links
</button>

<button class="add-wishlink" data-wishlink="http://www.example-2.com">
    Add link 2 to wish links
</button>

<button class="add-wishlink" data-wishlink="http://www.example-3.com">
    Add link 3 to wish links
</button>

<br/><br/>

<button class="share-wishlinks">
    Share wish links
</button>

<br/><br/>

<button class="delete-wishlinks">
    Delete wish links
</button>

JavaScript

// add wish link
$('.add-wishlink').on('click', function() {

  // get our wish link from current clicked add wish link button
  let wishlink = $(this).data('wishlink');

  // set our wish link vars
  let wishlinks = [];
  let duplicate = false;

  // if we have wish links
  if (localStorage.getItem('wishlinks')) {

    // get wish links from local storage and parse data to array
    wishlinks = JSON.parse(localStorage.getItem('wishlinks'));

  }

  // for each of our wish links
  $.each(wishlinks, function(index, value) {

    // check if link already exists
    if (wishlink === value) {

      // if link already exists mark as duplicate 
      duplicate = true;

      // show alert to user
      alert('Link already added');

    }

  });

  // if wishlink is not a duplicate  
  if (!duplicate) {

    // add new link to wish links array
    wishlinks.push(wishlink);

    // update the local storge wi
    localStorage.setItem('wishlinks', JSON.stringify(wishlinks));

    // show alert to user that link has been added
    alert('Link added to wishlinks\r\n' + wishlink);

  }

});

// share wish links
$('.share-wishlinks').on('click', function() {

  // if we have wish links
  if (localStorage.getItem('wishlinks')) {

    // set our email share vars
    let email = '';
    let subject = 'My Wishlinks';
    let body = 'Here are my Wishlinks...\r\n\r\n';
    let wishlinks = JSON.parse(localStorage.getItem('wishlinks'));

    // for each of our wish links
    $.each(wishlinks, function(index, value) {

      // add each link to end of body
      body += value + '\r';

    });

    // open mailto link with wish links
    window.open('mailto:' + email + '?subject=' + encodeURI(subject) + '&body=' + encodeURI(body));

  } else {

    // alert user that they have no wish links
    alert('You have no wishlinks.');

  }

});

// delete wish links
$('.delete-wishlinks').on('click', function() {

  // if we have wish links
  if (localStorage.getItem('wishlinks')) {

    //...