What is the best way to add a "Save to Favorites" link within a modal window

Question

What is the best way to add a "Save to Favorites" link within a modal window

I have integrated the NASA API to showcase images, where clicking on an image reveals a modal containing additional details. There is also a save to favorites functionality in the tutorial that allows users to save images and details to a local storage section.

My query revolves around implementing the add to favorites feature link within the modals and subsequently saving the image and details to the favorites section in local storage. How can I achieve this?

const resultsNav = document.getElementById("resultsNav");
const favoritesNav = document.getElementById("favoritesNav");
const imagesContainer = document.querySelector(".images-container");
const saveConfirmed = document.querySelector(".save-confirmed");
const loader = document.querySelector(".loader");

// NASA API
const count = 3;
const apiKey = 'DEMO_KEY';
const apiUrl = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}&count=${count}`;

let resultsArray = [];
let favorites = {};

// Show Content
function showContent(page) {
  window.scrollTo({
    top: 0,
    behavior: "instant"
  });
  if (page === "results") {
    resultsNav.classList.remove("hidden");
    favoritesNav.classList.add("hidden");
  } else {
    resultsNav.classList.add("hidden");
    favoritesNav.classList.remove("hidden");
  }
  loader.classList.add("hidden");
}

// Create DOM Nodes
function createDOMNodes(page) {
  const currentArray =
    page === "results" ? resultsArray : Object.values(favorites);
  currentArray.forEach((result) => {
    // Card Container
    const card = document.createElement("div");
    card.classList.add("card");

    // Link that wraps the image
    const link = document.createElement("a");

    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById("myImg");
    var modalImg = document.getElementById("img01");

    var captionText = document.getElementById("caption");
    img.onclick = function() {
      modal.style.display = "block";
      modalImg.src = event.target.src;
      captionText.innerHTML = event.target.alt;
    }

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }

    // Image
    const image = document.createElement("img");
    image.src = result.url;
    image.alt = result.title + "<br>" + result.explanation + "<br>" + ' ' + result.date;
    image.loading = "lazy";
    image.classList.add("card-img-top");

    // Card Body
    const cardBody = document.createElement("div");
    cardBody.classList.add("card-body");

    // Card Title
    const cardTitle = document.createElement("h5");
    cardTitle.classList.add("card-title");
    cardTitle.textContent = result.title;

    // Save Text
    const saveText = document.createElement("p");
    saveText.classList.add("clickable");
    if (page === "results") {
      saveText.textContent = "Add To Favorites";
      saveText.setAttribute("onclick", `saveFavorite('${result.url}')`);
    } else {
      saveText.textContent = "Remove Favorite";
      saveText.setAttribute("onclick", `removeFavorite('${result.url}')`);
    }

    // Card Text
    const cardText = document.createElement("p");
    cardText.textContent = result.explanation;

    // Footer Conatiner
    const footer = document.createElement("small");
    footer.classList.add("text-muted");

    // Date
    const date = document.createElement("strong");
    date.textContent = result.date;

    // Copyright
    const copyrightResult =
      result.copyright === undefined ? "" : result.copyright;
    const copyright = document.createElement("span");
    copyright.textContent = ` ${copyrightResult}`;

    // Append everything together
    footer.append(date, copyright);
    cardBody.append(cardTitle, saveText, cardText, footer);
    link.appendChild(image);
    card.append(link); 
    imagesContainer.appendChild(card);
  });
}

// Update the DOM
function updateDOM(page) {
  if (localStorage.getItem("nasaFavorites")) {
    favorites = JSON.parse(localStorage.getItem("nasaFavorites"));
  }
  imagesContainer.textContent = "";
  createDOMNodes(page);
  showContent(page);
}

// Get 10 images from NASA API
async function getNasaPictures() {
  loader.classList.remove("hidden");
  try {
    const response = await fetch(apiUrl);
    resultsArray = await response.json();
    updateDOM("results");
  } catch (error) {
    // Error Handling
  }
}

// Add result to favorites
function saveFavorite(itemUrl) {
  resultsArray.forEach((item) => {
    if (item.url.includes(itemUrl) && !favorites[itemUrl]) {
      favorites[itemUrl] = item;
      saveConfirmed.hidden = false;
      setTimeout(() => {
        saveConfirmed.hidden = true;
      }, 2000);
      localStorage.setItem("nasaFavorites", JSON.stringify(favorites));
    }
  });
}

// Remove item from favorites
function removeFavorite(itemUrl) {
  if (favorites[itemUrl]) {
    delete favorites[itemUrl];
    localStorage.setItem("nasaFavorites", JSON.stringify(favorites));
    updateDOM("favorites");
  }
}

getNasaPictures();

javascript html css local-storage

Answer 1

Answer №1

Intriguing query! Upon checking the Nasa.api, I discovered that the server will provide an array containing objects. Therefore, an optimal approach would be to utilize an array to store all the liked items for easier display.

My recommendation is to directly store the information given by Nasa.api into an array and save it in localStorage. This will facilitate the display process later on.

I have also formulated a sample using Nasa.api for your reference. Although I lack your complete code and methodology for obtaining/displaying it, you can observe how I modified the localStorage section.

Within the sample I created, each time a user clicks the like button, it will be saved to the liked array and stored in localStorage. Every other click will remove 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()
  }
}
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>
`
    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 {
        liked.splice(liked.indexOf(source[index]), 1)
        localStorage.setItem('likeditem', JSON.stringify(liked));
        thisbutton.textContent = 'Save to like'
      }
    }
  }
}

