How to create 'add to favourite' feature in a html cordova android app?

Question

I am creating a song book app using phonegap. In index.html i have list of songs in li tags. when i click on a particular song it will open that particular song's lyrics in another local html file.

I want to add a 'favourite button'. When the favourite button is clicked I want that particular song to be added to the favourites list. When user open the favourite page it should display list of their favourite songs, and when they click a song in favourite page it should open that particular song's lyrics html page.

I am an intermediate user of HTML and a beginner in JavaScript.

Please help me accomplish this,

Thanks in advance.

Answer 1

Because this is a 'pretty broad' question, it is hard to find an answer for this, but I'd suggest making an array, storing the favorite songs into it, then when you open the favorites.html page, it gets the array, and writes the information to the page.

e.g. when a favorite button is clicked on a song page, it writes: the name of the song(exampleSong), the page of the song(exampleSong.html), and other random details that you need, and going to the favorites.html should get a document ready function that reads the array and writes the page.

Sorry if I can't help that much, but this was a really broad question.

If you need help, here are some examples that I created

(This gets the array of favorites, and prints them out)

var favorites = [
  ["ExampleSong", "exampleSong.html"],
  ["LorddirtCoolSong", "LorddirtCoolSong.html"],
  ["StackOverflowIsAwesome", "StackOverflowIsAwesome.html"]
];

var containerA = document.getElementById("favoritesA");
for (var i in favorites) 
{
   
   for (var j in favorites[i]) 
     {
      var newElement = document.createElement("p");
      newElement.innerHTML = favorites[i][j];
      containerA.appendChild(newElement);
     }
}

var containerB = document.getElementById("favoritesB");
for (var i in favorites) 
{
   var newElement = document.createElement("p");
      newElement.innerHTML = "<h4>Favorite Song " + i + "</h4>";
      containerB.appendChild(newElement);
   for (var j in favorites[i]) 
     {
      var newElement = document.createElement("p");
      newElement.innerHTML = favorites[i][j];
      containerB.appendChild(newElement);
     }
}

var containerC = document.getElementById("favoritesC");
for (var i in favorites) 
{
   var newElement = document.createElement("p");
      newElement.innerHTML = "<h4>Favorite Song " + i + "</h4>";
      containerC.appendChild(newElement);
   for (var j in favorites[i]) 
     {
     if(j == 1){
     }else{
      var newElement = document.createElement("p");
      newElement.innerHTML = "<a href='" + favorites[i][1] + "'>" + favorites[i][j] + "</a>";
      containerC.appendChild(newElement);
      }
     }
}

.favoriteSongs{
border: 2px solid black;
display: block;
}

<!--
EXAMPLE 1A: Print out the Favorites
-->
<hr>
<h2>Example 1A: Print favorites out</h2>
<div id='favoritesA' class='favorites'>
</div>
<hr>
<!--
EXAMPLE 1B: Now you know the order of the songs!
-->
<h2>Example 1B: Print favorites out with formatting</h2>
<div id='favoritesB' class='favorites'>
</div>
<hr>
<!--
EXAMPLE 1C: Link them
-->
<h2>Example 1C: Link to the page</h2>
<div id='favoritesC' class='favorites'>
</div>
<hr>

Very self explanatory, it gets the array of favorite songs, with the name and url, gets the container, which is <div id='favorites'></div> and writes the contents into it.

(oh wait, i just noticed I spent so long working on this hahaha.) Examples:

1A: All I did was search the array favorites, and print out every single thing in the array. Simple.

1B: Slightly different, it's the same as the last, but I added a <h4> tag before every array in the array. (Yes, arrays inside arrays inside arrays are confusing).

1C: Instead of printing out both of the arrays inside the arrays, just print out the first thing inside the arrays in the arrays, and add a link pointing to the second thing inside the arrays in the arrays. Confused already? Just read it through and you'll understand.

Answer 2

Hi I found a solution using another SO question.

First we will create a local storage and store song details in that local storage key. then we will retrieve that information in favorite.html using localStorage.getItem(key);

The following is my code for first song song1.html when button pressed song link will be appended to local storage

<!DOCTYPE html>
<html>
<body onload="mySong()">



<button onclick="mySongOne()">add to favorite</button>





<script>
function mySong() {

localStorage.setItem("favsong", "");
}


 function appendToStorage(name, data){
    var old = localStorage.getItem(name);
    if(old === null) old = "";
    localStorage.setItem(name, old + data);
}
function mySongOne() {
   appendToStorage("favsong", "<a href='https://www.song1.com'><h1>song1</h1></a>");
}


</script>

</body>
</html>

for another song song2.html when button pressed second song link will be appended to local storage

<!DOCTYPE html>
<html>
<body>



<button onclick="mySongTwo()">add to favorite</button>



<script>
 function appendToStorage(name, data){
    var old = localStorage.getItem(name);
    if(old === null) old = "";
    localStorage.setItem(name, old + data);
}
function mySongTwo() {
   appendToStorage("favsong", "<a href='https://song2.com'><h1>song2</h1></a>");
}


</script>

</body>
</html>

and favorite.html on page load it will show details from local storage

<!DOCTYPE html>
<html>
<body onload="yourFunction()">

<div id="result"></div>



<script>
function yourFunction() {
  document.getElementById("result").innerHTML = localStorage.getItem("favsong");
}



</script>

</body>
</html>