Q8-prayertimes NPM

Kuwait Prayer Times

Kuwait Prayer Times based on AlAdhan API services

Amiri font used for Arabic text

Getting Started

Include our JavaScript before the closing body

<script src="https://q8p.io/js"></script>

Include our CSS in your project

<link rel="stylesheet" href="https://q8p.io/css">

Or by using Node.js

npm i q8-prayertimes

<script src="./node_modules/q8-prayertimes/dist/all.min.js"></script>

<link rel="stylesheet" href="./node_modules/q8-prayertimes/dist/all.min.css">

Create a div element with an id of q8prayers in your project

<div id="q8prayers"></div>

You can add more than one element in a single page

Options

Languages
- data-lang="en" Display prayer times in English (default)
- data-lang="ar" Display prayer times in Arabic
Date Types:
- data-date="gregorian" Display date in Gregorian format (default)
- data-date="hijri" Display date in Hijri format
Themes:
- data-theme="light" Display prayer times in ligh mode (default)
- data-theme="dark" Display prayer times in dark mode
- data-theme="black" Display prayer times in all black mode
- data-theme="white" Display prayer times in all white mode
Table Sizes:
- data-size="sm" Display table in small size
- data-size="md" Display table in medium size (default)
- data-size="lg" Display table in large size
- data-size="xl" Display table in xlarge size

Starter Template

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Q8 Prayer Times CSS -->
    <link rel="stylesheet" href="https://q8p.io/css">

    <title>Q8 Prayer Times Starter Template</title>
  </head>
  <body>
    <!-- Q8 Prayer Times Element -->
    <div id="q8prayers" data-lang="ar"></div>

    <!-- Q8 Prayer Times JavaScript -->
    <script src="https://q8p.io/js"></script>
  </body>
</html>

Hint

Add the following styling to center prayer times table in a <div> element

#q8prayers table{
  margin-right: auto;
  margin-left: auto;
}

@everything-registry/sub-chunk-2500 @infinitebrahmanuniverse/nolb-q8

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago