Find instant Zen with this one-click browser hack

In today’s world, where we are constantly bombarded with news and social media, it can be challenging to find moments of peace and inspiration. That’s where a ZenQuotes bookmarklet can come in handy.

By creating a bookmarklet that fetches a random entry from ZenQuotes, you can instantly access a moment of peace and tranquility directly in your web browser.

Not only is this a great way to get motivated, but it’s also an opportunity to learn some valuable coding skills. After following the steps in this tutorial, you will know how to make API requests, handle JSON data, and display data in an alert box using JavaScript.

Step 1: Create a new bookmark in your web browser

To get started, create a new bookmark in your web browser. Open the bookmarks manager by pressing Ctrl+Shift+O in Chrome or Ctrl+Shift+B in Firefox. Then, select Add new bookmark from the menu options.

Step 2: Name the bookmark

You will be prompted to enter a name for the bookmark. Try using a call to action like “Inspire Me” or “Get Motivated”. You can create various types of bookmarks using a variety of API commands. See the full documentation for more information on how to customize your data.

Step 3: Enter the JavaScript code

Next, you will need to specify what the new link will do when clicked. In the bookmark URL field, enter the following JavaScript code:

javascript:(function() {
  fetch('https://zenquotes.io/api/random/YOUR_KEY')
    .then(response => response.json())
    .then(data => {
      alert(data[0].q + "\n\n- " + data[0].a);
    })
    .catch(error => {
      console.error(error);
      alert('Failed to fetch Zen quote.');
    });
})();

Here, replace YOUR_KEY with your actual API key. The API key is necessary to unlock advanced features and allow request origin headers from your local machine. Without it, the script will return an error. You can get an API key by signing up for an account at my.zenquotes.io

Step 4: Save the bookmark

Pick somewhere to keep the link handy. It’s recommended you place the link on your Bookmarks Bar for quick and easy access anytime you need to be inspired. Save the bookmark and close the editor.

Step 5: Click the bookmark

Now when you click on the bookmark, it will execute the JavaScript code and fetch a random entry from the ZenQuotes API. The quote will be displayed in an alert box along with the name of the author without affecting anything you are currently working on in the browser.

That’s it! You now have a ZenQuotes powered bookmarklet that can bring you moments of inspiration at the click of a button.

Discover your inner peace

Here are some practical ways to use the bookmarklet:

  • Start your day with some words that can inspire and motivate you to get going.
  • Use the quotes as prompts for self-reflection and personal growth. Take a moment to ponder the meaning of the quote and how it can be applied in your life.
  • Share the quotes on your social media platforms to spread positivity and inspiration to your friends and followers.
  • Stuck on a Task? Use the quotes as a source of inspiration for your work or business.

Breaking down the code

Let’s take a closer look at what’s happening in the JavaScript code.

First, we need to define the link as a JavaScript bookmarklet function. This will tell the web browser to execute our code:

javascript:(function() { /* Code goes here */ })();

The code itself is written in JavaScript and is enclosed in a self-invoking function, also known as an Immediately Invoked Function Expression (IIFE). The IIFE helps to isolate the code from the global scope and prevent any naming conflicts with other JavaScript libraries that might be used on the web page.

The javascript: at the beginning of the code tells the browser that this is a JavaScript code snippet and that it should be executed as such.

Next, we are making an API request to the ZenQuotes API using the fetch() method in JavaScript. This method takes the URL of the API as its argument and returns a Promise that resolves to the response from the API inside of the main function.

fetch('https://zenquotes.io/api/random/YOUR_KEY')

We are then using the .json() method on the response to convert the response data to JSON format:

.then(response => response.json())

Now we can use the data to display the quote text and author name in an alert box using the standard alert() method in JavaScript.

.then(data => {
  alert(data[0].q + "\n\n- " + data[0].a);
})

If there is an error in fetching the Zen quote from the API, we are using the .catch() method to handle the error and display a message to the user:

.catch(error => {
  console.error(error);
  alert('Failed to fetch Zen quote.');
});

Related Posts

Subscribe