Show Quotes on New Tab

legobuilder26

I would love a JS mod that can add a random text string to the speed dial every day. I want to have inspirational quotes on my speed dial. I can compile the quotes I would like. I want it to refresh every hour.

nomadic

@legobuilder26 Do you have a quote service that you already use? Because if they have an API, then the project should be pretty easy.

If you can compile a list of quotes, a JSON file with all the information you want to display (like the quote, author, and/or year) would be easiest to work with. Otherwise, a spreadsheet or CSV file would also work.

Example JSON format

[
  {
    "quote": "Formatted like this.",
    "author": "nomadic",
    "year": "2021"
  },
  {
    "quote": "Yeah, like that. Now where did I leave my hoverboard?",
    "author": "future nomadic",
    "year": "2022"
  },
  ...
]

I did a search and found this API, but I don't think you would be able to get a new quote every hour without an API key which isn't free. The best you could do for free is 8 quotes a day with 1 from each of these categories:

    "categories": {
      "inspire": "Inspiring Quote of the day",
      "management": "Management Quote of the day",
      "sports": "Sports Quote of the day",
      "life": "Quote of the day about life",
      "funny": "Funny Quote of the day",
      "love": "Quote of the day about Love",
      "art": "Art quote of the day ",
      "students": "Quote of the day for students"
    }

But it does work:

luetage

@legobuilder26 If you’re on Linux or macOS, you could run a shell command through Javascript and execute a fortune, which would need to be installed on your system. That’s a neat idea actually.

legobuilder26

@nomadic Thank you! It would be fine for me to just use the daily quotes from that API. I also have a list that I can work on turning into a JSON file. Sorry for the late reply.

@luetage Windows 11

nomadic

@legobuilder26 Alright, I can try working on that after I finish a project for @stardepp.

In the meantime, could you make a rough mockup of how you want it to look? Stuff like location on the start page relative to navigation and speed dials and the location of information you want to display like the actual quote and the author.

It doesn't need to be fancy. A crude sketch in MS Paint or a photo of a hasty drawing on a napkin would be fine.

legobuilder26

@nomadic Something like this?

luetage

@legobuilder26 said in Show Quotes on New Tab:

@luetage Windows 11

I looked into it anyway because I was curious a few days ago, but it isn’t as simple as I thought. Executing a terminal command from the browser and displaying the result requires certain permissions I don’t know how to set from the UI. Would be easier as an extension, but then you can’t display it on the existing startpage.

Garudadev

@nomadic Is there any progress on in it

nomadic

@garudadev None yet. I did finish the project I was working on, but I am now trying to get a portfolio website done before I start with my new job search.

This mod is next on my list to work on, so I will see if I can find some time to get it done soon. It shouldn't take too long to make, so I will try to work on it after I finish my goal for progress on my website today.

nomadic

Well, the API seems to be down right now...

Will try again tomorrow, but might be worth looking for another API if this one is not reliable.

Response from the server:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>503 Service Unavailable</title>
</head><body>
<h1>Service Unavailable</h1>
<p>The server is temporarily unable to service your
request due to maintenance downtime or capacity
problems. Please try again later.</p>
</body></html>

Edit: This one might be a good option: https://premium.zenquotes.io/zenquotes-documentation/

Might even be able to have the option for a new quote each time you open the startpage since it has the option to send out 50 quotes at once. Could store that list and pop one off each time.

nomadic

Think I have a workable version of the mod now. Made a separate post with the code because I always have trouble finding mods that aren't the first post of a thread.

Show Quotes on the Startpage

vivekkrishna

hello i am actually building a website that displays a random quotes from zen quotes api , but i am failing in doing so due to errors like cors , can u help with this

nomadic

@vivekkrishna Is your website a static site or does it have a backend?

CORS errors would suggest you are calling the API client side. I am far from an expert in the mystical networking world, but I know that API calls in server side code should probably help avoid the CORS problem. My mod isn't associated with a domain, so it is similar to code you would run on the backend.

Also, if you are running the API call on the client side, then you won't be able to make as good a usage of the caching scheme that ZenQuotes requests you use. With a client side call, each new visitor to the site would have to make a new API call, but with the API call in the backend, you could cache 50 quotes with a single API call and then serve those out for the next 50 visits to your site.

You can look at my mod to see how I handle the caching. I leave a bit of a buffer, instead of using up the 50 quotes completely, incase the API goes offline momentarily.

If you are trying to stick to a static site with no backend, then I am probably not the person to help you. CORS has caused me a few headaches in the past, and couldn't figure it out back then.

vivekkrishna

i think mine is a static site, but please help me in fetching quote from zenquotes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Quotes from ZenQuotes</title>
</head>
<body>
  <h1>Random Quotes from ZenQuotes</h1>

 

  <div id="quote-container"></div>

  
    <script type="text/javascript">

const api_url ="https://zenquotes.io/api/quotes/";

(async function() {
  const api_url = "https://zenquotes.io/api/quotes/";

  async function getapi(url) {
    const response = await fetch(url, { mode: "no-cors" });
    var data = await response.json();
    console.log(data);
  }

  await getapi(api_url);
})();
</script>
  </script>
</body>
</html>

here is my code and i am getting an error

vivekkrishna

@nomadic i have some how got rid of cors error as i used the mode no cors in fetch call

nomadic

@vivekkrishna Yeah, that is a static site.

Think ZenQuotes would need to have a specific configuration on their servers to allow CORS. If they don't have it set up that way, then the mismatch with your domain and https://zenquotes.io would trigger the CORS error.

Edit: Just saw your new reply. Is the site deployed? I think if you run the site locally it might bypass the CORS issue (been awhile since I messed with it, so not sure if true). You then get a nice surprise when you publish the site and it doesn't work anymore.

Would think ZenQuotes would have there servers configured to allow this, but maybe they want to force you to run the call in the backend for caching purposes.

vivekkrishna

@nomadic no it is deployed .plz can u please give me code that builds a web page and uses backend to display quotes from zenquotes on the web page or atleast guide me

nomadic

@vivekkrishna Best I can do is point you to the documentation. Here is a PHP example: https://docs.zenquotes.io/code-example-cache-api-data-to-local-txt-file-with-php/

As for taking the quote data and displaying it, you can look at my mod's code: https://forum.vivaldi.net/post/559461

I don't have much experience with publishing websites with a full backend. I only manage a few static sites through Netlify. For a group project in college, we set up a Flask website (which uses Python), but I wasn't responsible for the server setup. I just had to complain to my group mate a few times when I got Nginx errors .

There are many guides out there that would do a better job explaining it than me.

vivekkrishna

i will deploy my website using netlify but i am not really understanding ur mod, like it has a lot to do and breaking it down is hard

vivekkrishna

your mod is specifically for a web browser i guess. but i just have to show some quotes on my index page thats all or atleast say how should i correct this error index1.html:25 Uncaught (in promise) SyntaxError: Unexpected end of input (at index1.html:25:31)
at getapi (index1.html:25:31)
at async index1.html:29:3 and here is the code :

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Quotes from ZenQuotes</title>
</head>
<body>
  <h1>Random Quotes from ZenQuotes</h1>

 

  <div id="quote-container"></div>

  
    <script type="text/javascript">

const api_url ="https://zenquotes.io/api/quotes/";

(async function() {
  const api_url = "https://zenquotes.io/api/quotes/";

  async function getapi(url) {
    const response = await fetch(url, { mode: "no-cors" });
    var data = await response.json();
    console.log(data);
  }

  await getapi(api_url);
})();

  </script>
</body>
</html>```