As for displaying elements from localStorage, here's an example:

Having already saved all image info in the localStorage, we can simply employ the same method used for displaying info from Nasa.api.

let liked = JSON.parse(localStorage.getItem("likeditem"));

for (let i in liked){
if(!liked) break;;
        document.body.innerHTML += `
         <img src=${liked[i].url}>
         <div >${liked[i].title}</div>
         <div >Date: ${liked[i].date}</div>
          <div>Copyright: ${liked[i].copyright}</div>
          <div>Media_type: ${liked[i].media_type}</div>
          <div>Service_version: ${liked[i].service_version}</div>
         <div>Explanation: ${liked[i].explanation}</div>
          `
}

Update:

Save to localStorage:

https://i.sstatic.net/zByFl.png

Display from localStorage:

https://i.sstatic.net/sLC5Z.jpg

Answer 2

Intriguing query! Upon checking the Nasa.api, I discovered that the server will provide an array containing objects. Therefore, an optimal approach would be to utilize an array to store all the liked items for easier display.

My recommendation is to directly store the information given by Nasa.api into an array and save it in localStorage. This will facilitate the display process later on.

I have also formulated a sample using Nasa.api for your reference. Although I lack your complete code and methodology for obtaining/displaying it, you can observe how I modified the localStorage section.

