0

I am creating a web application for myself called "Browser Sort" which allows me to have a landing page of my favorite websites where i can click on icon and go to page and/or pages and stops me from browsing the internet for hours. Its a fun little project I am trying to do.

I have everything working so far, dark/light mode and the icons and list are working great. The only issue is I used jQuery to be able to sort the list, but when I refresh it doesn't keep the order I wanted. I have tried everything and not sure what to do at this point.

This is my code to change order of list, but I am not sure what I can change in order to keep order in place after I refresh. Any input or help would great, I am lost now.

I am using CSS, Bootstrap, HTML and Javascript and also a jQuery UI method to make the list sortable.

Was told to include HTML, so here it is:

<!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">
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-9JN7dRCn+bMPb/8p+eT6kE/bn0sU6NnQ6Z39C9rvV7d0P+YcYavBv1tK/M1CrDtgw0z0MkklvZep9XVNMp/dFw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">

  <title>Browser Search</title>

</head>
<body>
  <!--  Dark/Light Mode Button -->
  <div class="container-fluid ">
    <div class="row justify-content-end">
      <div class="col-lg-1  mt-3">
        <button id="mode-toggle" type="button" class="btn btn-dark">Dark/Light Mode</button>
      </div>
    </div>
  </div>

  <!--  Website Title -->
  <h1>Browser Sort</h1>
  
  <!-- Input Bar -->
  <div class="form-outline col-md-4 mx-auto">
    <label class="form-label" for="typeURL">Add Favorite Websites</label>
    <input type="url" id="typeURL" class="form-control" placeholder="URL input" />

    <!-- Add Button -->
    <button type="button" class="btn btn-primary mt-3" onclick="addFavorite()">Add</button>

    <!-- Our Favorite List -->
    <div class="container border rounded-3 mt-3">
      <ul id="favoriteList" class="list-group list-group-flush"></ul>
    </div>
  </div>

  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>


// Allows user to change order of list
$(function () {
  $("#favoriteList").sortable({
    stop: function () {
      // get the order of the list items and save it to local storage
      const listItems = Array.from($("#favoriteList").children());
      const order = listItems.map(item => item.id);
      localStorage.setItem("favoriteOrder", JSON.stringify(order));
    },
  });

  // load the order of the list items from local storage
  const order = JSON.parse(localStorage.getItem("favoriteOrder"));
  if (order) {
    for (const itemId of order) {
      const item = $(`#${itemId}`);
      if (item.length) {
        item.appendTo($("#favoriteList"));
      }
    }
  }
});

These are my functions for setFavorites && getFavorites:

// Function to save favorite websites to localStorage
function setFavoritesOrder(order) {
  localStorage.setItem("favoriteOrder", JSON.stringify(order));
}

// Function to retrieve favorite websites from localStorage
function getFavorites() {
  const favorites = JSON.parse(localStorage.getItem("favorites")) || [];
  const order = JSON.parse(localStorage.getItem("favoriteOrder")) || [];
  const sortedFavorites = [];

  for (const itemId of order) {
    const favorite = favorites.find(fav => fav.id === itemId);
    if (favorite) {
      sortedFavorites.push(favorite);
    }
  }

  // Add any items that were not included in the saved order
  for (const favorite of favorites) {
    if (!sortedFavorites.includes(favorite)) {
      sortedFavorites.push(favorite);
    }
  }

  return sortedFavorites;
}
ashton8504
  • 47
  • 5
  • 1
    This is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. – David Apr 27 '23 at 14:21

0 Answers0