Anime Recommendations - MAL

Get new anime recommendations based on your list.

Install this script?
Author's suggested script

You may also like White Background - MAL.

Install this script
// ==UserScript==
// @name         Anime Recommendations - MAL
// @namespace
// @version      9
// @description  Get new anime recommendations based on your list.
// @author       hacker09
// @include      /https:\/\/myanimelist\.net\/profile\/[^\/]+(\/)?$/
// @icon,SIZE,URL&url=
// @run-at       document-end
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(async function() {
  'use strict';
  const $ = jQuery; //Defines That The Symbol $ Is A jQuery
  var css = 'overflow: hidden;'; //Suppose the user has chosen to see 20 or less recs

  if (GM_getValue('RecsAmount') === undefined) { //If the variable doesn't exist yet define the variables
    GM_setValue('RecsAmount', '20'); //Set the user choice as 20 by default
    GM_setValue('Genre', ''); //Set the user choice as nothing by default
  } //Finishes the if condition

  if (GM_getValue('RecsAmount').match(/2[1-9]|[3-9]\d|100/) !== null) //If the user chose to see more than 20 recs
  { //Starts the if condition
    css = 'overflow-y: hidden; height: 130px;'; //Change the css
  } //Finishes the if condition

  document.querySelector("#statistics").insertAdjacentHTML('AfterEnd', `<h5 id="recs" style="cursor: pointer;"></h5><div class="fav-slide-block mb12"><div class="btn-fav-slide-side left" id="recsArrows" style="display: none; left: 0px; opacity: 1;"><span class="btn-inner"></span></div><div class="btn-fav-slide-side right" id="recsArrows" style="display: none; right: 0px; opacity: 1;"><span class="btn-inner"></span></div><div class="fav-slide-outer" style="${css}"><ul class="fav-slide" data-slide="10" style="width: max-content;" id="anime_recs"></ul></div></div>`); //Add the base html

  var ErrorCheck = ''; //Create a new variable
  if (document.querySelector(".updates.anime > p") !== null) //If the user has a private list
  { //Starts the if condition
    ErrorCheck = `Anime Recommendations (Error! ${location.href.split('/')[4]} has a private anime list!)`; //User list is private
    document.querySelector("#recs").innerText = ErrorCheck; //Show the private list error message
    return false; //Stop the script
  } //Finishes the if condition

  const response = await fetch('' + location.href.split('/')[4] + '?k=' + GM_getValue('RecsAmount') + GM_getValue('Genre')); //Fetch
  const json = await response.json(); //Gets the fetch response1

  if (response.status !== 200) //If the API is being rated
  { //Starts the if condition
    ErrorCheck = 'Anime Recommendations (Error! Too many requests!)'; //User list is not private
    document.querySelector("#recs").innerText = ErrorCheck; //Show the private list error message
    return false; //Stop the script
  } //Finishes the if condition

  json.recommendations.forEach(function(el) { //Foreach recommendation
    var year = ''; //Suppose the year is always = null
    if (el.release_year !== null) { //If the year is not null
      year = '·' + el.release_year; //Make the variable year hold the year for the recommendation entry
    } //Finishes the if condition

    document.querySelector("#anime_recs").insertAdjacentHTML('Beforeend', `<li class="btn-fav" title="${el.title}"><a href="${el.mal}" class="link bg-center"><span class="title fs10">${el.title}</span><span class="users" style="left: 41px;top: 15px;">${el.affinity.toString().split('0.')[1] + '%'}</span><span class="users">${el.format.toUpperCase()}${year}</span><img src="${el.cover_url}" width="70" height="110" class="image lazyloaded" alt="${el.title}"></a></li>`); //Show all recs
  }); //Finishes adding all recommendations html to the page

  document.querySelector("#recs").innerText = `Anime Recommendations (${document.querySelectorAll("#anime_recs > li").length})`; //Show the amount of recs shown

  document.querySelector("#recs").onclick = function() {
    const AmountInput = prompt('Enter a number between 1-100 of recommendations to be shown'); //Gets the user input
    const GenreInput = prompt('Write one of the following genres: action, adventure, comedy, drama, ecchi, fantasy, hentai, horror, mahou_shoujo, mecha, music, mistery, psychological, romance, sci-fi, slice_of_life, sports, supernatural, thriller\n\n*Press enter to disable Genre filtering.'); //Gets the user input
    GM_setValue("RecsAmount", AmountInput); //Defines the variable AmountInput
    GM_setValue("Genre", GenreInput); //Defines the variable GenreInput

    if (GenreInput !== '') //If the variable GenreInput isn't blank
    { //Starts the if condition
      GM_setValue("Genre", '&genre=' + GenreInput); //Defines the variable as '?genre=' + GenreInput
    } //Finishes the if condition

    location.reload(); //Reloads the page
  }; //Finishes the onclick event listener

  if (GM_getValue('RecsAmount').match(/1[1-9]|20/) !== null || GM_getValue('RecsAmount').match(/\d+/) === null) //If the user chose to see less than 21 recs and not more than 10 recs
  { //Starts the if condition

    document.querySelector("div.fav-slide-block.mb12").onmouseover = function() { //When the row is hovered
      document.querySelectorAll("#recsArrows").forEach(el => = '') //Show the arrows
    }; //Finishes the onmouseover event listener

    document.querySelector("div.fav-slide-block.mb12").onmouseout = function() { //When the mouse leaves the row
      document.querySelectorAll("#recsArrows").forEach(el => = 'none'); //Hide the arrows
    }; //Finishes the onmouseout event listener

    document.querySelectorAll("#recsArrows").forEach(function(el) { //Foreach arrow
      var LeftOrRight = ''; //Suppose the right arrow is clicked
      if (el.className.match('left') !== null) { //If the left arrow is clicked
        LeftOrRight = '-'; //Decrease the number
      } //Finishes the if condition

      el.onclick = function() //If the recommendation row arrows are clicked
      { //Starts the onclick event listener
          scrollLeft: LeftOrRight + document.querySelectorAll("#anime_recs > li").length * 80
        }, 1000); //Go right depending on the amount of recs added to the page
      }; //Finishes the onclick event listener
    }); //Finishes the foreach loop
  } //Finishes the if condition