Within the sample I created, each time a user clicks the like button, it will be saved to the liked array and stored in localStorage. Every other click will remove 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()
  }
}
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>
`
    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 {
        liked.splice(liked.indexOf(source[index]), 1)
        localStorage.setItem('likeditem', JSON.stringify(liked));
        thisbutton.textContent = 'Save to like'
      }
    }
  }
}

As for displaying elements from localStorage, here's an example:

Having already saved all image info in the localStorage, we can simply employ the same method used for displaying info from Nasa.api.

let liked = JSON.parse(localStorage.getItem("likeditem"));

for (let i in liked){
if(!liked) break;;
        document.body.innerHTML += `
         <img src=${liked[i].url}>
         <div >${liked[i].title}</div>
         <div >Date: ${liked[i].date}</div>
          <div>Copyright: ${liked[i].copyright}</div>
          <div>Media_type: ${liked[i].media_type}</div>
          <div>Service_version: ${liked[i].service_version}</div>
         <div>Explanation: ${liked[i].explanation}</div>
          `
}

Update:

Save to localStorage:

https://i.sstatic.net/zByFl.png

Display from localStorage:

https://i.sstatic.net/sLC5Z.jpg

Answer 3

Answer №2

UPDATE: I have made some edits to my previous response. The following code snippet should be useful to you. (Please note that this code will not function here, so please try it out on your own system as localStorage is not supported in this environment.)

let nasaImages = [
    {
        id:1,
        url:"https://example.com/image-url-1"
    },
    {
        id:2,
        url:"https://example.com/image-url-2"
    },
    {
        id:3,
        url:"https://example.com/image-url-3"
    }
];

let favs = [];

// Check if the key exists in localstorage
if(localStorage.nasaFavs){
    favs = JSON.parse(localStorage.nasaFavs)
}

renderImages();

function renderImages(){
    $("#images").html(nasaImages.map(image => (
            `<div>
                id: ${image.id}
                <img src='${image.url}'>
                ${favBtn(image.id)}
            </div>`
        )
    ).join(""));
}

// Render the favorite button
function favBtn(id){
    if(favs.includes(id)){
        return `<button onclick="favUnfav(false,${id})">Remove from fav</button>`;
    }
    else{
        return `<button onclick="favUnfav(true,${id})">Add to fav</button>`;
    }
}

function favUnfav(isFav=true, id=null){
    // Write your logic to add to fav or remove from fav
    if(isFav){
        favs.push(id);
    }
    else{
        favs = favs.filter(e => e!=id);
    }

    // Save in localstorage
    localStorage.nasaFavs = JSON.stringify(favs);

    // Re-render the DOM
    renderImages()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="images"></div>

Answer 4

UPDATE: I have made some edits to my previous response. The following code snippet should be useful to you. (Please note that this code will not function here, so please try it out on your own system as localStorage is not supported in this environment.)

let nasaImages = [
    {
        id:1,
        url:"https://example.com/image-url-1"
    },
    {
        id:2,
        url:"https://example.com/image-url-2"
    },
    {
        id:3,
        url:"https://example.com/image-url-3"
    }
];

let favs = [];

// Check if the key exists in localstorage
if(localStorage.nasaFavs){
    favs = JSON.parse(localStorage.nasaFavs)
}

renderImages();

function renderImages(){
    $("#images").html(nasaImages.map(image => (
            `<div>
                id: ${image.id}
                <img src='${image.url}'>
                ${favBtn(image.id)}
            </div>`
        )
    ).join(""));
}

// Render the favorite button
function favBtn(id){
    if(favs.includes(id)){
        return `<button onclick="favUnfav(false,${id})">Remove from fav</button>`;
    }
    else{
        return `<button onclick="favUnfav(true,${id})">Add to fav</button>`;
    }
}

function favUnfav(isFav=true, id=null){
    // Write your logic to add to fav or remove from fav
    if(isFav){
        favs.push(id);
    }
    else{
        favs = favs.filter(e => e!=id);
    }

    // Save in localstorage
    localStorage.nasaFavs = JSON.stringify(favs);

    // Re-render the DOM
    renderImages()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="images"></div>

Answer 5

Answer №3

Like @ba2sik mentioned earlier, start by familiarizing yourself with the localStorage API.

Currently, you are storing the entire favorites object in local storage using the key nasaFavorites. To retrieve it, simply use

JSON.parse(localStorage.getItem('nasaFavorites'))

to parse the data whenever you need to access it.

Keep in mind that the code provided does not account for edge cases or errors, so it's advisable to handle them using try/catch.

Answer 6

Like @ba2sik mentioned earlier, start by familiarizing yourself with the localStorage API.

Currently, you are storing the entire favorites object in local storage using the key nasaFavorites. To retrieve it, simply use

JSON.parse(localStorage.getItem('nasaFavorites'))

to parse the data whenever you need to access it.

Keep in mind that the code provided does not account for edge cases or errors, so it's advisable to handle them using try/catch.

What is the best way to add a "Save to Favorites" link within a modal window

Answer №1

Answer №2

Answer №3

Similar questions

When JSF renders bootstrap buttons, they appear without any horizontal padding

I have discovered some amazing jQuery image hover effects that are simply breathtaking –

Arrange the navigation bar in a straight line

Implementing Angular to activate the JavaScript 'click' event

Retrieving data from router in Angular

Guide on transforming Div content to json format with the use of jquery

Tips for accessing the value from an input field in an AngularJS application

Adding double quotes, where they haven't been added yet

What is the best way to retrieve an array that was created using the useEffect hook in React?

Navigating through pages: How can I retrieve the current page value for implementing next and previous functions in Angular 7?

Adding elements to an array in Node.js

Using jQuery to retrieve the TD value

Incorporate adjustable div heights for dynamically toggling classes on various DOM elements

Merge the JSON data with the Node.js/Express.js response

It's recommended to utilize the callback feature with setLoggedIn to ensure the previous state is captured effectively, as illustrated below:

Ways to retrieve the initial key object received through an AJAX request

There seems to be a problem as exits.success is not a recognized function -

Encountering an issue with React JS Array Filtering: running into the error message "

Set the Checkbox selections by utilizing the array values in the MUI DataGrid

Deactivate the signup button automatically when the user is not present, without the need to refresh