Mac OS X Style Launchpad In JavaScript

Preview:

Description:

launchpad.js is a small JavaScript library for creating a macOS like launchpad to quickly launch apps on the web page.

How to use it:

Import the ‘launchpad.js’ into the html file.

<script src="launchpad.js"></script>

Set the app you want to display the launchpad.

launchpad.setData([
  {
      group: 'Entertainment',
      apps: [
          {
              icon:"1.png",
              link: "#",
              label: "Photos"
          },
          {
              icon:"2.png",
              link: "#",
              label: "Numbers"
          },
      ]
  },
  {
      group: 'Work',
      apps: [
          {
              icon:"3.png",
              link: "#",
              label: "Numbers"
          },
          {
              icon:"4.png",
              link: "#",
              label: "Keynote"
          },
      ]
  },
  {
      icon:"5.png",
      link: "#",
      label: "Numbers"
  },
  {
      icon:"6.png",
      link: "#",
      label: "Keynote"
  }
]);

Create a placeholder element for the launchpad.

<div id="canvas-holder"></div>

Toggle the launchpad. Done.

launchpad.toggle();